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.
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.
Step 1:
Go to Template Designer
- Advanced
- Add CSS
- Paste the following code
- Apply to Blog.
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.
Extra:
If you've got a really long line, use the following to force your description into a new line
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.
Step 1:
Go to Template Designer
- Advanced
- Add CSS
- Paste the following code
#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;
}
- Press enter after the last character of the last line
- Apply to Blog.
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)
#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;
}
- Press enter after the last character of the last line
- Apply to Blog.
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;
}
EmoticonEmoticon