Saturday, January 4, 2014

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. If you have implemented my other tweak on applying a header image on your DV blog, you could skip this step. Otherwise, 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;
}

Elm0D

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

0 comments:

Post a Comment

Navigate» Become author for this Blog

Manual Categories