Small Styling Issues

[Static-Xbox]

I'm not very good at explaining things like this, but essentially I'm in the middle of porting a vBulletin forum over to xF, but the owner wants the style to match the existing skin as much as possible. That's not much of a problem; however, I've run into a few...interesting issues. I've changed just about everything within the style, colour wise, but there are still bits of the xF default scheme showing through. Since I'm horrible at explaining things, here's a picture with some words on it...

Can anyone help with this?

Thanks in advance!

 

[Neil E.]

You need to use a program like Firebug to inspect the exact element that you want to change.
The ones I listed are not the exact ones you need, but will be similar. Change only one element at a time
and keep refreshing your page to see how the change takes place.

1) Tabs
You are looking for elements like this to style using EXTRA and you might have to break them out further.
Finding all the elements that make up the navtabs is extremely time consuming.

.navTabs .navTab.PopupOpen .navLink, .navTabs .navTab.PopupOpen .navLink:hover
{
background-color: #AFFFAB !important;
border-color: #000000 !important;
border-radius: 5px 5px 5px 5px !important;
border-style: solid !important;
border-width: 1px !important;
color: #000000 !important;
}


2) Lines
You are looking for elements like this to style using EXTRA:

.xenForm fieldset + .ctrlUnit, .xenForm .submitUnit
{
border-top: 1px solid #8B4513;
}


3) Button
You are looking for elements like this to style using EXTRA:

.submitUnit .button
{
background-color: #E1E1E1 !important;
}

.submitUnit .button.primary:active
{
background-color: #9999A3 !important;
}

 

[Static-Xbox]

Thanks for the help in narrowing this down! Is there a way to accomplish this without touching or searching through the templates? Thus far I've managed to avoid that by using the Property Groups under the Style Properties, which has worked well thus far, it's just these few minor issues that have crept in. Seems a bit strange that these are the only lingering issues when everything else is working just fine.

 

[Neil E.]

Styling Properties is generally a waste of time because it is "too global" and you don't know what things are affected by the changes. That being said if you want to really customize your board, you will spend many hours searching for all the various elements that need to be changed.

There is an empty template called "extra". It is designed to hold any altered CSS (which controls how elements look). There is no need to modify templates if you use extra. You put your custom CSS in extra and it is handled AFTER all other CSS. This way your changes have priority and you get the appearance you want. "EXTRA" does not get molested during an upgrade.

The other setup that is a huge help is TMS (template modification system). This addon is fabulous for altering templates WITHOUT changing the original template. I highly recommend it.

 

[Static-Xbox]

I've been sticking with the Style Properties because it's not a particularly elaborate style, and so far it's worked quite well. It was just strange that these issues popped up. I'll try adding onto EXTRA and see how that works out!