This background is suitable for the Minima template, which has 2 columns, but is wide enough to accommodate 3 columns. Since I just started creating BLOG Wear, I only have instructions for Blogger.
1. Sign in to Blogger, and your “Dashboard” will open up.
2. Under the BLOG for which you want to change the background, click on “Layout.”
3. On the “Add and Arrange Page Elements” screen, click “Add a Gadget.”
4. When the “Add a Gadget” screen pops up, scroll down to “HTML/JavaScript” and click on the plus (+) sign.
5. The “Configure HTML/JavaScript” Screen will open. Paste the entire following HTML code in the “Content” box (leave the “Title” blank).
6. Click “Save,” and that’s it!
To Add the Matching Header
In your graphics program, insert a photo and text into the header and save it as a JPEG file. Don't use the PNG file as some computers don't recognize them.
Back at BLOGGER:
1. On the "Layout" screen, click on “Edit” in the “(Header)” box.
2. In the “Configure Header” screen, under “Placement,” select “Instead of title and description” THEN, under “Image,” select “from your computer,” and click on “browse.” Find the header file that you downloaded and select it.
You can now “view” your BLOG, but don’t worry, we’re not finished.
3. Click “Customize”
4. “Edit HTML”
5. To center your header and remove the lines around it, change the following highlighted lines of code:
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:800px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
***
Scroll down to this bit of code, and change the outer-wrapper width to 800px. You can also change your main-wrapper and sidebar-wrapper widths, but they must add up to 800px. For example, you can change your main column up to 580px.
***
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 800px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
To Add a Button:
In your graphics program, copy your button and add text to it.
Back at BLOGGER:
1. Select “Dashboard,” then “Layout.”
2. On the “Add and Arrange Page Elements” screen, click “Add a Gadget.”
3. When the “Add a Gadget” screen pops up, scroll down to “Picture,” and click on the plus (+) sign.
4. On the “Configure Image” screen, deselect “shrink to fit” (the buttons are 200px wide)
5. Under “Image,” select “from your computer,” then “browse” to the button image you want and select.
All done!
If you want to use the header with the white background, simply follow the directions to "Add the Matching Header."
P.S. If your computer won't let you copy “just the code,” your browser may need to be updated. If you are using Internet Explorer, you need to upgrade to Internet Explorer 8. Visit this website: http://www.microsoft.com/windows/internet-explorer/default.aspx
The free code supplied must remain in its entirety by law. By viewing or using the content, you agree to the terms and conditions of KayDesignZ.com.
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment