december_032.jpg

Blog-City is working on giving us the ability to have full control over our templates.  And I am lucky enough to beta test!  Below is a copy of an email I sent to the Blog-City mailing list.   Keep checking back to see what I come up with!

********* 

• Converts classic blogger templates.  You have to do some cleanup for the parts that point to strickly blogger stuff like the "About Me" section, but that is no biggie.
• The preview is VERY accurate!!!
• The Quick Preference window is nice because you can cut and paste the code.
• The file tab makes adding pictures easy.
• I was able to figure out how to get the whole entry to show up.  By default it just shows the Title.  The tag for the entries has the following:

Taking what we learned from the last two entries, I am going to show you something I used in real life blog design.

With the latest blog redo on my other blog, I wanted the same color background, opacity (see through-ness) and a border around all of the side bar and not just each section.  Then I wanted some space in between the sections of my side bar.  So I created two div tags in my CSS file.  See below:

#all-side
{
   background-image: url();
   background-repeat: repeat-y;
   margin-top: 223px;
   margin-left: 10px;
   padding-left: 10px;
   background-color: #ffffff;
   border: 1px solid black;
    /* CSS3 standard */
   opacity:0.6;
   /* for Mozilla */
   -moz-opacity:0.6;
   filter:alpha(opacity=65);
   width:100%; 
   height:100%;
}

#side-section
   {
   margin-left: 15px;
   margin-top: 10px;
   text-align: left;
   padding-bottom: 5px;
   font: 12px arial;     
   }

In my main file, at the beginning of the code for my side section I put <div id="all-side">, then at the bottom of the whole side section, I put </div>.

Then I decided what areas I wanted to group together and put <div id="side-section"> at the beginning of the section, then </div> at the end of each section.  So the main file looks something like this:

<div id="all-side">
<div id="side-section>

(picture and link to Support Soldiers Angels)
(longhorn picture code)
(code for countdown to football season)
(links to my football posts)
(links to my bio)
(links to this site)
(links to email me)

</div> (This ends the first section)

<div id="side-section>

(blog roll code)

</div> (This ends the blog roll section)

</div>  (This ends the whole side bar - div tag "all-side")

 

   Now it is your turn to try it.  Add two div section to your main CSS file and make a mini section on your sidebar.  Put a border around it all and add two sections with changes in the section code. 

Up next:  My Template Modification Methology

Table of Contents for the Blog Design series is here.

I have redone this site again.  Can you tell what is in the header? 

It has been awhile, but I am back with the next entry in the Blog Design series. 

The next step to understand a div is to think of it as a wedding invatation.  First you have the main envelope with who you are sending it to.  Then inside that you have another envelope to hold both the RSVP card and the actual invitation.  You can do the same thing with divs. 

First you put all your divs in your css file, like so:

#AddressingEnvelope
{
border: medium dashed blue;
padding: 3px;
text-align: center;
}

#MainEnvelope
{
border: medium solid red;
padding: 25px;
text-align: left;
}

#RSVP
{
border: medium dotted green;
padding: 2px;
text-align: left;
font-size: 50%;
}

#Invite
{
border: thick dashed black;
padding: 2px;
text-align: right;
font-size: 50%;
}

Next we add the divs to our main page.

<div id=AddressingEnvelope>
This is the addressing envelope.  It holds everything on the example.

<div id=MainEnvelope>
This is the main envelope.  It holds just the RSVP and actual invite.

<div id=RSVP>
This is the RSVP.
</div> (This ends the RSVP settings.)

<div id=Invite>
This is the Invite.
</div> (this ends the invite settings.)

</div> (this ends the Main Envelope settings.)

</div> (this ends the Addressing Envelope settings.)

 So now look over to my side bar for the section labeled Multive DIV.  Notice the border and how they work?  How the "Addressing Envelope" border is around everything?  Notice the text alignment changes? 

So that is a very simple example of how you can use multiple divs.  My next entry I will give examples that can be used on your live blog.

Table of Contents for the Blog Design series is here.