how to add a 3 column section on your theme

Some Lovelogic themes - like Himmel and Florae - have a 3 column section near the footer area. This section consists of  3 column gadget areas side by side. If you want to add this feature on your blogger theme, follow the steps below:

Adding the variable code

The variable code is what makes it possible to use the Template Designer to change colors and fonts with no need to edit CSS. The code below will add a font and a color for the titles on the gadgets added to this section.
  1. Go to Theme on the Blogger dashboard vertical menu.
  2. Locate the Customize button and click on the arrow next to it
  3. Click on Edit HTML 
  4. Click anywhere inside the code to enable the search
  5. Use ctrl + F or command + F to open the search box
  6. Search for variables end
  7. Copy and paste the code below above the line highlighted. Click here to see a screenshot.
  8. Save.

Variables code:

<Group description="3-column section">
  <Variable name="columns3.title"
            description="3 columns widget title Font"
            type="font"
            default="normal 13px arial, sans-serif" value="normal 13px arial, sans-serif"/>

  <Variable name="columns3.title.color"
            description="3 columns widget title Color"
            type="color"
            default="#222222" value="#222222"/>
</Group>


Adding the CSS code

I did add comments explaining what every line does, in case you want to adjust something.
To add the CSS:
  1. Still in the HTML code, search for end CSS
  2. Copy and paste the code above the line highlighted. 
  3. Save.

Alternative:
  1. Go to Theme on the Blogger dashboard vertical menu.
  2. Click on the Customize button
  3. Click on Advanced link on the left menu
  4. Scroll the list of theme sections until the end and locate Add CSS
  5. Copy the code below and paste it on the Add custom CSS box
  6. Click on Apply to Blog button.


CSS code:

/*/// -----------------------------------

~   3 columns area

----------------------------------- ///*/

@media screen and (min-width: 50em) {
  .columns-wrap {
    margin: 4em auto 0; /* outside margins around the section. the 4 referres to top and the 0 for bottom. the auto centralizes the section */
    width: 85%; /* width of the section */
    max-width: 1300px; /* maximum width that the section can reach */
  }
}


/* gadget titles */
.columns-wrap h3 { 
  color: $(columns3.title.color); /* title color. to be changed on theme designer */
  font: $(columns3.title); /* title font. to be changed on theme designer */
  letter-spacing: .1em; /* adds space between title letters */
  margin-bottom: .5em; /* adds outside margin on bottom */
  padding: 1em 1em 1em 1em; /* adds inside margin on this order: top, right, bottom, left */
  text-align: center; /* centralizes the title. you can change to right or left */
  text-transform: uppercase; /* makes the title in capital letters. you can change to lowercase or capitalize */
}

/* places the 3 columns side to side */
.c-column-left,
.c-column-center,
.c-column-right {
  display: inline;
  padding: 1em;
  vertical-align: middle;
}

/* for mobile only. places each column one below the other */
@media screen and (max-width: 57em) {
  .c-column-left,
  .c-column-center,
  .c-column-right {
    float: none !important;
    margin: 0 auto;
    width: 100% !important;
    text-align: center;
  }
}


Adding the HTML code

To finish, let's add the columns so that gadgets can be added on the LAYOUT page.

Adding the 3 column section above the footer section

  1. Still in the HTML code, search for <footer class='footer'>
  2. Copy and paste the code below above the highlighted line.
  3. Save.


Adding the 3 column section above the credits text

  1. Still on the HTML code, search for <div class='credits-links clearfix'>
  2. Copy and paste the code below above the highlighted line.
  3. Save.


HTML code:

 <div class='columns-wrap clearfix'>
  <div class='c-column-left' id='c-column-left' style='float:left; width: 33%; margin: 0;'>
   <b:section class='c-column' id='column-1' showaddelement='yes' style='float:left;'/>
  </div>

  <div class='c-column-center' id='c-column-center' style='float:left; width: 33%; margin: 0;'>
   <b:section class='c-column' id='column-2' showaddelement='yes' style='float:left;'/>
  </div>

  <div class='c-column-right' id='c-column-right' style='float:right; width: 33%;'>
   <b:section class='c-column' id='column-3' showaddelement='yes' style='float:right;'/>
  </div>
</div>


Now you can go to LAYOUT page and add the gadgets you want to display on your new 3 column section.

Contact Form