Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: swerveq on March 28, 2015, 05:47:12 PM

Title: Changing colours
Post by: swerveq on March 28, 2015, 05:47:12 PM
Is there a way to change the background tint colour weights on a threads list page so that it alternates light/dark?
Title: Re: Changing colours
Post by: Deaks on March 29, 2015, 10:14:55 AM
what smf version?  what theme? and if you can provide more info that also be great
Title: Re: Changing colours
Post by: swerveq on March 29, 2015, 05:57:58 PM
Quote from: Ρουνικ on March 29, 2015, 10:14:55 AM
what smf version?  what theme? and if you can provide more info that also be great

It's the Curve theme and version 2.09 (same as this board)

Some members are finding it difficult to follow the status information of the thread from left to right across the page.
Title: Re: Changing colours
Post by: Deaks on March 29, 2015, 06:10:08 PM
look in css and change color of .windowbg and .windowbg2 this will also change it on board index aswell however.
Title: Re: Changing colours
Post by: swerveq on March 29, 2015, 06:16:58 PM
Quote from: Ρουνικ on March 29, 2015, 06:10:08 PM
look in css and change color of .windowbg and .windowbg2 this will also change it on board index aswell however.

Thanks for that but will this allow me to alternate the colours - light/dark/light/dark and so on? It's a bit like when you lock one topic. That makes the bg darker for that topic only.
Title: Re: Changing colours
Post by: Deaks on March 29, 2015, 06:28:00 PM
yes its default on SMF just the colors used are quite similar.
Title: Re: Changing colours
Post by: swerveq on March 29, 2015, 06:40:46 PM
Quote from: Ρουνικ on March 29, 2015, 06:28:00 PM
yes its default on SMF just the colors used are quite similar.

Thanks again. I'm not that familiar with altering HTML. Are you able to tell me where I find this css and be a bit more specific about changing the colour?
Title: Re: Changing colours
Post by: Deaks on March 29, 2015, 07:09:20 PM
Using FTP

How do I use FTP? / What is FTP? (http://wiki.simplemachines.org/smf/How_do_I_use_FTP)

Or FIle Manager in your hosting cPanel

go to Themes/default/css

here you will see index.css/

In this file look for

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg, #preview_body
{
color: #000;
background-color: #e7eaef;
}
.windowbg2
{
color: #000;
background-color: #f0f4f7;
}


where it says background color, change the # code to what it to what you want
http://www.color-hex.com/ < is a good site to get the # value you need for colors
Title: Re: Changing colours
Post by: swerveq on March 30, 2015, 07:30:34 AM
Sorry to be a pain and I really do appreciate the time you're taking to sort this for me.

The alternating colours you mention above work fine and I don't need to change those as they are for posts. However the page before the posts lists the threads where you can select which to click and go to the posts of a particular thread.

What I am after is having alternating colours on the threads page if possible. The page I'd like to change can be seen here http://uavforums.uk/index.php?board=1.0 (I should have given you this first really)

As you can see all the threads below the three stickies at the top, have the same colour.
Title: Re: Changing colours
Post by: Kindred on March 30, 2015, 07:36:55 AM
alternating on the MESSAGEINDEX is complicated...   especially when you get into the sticky and locked colors...
Title: Re: Changing colours
Post by: swerveq on March 30, 2015, 07:45:49 AM
How about a change of shade when you hover the mouse over a thread?

I've seen this on other themes.
Title: Re: Changing colours
Post by: Kindred on March 30, 2015, 07:52:45 AM
firefox + firebug is your friend..

.td subject
Title: Re: Changing colours
Post by: Deaks on March 30, 2015, 07:56:31 AM
As Kindred said that is quite abit trickier but not impossible, I have done it before but in 1.0 line, ill finish this report that was due on Friday past then get back to you once i get chance to play with it.

Edit: darn it you replied before I did
Title: Re: Changing colours
Post by: swerveq on March 30, 2015, 08:04:02 AM
Quote from: Kindred on March 30, 2015, 07:52:45 AM
firefox + firebug is your friend..

.td subject

Sorry, very new to all this. Not sure what you mean.
Title: Re: Changing colours
Post by: Kindred on March 30, 2015, 08:57:11 AM
IF you plan to customize your site, you need to learn basic (and probably more than basic) CSS...

the area that controls the layout/color of the post title on the messageindex page uses the css class .td subject

http://www.w3schools.com/cssref/sel_hover.asp
Title: Re: Changing colours
Post by: Deaks on March 30, 2015, 09:28:46 AM
if you want to change the color of the title look for

.table_list tbody.content td.info a.subject
{
font-weight: bold;
font-size: 110%;
color: #d97b33;
}


and add after it

.table_list tbody.content td.info a.subject:hover
{
font-weight: bold;
font-size: 110%;
color: #123456;
}


replacing the #123456 with teh color you wont, thnis should only change the subject wording not the whole cell, to do the whole cell would take bit more work
Title: Re: Changing colours
Post by: swerveq on March 30, 2015, 09:36:24 AM
I see what you mean but it's only the background shade I am looking to change on the hover really rather than the wording.

The coding is beyond me unfortunately although I am able to swap the code over OK. Is there anyone able to do this for me. I am happy to pay if it's not too much.
Title: Re: Changing colours
Post by: Kindred on March 30, 2015, 09:39:28 AM
shouldn't take too much more work... -- in theory, the hover argument can apply to more than just links

. topic_table td.subject:hover {
background: #<newcolorhex>;
}
Title: Re: Changing colours
Post by: Deaks on March 30, 2015, 09:43:00 AM
I would be more inclined to do this:
in messageindex.template.php find

<td class="subject ', $alternate_class, '">


change to something like

<td class="subject my_class">


then create a my_class in your css

so using the previous code I gave for windowbg


.my_class
{
background: #e7eaef;
}
.my_class:hover
{
background: #f0f4f7;
}


this is a wee example and would need worked on, but both methods should work
Title: Re: Changing colours
Post by: swerveq on March 30, 2015, 10:34:38 AM
I just know I'll mess this up if I try to do it so I'll need to find someone to do the whole code for me I think.
Title: Re: Changing colours
Post by: Deaks on March 30, 2015, 10:53:20 AM
to do kindreds way just need to add teh code he gave to your index.css
Title: Re: Changing colours
Post by: swerveq on March 30, 2015, 12:37:34 PM
Quote from: Kindred on March 30, 2015, 09:39:28 AM
shouldn't take too much more work... -- in theory, the hover argument can apply to more than just links

. topic_table td.subject:hover {
background: #<newcolorhex>;
}

I'd like to try this. Can you be alittle more specific please i.e. like I'm a dummie sort of thing.  :)
Title: Re: Changing colours
Post by: Deaks on March 30, 2015, 12:42:40 PM
open index.css as I told you before

at the end of the file add

.topic_table td.subject:hover {
background: #FFF;
}


replacing #FFF with the color code you want to change to.
Title: Re: Changing colours
Post by: swerveq on March 30, 2015, 01:28:57 PM
It works!

Thank you guys so much. Can I call myself a programmer now?  :D
Title: Re: Changing colours
Post by: Deaks on March 30, 2015, 02:23:55 PM
you can call yourself what you want wont make it true :P
Title: Re: Changing colours
Post by: Gwenwyfar on April 03, 2015, 02:52:40 PM
You can do alternating on messageindex by using nth selectors. I have it on mine.


/* To reset default colors */
#messageindex tbody td {
background-color: transparent; }

#messageindex tbody tr:nth-child(even) {
background-color: #ECF3F7; }

#messageindex tbody tr:nth-child(odd) {
background-color: #dfecf3; }

/* This one is for hover, it needs to be after the above, it will highlight the entire row */
#messageindex tbody tr:hover {
background-color: #c5d6e0; }


Now I don't remember if that worked on default because I changed sticky, etc colors as well either way, but in any case, you can use those afterwards (and it needs to be after the above in the code):

#messageindex tbody tr.stickybg {
background-color: #5eaeec; }

#messageindex tbody tr.stickybg:hover {
background-color: #379ae6; }

#messageindex tbody tr.lockedbg {
background-color: #dce1e4; }

#messageindex tbody tr.lockedbg:hover {
background-color: #d3d8db; }


You can just change the colors to the ones you want. (I copied those from mine, but that's just a part of the code so that's not the color that shows, I think it should look ok for blue curve in any case :P)

If you want to keep the darker color in every row its going to need more code than that, though, that will change the entire row.

Quote from: Kindred on March 30, 2015, 09:39:28 AM
shouldn't take too much more work... -- in theory, the hover argument can apply to more than just links
Yes, :hover works for pretty much every element.