Style Classic vBulletin 3 skin --- development log

[Adam Howard]

This will clean up the spacing in the sidebar

.sidebar .section {
margin: 5px;
}

 

[MagnusB]

Don't ask me why.... I don't understand it either..... But more than often simply doing a color change without !important does not guarantee a color change. So I've just gotten into the habit now to do it "as is" (with the important command). Rather than having to keep double checking my work

It's a bad habit, it becomes a nightmare when you intend to do changes. If you intend to make this only for your self, it doesn't matter, if you intend to release it, you should make it friendly for changes and also make use of style properties rather than extra.

 

[Adam Howard]

It's a bad habit, it becomes a nightmare when you intend to do changes. If you intend to make this only for your self, it doesn't matter, if you intend to release it, you should make it friendly for changes and also make use of style properties rather than extra.

Sure....

Please correct XenForo's styling properties.

Seriously, you change 1 thing in there and like 5 or 10 things change with it.

I also find the properties hard to understand because it will clearly say X property does Y, but it end up having nothing to do with Y.

I spent forever trying to learn vBulletin's and I could never remember it all... I started spending forever trying to learn XenForo's... I no longer care to try. Extra.css works just fine.

Until there is a clear, easy, and free way to follow the properties ....

 

[James]

XF's style properties system was intended for basic use. The style property changes a lot of other properties so that simple usage (such as the slider) mean it retains the same style framework.

It's a pain in the ass if you want to modify things to be different, but then again so is any forum software!

 

[Adam Howard]

The text coloring in the side bar.

I broke it down for people who may want to change things a little more

.sidebar .section .primaryContent h3, .sidebar .section .secondaryContent h3, .profilePage .mast .section.infoBlock h3 {
color: black !important;
}

.sidebar .section .secondaryContent .footnote, .sidebar .section .secondaryContent .minorHeading {
color: black !important;
}

.sidebar .section .primaryContent h3 a, .sidebar .section .secondaryContent h3 a {
color: black !important;
}

 

[Digital Doctor]

I figure it would be worth logging my development step by step as I generate a skin.

Now don't be too saucy.

 

[Adam Howard]

XF's style properties system was intended for basic use. The style property changes a lot of other properties so that simple usage (such as the slider) mean it retains the same style framework.

It's a pain in the ass if you want to modify things to be different, but then again so is any forum software!

.... ie.... global settings

And not always properly labeled global setting either.... ie... X has nothing to do with Y and is on a completely different part of the site, let along page, and yet.....

But let's just agree to disagree.

I use the properties normally last to clean up a few lose ends. Extra.css is where most of everything is resolved.

 

[Adam Howard]

Coloring for the section footer (or in general relationship with that nice little menu that allows you to change the order of the thread display)

.sectionFooter {
background-color: #767F9E !important;
}

 

[Adam Howard]

Coloring for all the footer and the text down there

(I kept it bold. I didn't want to enlarge the text, but also wanted it easier to read)

.footer a, .footer a:visited {
color: black !important;
font-weight: bold;
}

.footer .pageContent {
background-color: #D9DAE6 !important;
}

#copyright {
text-align: left !important;
color: black !important;
font-weight: bold;
}

#copyright a {
text-align: left !important;
color: black !important;
font-weight: bold;
}

#legal a {
color: black !important;
font-weight: bold;
}

 

[Adam Howard]

The text coloring in the side bar.

I broke it down for people who may want to change things a little more

.sidebar .section .secondaryContent .footnote, .sidebar .section .secondaryContent .minorHeading {
color: black !important;
}

Changed the coloring to thus

#576288

 

[Adam Howard]

Site detail text coloring in the side bar

.pairs dt, .pairsInline dt, .pairsRows dt, .pairsColumns dt, .pairsJustified dt {
color: #576288 !important
}

user title coloring in the sidebar

.sidebar .avatarList .userTitle {
color: #576288 !important
}

 

[Adam Howard]

Changing more gray text

body .muted, body a.muted, body .muted a {
color: #576288 !important
}

 

[Adam Howard]

It corrected the overlay on the header on the quick navigation

.heading, .xenForm .formHeader {
background-color: #767F9E !important;
color: white !important;
}

 

[Adam Howard]

Coloring for all the footer and the text down there

(I kept it bold. I didn't want to enlarge the text, but also wanted it easier to read)

#copyright a {
text-align: left !important;
color: black !important;
font-weight: bold;
}
 
#legal a {
color: black !important;
font-weight: bold;
}

Changed from black to white. Better display (visually).

 

[Adam Howard]

Text coloring on sub forum (node) menus.

.subForumsPopup .dt {
color: #576288 !important;
}

 

[Adam Howard]

Say cheese !

Cheese!

(Only an early beta (?). So much more I need to do to this.)

 

[Adam Howard]

 

[Adam Howard]

The text coloring in the side bar.

I broke it down for people who may want to change things a little more

.sidebar .section .primaryContent h3, .sidebar .section .secondaryContent h3, .profilePage .mast .section.infoBlock h3 {
color: black !important;
}

.sidebar .section .secondaryContent .footnote, .sidebar .section .secondaryContent .minorHeading {
color: black !important;
}

.sidebar .section .primaryContent h3 a, .sidebar .section .secondaryContent h3 a {
color: black !important;
}

Revisited this and change a little coloring for the text and the sidebar header coloring.

.sidebar .section .primaryContent h3, .sidebar .section .secondaryContent h3, .profilePage .mast .section.infoBlock h3 {
background-color: #757E9D !important;
color: white !important;
}

.sidebar .section .primaryContent h3 a, .sidebar .section .secondaryContent h3 a {
color: white !important;
}

 

[Adam Howard]

section header for thread list headers or discussion list header, whichever you prefer to call them (I simply say threads)

.discussionList .sectionHeaders {
color: white !important;
background-color: #767f9e !important;
border-top: 0px !important;
border-bottom: 0px !important;
}
 
.discussionList .sectionHeaders a {
color: white !important;
background-color: #767f9e !important;
}

Removed these 2 lines

border-top: 0px !important;
border-bottom: 0px !important;

Was originally going to do it border less, but as someone pointed out.... There are a few add-ons which depend on that spacing. So for compatibility they need to be there.

 

[Adam Howard]

Coloring for the member list

.memberListItem {
background-color: #D9DAE6 !important;
}