Styling questions

[Zynektic]

I'm trying to modify my test site and improve the theme a bit more from what we have based on some users feedback and was wondering if you can help with a few questions.

1. As attached, is it possible to move the breadcrumb so it sits flush against the the width of the forum rather than how it is now, a few of your themes use it as I want and how to fix the quicknav icon part, I copied the edits from my live site but it does not seem to fix that bit =\

2. As attached, I'm trying to get the font in the navigation and the category nodes to be a smoother font. I tried altering them from webfont_secondary to webfont_primary like the sub-navigation uses but it does not look right, any ideas on a clean smooth font?

3. On the category nodes, is it possible to add an image similar to the design in your portfolio page on this link as we want to have custom monster ones designed for each node but blend them into the set colour like the picture on that link.

Cheers!

 

[D.O.A.]

with your font, open sans does an okay job for a dark theme with small text. There's plenty of fonts there to try out though, roboto is okay too.
https://www.google.com/fonts#QuickUsePlace:quickUse/Family:Open+Sans

 

[Zynektic]

Cheers, shall give it a go - I was playing around with them but felt some were not quite as smooth.

 

[Zynektic]

It does not look quite as clean on sidebar headings though, any idea why?

 

[Steve]

You need to make sure you include the bold face and such from google fonts link.

 

[Zynektic]

Hm, I am pretty sure I applied bold and google font on sidebar headings and it mismatched the category one but will have another poke.

Also, do you know which setting colours the dark hover colour on the image? Cheers

 

[Russ]

Style Properties -> Popup Menus -> Menu Link Hover State should do the trick for you.

For the fonts, it looks like you're only loading basic Oswald(regular font weight 400).

You need to make sure you check which ones you want:

<link href='//fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>

 

[Russ]

For the breadcrumb, check Style Properties -> [XB] Header and Navigation the bottom Header Proxy Adjustment, is there any value there? If there is can you remove it? We used it to make adjustments for the sub-nav/nav but with the new settings of the latest update we don't use it anymore.

For the category images, you can do something like this:

.XenBase .nodeList .categoryStrip {
padding: 0;
}
.XenBase .categoryText {
background: url(@imagePath/xenforo/sources/catimagedefault.png) no-repeat right center transparent;
padding: 9px 10px;
}
.XenBase .node_3 .categoryText
{
background-image: url(@imagePath/xenforo/sources/cat3image.png);
}
.XenBase .node_6 .categoryText
{
background-image: url(@imagePath/xenforo/sources/cat6image.png);
}

Should do the trick. "catimagedefault" would show on any category that you don't specifically define an image for(.node_3 / node_6

 

[Zynektic]

Cheers Russ, redoing the dark/light style on our test site so will apply the changes there, thanks!

 

[Zynektic]

Do you know where about I can fix this text and also the alignment issue on the 'Last Message' part?

Also when I am in a thread, in the attached image I am in Introduce Yourself but cannot click any of the breadcrumb other than Home / Forums, the Summoners War Forum part is unclickable, it works on my live board but not test site so not sure if I have missed a setting?

 

[Zynektic]

Also if I set a 1190px Page Width and tick Wide Style will this be a solution so I do not need two different themes sizes and if so, is there anything I should do for responsive?

 

[Russ]

Did you clear that headerproxy adjustment value out? The clicking of the breadcrumb is probably happening because the header is trying to extend to far down. I'd need to see it though to be exact(with admin access).

For the last message issue: Style Properties -> Discussion List -> Last Message Column Width

Wide Style just extends the backgrounds of things but keeps the content at the set page width. You could use the toggle me addon on XenForo, i believe it has an option to let users extend the page width.

 

[Zynektic]

Did you clear that headerproxy adjustment value out? The clicking of the breadcrumb is probably happening because the header is trying to extend to far down. I'd need to see it though to be exact(with admin access).

This is cleared out but it was on my live site so I duplicated the settings across, it works on my live site so slightly confused.

Basically I've redone a lot on a development site and want to move that over to replace the live site so trying to get all fixes done. I can drop you an admin login for test board if you want to have a poke?

 

[Zynektic]

Wide Style just extends the backgrounds of things but keeps the content at the set page width. You could use the toggle me addon on XenForo, i believe it has an option to let users extend the page width.

Hmm, his other add-on has a width one but does not work with newer XF installs it seems.

 

[Zynektic]

Hey again,

Which setting modifies the title colour as circles, the thread tools colour and how do I edit the buttons colour as circled. I assume I can add a margin to the bottom of the buttons too?

 

[Zynektic]

Also the ones circled I assume is controlled by a single colour, do you know where to edit this also, the light grey colour.

 

[Zynektic]

I've been using the following on the white theme to modify the inbox hover on drop-down but where is the actual style property to alter this as I've just gone through a lot of them trying and cannot find it.

html .navPopup .PopupItemLinkActive:hover
{
    background-color: #FFF;
}

 

[Zynektic]

Update: I just need to fix the following now -

• Thread Tools hover colour (not sure where this setting is)
• Inbox dropdown hover colour (not sure where this setting is as tried lots without luck)

As attached is my current development board styles. I want to remove fusion gamer from my live forum completely and copy all the files over including the style edits. What is the best way to do this?

Install Xenbase > Install Fusion Gamer > Import Dark Grey - Grey > Import Light Grey - Grey as child of Dark Grey

When making my exports, do I tick 'Export as independent style' and select all since my edits are in the two styles mentioned above.

 

[Zynektic]

We are also going to unstretch the navigation, have a full sized background image and new logo with a few monsters around that at the top, with that being said. With css to center top the image etc so it stretches, what is a good sized background so it can accommodate all screen resolutions?

Our designer is making it from scratch so image size can be whatever but we have some users who use 27" monitors such as myself too so want it to fit our screens.