New Look


Ok, I am no expert by any means... but for those of you hoping to create your own new spring blog look. This should get you started.

What seems like the easiest approach of all if you already have a nice custom header that you like is just to copy and paste a blog skin from cutestblogontheblock.blogspot.com. On the right side are very clear easy to follow instructions.

Next try sjhblogdesign.blogspot.com. This website has detailed instructions for adding lots of new features. I did try these instructions and successfully added a full page border/margins. However, I could never get the instructions she gives to paste the wallpaper to the inside to work.

So..
Here are some additional suggestions if you want to do it yourself. & Please post additional tips if you know of some that would be helpful.

You can create your own custom header in paint and save as a jpeg file. Then, go to layout, edit header and import image from your computer. Then select behind title and description. I did this. It works. Paint is sorta hard to design in if you are not proficient with this program.

FIRST, GO TO PHOTOBUCKET.COM, CREATE AN ACCOUNT.
THEN, GO TO A FABRIC WEBSITE AND FIND THE PRINT YOU LIKE RIGHT CLICK THE IMAGE AND SAVE TO A FOLDER ON YOUR COMPUTER.
UPLOAD IMAGES TO PHOTOBUCKET WHICH'LL GIVE THEM A DIRECT URL

GO INTO LAYOUT, EDIT HTML AND DO THE FOLLOWING:
*Always preview before saving to make sure it looks like you want it to. If you mess it up, no worries. You can always go back and select a new template which'll set you back to your original settings.


Copy this and overwrite from body to header:
*/body {background:#ffffff;;background-image:url(This is going to appear on your R&L margins, paste your direct link from photo bucket into here);background-position: center; background-repeat:repeat-xy;; background-attachment: fixed;margin:0; color:#62340d; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; }
a:link {
color:#78B749;
text-decoration:none;
}
a:visited {
color:#aa77aa;
text-decoration:none;
}
a:hover {
color:#32527A;
text-decoration:underline;
}
a img {
border-width:0;


Copy and paste the following between header and outer wrapper (overwrite what is already there)
*/#header-wrapper {background-image:url(THIS IS THE OUTSIDE OF YOUR HEADER-INSERT YOUR DIRECT LINK FROM PHOTOBUCKET IMAGE YOU'VE CHOSEN);background-repeat:repeat-xy;width:860px;
border: 5px solid #333333;}#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}#header {background-image:url(THIS IS THE INSIDE OF YOUR HEADER-INSERT DIRECT LINK FROM PHOTOBUCKET IMAGE YOU'VE CHOSEN);background-repeat:repeat-xy;margin: 40px;border: 1px solid #333333;text-align: center;color:#000000;}#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: normal bold 238% Verdana, sans-serif;
}#header a {
color:#000000;
text-decoration:none;
}#header a:hover {
color:#000000;
}#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: normal normal 95% Verdana, sans-serif;
color: #000000;
}#header img {
margin-left: auto;
margin-right: auto;

Where you see outer wrapper, paste this:
#outer-wrapper {
background-image:url(Again paste the link from photobucket you chose here, this is the center of your screen);background-repeat:repeat-xy;
width: 860px;
margin:0 auto;
padding:10px;
text-align:left;

font: normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif;


I recommend trying this when your kitchen is clean and the kids are asleep (Ha, just kidding). Seriously, it just takes a lot of patience and few interruptions. Hopefully these tips will help more than they frustrate :)

Happy Re decorating!

Comments

Looks so good. Now where is your tag post. Girl if you have that much time, you can answer the few simple questions that now 3 people have tagged you about. Your girls must sleep tons and that kitchen must shine like a diamond!
Hey Ashleigh---How did you change your font in the header?
I am amazed! I was going to try to bribe you with free babysitting and promise to clean your kitchen for a week for you to write all this out for me - you ROCK!!! Hopefully I can work on my boring blog over the weekend...keep your cell phone close by since you're now my own personal Geek Squad!
Alexis said…
Ashleigh,
I love reading your blog!! Thanks for the tips!
The Muncies said…
I thought sjhblogdesign.blogspot.com was so helpful!! I used housefabrics.com to get my backgrounds. Right click to save them, upload to photobucket, then paste the direct link into the spot from sjhblogdesign! Easy to change once you have your html formatted! Addictive to keep messing with!