MyAdopts Complete Guide To Success

Editing the CSS

Editing the CSS is very easy once you get your head round it. It's really easy, if it's your FIRST ever encounter with CSS, don't worry! This site is here to help you!

If you don't have the time to create your own CSS, why not take a look at the free CSS available made by generous MyAdopts members? Some even allow requests!

  1. Log in to your adoptables site, and go to your ADMIN CONTROL PANEL (basically wwww.YOURSITE.myadopts.com/admin.php).
  2. Go to "Site Settings", and then "View or Edit Theme and Template Settings" and NOT "View or Edit Theme CSS Files", and choose "Default With CSS", click "Use This Theme".
  3. Go back to "Site Settings" and click on "View or Edit Theme CSS Files" and NOT "View or Edit Theme and Template Settings".
  4. Now, to observe the complete CSS code, you can copy and paste this in case you messed up your original one:

  5.    Let's start with editing the BACKGROUND image/colour and TEXT colour and font. Find:

         See the "background:url(../templates/defaultwcss/images/bg-body.png)? Replace the insides of the brackets with the URL of the          
         background image you have. The image URL must end with .png, .gif, .jpg etc. and NOT .html, .htm, .php etc. You can get the URL by 
         uploading your image to http://www.imageshack.com/, a free image hosting site. Once uploaded, copy and paste the DIRECT link into
         the brackets (remember to remove the insides of the brackets first).
         The "repeat-x" means to repeat the image horizontally, you can change it to:
         "repeat-y" to repeat the image vertically,
         "repeat" to repeat the image horizontally and vertically,
         "fixed" to make it so when you scroll down the page, the content moves and not the background. If your image is big enough, it won't
         have to repeat itself a few times.
         "no-repeat" to make the image not repeat and there will only be one of them.
         The "top center" means to place the image at the top center, you can use "bottom left" etc.
         The "#E8F7F9" is a colour code, you can change the colour code to any other colour code you want. You can use colours with a
         background image so if the background image is small and you have not added any "repeat", you can have a colour to fill in the
         space. 
         You can instead of having an image as a background, you can have a solid colour. To do this, replace 
         "background:url(../templates/defaultwcss/images/bg-body.png) repeat-x top center #E8F7F9;" with:
         "background-color:#E8F7F9;" You can replace "E8F7F9" with any colour code you want, this site: http://html-color-codes.info/ is very 
         useful, and you can choose any colour and collect the colour code there. Remember to place a "#" before the colour code!
         To edit the text colour, basically edit "#222222" which is found next to "color:" to any colour code you want. To change the font of the
         text, find "font-family:"Trebuchet MS" Arial, Helvetica, sans-serif;" and change it to any of the below, you can find more on the web:
font-family:"Trebuchet MS" Arial, Helvetica, sans-serif;

font-family:Verdana, sans-serif;

font-family:Gill Sans, sans-serif;

font-family:Times New Roman, serif;

font-family:monospace;

font-family:Comic Sans MS, cursive;

font-family:Impact, fantasy;
  6.    Now to edit the link colours. Find:

         "a" means links, and "a:hover" means when you hover your mouse over links. You already know about the colours right? If you don't, 
         re-read the previous section on text colour.
         The "text-decoration:none;" is basically, text decoration. If you want links to be underlined, you would change it to "text-
         decoration:underlined;".
         You can even have borders by adding "border: 1px solid #000000;" 1px is how thick or thin the border line is, solid is basically not 
         dotted etc. You can replace "solid" with "dotted" or "dashed". And I'm guessing you know about the colour.
  7.    Now to edit the actual "page" which is called the "wrapper" where all the content is on.... Find:

         Now, you can edit the width of the wrapper, you can change it all you like. And you can ignore the font-size. The  
         "background:#FFFFFF;" you know about, you can change it to "background:url(imageURLhere);" if you like.
  8.    So, we're going to edit the header image/colour now! Find:

         You can easily change the height of the header and you can also change the "background:url(imageURLhere);" to "background-
         color:#FFFFFF;" and you can also put the position of the image (if it's small) e.g. "top center". The width of the header, is the width of 
         the wrapper.
  9.    Okay, onto editing the menu (where the navigation links go), find:

         You already know about the height, "background:url(imageURLhere);" and "background-color:#FFFFFF;" but what is the "line-
         height:35px;" you may wonder... well that means how high or low the links on the menu bar are, you can have the links lying low on
         the bottom of the menu, or flying high on the menu bar, you can experiment with the line-height by changing "35".
         You don't need to know about the padding, it's just so the menu knows where it's supposed to be, under the header!
10.    Now, we're going to edit the sidebar, this is where the links are such as "Visit Message Center", "Adoption Center" etc. Find:

         The "float:right;" means that the sidebar will be displayed on the right of the page. And you know about the width, background. The
         "margin-right:10px;" states how far it is from the edge of the wrapper. You can change this to 0px if you don't want any space
         between the sidebar and the wrapper.
         If you don't want the sidebar to be visible, you can add this code under "margin-right:10px;": "visibility:hidden;", however, all the          
         content on the wrapper will still be on the left side, meaning there will be a huge blank space on the right, so you will need to change  
         the width of the sidebar to 0px and the content width (which we will talk about next).
11.    So onto the actual content where the content will be. Find:

         The "float:left;" means that the content will be on the left of the page, and you know about the width. The "min-height:400px;" means 
         that the minimum height for the content to be will be 400px. Now, if you have hidden the sidebar, you will need to raise the width of the 
         content so it will fill in the sidebar's blank space, and you will need to experiment with this until you have just the right width.
12.    Okay, we're going to edit the footer. Find:

         You don't need to know about the "clear:both;" and please don't remove it. You can change the height of the footer and the 
         background of the footer, as you know already.
13.    So, now onto the entries, the actual content. You don't need to edit it, unless you want the text on your pages to be centred. To do 
         this find:

         And then change "justify" to "center". Simple as that.
14.    Now, into more detail with the menu. Find:

         You don't need to edit the first parts. Now, the "#menu li a".... remember what I told you about "a"? It means links... so you can style 
         the links as you wish! Change the colour... and don't change the other bits if you don't know what you're doing...
         The "#menu li a:hover" is something you can change as well, remember it's "when you hover over a menu link". And yes it includes an 
         image, you can change the background image or change it to a background colour.
15.    And more detail with the sidebar... find:

         Just like with the menu. Change the "#sidebar li a" and "#sidebar li a:hover".
         The "#sidebar-bottom" is the bottom of the sidebar, you can change it to a different image or background colour.
16.    So more detail with the footer! Find:

         Don't get confused! The "#footer-valid" is just the text (not links), so edit the colour! Same with the links too!
17.    And now with the heading title (the title on top of your header). Find:

         To:

<Previous........................................................................................Next>