Several months ago, I've shared a set of code that allows you to customize your Dynamic View posts' background. The tweak was written in a generic note, which allows the code to be changed to fit users' different background preferences.. However, if you're looking for ways to change Dynamic View default post backgrounds to a semi-transparent background, the previous post isn't gonna help much - thus the reason for this week's post. To put simply, this week's tutorial allows you to transform your default post background (plain ol' white) to a slightly transparent version of itself - letting your beautiful background to be seen through your posts. This is a respond to blog reader (and a friend) Bob Kansas.
Go to Dashboard
-Template
-Customize
-Advanced
-Add CSS
-Paste the following code towards the bottom of your 'Add CSS' box
-Press enter after the last character of the last line
-Apply to Blog.
.sidebar .item{
background: #E4E4E4 !important;
}
#items.items li.item, .overview-inner, .magazine #content, .ss .item, .mosaic #content .item, .sidebar #content, #sidebar .item.selected, .timeslide .item, .viewitem-content {
background: url('http://www.blogblog.com/1kt/transparent/white80.png') !important;
}
.overview-panel .article, .magazine #feature, .viewitem-panel .article, .sidebar #content .article{
background: transparent !important;
}
#overview .overview-backdrop{
opacity: 0 !important;
}
Note: If you have existing CSS codes in your 'Add CSS' box, it is very important that the newer code goes towards the bottom of your 'Add CSS' box, not top.. Your CSS code needs to be in a chronological order to avoid accidental over-riding, from top to bottom..
Extra: Fix for Sidebar View
Sidebar view, by default, does not have a background. In other words, making your posts transparent isn't gonna show you anything, as there is no background defined underneath your posts.
Step 1:
To fix this, first, find out the direct link for your background image. This can be done by right-clicking on an empty space using Classic Dynamic View, and choose 'View Background Image', using Firefox web browser.
Step 2:
You will now see your background opened in its direct link. Copy the address that you see in your address bar. This is what I've gotten for mine:
http://themes.googleusercontent.com/image?id=1iPtMo_39vJqJbUnz9JR0nlKBla1Ic3fhOxBAGQ3nDY01LjYZT7YDLt_k1VW2aWqP2czP
Step 3:
Go to Dashboard
-Template
-Customize
-Advanced
-Add CSS
-Paste the following code towards the bottom of your 'Add CSS' box
body.sidebar, #sidebar .items{
background: url('http://themes.googleusercontent.com/image?id=1iPtMo_39vJqJbUnz9JR0nlKBla1Ic3fhOxBAGQ3nDY01LjYZT7YDLt_k1VW2aWqP2czP') fixed center top !important;
}
Step 4:
Change the address in Line 2 above to the address that you've gotten from Step 2. Hit on 'Apply to Blog' once you're done.
Go to Dashboard
-Template
-Customize
-Advanced
-Add CSS
-Paste the following code towards the bottom of your 'Add CSS' box
-Press enter after the last character of the last line
-Apply to Blog.
.sidebar .item{
background: #E4E4E4 !important;
}
#items.items li.item, .overview-inner, .magazine #content, .ss .item, .mosaic #content .item, .sidebar #content, #sidebar .item.selected, .timeslide .item, .viewitem-content {
background: url('http://www.blogblog.com/1kt/transparent/white80.png') !important;
}
.overview-panel .article, .magazine #feature, .viewitem-panel .article, .sidebar #content .article{
background: transparent !important;
}
#overview .overview-backdrop{
opacity: 0 !important;
}
Note: If you have existing CSS codes in your 'Add CSS' box, it is very important that the newer code goes towards the bottom of your 'Add CSS' box, not top.. Your CSS code needs to be in a chronological order to avoid accidental over-riding, from top to bottom..
Extra: Fix for Sidebar View
Sidebar view, by default, does not have a background. In other words, making your posts transparent isn't gonna show you anything, as there is no background defined underneath your posts.
Step 1:
To fix this, first, find out the direct link for your background image. This can be done by right-clicking on an empty space using Classic Dynamic View, and choose 'View Background Image', using Firefox web browser.
Step 2:
You will now see your background opened in its direct link. Copy the address that you see in your address bar. This is what I've gotten for mine:
http://themes.googleusercontent.com/image?id=1iPtMo_39vJqJbUnz9JR0nlKBla1Ic3fhOxBAGQ3nDY01LjYZT7YDLt_k1VW2aWqP2czP
Step 3:
Go to Dashboard
-Template
-Customize
-Advanced
-Add CSS
-Paste the following code towards the bottom of your 'Add CSS' box
body.sidebar, #sidebar .items{
background: url('http://themes.googleusercontent.com/image?id=1iPtMo_39vJqJbUnz9JR0nlKBla1Ic3fhOxBAGQ3nDY01LjYZT7YDLt_k1VW2aWqP2czP') fixed center top !important;
}
Step 4:
Change the address in Line 2 above to the address that you've gotten from Step 2. Hit on 'Apply to Blog' once you're done.
EmoticonEmoticon