Elk styling made simple

Topic: Elk styling made simple (Read 17012 times) previous topic - next topic

0 Members and 1 Guest are viewing this topic.

Elk styling made simple

January 30, 2014, 11:29:58 am

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?

Re: Elk styling made simple

Reply #1 – January 30, 2014, 01:53:17 pm

Simple and effective and so cool!

Re: Elk styling made simple

Reply #2 – January 30, 2014, 02:57:43 pm

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 – January 30, 2014, 03:13:46 pm

Quote from: Nao – January 30, 2014, 02:57:43 pmIs 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 ...

Quote from: Nao – January 30, 2014, 02:57:43 pmCandid 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.

Re: Elk styling made simple

Reply #4 – January 30, 2014, 03:28:40 pm

Quote from: Nao – January 30, 2014, 02:57:43 pmIs this not already possible with SMF..?

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

Quote from: TE – January 30, 2014, 03:13:46 pmIt'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

Re: Elk styling made simple

Reply #5 – January 30, 2014, 04:33:22 pm

Quote from: TE – January 30, 2014, 03:13:46 pmIt'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 – January 31, 2014, 12:45:13 am

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.

Re: Elk styling made simple

Reply #7 – January 31, 2014, 03:48:22 am

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 – February 18, 2014, 09:37:32 am

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 – February 25, 2014, 04:58:44 pm

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.

Re: Elk styling made simple

Reply #10 – January 31, 2015, 08:29:01 am

very nice, I was going to ask this

Thanks TE!

Re: Elk styling made simple

Reply #11 – February 01, 2015, 10:40:28 am

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

Re: Elk styling made simple

Reply #12 – February 01, 2015, 10:43:24 pm

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;
}

Re: Elk styling made simple

Reply #13 – February 02, 2015, 02:51:42 am

Thanks TE, that worked.

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

Re: Elk styling made simple

Reply #14 – February 02, 2015, 03:17:42 am

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;
}