XenForo 2.x Styling Guide(s)

[Quintillus]

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?"

-----

Files for themes!

I've attached two themes to this post.

The first is the base-civ-vi-theme, as of mid-2022. This should be your starting point for importing into your XenForo demo instance.

The other is the MerryXmas theme that I've created. It also has a set of image assets that it refers to, and which your XenForo demo instance will need to reach to somehow (it's been nearly two years so I wrote this, so I apologize if the exact "how" is not very precise - although the rest of this post may answer that).

-----

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]

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]

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!

 

[Aiken_Drumn]

@Valka D'Ur have you made any progress on this?

 

[Buster's Uncle]

...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.

CivII

CivII

alphacentauri2.info

Civilization en Español - Apolyton Civilization Site

apolyton.net

Civ 6

Civ 6

alphacentauri2.info

-And finally...

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

 

[Valka D'Ur]

@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]

...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

CivII

CivII

alphacentauri2.info

View attachment 635664

Civilization en Español - Apolyton Civilization Site

apolyton.net

View attachment 635665

Civ 6

Civ 6

alphacentauri2.info

-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]

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...

 

[The_J]

Yeah... it is definitely not easy, and sometimes does bring you close to madness, I agree.

 

[Valka D'Ur]

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.

 

[The_J]

Yeah... a bit. Some things are pretty clear if you look at the interface, but others are just mysterious.

 

[Valka D'Ur]

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:

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

 

[Buster's Uncle]

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

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...

I'm working on some theme stuff at AC2 the last week and it struck me that ^this^ was way more likely to happen if I went ahead and shared. The .zip is of my working folder for making Fake CFC at AC2, has four .png screenies of CFC pages from actual old vB CFC Modern in 2015 -from which a body could not only get guidance for the look, but also sample to get the actual colors- and all the buttons I saved - and if you've got GIMP (free download, BTW) useful files of things like the logo with Olaf's shadow pointing the right way.

See, I would totally like to browse CFC in something more reminiscent of old-school CFC Modern myself, and figure I've already DONE my share of the work. Here's hoping some go-getter jumps all over this, COUGH@Aiken_DrumnCOUGH or the like, and makes himself very popular to a lot of us...

 

[Valka D'Ur]

@The_J: I haven't forgotten the default avatar project we discussed. Unfortunately, everything I have is on my old computer, which is currently in the repair shop. I still have ideas, though, that I want to try.

 

[The_J]

No rush, as usual we're also very busy :/ (I wish I had more time...).

 

[Aiken_Drumn]

See, I would totally like to browse CFC in something more reminiscent of old-school CFC Modern myself, and figure I've already DONE my share of the work. Here's hoping some go-getter jumps all over this, COUGH Aiken_Drumn COUGH or the like, and makes himself very popular to a lot of us...

I will take a look at this if I get chance. It is unfortunately quite now.