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

Re: Elk styling made simple

Reply #30 –

lol
I know the feeling about CSS! ;D
Bugs creator.
Features destroyer.
Template killer.

Re: Elk styling made simple

Reply #31 –

Quote from: emanuele – 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.



Re: Elk styling made simple

Reply #32 –

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 –

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);
Thorsten "TE" Eurich
------------------------

Re: Elk styling made simple

Reply #34 –

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 –

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;
}
Thorsten "TE" Eurich
------------------------

Re: Elk styling made simple

Reply #36 –

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

Re: Elk styling made simple

Reply #37 –

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 –

Code: [Select]
#category_6 {
	color: white;
	background-color: #666;
	text-shadow: none;
}
Bugs creator.
Features destroyer.
Template killer.

Re: Elk styling made simple

Reply #39 –

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

Re: Elk styling made simple

Reply #40 –

@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
Regards Stephan

Re: Elk styling made simple

Reply #41 –

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

Re: Elk styling made simple

Reply #42 –

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

Regards Stephan

Re: Elk styling made simple

Reply #43 –

This is all fantastic information!  Thanks everyone!