September 28, 2009

Happy Halloween



<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3Ebody%7Bbackground-image%3Aurl%28%22http%3A//backgrounds.blogdesignsbydani.com/SummertimeDesigns/Happy Halloween.jpg%20%22%29%3Bbackground-position%3Acenter%3B%20background-repeat%3A%20no-repeat%3B%20background-attachment%3A%20fixed%3B%7D%3C/style%3E%20%3Cdiv%20id%3D%22tag%22%20style%3D%22position%3Aabsolute%3B%20left%3A0px%3Btop%3A30px%3B%20width%3A150px%3B%20height%3A50px%3B%22%3E%3Ca%20target%3D%22_blank%22%20href%3D%22http%3A//www.blogdesignsbydani.blogspot.com%22%20title%3D%22http%3A//blogdesignsbydani.blogspot.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//backgrounds.blogdesignsbydani.com/tags/DaniBlacknWhite.png%22/%3E%20%3C/a%3E%3C/div%3E"))</script>

Design Elements by Summertime Designs
(from her kit called Happy Halloween)

Bright Flowers w/ Green Ribbon



2-Column (Standard Width)
<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3Ebody%7Bbackground-image%3Aurl%28%22http%3A//backgrounds.blogdesignsbydani.com/SummertimeDesigns/Bright Flowers Green Ribbon.jpg%20%22%29%3Bbackground-position%3Acenter%3B%20background-repeat%3A%20no-repeat%3B%20background-attachment%3A%20fixed%3B%7D%3C/style%3E%20%3Cdiv%20id%3D%22tag%22%20style%3D%22position%3Aabsolute%3B%20left%3A0px%3Btop%3A30px%3B%20width%3A150px%3B%20height%3A50px%3B%22%3E%3Ca%20target%3D%22_blank%22%20href%3D%22http%3A//www.blogdesignsbydani.blogspot.com%22%20title%3D%22http%3A//blogdesignsbydani.blogspot.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//backgrounds.blogdesignsbydani.com/tags/DaniBrown.png%22/%3E%20%3C/a%3E%3C/div%3E"))</script>

Design Elements by Summertime Designs
(from her kit called Easy Breezy)

Autumn Leaves Ribbon




<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3Ebody%7Bbackground-image%3Aurl%28%22http%3A//backgrounds.blogdesignsbydani.com/SummertimeDesigns/Autumn Leaves Ribbon.jpg%20%22%29%3Bbackground-position%3Acenter%3B%20background-repeat%3A%20no-repeat%3B%20background-attachment%3A%20fixed%3B%7D%3C/style%3E%20%3Cdiv%20id%3D%22tag%22%20style%3D%22position%3Aabsolute%3B%20left%3A0px%3Btop%3A30px%3B%20width%3A150px%3B%20height%3A50px%3B%22%3E%3Ca%20target%3D%22_blank%22%20href%3D%22http%3A//www.blogdesignsbydani.blogspot.com%22%20title%3D%22http%3A//blogdesignsbydani.blogspot.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//backgrounds.blogdesignsbydani.com/tags/DaniBrown.png%22/%3E%20%3C/a%3E%3C/div%3E"))</script>

Design Elements by Summertime Designs
(from her kit called Falling for Fall)

September 24, 2009

New Backgrounds!

Hey guys! Sorry I've taken a little break for a few weeks. I'm back now and I have some great new backgrounds posted and lots more to come. I found some great scrapbook kits from Summertime Designs that are going to help me make some great new backgrounds. I'm going to make a few more for the fall, some for Halloween and more just for fun, so stop by regularly to check them out.

Are any of you digital scrapbookers? If you are, check out Summertime Designs. Summer Driggs makes beautiful scrapbook kits that are all free for personal use.

Enjoy the new backgrounds and be sure to check which ones you like and which ones you use! Happy Blogging!

Red n Brown Circles



<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3Ebody%7Bbackground-image%3Aurl%28%22http%3A//backgrounds.blogdesignsbydani.com/SummertimeDesigns/Red n Brown Circles.jpg%20%22%29%3Bbackground-position%3Acenter%3B%20background-repeat%3A%20no-repeat%3B%20background-attachment%3A%20fixed%3B%7D%3C/style%3E%20%3Cdiv%20id%3D%22tag%22%20style%3D%22position%3Aabsolute%3B%20left%3A0px%3Btop%3A30px%3B%20width%3A150px%3B%20height%3A50px%3B%22%3E%3Ca%20target%3D%22_blank%22%20href%3D%22http%3A//www.blogdesignsbydani.blogspot.com%22%20title%3D%22http%3A//blogdesignsbydani.blogspot.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//backgrounds.blogdesignsbydani.com/tags/DaniBrown.png%22/%3E%20%3C/a%3E%3C/div%3E"))</script>

Design Elements by Summertime Designs
(from her kit called Apples and Almonds)

Brown Quilted Swirls



<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3Ebody%7Bbackground-image%3Aurl%28%22http%3A//backgrounds.blogdesignsbydani.com/SummertimeDesigns/Brown Quilted Swirls.jpg%20%22%29%3Bbackground-position%3Acenter%3B%20background-repeat%3A%20no-repeat%3B%20background-attachment%3A%20fixed%3B%7D%3C/style%3E%20%3Cdiv%20id%3D%22tag%22%20style%3D%22position%3Aabsolute%3B%20left%3A0px%3Btop%3A30px%3B%20width%3A150px%3B%20height%3A50px%3B%22%3E%3Ca%20target%3D%22_blank%22%20href%3D%22http%3A//www.blogdesignsbydani.blogspot.com%22%20title%3D%22http%3A//blogdesignsbydani.blogspot.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//backgrounds.blogdesignsbydani.com/tags/DaniBrown.png%22/%3E%20%3C/a%3E%3C/div%3E"))</script>

Design Elements by Summertime Designs
(from her kit called Golden Sunshine)

Brown Branches




<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3Ebody%7Bbackground-image%3Aurl%28%22http%3A//backgrounds.blogdesignsbydani.com/SummertimeDesigns/Brown Branches.jpg%20%22%29%3Bbackground-position%3Acenter%3B%20background-repeat%3A%20no-repeat%3B%20background-attachment%3A%20fixed%3B%7D%3C/style%3E%20%3Cdiv%20id%3D%22tag%22%20style%3D%22position%3Aabsolute%3B%20left%3A0px%3Btop%3A30px%3B%20width%3A150px%3B%20height%3A50px%3B%22%3E%3Ca%20target%3D%22_blank%22%20href%3D%22http%3A//www.blogdesignsbydani.blogspot.com%22%20title%3D%22http%3A//blogdesignsbydani.blogspot.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//backgrounds.blogdesignsbydani.com/tags/DaniBrown.png%22/%3E%20%3C/a%3E%3C/div%3E"))</script>

Design Elements by Summertime Designs
(from her kit called Falling for Fall)

Fall Leaves





<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3Ebody%7Bbackground-image%3Aurl%28%22http%3A//backgrounds.blogdesignsbydani.com/SummertimeDesigns/Falling Leaves.jpg%20%22%29%3Bbackground-position%3Acenter%3B%20background-repeat%3A%20no-repeat%3B%20background-attachment%3A%20fixed%3B%7D%3C/style%3E%20%3Cdiv%20id%3D%22tag%22%20style%3D%22position%3Aabsolute%3B%20left%3A0px%3Btop%3A30px%3B%20width%3A150px%3B%20height%3A50px%3B%22%3E%3Ca%20target%3D%22_blank%22%20href%3D%22http%3A//www.blogdesignsbydani.blogspot.com%22%20title%3D%22http%3A//blogdesignsbydani.blogspot.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//backgrounds.blogdesignsbydani.com/tags/DaniBrown.png%22/%3E%20%3C/a%3E%3C/div%3E"))</script>

Design Elements by Summertime Designs and Laitha
(from Summer's kit called Falling for Fall)

September 23, 2009

How to Get a 3-Column Layout

To change your layout to 3-columns, start by backing up your template. To do this:
1. Login to your blog and click Layout
2. Click Edit HTML
3. Click Download Full Template

Next, make sure you have the Minima Template. (By changing it to Minima, any tweaks you have already made in the HTML will be erased. If you know you already have the Minima Template, skip this part.) To do this:
1. On the Layout page, click Pick New Template
2. Click on Minima and Save Template


Now, let's get to the HTML:
1. On the Layout page, click Edit HTML

2. Scroll down in the main box until you find the part that looks like this:

/*Outer-Wrapper
----------------------------------------- */
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font:$bodyfont;
  }

3. Now change the part in read so that it says this:

  width:900px;

4. Right below that section, you should see this:

#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 */
  }

5. Change the part in red and add code so that it looks like this: 

#main-wrapper {
  width: 480px;
  margin-right: 5px;
  margin-left: 5px;
  padding-left: 5px;
  float: right;
  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 */
  }

6. Below that section, find the section that looks like this:

#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 */
  }

7. Change the part in red and add code so that it looks like this:

#sidebar-wrapper {
  width: 190px;
  margin-right: 2px;
  float: left;
  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 */
  }

8. Now, copy and paste the code in step 7 right below itself so that there are two sections called #sidebar-wrapper.

9. Change the duplicated section so that it looks like this:

#newsidebar-wrapper {
  width: 190px;
  margin-left: 2px;
  float: right;
  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 */
  }

10. Now scroll down to the bottom to find the code that says <div id='main-wrapper'>. (If you can't find it, click Ctrl F and copy the code into the search box.)

11. Right above that section, paste the following code:

<div id='newsidebar-wrapper'>
  <b:section class='sidebar' id='newsidebar' preferred='yes'>
  </b:section>
  </div>

12. Finally,  you should change the width of your header. Scroll back up to the top and find the section that looks like this:

/*Header
---------------------------------------- */
#header-wrapper {
  width: 660px;
  margin:0 auto 10px;
  border: 1px solid $bordercolor;
  }

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
  }

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color: $pagetitlecolor;
  }

13. Change the sections in red so that they say the following (only change the borders if you want to remove the border around your header):

/*Header
---------------------------------------- */
#header-wrapper {
  width: 880px;
  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;
  }

14. Preview your template by clicking Preview. If everything looks ok, click Save Template.

15. Click Page Elements and drag some of your sidebar gadgets to your new sidebar and click Save.

16. Click View Blog. You're done!!!

**If you make these changes and it doesn't work, look back through the code that you changed. Most of the code has a semi-colon ( ; ) after each line. If you forget to put those in it won't work.

*If you want to change back to the 2-column layout, move all of your gadgets back to the left-sidebar and then go to Layout and then Pick New Template. Choose the Minima template and Save.