Elk styling made simple

Elk styling made simple Started by TE · January 30, 2014, 11:29:58 am · Read 26630 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Re: Elk styling made simple

Reply #30 – June 22, 2015, 09:45:33 am

lol
I know the feeling about CSS!

Re: Elk styling made simple

Reply #31 – June 22, 2015, 10:54:45 am

Quote from: emanuele – June 22, 2015, 09:45:33 amlol
I know the feeling about CSS!

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.

Re: Elk styling made simple

Reply #32 – July 02, 2015, 02:05:33 am

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

Code: [Select]

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

Re: Elk styling made simple

Reply #33 – July 02, 2015, 02:01:58 pm

Hir br360 and welcome to ElkArte..

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

Code: [Select]

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

but it should be

Code: [Select]

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

Re: Elk styling made simple

Reply #34 – July 02, 2015, 03:40:50 pm

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.

Re: Elk styling made simple

Reply #35 – July 02, 2015, 11:40:23 pm

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)

Code: [Select]

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

Re: Elk styling made simple

Reply #36 – July 03, 2015, 01:02:22 am

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

Re: Elk styling made simple

Reply #37 – September 02, 2015, 02:47:22 am

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?

Re: Elk styling made simple

Reply #38 – September 02, 2015, 07:57:06 am

Code: [Select]

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

Re: Elk styling made simple

Reply #39 – September 03, 2015, 07:08:53 am

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

Re: Elk styling made simple

Reply #40 – September 03, 2015, 08:37:14 am

@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

Re: Elk styling made simple

Reply #41 – September 03, 2015, 08:55:06 am

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

Re: Elk styling made simple

Reply #42 – September 03, 2015, 09:18:20 am

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

Code: [Select]

.board_name > a {
    color: #377828;
}

subboards
text

Code: [Select]

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

link (title)

Code: [Select]

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

Code: [Select]

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

Re: Elk styling made simple

Reply #43 – September 22, 2015, 10:04:37 pm

This is all fantastic information! Thanks everyone!