Here is how to make an easy graphic that you can have fun playing with in buttons, backgrounds and images.

1:        Open PAINT (I cannot give you instructions with Gimp but if you are using it then I am sure you can figure out the differences in what I am saying.)

2A:    DECIDE:

2B:     If you want an image that is going to go VERTICALLY/DOWN (repeat-y) the left or right side of an area such as Masthead, Body etc., you will want to create a image going ACROSS and if it is a box image, you will have to create it in a way that the bottom of the image will work well with the top of the image since they will be stacking on top of eachother.

2C:    Likewise, if you are creating a HORIZONTAL/ACROSS  image (repeat-x) you will need to create it in a way that the left and right sides will match nicely since this will be meeting up ACROSS at the seams.

3:      For VERTICAL you will make a line or box across the page or even short will do.

4A:   Pick your colors that will match the site and add from the paintbrush tool little splotches of color that match your site as well.  Remember that you can use the Zoom Magnifier to see better while you plan it. The more colors you add and the closer together they are, the more stripes there will be down the page.

4B:   For the HORIZONTAL IMAGE you will create a line or box in the same way but your original line will go straight up and down so that when you are finished your image will be repeated across the section of background you choose.

4C:   For the “boys” page, I simply make a box of one color and used the Spray Can tool and sprayed evenly around the box.  Play with the tools and see what you want to do.

5:      Save your image either very shallow for the Horizontal one or very thin for the Vertical.  Save as a “jpg” file so that the color is not distorted.  Make sure to save to your “images” folder and NO CAPS in the name of the file.  Here are a couple tips:  You can use the “invert colors” tool under IMAGE on the tool bar.  It is fun to see the opposite colors that occur.  You can also save the image and then from the IMAGE tool bar you can then flip the image and save it as the “right” side so that you can use left and right versions of it.  PLAY AROUND.

6:      Go to your CSS.  Find the background area that you would like a background image to cover.

6A:    For the VERTICAL such as with the left side of your site you will look for the BODY element.  It will look something like this:  body { background-image: url(“…”);  background-color: pink; background-repeat: repeat-y; }

6B:     For the HORIZONTAL such as in an active link (a: on your style sheet of the navigation) you can use it to make buttons without using a larger image.  It would just keep repeating UNDER the link name.  Just make sure you are using a color that will show up for text on top of the image.  Keep your images small.   This is why it is good to zoom in when creating them.

6C:     You can also just do a {border-left-style: dashed green; background-color: blue; border-width: 15px; }  Add this to your BODY element or your navigation, content, sidebar, masthead or footer and see what happens.  Do the same by changing it to border-right-style etc and change the top, right or bottom as well.  Change it from Dashed (NO CAPS I’m just using them to accentuate the names)  to Solid, Dotted, Ridge, Groove or Inset, Double etc.  Change the pixels as well to larger or smaller for fun.  Now you can use an image or create a fun border around your site without even using images at all.

7:       Play with it.  HAVE FUN!  Email me if you have any questions at all.

Here is what you do to Upload a new theme:

Uploading a new theme:

• Go to your blog/wp-admin and sign in to the dashboard.
• Choose  Appearance in your dashboard.
• Choose ADD NEW THEME
• Search for and choose the new theme.
• Click Install.
• Put in your domain name, user and password when asked.
• After it installs,  Activate it.
• (If you have other themes, go back and delete the other theme because it takes a lot of your webspace.  You can save the CSS file to your harddrive if you want for another time that you might go back to the same theme.  Change the name of the CSS file or save it in a folder under the name theme.)
• Go to my post Change Permissions to complete this.

• Click on each folder or file below in this order.
• http://www.wholefamilyhealth.com /cpanel  (replace my site name with your own.)
• File Manager
• Blog
• Wp-content
• Themes
• Click the theme name to change permissions.
• Find “Style.css”
• Checkmark the box next to it.
• Choose “Change Permissions” from the icons at the top.
• A box will pop up…  it will usually be 0644.
• Check the box that is where Execute and User meet.
• Do the same for where Group and World each meet “Write”.
• This should make the permissions 0766.
• Now just so you know, this has just allowed WP to make the changes you make in your Admin area to be written on CSS file so that you can customize according to your preferences with the themes options.
• Read the next post about Changing the CSS file for your blog.

This is easy if you follow the step by step instructions below.

Create a folder first

1. Create a folder INSIDE your Webclass folder and name it by the month and day you start this.
2. Create a folder within that folder that is called IMAGES  this is where you will keep your background image when we “capture” it.
3. When we mention “background” below,  we will be referring to the BODY tag of your CSS file.  We sent files to you called Class01.css, Class01.html and Layout.css
4. Download the files into this new folder (the first folder) that were sent to you in the email.
5. Keep your folder opened.  Hold down the CTRL key and click on all three and right click to “open with NotePad++”
6. We will be working with the Class01.css the most.

Capturing the background image

1. Go to your theme choice online.  Go to   http://wp-themes.com/adstyle (replace “adstyle” with your theme name.)
2. Right click on the theme and scroll down to Web Developer, over to Images, down to View Image Information.
3. This will give you the images and the information about each of them used in this theme.
4. Find the image you are looking for at this time.  You will want a background and maybe something for your Masthead as well.  You can also capture buttons here.  Click on the link to the image you want.
5. When it opens to that link, right click and choose “save as” and save to your “images” folder.
6. Now do the same with any of the other images you want to capture.
7. If the site is made with a gradient that is hard to use as a background image you can view the CSS and then look for the where the CSS tells you the image file for the background.  Open this page and replace “adstyle” again with your theme name to get to the CSS file.    http://wp-themes.com/wp-content/themes/adstyle/style.css
8. Now go back to the Class01.css file and find where it has the BODY element and change the background color and background image from the image you just captured and from the CSS file of your theme.  Remeber that you are not changing the CSS of the blog page but the Class01.css because this is for your Index page on your site.
9. The images you have selected will go in your CSS file under Body background image or Masthead image; whatever you want to replace.
10. You can also just change the color of the background (as mentioned above)  to meet with the image you put in the Masthead.  Just looking in the CSS file for this tag that tells you the color choice.
11. Save your file and then double click on the Class01.HTML file to see how changing the CSS file has changed the correct elements in your page.

NOTE: When you are changing CSS in any way, I suggest using the notes brackets  -  /*   */ – and copying your styles into the brackets so you will have it right in front of you what you started with, then delete them when you have decided you are happy.  So to make this clear.  Put the CSS from the theme AND the Body style info copied (not dragged but a copy of them) into the brackets so you can work them and have a saved copy of the original of each.   This way you will have a copy in case you don’t like what you do.

1. Next you are going to look for other changes that need to be made.  Maybe your Masthead is too small for the image.  The image may be 660px and your Masthead is only 630px.  You will need to look for that tag as well and change the width to suit the background.
2. It is not enough to change only the Masthead in this case but now the Navigation and Container styles will also have to be adjusted.   Hold down the CTRL key and hit F to open the find box.  You can put the 630px into it and it will find those instances in the CSS folder and then as you find them go over to the text and type the new amount; 660px (or whatever yours is).  Keep hitting the next button until you have corrected them.  Sometimes this is found in the Layout.css file instead.
3. Gotta Go….   now find the colors for the rest of the CSS that you want to change to match the navigation and Masthead color or the “a” and “a. hover” tags also.

Now we are going to match up your CSS with the CSS we just captured.

Find the tags that are the same.
We are going to replace what is in our CSS with the attributes that are in the background CSS.

I’m going to do the best I can to educate you about semi-buiding websites and blog.  There is not enough time to teach all the intricacies of web design.  Heck, I don’t even know them.

There is a folder here called Web Class and that is where these post will be.

Come back often and read the next installments to our class and hopefully you will end up with a great site.