ElkArte Community

Just to show you the capabilities of our templates and CSS.. Here are some examples for styling the board index.

1) changing a single category's color, im my example it's the category with ID 6.

#category_6 h2 {
	color: white;
	background-color: #666;
	text-shadow: none;
}
#category_6 h2 a {
	color: white;
	background-color: #666;
	text-shadow: none;
}

2) making the boards inside the category zebra striping

#category_6 .board_row:nth-child(odd) {
	background-color: #f8f8f8;
}
#category_6 .board_row:nth-child(even) {
	background-color: #f1f1f1;
}

3) adding some fancy board icons,
We need to hide the old ones first,  I've used my boards with ID 29, 19 and 111.

#board_23 .board_icon, #board_29 .board_icon, #board_19 .board_icon, #board_111 .board_icon {
	background-image: none;
}

Now the original Icons are hidden, let's add some new ones.. I've used the internal font awesome but you can do that with images, too.
The complete icon list from FontAwesone is here: http://fortawesome.github.io/Font-Awesome/cheatsheet/

#board_29 .board_icon:before {
	font-family: "FontAwesome";
	content: '\f0a5';
	position: relative;
	top: 5px;
	font-size: 2.7em;
	color: #666;
	text-shadow: 1px 1px 2px #555;
}
#board_19 .board_icon:before {
	font-family: "FontAwesome";
	content: '\f108';
	position: relative;
	top: 5px;
	font-size: 2.7em;
	opacity: 0.8;
	color: green;
	text-shadow: 1px 1px 2px #555;
}

#board_111 .board_icon:before {
	font-family: "FontAwesome";
	content: '\f001';
	position: relative;
	top: 5px;
	font-size: 2.7em;
	opacity: 0.8;
	color: darkred;
	text-shadow: 1px 1px 2px #555;
}

4) Now we give the related boards another link color:

#board_111 a {
	color: darkred;
}
#board_23 a {
	color: GoldenRod;
}
#board_19 a {
	color: green;
}

This is our result ;) Quite simple, right?

Simple and effective and so cool!  :)

Is this not already possible with SMF..?

Candid question. Where would you out that CSS? Because modifying a stock file makes it impossible to upgrade later...

yes, I think so but the SMF BoardIndex is based on tables with images for on, on2, redirect and off status. The CSS would be completely different ...

It's currently one of the normal CSS files but I'm thinking about adding a "custom.css" for a long, long time (made a first suggestion for this in 2009 while working on Curve), just throw that file in the related folder and it's automatically loaded.

Not unless you don't care about read/unread status.

I'd vote for a db record in {db_prefix}settings: no need to worry about writable state of the file, no need to mess with chmod, the entire Be Social! variant is less than 30k chars, so anything custom should fit into a TEXT column (heck if you need more than a variant just write a theme :P).

That's how I did it in Wedge (and it's working pretty well). Ema's suggestion is something I considered, too, but ultimately went against because modifying CSS through the admin area represents a 'break' in the workflow. You have to open the main CSS in a file, and then use your browser to add your changes.
Plus, having a custom.css file anywhere you want gives you more freedom than, for instance, switching to a different skin/theme in the admin area, editing the file for it, then switching to another theme, etc. Complicated, if you ask me...

Problem I see with a database entry is: If you want it differently for the installed themes / variants you'd need to store it per theme + variant.. We'd need an UI for that.

The only advantage I can see to the DB version is that it skips a file_exists altogether (unless you don't do realtime checks on file changes..?), because obviously Elk is made 'aware' of any changes right when you submit them... ^^

As a novice theme maker I really like how you can do this in css and without mods. Great post.

You should post up the examples for re-ordering the board index components, if they're no longer in the css file (I assumed they would be removed before the thing was ready for production).

ETA: The custom highlighting colour is a bit nasty IMO. It's one of those acidic sort of greens that is more putrid than green.

very nice, I was going to ask this ;) Thanks TE!

I'm having some problems using this trick on IE, the icons are huge and also on mobile. I don't know what I am missing.

my css file: skodaclub.it/themes/default/css/_besocial/custom_besocial.css

On chrome and firefox it eorks fine. Thank you in advance

I'd remove the font-size: 2.7em; from all custom board icons.

so instead of

#board_28 .on_board:before {
	font-family: "FontAwesome";
	content: '\f0f4';
	position: relative;
	top: 5px;
	font-size: 2.7em;
	color: #4ba82e;
}

use

#board_28 .on_board:before {
	font-family: "FontAwesome";
	content: '\f0f4';
	position: relative;
	top: 5px;
	color: #4ba82e;
}

the font-size is already set (and also reduced) a few lines before.

.off_board:before, .new_none_board:before {
	font-family: "FontAwesome";
	content: '\f0e6';
	position: relative;
	top: 5px;
	font-size: 2.7em;
	color: #aaa;
}

Thanks TE, that worked.

Just a little problem, only on IE, the icons above the Info Center are still big

Try adding this to your custom css file..

.new_redirect_board:before, .new_none_board:before, .new_some_board:before {
font-size: 1.2em;
position: relative;
top: -2px;
}

that didn't solved the big icons on IE above Info center

Which Version of IE is it?

IE 11 win7, and also on win8

ok, can you try

.new_redirect_board:before, .new_none_board:before, .new_some_board:before {
font-size: 15px !important;
position: relative;
top: -2px;
}

IE seems to be a bit stupid regarding em somethimes. this version uses px for the font size instead.

Thanks for your help @TE , is working fine now  ;)

Morning,

i tried the changes form the first post.

Link Color and category color but nothing happend.

i changed the id to my forum, so i was wondering if there was a elkarte general change?

quelltext show me this

<div class="forum_category" id="category_3">
and
<li class="board_row" id="board_34">
for example

This should change the background color / link color from category_3.

#category_3 h2 {
color: white;
background-color: #666;
text-shadow: none;
}

In which file did did you place that code? Have you cleared the forum cache / browser cache? Maybe it's just a caching issue..

A link to your forum would be helpful..

now it works... ;) dont know why i cleared the chache before, it was also my first idea,

but now it works so never mind :)

Thank you

edit:

i was wondering if it possible to style the inside of the board the same as at the front?
i mean when i give a board a color like red then the inside posts should also be red...

but so far i see there is only a way to style all boards the same inside ore i wrong?

Can we grab the number of categories and store it into the variable? I would like to make "intelligent" system that will generate random, or with pattern type coloured categories.

@CrimeS that would be nice! and i think that should be possible the ID is stored in the database... but i am to new to elkarte to figure out how it works exactly

OK, not sure I understand right.. You wan't to colorize the boards not just on the board index but on the message index / posts display too?

There's a class="action_messageindex board_X" attached to the html body tag, so in theory it should be possible to style it via this attribute.

yea TE you get me right i made some pictures to make it realy clear...

so far the cebra styling inside "board index" works with "basic_row" that was easy because i want that for all boards :)
but the link color mean the "h4 tags" inside board index is a diffrent story but i will try to figure it out my self ;)

on a first try it seam it dosent works so easy but i will try it again later the day...

is there somwhere a collection or doku about the tags and so on?

thx TE

TE can you please give me a example with the "action_messageindex board_X" and styling the board index!?

i have tried serveral diffrent things but i think im on the wrong way...

thank you

You may use for example:

#action_messageindex board_1 #description_board .category_header {
    color: red;
}

for the board title (Allgemein in your second picture), or:

#action_messageindex board_1 .category_header {
    color: red;
}

to color anything using category_header in that page.

For the topic titles you can use:

#action_messageindex board_1 .topic_name {
    color: red;
}

then, for the topic subject inside the topic itself (picture 3) you can use:

#action_messageindex board_1 #forumposts .category_header {
    color: red;
}

or otherwise the more general one:

#action_messageindex board_1 category_header {
    color: red;
}

that is the same as the previous for board titles. ;)

and for the reply numbers:

#action_messageindex board_1 .postarea .keyinfo {
    color: red;
}

Of course than you can change the "1" after the id of the board to selectively apply different color schemes to different boards. ;)

ah im so an idot...

the # and so makes the vodoo ;) i had nerly the same but there where missing some arguments...
thanks TE for your hard work!!!!!

lol
I know the feeling about CSS! ;D

yeah css gets me evrytime dont know why ;) maybe i should let it go^^

so back to topic the topic links are not working as i want...

i see with firebug this when i watch the "topic name link"

.topic_name h4 a {
    color: #43a8da;
}
.topic_name h4 a {
    font-weight: bold;
}
a, a:link, a:visited, a.new_win:link, a.new_win:visited {
    color: #008299;
    text-decoration: none;
}
a, a:link, a:visited, a.new_win:link, a.new_win:visited {
    color: #008299;
    text-decoration: none;

i use the Be Social  standart theme to work with...
as i see there are active classes for the "topic name" part... maybe some of this holds me on?

i tried so far to change that in the coustom.css and in the be social custom.css but it dosent works...
i have tried to change the color of the ".topic name" for all boards generaly that works.

Thanks for the tip; it worked great using the font awesome icons. (see attached image)

Any way to be able to add other types of icon images though? I tried uploading images to my directory and nothing. Here is the code I was trying to use if it helps (basically just added the image path to the code you already provided)-

#board_4 .board_icon:before {
   background-image: url(../../images/_besocial/newicon.png);
   position: relative;
   top: 5px;
   font-size: 2.7em;
   opacity: 0.8;
   text-shadow: 1px 1px 2px #555;
}

Hir br360 and welcome to ElkArte..

I feel the path to the background image is wrong.. it's currently

background-image: url(../../images/_besocial/newicon.png);

but it should be

background-image: url(../images/_besocial/newicon.png);

Thanks @TE - tried that code but it didn't work either. Still shows blank where the icon should be. Pretty sure the path is correct and the image is in the right folder; just not sure what I'm doing wrong.

Thank you though.

is your newicon.png a single image or a sprite with all states?

something like this should work should work for a single image, reagarding the status (on, on2, off)

#board_2 .board_icon {
   background: url('../../images/_besocial/newicon.png') no-repeat;
}

It was just a single image; and that code worked great @TE , thank you.  :)

I tried to colorize the board names as @TE described in the very first post of this thread. It works fine. But it only works with board titles, not with subboard titles and thread titles.

Is there a way to colorize all titles (board, subboards, threads) inside a category?

#category_6 {
	color: white;
	background-color: #666;
	text-shadow: none;
}

That changes not the text, only the small space between the boards.

@Jorin look here. With the addon Firebug for Firefox i find just about everything in a Theme. Is a good tool for Theme Designer.

https://www.youtube.com/watch?v=D626ytfJryI

I know such tools, but they don't help in this case.  ;)

Style ElkArte Default light
board
.../themes/default/css/_light/index_light.css

.board_name > a {
    color: #377828;
}

subboards
text

.childboard_row h4, .board_new_posts {
    font-weight: 700;
    color: #777;
}

link (title)

a, a:link, a:visited,
/* Links that open in a new window. */
a.new_win:link, a.new_win:visited {
    color: #49643d;
    text-decoration: none;
}

threads

.topic_name h4 a {
    color: #4b863c;
}

This is all fantastic information!  Thanks everyone!