Background Images

[tinafan]

I am new to the CMS website, and I have a website http://tinaturner.us.to .. I know how to get a background image in the gray part of the page, but I want a background image where the white is... Where do I go and do this? Thanks!

[KO]

#content is one place.
Another is #pagewrapper but you have to align it towards rigth.

Br,

K

[Nullig]

If you want the whole page, sidebar included, to have the image background you would put it here:

Code: Select all

div#pagewrapper {
   border: 1px solid black;
   margin: 0 auto;     /* this centers wrapper */
   max-width: 80em; /* IE wont understand these, so we will use javascript magick */
   min-width: 60em;
   background: #colour url(uploads/images/image.jpg) no-repeat center; /* edit this for your bg color and image */
   color: black;
}

If you just want it in the content side and not the menu side, put it here:

Code: Select all

div#content {
   margin: 1.5em auto 2em 0; /* some air above and under menu and content */
   background: #colour url(uploads/images/image.jpg) no-repeat center; /* edit this for your bg color and image */ 
}

Hope this helps,
Nullig

[tinafan]

So what file do I apply one of these codes to?

[KO]

You have stylesheets (there could be several) attached to your templates. Look those stylesheets and you find those DIV ID's mentioned above. Attach background images on them like you usually do by CSS using background: like Nullig mentioned.

[tinafan]

Oh, Ok.. Thanks!

[tinafan]

I cant get it to show my picture.. Am I adding it wrong or something? The code is towards the bottom of this code.

Code: Select all

body { color: #000000;
       background-color: #fff;
       font-size: 10pt;
       font-family: Tahoma;
       margin: 10; }

td.nav     { color: #000000;
             background-color: #fff;
             font-size: 10pt;
             text-align: center;
             font-family: Tahoma }
td.header  { color: #000000;
             font-size: 10pt;
             font-family: Tahoma }
td.label   { color: #000000;
             background-color: #ccccff;
             font-size: 10pt;
             font-family: Tahoma }
td.body    { color: #000000;

             background-color: #ffffff;
             font-size: 10pt;
             font-family: Tahoma }

td.bodyalt { color: #000000;
             background-color: #e9e9e9;
             font-size: 10pt;
             font-family: Tahoma }
td.footer  { color: #000000;
             font-size: 10pt;
             font-family: Tahoma }

a:link     { color: #002060;
             text-decoration: none;
             font-size: 10pt;
             font-family: Tahoma }
a:visited  { color: #333333;
             text-decoration: none;
             font-size: 10pt;
             font-family: Tahoma }
a:active   { color: #606060;
             text-decoration: none;
             font-size: 10pt;
             font-family: Tahoma }
a:hover    { color: #700000;
             text-decoration: none;
             font-size: 10pt;
             font-family: Tahoma }
.good     { color: #0033FF;
             font-weight: bold }
.bad      { color: #CC3300;
             font-weight: bold }
div.heading {
    background-color: #64879d; 
    color: #EDF2F5;
    padding: 9px; 
    text-align: left; 
    font-size: 16px; 
    font-weight: bold;  
    text-transform: uppercase; 
}


div.leftsidebar { 
    float: left; 
    width: 120px; 
    background-color: #EDF2F5;
    font-size: 12px; 
    padding: 7px; 
    border: 1px solid #64879d;
    color: #444444; 
}
div.thebody { 
    padding: 5px; 
    margin-left: 150px; 
    font-size: 10pt; 
    font-family: Tahoma; 

}
div.bottom {
    background-color: #EDF2F5; 
    border: 1px solid #64879d;
    padding: 3px; 
    text-align: center;
    font-size: 11; 
}
p.title { 
    font-size: 14pt; 
    font-weight: bold; 
    margin: 0; 
}
p.smalltitle { 
    font-size: 12pt; 
    font-weight: bold; 
    margin: 0; 
    padding: 4px; 
    background-color: #CCCCCC; 
    text-transform: uppercase; 
}
p.sectionname { 
    font-weight: bold; 
    margin: 0;
}
.leftsidebar p.sectionname {
    padding-left: 15px;
}
.icons {
    text-align: center;
}

div#pagewrapper {
   border: 1px solid black;
   margin: 0 auto;     /* this centers wrapper */
   max-width: 80em; /* IE wont understand these, so we will use javascript magick */
   min-width: 60em;
   background: #http://tinaturner.us.to/Untitled-1.gif; /* edit this for your bg color and image */
   color: black;
}

[KO]

It seems that you are using 'Layout: Left sidebar + 1 column' for your frontpage. If link above is to pages you are trying to edit. There is few stylesheet attached to that template but not with Styles you have above. So double check that you have that stylesheet you are editing attached to your template.

[tinafan]

Where exactly do I look for the stylesheet? In the Admin section or my file manager?

[KO]

Check your template and if you have {stylesheet} tag over there then your stylesheet comes from database where it is stored. If you open "layout" and "Templates" in Admin Panel you will see small css logo on right. Click on that and you see the stylesheets attached to that template. If you edit those ones your backup images should come up fine.

[tinafan]

Ok.. And do I have this filled out right?

Code: Select all

div#pagewrapper {
   border: 1px solid black;
   margin: 0 auto;     /* this centers wrapper */
   max-width: 80em; /* IE wont understand these, so we will use javascript magick */
   min-width: 60em;
   background: #colour url(tinaturner.us.to/Untitled-1.gif) no-repeat center; /* edit this for your bg color and image */
   color: black;
}

I get what you are saying with the stylesheets. I go to Layout, Template and then go over and click attach stylesheet. This is where I am confused. There are stylesheets already attached to the Left simple navigation + 1 column. Do I edit those stylesheets, and put in the code? Or do I go to layout, stylesheets, and create my own, and then put the code in that and put that style sheet in with the rest in the Left simple navigation + 1 column?

[Nullig]

You need to specify a colour here:

background: #colour

change it to:

background: #ffffff

and you should be good to go.

Nullig

[tinafan]

Ok.. I get that now.. but I don't get the stylesheet thing.. I am not really good at this yet..

I go to Layout, Template and then go over and click attach stylesheet. This is where I am confused. There are stylesheets already attached to the Left simple navigation + 1 column. Do I edit those stylesheets, and put in the code? Or do I go to layout, stylesheets, and create my own, and then put the code in that and put that style sheet in with the rest in the Left simple navigation + 1 column?

Thanks for your help!

[KO]

it depends what you want to do. If you want to edit the default layout or template to look as you want then you probably should edit then default templates and stylesheets attached to it. You could also build your own templates and create stylesheets for them from very start. Here is more info how to do that http://wiki.cmsmadesimple.org/index.php ... /Templates

[tinafan]

I might make my own template eventually, but I really need to get my site online.. All I am wanting to do is put a background image in the white area of my website (http://tinaturner.us.to)... And I put that code I got above on all of the stylesheets attached to the default template, and it still doesn't show up..