Sunshine Designs: March 2011

Tuesday, March 29, 2011

Tutorial: How to remove the border(s) off your header and photos.

1. Sign into Blogger.

2. Click on "Design".

3. Click on Edit Html.

4. From here on the two tutorials are different. If you want to remove the border around your Header follow the tutorial under "Header". If you want to remove the border around your photos follow the tutorial under "Photos".

Header

5. Scroll down till you see:

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

6. Change the number 1 in the blue text to 0.

7. Scroll down a little ways till you see this:

#header {

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}

8. Again change the number 1 in the blue text to 0.

9. Click preview to make sure you did everything right and click save!

Photos

5. Scroll down till you see this(Under /* Posts)

.post img, table.tr-caption-container {

padding:4px;

border:1px solid $bordercolor;

}

6. Change the number one in the blue text to 0.

7. Scroll down again till you this:

.post img, table.tr-caption-container {

padding:4px;

border:1px solid $bordercolor;

}

8. Again change the number 1 in the blue text to 0.

9. Click preview to make sure you did everything right and click save!

Not Working?

1. Make sure you are using the Minima Template. This tutorial has only been tested on it.

2. Still not working? Drop me an e-mail here or leave a comment.

Monday, March 28, 2011

Tutorial: How to add a background image.

© Sunshine Designs
Tip: Always download your template to your computer before following any tutorials.

This is something I have been wanting to learn how to do for the longest time. I finally figured out how to do it! Actually, it is really simple! Lets get started.

1.Sign into Blogger.

2. Click on "Design".

3. Click on "Edit Html".

4. Scroll down till you see:

body {

background:$bgcolor;

margin:0;

color:$textcolor;

font:x-small Georgia Serif;

font-size/* */:/**/small;

font-size: /**/small;

text-align: center;

}

5. Replace the blue text with this: background:url(Your Image Url) repeat;

6. Preview to make sure it is working and click save!

Not Working?

1. Make sure you added your Image Url into the code[Replace the pink text with the Direct Link of your image].

2. Make sure you deleted "background:$bgcolor". If you don't delete it, it won't work.

3. Are you using the Minima Template? If not it probably won't work. For a tutorial on how to switch to the Minima Template click here.

4. If you are still having problems please comment or e-mail me here.

Sunday, March 27, 2011

Pastel Easter

This is my first set of digital papers I have done. There are 5 papers and 0 elements. To get it e-mail me with the subject "Pastel Easter" by clicking here. I will send you the files for free. :)

Saturday, March 26, 2011

Tutorial: How to change your sidebar title color.

Tip: You should always download your template to your computer before you make any changes to your blog.

1. Log into Blogger.

2. Go to your dashboard.

3. Click design.

4. Click Edit Html.

5. Scroll down till you find this:

/* Headings

6. Right under that you should see this:
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

7. Open up a new tab and go here: http://www.allblogtools.com/html-color-codes-generator. Play around till you get the color you like and then copy the Hex code. [Should look like this: #000000 but with different numbers]

8. Go back to edit html and paste the Hex code in place of the green letters.
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

9. Now it should look something like this:
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform: none;
letter-spacing:.2em;
color:#AEA9A9;
}
10. Now click preview and double check that you like it.

11. Click save and your done!