XenForo 2.x Styling Guide(s)

Quintillus

Archiving Civ3 Content
Moderator
Supporter
Joined
Mar 17, 2007
Messages
7,534
Location
Ohio
As has been mentioned in the post-upgrade feedback threads, we'd like to add a few more styles to the forum, to provide some variety like we had back in the vBulletin days. Thunderfall and The_J have created the current themes, The_J has started work on a dark theme, and I've started work on a Christmas theme. But we'd also like to see what the community can come up with, as was done many years ago for a Civ V theme.

Although the overall plans are still being finalized, for now I'd like to share what we have in terms of styling guides, so those of you who are itching to get started can start experimenting and learning how XenForo 2.x themes work.

The first site you'll need to know about to create styles is the XenForo demo page. This lets you create your own demo forum, where you'll have complete administrator access and can update the styles to your heart's content. It lasts for one week, after which you'll have to create a fresh demo, but you can download your styles to your computer and re-upload them at your next demo forum.

Next is the official XenForo styling guide. While worth a read, I'll admit that I was not the most impressed with it. It does a good job of covering the concepts of styling, but not such a good job of telling you "if I want to update this part of my site, where do I go to update it?"

I started documenting that last week before the upgrade, and while there is a lot there and I have too many side projects to have finished it by now, in the next post I'll share what I have so far. It is very much focused on that question about "if I want to update X, what do I need to change?"

-----

Stay tuned for more news on community themes in the coming weeks! We look forward to seeing what you all can come up with!
 

Quintillus

Archiving Civ3 Content
Moderator
Supporter
Joined
Mar 17, 2007
Messages
7,534
Location
Ohio
Welcome to my style guide! Hopefully this will be of use for our style creators. I should note that there is a LOT of content to cover for XenForo styling, so if anyone else wants to document a section or two, please help yourselves! For now, this is a visual guide of where the "Basic colors" are used.

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

XenForo has an official style guide, but it mostly focuses on the concepts of cascading and inheritance, as well as some information on XenForo templates (which this guide will not cover). If you are already familiar with the "Cascading" part of Cascading Style Sheets (CSS), a lot of it will be information you already know conceptually. What the official guide doesn't tell you is the practical, hands-on "if I want to change this, what do I change"?

That is the intended goal of this guide, with a focus on colors.

XenForo uses style templates rather than plain CSS, organized into a couple dozen categories. Your first port of call should be the "Color Palette" category. This defines basic colors that are used in many other categories. There are five primary colors, three accents, and three neutrals. Here I'll define where they are used, in XenForo terms. I'll also include screenshots showing their effect in magenta (although I haven't yet done this for the first few).

Primary 1:
Basic Colors -> Highlighted Content Background Color
Used for background of hovered menu items, default Staff badge, forum list headers (e.g. Colosseum), the bar across the top of a forum that says "Filters" in XenForo 2
Basic Colors -> Default button text color
Used for "New Posts" button text on forum listing, "Post an Update" button text on resources. Not actually used on a ton of buttons!
Basic Colors -> Text Input Box Background Color [mixed with "xf-contentBg"
Used as the background of the text box where you write posts and resource updates, including the title box

Primary 2:
Basic Colors -> Highlight Border Color
Used as border for staff badge, and around the text boxes where you write post titles and posts

Basic Colors -> Page Chrome Text Color
Spoiler :

Used for text of moderator/admin bar, non-selected main tabs ("Forums", "Media", "Members", etc.), username, messages icon, search, and most of the footer (except the copyright notice). Not used for text within the main tab dropdowns.


Basic Colors -> Block tab header text color
Have not figured out where this is used

Primary 3:
Basic Colors -> Feature Text Color
Spoiler :

Used for certain headers in secondary parts of the site, e.g. "Overview" and "Share This" label for resources, section headings for "What's New", "Most messages" header and "Find Member" for "Members". I'm not really sure why semi-random areas get this color.






Basic Colors -> Feature Border Color
Spoiler :

Used for underlining some of the same things as above (but not all), a highlight on the left side of the "Notable Members" area.





Basic Colors -> Primary Button Background Color
Spoiler :

Used for "Post Reply" button when viewing a thread. *Not* used for other buttons such as "Post Thread" where you might expect it.





Primary 4:
Basic Colors -> Link Color
Also known as @xf-linkColor, which is referred to elsewhere
Spoiler :

Used for most links that aren't considered "Feature" ones (see Primary 3), including links within posts. This is a big one!










Basic Colors -> Emphasized Text Color
Spoiler :

Used for forum category text color (e.g. Colosseum), "Members" header in that section, and (darkened) for the formatting icons when composing a post.







Basic Colors -> Block Tab Header Text Color
Have not yet figured out where this is used
Basic Colors -> Default button background color
Spoiler :

Used for "New Posts" button background on forum listing, "Post an Update" button background on resources. Not actually used on a ton of buttons!





Primary 5:
Basic Colors -> Link Hover Color
Also known as @xf-linkHoverColor, which is referred to elsewhere
Spoiler :

Used for hover text over menu and sub-menu links





Basic Colors -> Page Chrome Background Color
Spoiler :

Used as the header/footer/inactive top-level menu background



Accent 1:
Basic Colors -> Accented content background color
Spoiler :

Used for background of site-level alerts


Basic Colors -> Inline moderation highlight color [mixed with xf-contentBg]
Have not figured out where this is used
Basic Colors -> AccentContentBorderColor [mixed with Accent 2]
Have not figured out where this is used

Accent 2:
Basic Colors -> Call-to-action button background
Basic Colors -> Attention-grabbing text color
Basic Colors -> Accent content border color [mixed with accent 1]
Basic Colors -> Attention-grabbing border color

Accent 3:
Basic Colors -> Accented content text color
Spoiler :

Used as the text for site alerts.




Neutral 1:
Basic Colors -> Content background color
This is an important one, it is also known as @xf-contentBg, which means it is used almost everywhere
Spoiler :



Basic Colors -> Border Color [darkened]
This is an important one, it is also known as @xf-borderColor, which means it is used almost everywhere
Spoiler :




Neutral 2:
Basic Colors -> Muted Text Color
This is also known as @xf-textColorMuted, which is referred to elsewhere.
Spoiler :

Used in a lot of places that I'd generally call "labels", e.g. "Threads" and "Messages" on forum listings, date of post on thread






Neutral 3:
Basic Colors -> Text Color
This is also known as @xf-textColor, which is referred to elsewhere
Spoiler :
This is the default text color in many areas, including the content of posts








Spoiler Future Sections :


xf-contentBg:
TODO: Describe where it's used

TODO: Link from each color to where it's used in Header and Navigation, descibe what those do
TODO: Footer
TODO: Content areas, describe what each one is
TODO: A whole bunch of other sections
 

Aiken_Drumn

Ascended
Joined
Oct 16, 2021
Messages
2,367
Can you please make the Christmas style as garish as possible, and enforce it for the week of Christmas. Too many Scrooges around here need to learn to enjoy life a bit more!
 

Buster's Uncle

AC2 Co-Owner
Joined
Apr 13, 2009
Messages
1,377
...I've got a bunch of images -mostly buttons, borders, and bits of interface- cut out from Civs 2, 4, and 6, that I've used in creating themes - if anyone's interested, I'll be glad to share...

The links under following three are to boards where they should default.
1659297251807.png



CivQuatroTheme.png



thumbnail.gif


-And finally...
thumbnail.png

If you crave the old vB CFC Modern, I've got buttons and can tell you the color codes...
 

Valka D'Ur

Hosting Iron Pen in A&E
Retired Moderator
Joined
Mar 3, 2005
Messages
27,966
Location
Red Deer, Alberta, Canada
@Valka D'Ur have you made any progress on this?
Not yet. July is one of the 3 times/year when NaNoWriMo/Camp NaNoWriMo runs a month-long writing competition. I'll be done with that by midnight tonight, and then I can start thinking about other things besides my ongoing very long story project.
 

The_J

Say No 2 Net Validations
Administrator
Supporter
Joined
Oct 22, 2008
Messages
37,869
Location
DE/NL/FR
...I've got a bunch of images -mostly buttons, borders, and bits of interface- cut out from Civs 2, 4, and 6, that I've used in creating themes - if anyone's interested, I'll be glad to share...

The links under following three are to boards where they should default.
View attachment 635658


View attachment 635664


View attachment 635665

-And finally...
View attachment 635666
If you crave the old vB CFC Modern, I've got buttons and can tell you the color codes...

If someone took up the challenge to recreate your styles for Xenforo v2, then we'd be more than happy to integrate them :). Thanks for the offer :).
(for the old vb CFC modern I might still give it a try myself, but I'm really time restricted :/ ).
 

Buster's Uncle

AC2 Co-Owner
Joined
Apr 13, 2009
Messages
1,377
Well - anyone is certainly welcome to try to duplicate my designs, but I'd be surprised if the different software will allow better than similar. I put up the screenies more to show what sort of thing is possible. Probably.

I was told, about 12 years ago now, that the vB themes interface was a cursed thing that made strong men weep and then go insane - and 40+ themes later (really) in both vB and SMF, I'd say it wasn't as bad as all that, but definitely wasn't a lie. Themes controls never seem to label what does what very clearly at all, which is frustrating when you have something in particular in mind.

-So a lot of the trick of learning a themes interface is, go in there with a general idea and a second tab open of the forum, and just try things -refresh the forum tab, adjust or try something else, repeat. I spent more time cutting elements out of Civ 4 screenshots -and tweaking the logo- than I did actually generating the Spanish Apolyton 4 theme pictured up there.


Incidentally, the theme defaulting in that subforum doesn't work w/o being set to override user choice, so you'll have to log in to have a look at the thread level and so on. There's an easy theme select bottom left corner, a lot like here - at AC2, it's bottom right, there's thumbnails, and you don't have to log in.


I think snazzy themes/skins/styles -whatever- do a lot to jazz a place up. I really do hope some people will roll up their sleeves and dive right in - I'm one of those who misses old vB CFC Modern...
 

Valka D'Ur

Hosting Iron Pen in A&E
Retired Moderator
Joined
Mar 3, 2005
Messages
27,966
Location
Red Deer, Alberta, Canada
Yeah... it is definitely not easy, and sometimes does bring you close to madness, I agree.
I'm recovering my creative sanity right now after a month of NaNoWriMo, but I do have some ideas I would like to try. I had a collection of snazzy Invision forum themes - which I realize will not work here, but I still have screenshots of what they're supposed to look like and it might be possible to flange up something that resembles them.

One thing I loved about the IF support forum is that they had an extremely detailed tutorial on how to do skinning - every part and element of the forum was labeled, and there were veteran people there willing to answer questions.

I can only surmise that with XenForo it will be more like toss stuff into the mix and see if it works.
 

Valka D'Ur

Hosting Iron Pen in A&E
Retired Moderator
Joined
Mar 3, 2005
Messages
27,966
Location
Red Deer, Alberta, Canada
Yeah... a bit. Some things are pretty clear if you look at the interface, but others are just mysterious.
I tried never to mess around with the default spacing. I know that we all have different kinds of computers and monitors, and some browsers play nicely and others don't. There are some ProBoard themes I can't use at all, since they were designed for people with gigantic monitors, and if I try to shrink them, the text becomes microscopic.

Icons and buttons were always fun. Here's one I used on one forum:

cheezland-forum-button-new-topic-penguin-skip-1.gif


These are the "New Posts" and "No New Posts" icons I used on my Doctor Who forum:

4docgrin.gif


e41985.gif
 
Top Bottom