Skip to main content
Topic: Elk styling made simple (Read 8025 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Elk styling made simple

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.
Code: [Select]
#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
Code: [Select]
#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.
Code: [Select]
#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/
Code: [Select]
#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:
Code: [Select]
#board_111 a {
color: darkred;
}
#board_23 a {
color: GoldenRod;
}
#board_19 a {
color: green;
}
This is our result ;) Quite simple, right?
Thorsten "TE" Eurich
------------------------

Re: Elk styling made simple

Reply #1
Simple and effective and so cool!  :)

Re: Elk styling made simple

Reply #2
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...

Re: Elk styling made simple

Reply #3
Is this not already possible with SMF..?
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 ...

Candid question.Where would you out that CSS? Because modifying a stock file makes it impossible to upgrade later...
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.

Thorsten "TE" Eurich
------------------------

Re: Elk styling made simple

Reply #4
Is this not already possible with SMF..?
Not unless you don't care about read/unread status.

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.
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).
Bugs creator.
Features destroyer.
Template killer.

Re: Elk styling made simple

Reply #5
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.
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...

Re: Elk styling made simple

Reply #6
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.
Thorsten "TE" Eurich
------------------------

Re: Elk styling made simple

Reply #7
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... ^^

Re: Elk styling made simple

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

Re: Elk styling made simple

Reply #9
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.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Elk styling made simple

Reply #10
very nice, I was going to ask this ;) Thanks TE!
sorry for my bad english

Re: Elk styling made simple

Reply #11
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
sorry for my bad english

Re: Elk styling made simple

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

so instead of
Code: [Select]
#board_28 .on_board:before {
font-family: "FontAwesome";
content: '\f0f4';
position: relative;
top: 5px;
font-size: 2.7em;
color: #4ba82e;
}
use
Code: [Select]
#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.
Code: [Select]
.off_board:before, .new_none_board:before {
font-family: "FontAwesome";
content: '\f0e6';
position: relative;
top: 5px;
font-size: 2.7em;
color: #aaa;
}
Thorsten "TE" Eurich
------------------------

Re: Elk styling made simple

Reply #13
Thanks TE, that worked.

Just a little problem, only on IE, the icons above the Info Center are still big
sorry for my bad english

Re: Elk styling made simple

Reply #14
Try adding this to your custom css file..
Code: [Select]
.new_redirect_board:before, .new_none_board:before, .new_some_board:before {
font-size: 1.2em;
position: relative;
top: -2px;
}
Thorsten "TE" Eurich
------------------------