![]() |
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.
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.
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
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;
}
0 comments:
Post a Comment