Show Description Text in Full in Blogger Dynamic View Templates

Show Description Text in Full in Blogger Dynamic View Templates

Before

After

Happy 2014 folks! Enough with New Year greetings, and back to this week's post. Blog Reader Jerry De Luca was wondering if there is a way to make the description text in Dynamic View blogs to show in full. Yes, it can be done, and here's how.

Step 1:

First, you need to increase the size of your header.Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

#header .header-drawer.sticky, #header .header-drawer  {
top: 59px;
}
  
#header .header-bar{
height: 90px;
}
  
#header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
top: 90px;
}
  
#header-container {
height: 130px;
}
  
.viewitem-panel .viewitem-inner {
top: 25px;
padding-bottom: 45px !important;
height: auto !important;
}
  
#header-container #header.header .header-bar span.title{
height: 90px;
}

Step 2:

Now that you have enough space in your header to add a new line for your description, go ahead and add the following to your CSS. Again, go to Template Designer - Advanced - Add CSS - paste the following code towards the bottom of the box (as in the code in Step 1 should appear on top of this code) - Press enter after the last character of the last line } - Apply to Blog.

#header.header div.header-bar span.title h3{
display: block !important;
}

#header .header-bar .title{
padding-top: 14px;
line-height: 30px !important;
margin-right: 0px !important;
}

Extra:

If you've got a really long line, use the following to force your description into a new line

#header.header div.header-bar span.title h3{
white-space: normal !important;
}