Giving my website an easy style

[champ48win Scott]

I know that this is a very easy fix, but I am not sure at all how to do this. My website is http://www.dominantdiecast.com, I want to have the black area surrounding the forum to be black & white Checkboard like the checkered flag at all racing events. I am sure that this is very easy to accomplish, I just am not sure how to go about it. Thank you in advance for any help.

[Coyote]

Here's an image from wikipedia. You may want to shrink it some so the squares are smaller, or find another image.



Open
forumroot/styles/Dark Revil/theme/colours.css

Find

Code: Select all

html, body {
   color: #FFFFFF;
   background-color: #000000;


After, add

Code: Select all

   background-image: url({T_THEME_PATH}/images/500px-Checkerboard_pattern.svg.png);


Upload 500px-Checkerboard_pattern.svg.png to forumroot/styles/Dark Revil/theme/images/500px-Checkerboard_pattern.svg.png

[champ48win Scott]

I did everything you suggested and nothing at all. Did I do something wrong? Now my colors.css looks like this now.

Code: Select all

html, body {
   color: #808080;
   background-color: #000000;
        background-image: url("{T_THEME_PATH}/images/500px-Checkerboard_pattern.png");
}


[Coyote]

You also have to clear your theme cache. Are you sure you uploaded the image file to the right spot? I get a 404...

http://www.dominantdiecast.com/styles/D ... rn.svg.png

[champ48win Scott]

I got it now. I didnt refresh the theme. The 404 error you were getting is because I renamed the file with just a .png suffix. Thank you very much for all your help!!!!

[champ48win Scott]

Ok, Mr Coyote.......I need to make the text red so that it will be easier to see against the black background. As you can see now I have the checkered flags up on the site, thanks to your gracious help. You can use this as a login if you need to see more.

UID
development
Password
test2011

[Coyote]

First try changing the generic text color in the body tag:

change

Code: Select all

html, body {
   color: #808080;
   background-color: #000000;
        background-image: url("{T_THEME_PATH}/images/500px-Checkerboard_pattern.png");
}

to

Code: Select all

html, body {
   color: #FF0000;
   background-color: #000000;
        background-image: url("{T_THEME_PATH}/images/500px-Checkerboard_pattern.png");
}

This may help:
216 Web Safe Colors

Changing link colors is more challenging. First you have to find the right tags to change. They all start with 'a.*' or 'a:*'

[champ48win Scott]

Looks good to me, however I really want the top bar text to show better. i.e., new messages, control panel, view new posts, etc on that top bar). Your change worked great for the next question I was going to ask.......lol.

[Coyote]

I think the one you're looking for is .headerbar

Code: Select all

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
   background: url("{T_THEME_PATH}/images/bg_header.png") right top;
   color: #FFFFFF;
}


FFFFFF is white.

I see you're experimenting with the .css. Almost everything having to do with layout and colors is handled by the various .css files.

[Coyote]

If you get frustrated (like I often do) trying to find the right part of the .css file(s) to edit to get the stupid thing to change to the color you want, you can hard-code it inline in the html.

you could, for example, change

Code: Select all

<a href="{U_INDEX}" accesskey="h">{L_INDEX}</a>

to

Code: Select all

<a href="{U_INDEX}" accesskey="h" style="color: #FF0000;">{L_INDEX}</a>

You can "stack" inline style elements as long as they are separated with a semicolon

Code: Select all

<a href="{U_INDEX}" accesskey="h" style="color: #FF0000; text-transform: capitalize;">{L_INDEX}</a>