CMS Made Simple Forums

Posted: **Thu May 17, 2007 12:55 am**

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!

Posted: **Thu May 17, 2007 9:54 am**

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

Br,

K

Posted: **Thu May 17, 2007 9:26 pm**

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

Posted: **Sat May 19, 2007 1:47 am**

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

Posted: **Sat May 19, 2007 4:04 pm**

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.

Posted: **Sat May 19, 2007 4:09 pm**

Oh, Ok.. Thanks!

Posted: **Sat May 19, 2007 4:22 pm**

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

Posted: **Sat May 19, 2007 8:00 pm**

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.

Posted: **Sat May 19, 2007 8:18 pm**

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

Posted: **Sat May 19, 2007 8:36 pm**

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.

Posted: **Sat May 19, 2007 8:43 pm**

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?

Posted: **Sat May 19, 2007 11:52 pm**

You need to specify a colour here:

background: #colour

change it to:

background: #ffffff

and you should be good to go.

Nullig

Posted: **Sun May 20, 2007 1:27 am**

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!

Posted: **Sun May 20, 2007 6:43 am**

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

Posted: **Sun May 20, 2007 4:15 pm**

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..

CMS Made Simple Forums

Background Images

Background Images

Re: Background Images

Re: Background Images

Re: Background Images

Re: Background Images

Re: Background Images

Re: Background Images

Re: Background Images

Re: Background Images

Re: Background Images

Re: Background Images

Re: Background Images

Re: Background Images

Re: Background Images

Re: Background Images