The "Create your own CSS" CSS in Off Topic

ID:114648
 
Jun 16 2011, 10:13 pm (Edited on Jul 4 2011, 6:16 pm)
 
body
{
    /* Set the pages background color */
    background-color: #93B4E2;

    /* Set the background image ("url('URL_TO_IMAGE')")*/
    background-image: none;

    /* Set the background image position (center, left, right, top, bottom, pixelX, pixelY, percentX%, percentY%)*/
    background-position: center center;

    /* Set the background image attachment (scroll, fixed)*/
    background-attachment: fixed;

    /* Set the background image repeat (no-repeat, repeat, repeat-x, repeat-y)*/
    background-repeat: no-repeat;
}

a
{
    /* Set the link color */
    color: #E5FB00 !important;
}

.page_header .title, .page_header .subtitle
{
    /* Set the title's text color */
    color: #E5FB00 !important;
}

.box, .big_box, .post, .comment, .title, p, #forum_data, .favorite_game
{
    /* Set the text color */
    color: #05316D !important;
}

.box, .big_box, .post, .comment, #content .title, #forum_data, .favorite_game
{
    /* Set the box color */
    background: #6996D3 !important;

    /* Set the box border rounding (0px to 30px) */
    border-radius: 0px !important;
}

.box, .big_box, .post, #center #comments_box, #forum_data, .favorite_game
{
    /* Set the box border width, style, and color (style: none, solid, dotted, dashed, double, inset, outset, ect) */
    border: 3px solid #284C7E !important;
}

input[type=text], textarea
{
    /* Set the text-input background color */
    background: #0F4FA8 !important;

    /* Set the text-input text color */
    color: #000000 !important;

    /* Set the boxes' border width, style, and color (style: none, solid, dotted, dashed, double, inset, outset, ect) */
    border: 1px solid #6996D3 !important;
}

input[type=button], input[type=submit]
{
    /* Set the button-input background color */
    background: #0F4FA8 !important;

    /* Set the button-input text color */
    color: #93B4E2 !important;

    /* Set the boxes' border width, style, and color (style: none, solid, dotted, dashed, double, inset, outset, ect) */
    border: 2px outset #6996D3 !important;
}

.style1, .style2
{
    /* Set the forum post shell background color */
    background: #4380D3 !important;

    /* Set the forum post shell text color */
    color: #000000 !important;
}

.style3
{
    /* Set the forum post content background color */
    background: #6996D3 !important;
    /* Set the forum post content text color */
    color: #000000 !important;
}

/* Minor fixes */
#tab_content {background: transparent !important;}
#fan_content {margin-top: 40px !important;}
.title {margin-left: 10px !important;margin-right: 10px !important;}


Here's a basic style sheet that will allow you to control the style across your page. Simply fill in the values with what you want (those without clear values are commented with the list of possible choices).

Currently, you can configure:
  • Your page background color and/or image
  • The color of all links
  • The page title color
  • The text color, background color, and border of all boxes
  • The background color, text color, and border of input boxes and buttons
  • The text color and background color and forum posts


As you can see from my site (at the time of this writing), the design is very simple.

If you have any questions or requests for additions, feel free to post in the comments.

You can do a quick google search for good color schemes (I used this site's color scheme designer).
#1 Jun 17 2011, 1:36 am
For someone who doesn't quite understand CSS and all of that. Thanks for posting this, this will help me out a lot.
#2 Jun 17 2011, 10:51 am
Can you tell me how to make the 3 sections of the page actually utilize the full width of the page?

Also, this is a really nice CSS.
#3 Jun 17 2011, 6:35 pm
OrangeWeapons wrote:
Can you tell me how to make the 3 sections of the page actually utilize the full width of the page?

.blog_background_inner
{
    width: 100% !important;
    min-width: 700px !important;
}

#member_info
{
    width: 20% !important;
    left: 0% !important;
}

#center
{
    width: 60% !important;
    left: 20% !important;
}

#member_favorites
{
    width: 20% !important;
    left: 80% !important;
}


Also, this is a really nice CSS.

Thanks. It's not quite as... interesting as some of my older ones, but it'll do.
#4 Jun 18 2011, 2:43 am
Your Current css is very clean and easy on the eye :).

And this css format is written very well

You are probably better with CSS than me from what i can gather, i'm just a sloppy hack together hope it works kinda guy who still refers back to w3 school to jog my memory from time to time.

You sure do use the !important; over ride code a lot lol, i only ever really found i needed to use that when i was trying to over ride the top #div head bar back when i knew how to alter that lol, but it's a good idea in case something doesn't want to be over ridden somewhere along the lines :)

Would you like to be a part of the Css Guild?
#5 Jul 29 2011, 11:30 am
How would I go about placing a banner in place of the title? and making that banner kind of merge with the background image?
#6 Jul 30 2011, 5:57 pm
 
.page_header {
    background: transparent url('URL_TO_IMAGE') no-repeat center center;
    height: 200px;
}
.page_header * {
    display: none;
}


Replace URL_TO_IMAGE with your image, and adjust the height to match. If it's a tall banner, you might have to move the rest of your page down a bit by adjusting their top attributes.
#7 Jul 31 2011, 1:37 am
Thank you very much :)