Background Manager
Complex override (3 posts)

  1. daveralph
    Posted 3 years ago #

    Hi, im sorry if its already been posted , but can you tell me how its possible to do the complex override as you see on this page

    Im not worried about changing colours, although if you could show me code for that, it might come in useful
    But i want to have a background image (which works great) and then also a page background that may complement it (like ont he example)
    How is this added to the page, can you please show me the code, then i can edit for my site
    Thanks, this is an awesome plugin!


  2. myatu
    Plugin Author

    Posted 3 years ago #


    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 http://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('http://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! :)

  3. Jenny Beaumont
    Posted 3 years ago #

    Hi there,

    just seeing this after posting my question about aligning the images. although now I see where to do it, am still struggling with the how. using background-position doesn't seem to be enough to override it...again, am trying to align an image to the bottom.



Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic


No tags yet.