Hi!
I’ve always meant to provide some proper tutorials, but haven’t gotten around it – my bad!
Sticking to the demo you’re referring to, I’ve created a new Image Set that contains 3 images related to oranges.
In that same Image Set, as with other image sets, you have the option to add a “Custom Stylesheet” – this is simply CSS code used by web browsers to style web pages. You can read more about it at https://www.w3schools.com/css/, including tutorials. This is where I’ve added CSS code to change the colors, add a vintage paper background to the blog text, etc. The actual code is shown below:
#page {
box-shadow: 5px 5px 5px #333;
background-size: 100% auto;
background-image: url('https://farm7.staticflickr.com/6135/6030107724_05bfedb44c_z.jpg');
}
.entry-content {
text-align: justify;
text-shadow: #fff 0 1px 0;
color: #000;
font-weight: bold;
}
.entry-content {
text-align: justify;
}
#access {
background: #943100;
background: -moz-linear-gradient(#DC7A00,#943100);
background: -o-linear-gradient(#DC7A00,#943100);
background: -webkit-gradient(linear,0% 0%,0% 100%,from(#DC7A00),to(#943100));
background: -webkit-linear-gradient(#DC7A00,#943100);
}
#access li:hover > a,
#access a:focus {
background: #db9300;
}
#site-generator {
background: #E1B867;
border-top: 1px solid #E89421;
}
It does require you to know a bit about the theme you are currently using, in order to know what you need to override using CSS. If you are using Firefox or MSIE, I highly recommend adding the “Firebug” extension to it. If you are using Google Chrome or Opera, these are already built into them (ie., Tools -> Developer Tools in Chrome, use the Elements tab/window).
For instance, the TwentyEleven theme uses an HTML element with id=page to identify the part with the white background and containing the blog text. I changed that using the above code with a background-image pointing to an image of vintage paper by pinkorchid_too at Flickr (it can be any image, hosted anywhere – including from your own Media Library). I also stretched it to fit the whole blog text and added a shadow.
The last step is to tell Background Manager when to use this Image Set. This can be done in various ways. Within the Image Set, in the 2nd column you have the option to override by Category and/or by Tag. So any post that’s within a certain category or tag will be shown this Image Set instead of the default one. The other option is to edit the post as you normally would, where there will be an additional box available (underneath the text editor), providing you the option to select a specific Image Set instead of the default one. Simply select the Image Set you’ve created with the complex override.
Hope this helps! ??
