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.

 

[Jake Bunce]

Simple overview for making styles:

http://xenforo.com/community/threads/how-to-design-a-custom-theme.34844/#post-395759

Navbar colors:

http://xenforo.com/community/threads/change-the-color.8749/#post-120671

Video guide for debugging CSS to make specific changes:

http://xenforo.com/community/threads/how-to-change-almost-anything-quickly-and-easily.33239/

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.

Agree with this.

 

[Chris D]

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.

I couldn't disagree with you more.

Styling is not a major problem area and many people with varying levels of skill have produced fantastic designs.

The Style Property system works, and works well especially for people with a low level of skill. So there's some style properties missing? Oh well, not really a need to rewrite the entire system.

Report it as a bug in the bug reports forum or make a suggestion in the suggestion forum.

Or, even better, just ask!

There are loads of people here who could have told you, incredibly quickly that the process you went through is unnecessary.

I for one would have told you to do it like this:

• Use a browser such as Chrome or Firefox.
• Right click an unselected tab and click "Inspect Element":

• I would now go to Admin CP > Appearance > Search Templates and search for this text: .navTabs .navTab.PopupClosed .navLink
• Only result returned is navigation.css
• I can straight away tell there is no style property for it - no problem.
• EXTRA.css:

.navTabs .navTab.PopupClosed .navLink
{
color: red;​
}

Job done.
Style Properties are there to make your life easier, and on the whole they do. They're not there to do the job for you, but there's loads of tips and tricks to be had.
Don't ever assume that you're on your own or this process that is taking ages is the only way. There's often things to learn and ask questions here - we'll be happy to answer.

 

[key]

Jake, thanks for the video link.

Chris, thanks for the reply.

I actually use the Inspect Element quite a lot. The problem is that using it doesn't help you to identify where in the Style Properties tool to make the change. So it's easy to find the particular style that needs changing, but where to change (via the tool) remains unknown.

EXTRA.css identifies both the solution AND the problem. Why even have the Style Properties tool if you're just going to make all the changes via EXTRA.css and be done with it, right? (Doesn't even matter that the tool doesn't actually work on some of the settings you do end up finding in the tool, if you're going to change everything via EXTRA.css.)

Making changes to a stylesheet is the classic, old-school way of doing it. It's great. I love it. It's how I've done things for a long time. But because all the CSS in XenForo is actually stored in the database and not in .css files, I can't even edit the CSS directly. I have to go through the web interface, which just adds another layer of ugh!

So yeah, I've completely abandoned the Style Properties tool. It's such a shame though, because it's one of the things that first attracted me to XenForo. Too bad it doesn't work reliably. And too bad they don't actually document it. They could fix it, but will they?

 

[Chris D]

Jake, thanks for the video link.

Chris, thanks for the reply.

I actually use the Inspect Element quite a lot. The problem is that using it doesn't help you to identify where in the Style Properties tool to make the change. So it's easy to find the particular style that needs changing, but where to change (via the tool) remains unknown.

Yes, it does help you to identify where in the Style Properties tool to make the change.

Once you've identified which .css template the CSS is contained in (by using the Search Templates function) you will see code such as this:

.message .messageText,
.message .signature
{
@property "messageText";​
font-size: 11pt;​
font-family: Georgia, "Times New Roman", Times, serif;​
line-height: 1.4;​
@property "/messageText";​
}

This tells me instantly that there is a style property called messageText.

This can be searched for in the Admin CP search where the Style Property will be one of the results.
[/quote]

EXTRA.css identifies both the solution AND the problem. Why even have the Style Properties tool if you're just going to make all the changes via EXTRA.css and be done with it, right? (Doesn't even matter that the tool doesn't actually work on some of the settings you do end up finding in the tool, if you're going to change everything via EXTRA.css.)

There's no problem with EXTRA.css. It's an option which many prefer to use over the Style Properties tool just as many people prefer the ease of Style Properties. Overall, I think the two methods complement each other really well.

Making changes to a stylesheet is the classic, old-school way of doing it. It's great. I love it. It's how I've done things for a long time. But because all the CSS in XenForo is actually stored in the database and not in .css files, I can't even edit the CSS directly. I have to go through the web interface, which just adds another layer of ugh!

You can edit the CSS directly. XenForo supports a WebDAV interface. With Debug Mode on, you can set up a WebDAV connection with an appropriate client which allows you to access HTML and CSS templates directly as if they were on the file system. It's not fantastic, but it's ok. Naatan and Robbo are working on a fantastic development tool which does allow this and it's hosted on GitHub in case you wanted to try the experimental version. Either way, you can edit the CSS directly.

So yeah, I've completely abandoned the Style Properties tool. It's such a shame though, because it's one of the things that first attracted me to XenForo. Too bad it doesn't work reliably. And too bad they don't actually document it. They could fix it, but will they?

Don't abandon it. It does work reliably and it doesn't necessarily need fixing. Sure, you've found one element that can't be edited directly with Style Properties and there's probably many more, but on that basis it's a shame to abandon it completely when there's plenty of style properties that do work.

 

[key]

Chris,

Again, thanks for the reply. I wasn't aware of using Admin CP search before I started this thread. It definitely helps to know how to search Style Properties, although it's a bit confusing to have the Template Search and Style Property search in 2 different locations.

I still content that there are far too many steps to change an element via SP, a tool designed expressly to make changing elements straight forward.

Compare this idea:

Go to "Style Selector" and click on the element you want to edit, and a popup opens with all settings for that element (for all states). Change an element to see a live preview (like Firebug) and you're done.​

To this reality:

1. Inspect page using Firebug and find the right declaration. I'll use .navTabs in this example. (Must not forget that some declarations have different properties based on their state. For example, when a link gets focus it's hover property may be different.)

2. Use the Search Templates to search .navTabs and it returns navigation.css

3. Open that file and use the web browser's search to to search for .navTabs and find a property called navTabs

4. Do another search (this time using the Admin CP search tool) and find the Style Property that sets navTabs.

5. I select Navigation Tabs Container and make the change to the property. It takes (although some properties don't)​

​

To me, this is like hunting and pecking at a keyboard, slowly slogging your way through. You have to use three different search tools. It's slow, with too many steps, and could be greatly simplified.

Or circumvent all of that and copy and paste the declaration into EXTRA.css.

Cheers!

 

[Neil E.]

I agree with many of the points that key is making. For a new user it is extremely difficult to figure out an efficient method of working on XenForo. I have also struggled. One single method of doing all the customization would be great. I don't have enough experience to suggest what that single method should be.

With the help of this excellent support forum I get a little better every day. At first I messed around with style properties and then realized that I couldn't change the layout the way I wanted. So then I had to edit templates and the TMS has helped greatly (I have about 100 edits). I was hoping to put more in the TMS, but it doesn't handle @properties well. That brings us back to EXTRA.css for correcting the styling or handling custom classes. In order to try and not "bloat " EXTRA, I have used styling properties a great deal. I find that styling properties fall short because they are not granular enough.

When a styling property controls many classes together it takes a lot of time to decide how best to handle changes. Apply to all and correct a few elements OR apply to none and create new classes for a few elements? Quite the dilemma! I don't mean to criticize XenForo because I can see how massive an undertaking it is to create forum software. My biggest concern is the situation when an admin wants to "hand off" a forum to someone else. Explaining how to work with XF is a monumental challenge if the board is heavily customized.

If it wasn't for the caring people on this forum (Jake Bunce in particular), I would have told my club executive that XF was too big a black hole to undertake. Keep in mind that my perpective is that of a total newbie (I only worked on phpBB via basic ACP settings). I'm in this for the long haul since it's all good knowledge that I'm gaining. The time burden is staggering and that makes it difficult for newcomers.

 

[Shelley]

Jake, thanks for the video link.

Chris, thanks for the reply.

I actually use the Inspect Element quite a lot. The problem is that using it doesn't help you to identify where in the Style Properties tool to make the change. So it's easy to find the particular style that needs changing, but where to change (via the tool) remains unknown.

EXTRA.css identifies both the solution AND the problem. Why even have the Style Properties tool if you're just going to make all the changes via EXTRA.css and be done with it, right? (Doesn't even matter that the tool doesn't actually work on some of the settings you do end up finding in the tool, if you're going to change everything via EXTRA.css.)

Making changes to a stylesheet is the classic, old-school way of doing it. It's great. I love it. It's how I've done things for a long time. But because all the CSS in XenForo is actually stored in the database and not in .css files, I can't even edit the CSS directly. I have to go through the web interface, which just adds another layer of ugh!

So yeah, I've completely abandoned the Style Properties tool. It's such a shame though, because it's one of the things that first attracted me to XenForo. Too bad it doesn't work reliably. And too bad they don't actually document it. They could fix it, but will they?

It's not that it doesn't work reliably, it works as designed. It's that, for example some of the navbar elements are not supported or introduced in the style properties this may also apply for other specific areas you are wanting to style.

 

[key]

It's not that it doesn't work reliably, it works as designed. It's that, for example some of the navbar elements are not supported or introduced in the style properties this may also apply for other specific areas you are wanting to style.

To me, "some of the navbar elements are not supported or introduced in the style properties" is the definition of something not being reliable. If my doesn't always start, then I'm not going to rely on it. When it works, great. But I'm not taking a long trip in that car until it gets fixed. That's what styling has been like with SP. It's a long road trip with a vehicle that hasn't always worked. It can be incredibly frustrating.

 

[Shelley]

To me, "some of the navbar elements are not supported or introduced in the style properties" is the definition of something not being reliable. If my doesn't always start, then I'm not going to rely on it. When it works, great. But I'm not taking a long trip in that car until it gets fixed. That's what styling has been like with SP. It's a long road trip with a vehicle that hasn't always worked. It can be incredibly frustrating.

That kind of mindset is misguided. They work, they just haven't been added to the style properties. I'm not knocking you for it because i rarely use the style properties myself. I'm just explaining part of the reason that 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.

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.

 

[Neil E.]

This software is similar to all software ...... you learn to "work around" problems. It's never elegant doing a workaround, but what choice do you have? Complaining won't change things quickly. I'll bet most users understand your frustration. I wish I didn't have to fight with EXTRA.css so much, but "it is what it is". I consider my difficulties as being the result of my lack of experience.

 

[Shelley]

To me, "some of the navbar elements are not supported or introduced in the style properties" is the definition of something not being reliable. If my doesn't always start, then I'm not going to rely on it. When it works, great. But I'm not taking a long trip in that car until it gets fixed. That's what styling has been like with SP. It's a long road trip with a vehicle that hasn't always worked. It can be incredibly frustrating.

On that note when i first started out styling the navbar getting the hovers working with the dropdowns opened/closed and padding/margin issues and selected tabs on a custom sliced and designed navbar I was banging my head against the desk fighting with it. I'll be honest, if your new it'll be frustrating to the point your hurling abuse at your pooor (in my case samsung) monitor but once you find the elements and familiarize yourself you'll be handing everything with ease. I persevered for about a week cursing the hell out the navbar but now i've familiarized myself with it to the point I can create a navigation in an hour (design included) sliced. Tinker with it, persevere it'll all come to you I guarantee you that.

 

[key]

This software is similar to all software ...... you learn to "work around" problems. It's never elegant doing a workaround, but what choice do you have? Complaining won't change things quickly. I'll bet most users understand your frustration. I wish I didn't have to fight with EXTRA.css so much, but "it is what it is". I consider my difficulties as being the result of my lack of experience.

I agree 90% with what you wrote. But.... if we don't highlight and discuss problems, they won't get the attention needed to get fixed. I did proposed one possible approach that I hope the devs might consider. Complaining won't change things quickly, but there are things that DO need to change.

In the mean time, maybe this thread will help save others from some of the same headache. I spent too much time trying to use SP for everything. My advice for others is to go ahead and play around with SP. But don't follow Alice down the rabbit hole. If you can't make a particular change using SP, stop trying. Turn to the tired and true EXTRA.css. I spent too much time thinking I was doing something wrong with Style Properties.

My mistake is that I thought Style Properties work reliably.

It doesn't.

 

[Neil E.]

My mistake is that I thought Style Properties would work reliably. It doesn't.

Hey at least you made me laugh!

For me this would read: My mistake is that I thought EXTRA.css would work reliably. It doesn't.

I thought SP was not that great, but I get way more grief with EXTRA.

 

[key]

That kind of mindset is misguided. They work, they just haven't been added to the style properties.

How can you say they work if they haven't been added? If an element hasn't been added to the SP system, then you can't say the system works for all elements. For example, I wanted to add a border element to the bottom of the header. But after a lot of looking I found there is no setting via SP. This is so basic and it is missing. So I add #header {border-bottom: 3px solid #2a7bc3; } to EXTRA.css .

But this kind of missing setting isn't the biggest problem. The BIG problem is when a setting is available through SP, but it does not work.

An example, using the default theme that has had NO changes made to it (although note that Nodes-as-Tabs has been installed, hence the node as tab that says "Videos"):

Say I want red text for the tabs on my navigation bar.

I go to Style Properties > Header and Navigation > Navigation Tab and change the color for Text to ff0000 and click update.

I refresh my other browser page and the text color has not changed.

Do I have the wrong element? Before I look elsewhere, I decide to try an experiment. I'll change all of the other settings for the element and see what happens:

I click update, refresh and....

Everything but the color changes. What-the-hell?

So I can change everything except the one thing I want to change! So I turn to EXTRA.css and add:

Another update and refresh....

FINALLY!

Sorry, but Style Properties absolutely is broken. Whether it is elements that should be there but aren't (like adding a border to the header) or elements that are there but don't do anything (changing the color of the navigation text).....

That there is a work-around does not mean SP works. I means SP does not work.

Style Properties is broken and not reliable.

 

[Shelley]

How can you say they work if they haven't been added? If an element hasn't been added to the SP system, then you can't say the system works for all elements. For example, I wanted to add a border element to the bottom of the header. But after a lot of looking I found there is no setting via SP. This is so basic and it is missing. So I add #header {border-bottom: 3px solid #2a7bc3; } to EXTRA.css .

But this kind of missing setting isn't the biggest problem. The BIG problem is when a setting is available through SP, but it does not work.

An example, using the default theme that has had NO changes made to it (although note that Nodes-as-Tabs has been installed, hence the node as tab that says "Videos"):

Say I want red text for the tabs on my navigation bar.

I go to Style Properties > Header and Navigation > Navigation Tab and change the color for Text to ff0000 and click update.

I refresh my other browser page and the text color has not changed.

Do I have the wrong element? Before I look elsewhere, I decide to try an experiment. I'll change all of the other settings for the element and see what happens:

I click update, refresh and....

Everything but the color changes. What-the-hell?

So I can change everything except the one thing I want to change! So I turn to EXTRA.css and add:

Another update and refresh....

FINALLY!

Sorry, but Style Properties absolutely is broken. Whether it is elements that should be there but aren't (like adding a border to the header) or elements that are there but don't do anything (changing the color of the navigation text).....

That there is a work-around does not mean SP works. I means SP does not work.

Style Properties is broken and not reliable.

Good catch. I wonder if this has been reported. when you apply a text color it does apply though when you hover and the dropdown menu is opened. Eitherway, I'm not sure this is going to pass over by the devs as "as designed" but i would consider that to be broken. TBH I've not noticed that before because i seldom go into the SP. Jake is this a case of "as designed"?

 

[CyberAP]

I think anyone who ever created a style for xenforo knows about this problem. It is as frustrating as "primary button background" problem, which I reported way before this.

 

[Neil E.]

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.

 

[key]

I think anyone who ever created a style for xenforo knows about this problem. It is as frustrating as "primary button background" problem, which I reported way before this.

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?

 

[Neil E.]

Let's get another oddity out in the open. I've made an "opposite" layout because that's what my users are currently familiar with. Here is the code:

.message .messageInfo /* */
{
    margin-left: 10px !important;
    margin-right: 140px !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
}
/* ~removes primaryContent border and moves message to the left side~ */
 
 
.messageUserInfo /* */
{
    float: right !important;
}
/* ~moves userbit to the right side~ */

This works, however after doing some simple edits in EXTRA.css, it suddenly jumps back to the default layout. These simple edits are just color or border changes not in any way related to the classes shown in my code. GAAAH!!!! I can see EXTRA is being used because all my other changes remain intact. So how do I fix it? It take the code block and move it to the top (or bottom) of EXTRA from where it sits currently. It stays fixed again for a while until the next time it happens. I'd certainly call this behaviour unreliable!