Missing the missing styling manual....

[key]

THERE IS A POLL ATTACHED TO THIS POST. PLEASE CONSIDER PARTICIPATING.

After spending a ton of time reading through the Style guide (http://xenforo.com/help/style-properties/) as I work to style out my xenforo forum, I found a lot of things missing. It's not just the guide that's missing, but actual elements to the rather dis-organized Style Properties tool.

For example, I'd like to change the navigation text color for unselected tabs. Should be very straight forward, right. So I look here:

Style Properties > Header and Navigation > Navigation Tabs Container > Text > Color

But that's not it. So then I look here:

Style Properties > Header and Navigation > Navigation Tab > Text > Color

Nope. Not there either. That's REALLY strange. What's even stranger is that I can use this section to change the background color of the unselected tabs. And I can even change the font size, font family, and add line-through, underline, and overline. But I CAN'T change the font color.

So.... where to change it?

Well, if I go to Style Properties > Color Pallete I can work through the pallet changing colors one by one until I find the right one. Which one is it? @primaryLighter

Then, using CFodder's XF Color Palette document (which can be found here), I look up that property and see that if I change it, I'll be changing:

• Admin Bar text unselected colour.
• Navbar tabs unselected text colour.
• Forumdisplay/page border colour.
• Breacrumbs border colour.
• Sub forum display border colour.
• Avatar border colour.
• Post Reply button unselected background colour.
• Footer text colour.
• Sidebar border colour.
• Call to action button border colour.
• 'Page End' line colour.
• Profile tabs selected border colour.
• Post visitor message button background colour.
• Profile tabs mouseover background colour.
• Account settings save button unselected background.

That makes little to no sense. Why this random assortment all tied to this one property?

But more importantly (for this particular example) where would I change the text color for unselected tabs?

Turns out the only place is navigation.css:

/* ---------------------------------------- */
    /* unselected tab, popup closed */
 
    .navTabs .navTab.PopupClosed .navLink
    {
        color: @primaryLighter;
    }

Um..... what? why? It makes little sense that I have to randomly edit the stylesheet (or better, make the change in the extra.css stylesheet) for some elements, when others I set via the Style Properties. The missing Style Properties are random too. A lot of stuff is in them, but every now and then there are missing settings.

Look, I get and like the object oriented nature of XenForo. But the styling is a major problem area that has not had enough attention paid to it.

The settings you can set through Style Properties sometimes seem random and not all that well thought out. They are poorly organized.

If it were up to me, I'd design a "Style Selector" page that shows your actual site and is clickable. So, if I want to edit the navigation text color for unselected tabs, I'd click on that part of the page and the properties for that element would pop up. Or at least would open a new window at the right Style Properties page - well, if that particular element actually had a Style Properties page.

I'm seeing more and more sites using XenForo, which is great! But so many of the sites look the same, which isn't. Implementing a really usable styling tool would change that, and would - I believe - see the number of sites using XenForo grow dramatically.

 

[CyberAP]

So it's been around for a long time, and they've never bothered to fix it. Maybe they could at least mention it in their their detailed Style Properties help section.... http://xenforo.com/help/style-properties/

What's the primary button background problem?

It's hard coded in CSS, instead of just one style property.

 

[MagnusB]

Then, using CFodder's XF Color Palette document (which can be found here), I look up that property and see that if I change it, I'll be changing:

• Admin Bar text unselected colour.
• Navbar tabs unselected text colour.
• Forumdisplay/page border colour.
• Breacrumbs border colour.
• Sub forum display border colour.
• Avatar border colour.
• Post Reply button unselected background colour.
• Footer text colour.
• Sidebar border colour.
• Call to action button border colour.
• 'Page End' line colour.
• Profile tabs selected border colour.
• Post visitor message button background colour.
• Profile tabs mouseover background colour.
• Account settings save button unselected background.

That makes little to no sense. Why this random assortment all tied to this one property?

Those are all the properties using that color. The idea is that the colorscheme are easily changed, however that means more items are depending on a single color. This is how it should work ideally

But more importantly (for this particular example) where would I change the text color for unselected tabs?

Turns out the only place is navigation.css:

/* ---------------------------------------- */
    /* unselected tab, popup closed */
 
    .navTabs .navTab.PopupClosed .navLink
    {
        color: @primaryLighter;
    }

My guess that that is an oversight, they have added an additional css rule there for some reason, it should be grouped in with a style property, probably at navLink. My guess that was placed there as a way to debug a problem or something, and it sorta got stuck there. It seems they have differentiated between the li and the a tag in the CSS, as to why this is, I have no idea. Me personally would have contracted that to use the a tag strictly for styling, but there might have been some issues with that.

Um..... what? why? It makes little sense that I have to randomly edit the stylesheet (or better, make the change in the extra.css stylesheet) for some elements, when others I set via the Style Properties. The missing Style Properties are random too. A lot of stuff is in them, but every now and then there are missing settings.

That is nothing different than any other forum solution I have used. In fact, due to xF relying so much on css3 rather than than images makes it very easy to style. There are probably areas where it could be approved, but they are much cleaner than what I have seen other places.

If it were up to me, I'd design a "Style Selector" page that shows your actual site and is clickable. So, if I want to edit the navigation text color for unselected tabs, I'd click on that part of the page and the properties for that element would pop up. Or at least would open a new window at the right Style Properties page - well, if that particular element actually had a Style Properties page.

Use ColorizeIT then: http://www.colorizeit.com/browse/25/xenforo-styles.html

To me, working the the html and css in xF is quite fun, most of it is pretty neatly defined and I have found very few "double entries" so far.

 

[key]

I have done the same test and it functions exactly as Shelley describes. BUT and it's a big BUT we need to look at the popup description from SP.

NavigationTab controls each individual navigation tab link

SelectedTab styles the currently selected header navigation tab

My text goes [red] when I hover. Guess what? That's a LINK.
When I select the tab, the text changes back to the color set by SelectedTab.

The LINK only becomes a LINK on hover PRIOR to being clicked.
So effectively it works as designed.

Remember that the designers are British and don't use the English language quite the same way as the rest of the world.
I think this is a case of trying to understand what they're trying to tell you. (Or maybe what I'm trying to tell you. LOL)

My point is that the descriptions can mean different things to different people.

I do see that it changes the color on hover for a menu that has a drop down after it drops down. But what about hovering over other Tabs? And why can you change all text elements except the color when not hovering? And why doesn't the color change when you hover before the dropdown? If I'm on the Forms page and hover over Members, the color does not change to red, unless I hover over the drop down arrow. None of this makes any sense. If it was by design, it is BAD design.

Furthermore, it is not true that "The LINK only becomes a LINK on hover PRIOR to being clicked." A link is always a link, whether or not it is being hovered over. Hover is another state for the link, and should have it's own Style Property for setting the hover state.

When I change properties on Navigation Tab, it changes some text properties for the tab and some properties for the text on tab on hover, but does not change ALL of the properties for either of those. Here's exactly what "Navigation Tab" changes:

So it changes most elements (except color) in the non-hover state, and some elements in hover-state, and others in the hover-dropdown-state. WHAT A MESS....

Because hover and (apparently) hover after dropdown are a totally different states that can have their own settings, they need to have their own Style Properties, not half-way piggy back on top of the non-hover state in such a random fashion.

Compare this to "Selected Tab Sub-Link" which is described as "Styles each link in the row of controls below the selected navigation tab". Change the text color there to ff0000 and the color (in a non-hover state) changes to red for all the links in the sub menu. Nothing happens to the text in hover state. To do that, they have "Selected Tab Link, Hover State". Change the color here and the color changes for on hover. (They should really rename both of these to: "Sub-Menu Tab" and "Sub-Menu Tab Hover State" respectively, so they more accurately reflect what they do.)

So, for the Sub-Menu, they have two separate Style Properties, one for non-hover and one for hover. GREAT! This is good design. This is how it should be for the main menu too. The "Navigation Tab" should set only non-hover settings (and include setting the color) and there should be a "Navigation Tab Hover State" Style Property for setting the hover state.

Their Style Properties system is broken.

Finally, here's a video I just recorded showing me actually going through and making the changes:

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

 

[key]

Use ColorizeIT then: http://www.colorizeit.com/browse/25/xenforo-styles.html

I'll have to take a look at that to see what it's about. Never seen it before.

 

[Neil E.]

Finally, here's a video I just recorded showing me actually going through and making the changes:

There was no sound. I thought I would learn some new curse words. I'm certainly no expert on forum software. I think most of the people on this forum have struggled with the item naming. I know many newcomers just change something to a hideous color and then look all over the place to find out what changed (which is not very productive).

Many new users ask for a color map to make finding things easier. I don't think you will gain much by using ColorizeIT.

 

[key]

There was no sound. I thought I would learn some new curse words. I'm certainly no expert on forum software. I think most of the people on this forum have struggled with the item naming. I know many newcomers just change something to a hideous color and then look all over the place to find out what changed (which is not very productive).

Many new users ask for a color map to make finding things easier. I don't think you will gain much by using ColorizeIT.

Well, by the time I decided to document the problem with the video, I had worked all the curses out of me....

 

[Neil E.]

All my css or 99% resides in extra (custom). It's just like the color palette, it's something I won't use because it's more for global changes than specific changes that i personally like to make.

I think this is the most important statement in the entire thread. At first XF looks like it is easily customized because of the color palette and styling properties. The fact that these are primarily global adjustments is what makes everything so confusing. As soon as you want to tweak some individual areas you'll wind up back at EXTRA.css to do the detail work. To use EXTRA efficiently you have be good at finding items and their related templates.

 

[CyberAP]

If we move all css into style properties it'll become a mess, so it should be balanced (and now it is implemented really nice in XenForo). But of course it needs some tweaking, because style properties should contain all elements that community change most, and it's confusing begginers. It actually took plenty of time for me to understand how to change difficult elements that are not in the style properties.

 

[Neil E.]

I've spent most of the day fighting with styling properties and EXTRA. I can't find a balance between them and I've spent days trying to sort this out. My understanding is that EXTRA is supposed to be the final word on changes. I have found MANY instances where EXTRA won't override SP. I'm beginning to think that I need to revert all SP content and start over using only EXTRA. A month ago it looked like EXTRA would be so gigantic that it made sense to try and put as much as possible in SP.

It seems logical to adjust things with SP first, then tweak the details with EXTRA. Note that every time someone posts help with a template change, they give an example with the code placed in EXTRA. In reality this is easier than saying "go to all these places in SP and make the following changes". Even though I've figured out enough of the naming to locate items in SP, using SP only makes sense if the properties apply to a single item with NO global consequences.

The XenForo Styling Properties and Color Palette are aimed at making life easier, but actually wind up making the whole process more complicated. I'm a good example of a true beginner. I know what I want for functionality and I have a layout in mind. My goal is to rearrange the basic XF forum and not go wild with fancy features. For me, a forum is more about sharing information than entertaining users.

I see what Shelley has done and I'm amazed at the graphics. I see how Chris finds things quickly and knows what code to change. I see a simple thing like Gabby's heart shape for the alert indicator and wish I had that creativity. It really shouldn't be so difficult to tweak forum software. I don't expect to be an expert. I just need to make adjustments. The only thing that has worked well for me has been the TMS. I'll keep trying to make more progress with XF.

@ Shelley, if you copied your EXTRA into Notepad++, how many lines would it have?

 

[Shelley]

I've spent most of the day fighting with styling properties and EXTRA. I can't find a balance between them and I've spent days trying to sort this out. My understanding is that EXTRA is supposed to be the final word on changes. I have found MANY instances where EXTRA won't override SP. I'm beginning to think that I need to revert all SP content and start over using only EXTRA. A month ago it looked like EXTRA would be so gigantic that it made sense to try and put as much as possible in SP.

It seems logical to adjust things with SP first, then tweak the details with EXTRA. Note that every time someone posts help with a template change, they give an example with the code placed in EXTRA. In reality this is easier than saying "go to all these places in SP and make the following changes". Even though I've figured out enough of the naming to locate items in SP, using SP only makes sense if the properties apply to a single item with NO global consequences.

The XenForo Styling Properties and Color Palette are aimed at making life easier, but actually wind up making the whole process more complicated. I'm a good example of a true beginner. I know what I want for functionality and I have a layout in mind. My goal is to rearrange the basic XF forum and not go wild with fancy features. For me, a forum is more about sharing information than entertaining users.

I see what Shelley has done and I'm amazed at the graphics. I see how Chris finds things quickly and knows what code to change. I see a simple thing like Gabby's heart shape for the alert indicator and wish I had that creativity. It really shouldn't be so difficult to tweak forum software. I don't expect to be an expert. I just need to make adjustments. The only thing that has worked well for me has been the TMS. I'll keep trying to make more progress with XF.

@ Shelley, if you copied your EXTRA into Notepad++, how many lines would it have?

BBSmiley Green style extra css template - 2544 lines in extra (although looking at that i could cut that down dramatically) plus it has all the custom notifications I did amongst other add-on alterations I did.
nature calls style extra css template - 2431 lines

 

[Neil E.]

Gag. I would be scrolling for hours. Do you make it alphabetical or what?

 

[Shelley]

Gag. I would be scrolling for hours. Do you make it alphabetical or what?

Nope I just create a markup for specific areas (example below is the membercard) but I know most of the elements like the back of my hand since I'm modified practically every area repeatedly.

If i have to locate a specific property i just do a ctrl + f input the property class/name in the search box and it highlights if changes are needed.

/*MEMBERCARD ENHANCEMENTS*/
 
.xenOverlay.memberCard {
        font-family: helvetica;
        width: 600px !important;
        height: 320px !important;
}
.xenOverlay.memberCard .avatarCropper {
        background-color: transparent !important;
        border: 0px solid #181818 !important;
        top: 87px !important;
        left: 60px !important;
        height: 96px;
        width: 96px;
}
 
.xenOverlay.memberCard .avatar img {
        background-color: transparent !important;
        border-width: 4px 4px 15px 4px;
        border-color: #f6f7f7;
        border-style: solid;
        height: 96px;
        width: 96px;
        top: 0px !important;
        left: 0px !important;
}
 
.xenOverlay.memberCard .userInfo {
        top: 60px !important;
        right: 45px !important;
        width: 320px !important;
        height: 190px !important;
        margin: 0 auto;
}
 
.xenOverlay.memberCard .userLinks {
        background: url("@imagePath/xenforo/overlay/membercard-spacer.png") no-repeat bottom !important;
        border-bottom: 0px dashed #5b8071!important;
        padding-bottom: 5px !important;
}
 
.xenOverlay.memberCard .userLinks a {
        color: #ede2d3!important;
}
 
.xenOverlay.memberCard .lastActivity {
        background: url("@imagePath/xenforo/overlay/membercard-spacer1.png") no-repeat top!important;
        border-top: 0px dashed #5b8071!important;
        margin-bottom: 5px !important;
}
 
.xenOverlay.memberCard a.close {
        background-image: url("@imagePath/xenforo/overlay/mclose.png") !important;
        right: 577px !important;
        top: 25px !important;
        width: 15px !important;
        height: 15px !important;
}
 
.xenOverlay.memberCard .userInfo h3 a {
        color: #EFE0CA  !important;
        font-size: 18px !important;
}
 
.xenOverlay.memberCard .username {
 
}
 
.xenOverlay.memberCard .userInfo h4 {
        color: #D4CCC2 !important;
}
 
.xenOverlay.memberCard .userInfo .status {
        color: #efe0ca !important;
}
 
.xenOverlay.memberCard .pairsInline dt  {
        color: #d4ccc2 !important;
}
 
.xenOverlay.memberCard .userStats dd  {
        color: #554f47 !important;
}
 
.xenOverlay.memberCard .userInfo .userStats .dark_postrating_neutral {
        color: #ffffff !important;
}
 
.xenOverlay.memberCard .lastActivity {
        color: #f7fce5!important;
}
 
.xenOverlay.memberCard .lastActivity .DateTime  {
        color: #D4CCC2 !important;
}
 
.xenOverlay.memberCard .muted {
        color: #D4CCC2  !important;
}
 
/*MEMBERCARD ENHANCEMENTS*/

 

[Neil E.]

That's very good. Ctrl+F to the rescue.

Have you ever had EXTRA fail to update? This has happened to me numerous times on small tweaks like your last code color: #D4CCC !important; I'll edit EXTRA to make only the color change, but the change does not "take". I've got the same thing happening right now with newMessageIndicator using SP. It took the first color change I made then ignored all the successive tries. It's this behaviour that drives me crazy.

If anyone can explain why this occurs I'd be eternally grateful:
http://xenforo.com/community/threads/missing-the-missing-styling-manual.35692/#post-406568

 

[key]

My understanding is that EXTRA is supposed to be the final word on changes. I have found MANY instances where EXTRA won't override SP.

I found some of that too. In those cases, I end up having to hunt down exactly where in SP to make the change. Adds another layer of frustration.

If we move all css into style properties it'll become a mess, so it should be balanced (and now it is implemented really nice in XenForo). But of course it needs some tweaking, because style properties should contain all elements that community change most, and it's confusing begginers. It actually took plenty of time for me to understand how to change difficult elements that are not in the style properties.

I definitely understand the reasoning, but I do think that if someone did more QA on the SPs, they would find a number of inconsistencies. The stuff I indicated in post #23 of this thread is a great example.

The three SPs for the menu tabs are missing one important SP:

Navigation Tab
Navigation Tab, Hover State
Selected Tab Sub-Link
Selected Tab Link, Hover State

But it isn't just the missing hover state SP. The naming on the SPs isn't consistent. On the one hand there is "Selected Tab Sub-Link" but then for the hover state Sub-Link becomes plain old Link.
But the settings aren't for the Selected Tab Link Hover state. They're for the Selected Tab Sub-Link Hover State. In fact "Sub-Link" is a bit confusing, since you don't describe the main navigation tabs as links.

A much clearer way of naming them might be:

Navigation Tab
Navigation Tab, Hover State
Navigation Sub-Tab
Navigation Sub-Tab, Hover State

 

[CyberAP]

The structure is: Navigation tab -> Tab Link, Sub-Links.
Sub-links are not tabs. And this is the confusing part.

 

[Forsaken]

BBSmiley Green style extra css template - 2544 lines in extra (although looking at that i could cut that down dramatically) plus it has all the custom notifications I did amongst other add-on alterations I did.
nature calls style extra css template - 2431 lines

Thats about how many Imperial had before I moved it to the framework.

I think theres a whole ~40 items at most in our custom .css template .

 

[key]

The structure is: Navigation tab -> Tab Link, Sub-Links.
Sub-links are not tabs. And this is the confusing part.

Yeah, it is confusing, since SP seems to funcion a different way. If the Navigation Tab SP were broken into 2 states (as the Sub-Links are) then it wouldn't be as messy as it is. Although I do think the naming scheme I mentioned above might be clearer.

-------------------------------------------------

Totally separate from this, is the whole Color Palette naming issue. From a user interface design perspective..... the properties should not subjective names.

It is true that the names work well for the default color scheme. They are easy to work with when creating a new style.

But they start to break down when you start changing colors. Change more than one or two (or oh man... invert them) and it can become a total mind f....

That is really confusing when you later go in and tweak SPs.

Compare those subjective names derived from the original style's colors, with neutral, non-subjective names:

These two statements are very easy to accept. Doesn't matter that one color is lighter or darker than another because the property names are arbitrary:

• @primary_8 is lighter than @primary_5
• @primary_8 is darker than @primary_2

But here are the same two statements for the above color palette, with the original property names:

• @primaryLightest is lighter than @primaryLight
• @primaryLightest is darker than @primaryDark

What? Up is down, black is white, night is day....

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

It strikes me that the Style system was created to help people make a quick set of global changes to the color scheme, and then refine using Style Properties. It's a really great idea but someone forgot to consider that @primaryLightest might end up being darker than @primaryDark. By naming everything in the palette based on the initial color scheme, developing new schemes is made much more confusing.

If the original scheme had been named like this:

then building the original style would have been just as easy as using subjective names. But the same can't be said for developing new styles based on the original style's subjective names.

I've actually spent a lot of time thinking about how you could make Xenforo just that much more useable and easier to develop with. I'm not a fan of complaining without offering suggestions for how things might be done better. Xenforo is still new to me, so I still have a relatively fresh eye on how it works and where it doesn't.

I know that over time I'll get used to dealing with all of the quirks and challenges. That'll be good for me and my ability to develop on the platform.

At the same time, it's bad for the platform when new users become more experienced, because they loose the ability to offer fresh perspectives that experienced users have a hard time seeing. The close you get, the harder to see the problems.

It's why so many companies focus group products - to get a fresh perspective.

So I hope all of this helps in some way.

Cheers!

By the way, you can see my recently launched forum here: http://timelapse.org And FYI, I used Junior's conversion of Arras as a base.

 

[Edpal]

<snip>They work, they just haven't been added to the style properties. <snip>.....not all, everything is included in the style properties to the point that it allows for every element to be adjusted. It's just that in some cases it's not been added and in your case that is the case.

Despite some of the hassle, I am slightly GLAD not all of the styling properties are in the SP, that would be a terrible mess. It's like I just bought a new digital piano (Yamaha MX49) - it has a ton of internal settings that can't be accessed through the on-board menu system, you have you connect it to a computer to access those settings. They chose wisely what to bury away - probably saved a few buttons and several cascading layers of menus that would be egregious to wade through for the casual user. I think this [non] issue defines the concept of "nothing complex is simple.

I personally think there is too much reliance on Extra.css when tweaking the properties of the individual element could be done in the primary css for it. Inspect element is a perfectly fine way to do 99.5% of this. . .

I'm thinking big part of problem is you have a wide variety of people attempting to set up sites. And some are expecting a "Weebly" like experience but with 10X the bells, whistles and tweaks available. News flash: forum software is a fairly small piece of the overall software market. There's only a handful that can make a "pretty" forum even close to out-of-the-box, Xenforo is one of them.

Tip: if you're doing a lot of tweaking invest in a dual-monitor setup. I'm using a dual monitor setup so if I adjust an element in Inspect I see it on the fly on my other screen.

 

[Edpal]

Yeah, it is confusing, since SP seems to funcion a different way. If the Navigation Tab SP were broken into 2 states (as the Sub-Links are) then it wouldn't be as messy as it is. Although I do think the naming scheme I mentioned above might be clearer.

-------------------------------------------------

Totally separate from this, is the whole Color Palette naming issue. From a user interface design perspective..... the properties should not subjective names.

But they start to break down when you start changing colors. Change more than one or two (or oh man... invert them) and it can become a total mind f....

That is really confusing when you later go in and tweak SPs.

These two statements are very easy to accept. Doesn't matter that one color is lighter or darker than another because the property names are arbitrary:

• @primary_8 is lighter than @primary_5
• @primary_8 is darker than @primary_2

But here are the same two statements for the above color palette, with the original property names:

• @primaryLightest is lighter than @primaryLight
• @primaryLightest is darker than @primaryDark

What? Up is down, black is white, night is day....

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

It strikes me that the Style system was created to help people make a quick set of global changes to the color scheme, and then refine using Style Properties. It's a really great idea but someone forgot to consider that @primaryLightest might end up being darker than @primaryDark. By naming everything in the palette based on the initial color scheme, developing new schemes is made much more confusing.

If the original scheme had been named like this:

then building the original style would have been just as easy as using subjective names. But the same can't be said for developing new styles based on the original style's subjective names.

It's why so many companies focus group products - to get a fresh perspective.

We ARE a focus group. If you mean a paid one,uh, no, I don't want to pay MORE for this software. WIll the focus group be neewb, novices, pros?

Any place, in any CSS where you have color: @primaryDarker; you can switch that out for any of these formats. color: red; color: #00ff00; color: rgb(0,0,255); Any place you have them in SP as the color you can remove them and select a color. It doesn't seem to be understood very well - SP is a limited function CSS editor.