How to put a background-image into right sidebar with 'categories'

  • Maciej



    Any help, how to change this (marked with red circle)


    and instead of black (or whatever other colour) put there image ?



    Add this to Custom CSS,

    .sidebar h3 {
    background: url("");

    Replace URL with correct path of your image.



    Unlucky its not working πŸ™

    i have tried to resolve it by changing graphene’s style.css

    .sidebar h3 {

    background: url(images/jelly.jpg)

    left bottom repeat-x #3C9CD2;

    background: -moz-linear-gradient(#3C9CD2, #1F6EB6);

    background: -webkit-linear-gradient(#3C9CD2, #1F6EB6);

    background: -o-linear-gradient(#3C9CD2, #1F6EB6);

    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorStr=’#3C9CD2′, EndColorStr=’#1F6EB6′)”;

    background: linear-gradient(#3C9CD2, #1F6EB6);

    border-bottom: 1px solid #195392;

    -moz-border-radius: 5px 5px 0 0;

    -webkit-border-radius: 5px 5px 0 0;

    border-radius: 5px 5px 0 0;

    color: #fff;

    *display: inline;

    font: 18px/20px “Pontano Sans”, arial, sans-serif;

    margin: -15px 0 5px -12px;

    padding: 7px 12px;

    text-shadow: 0 -1px 0 #333;

    width: 100%;

    zoom: 1;


    but still no effect (that link looks like now cuz i’m workin on ‘localhost’ xampp, before i change it it was : background: url(images/bg-sidebar-h3.png) left bottom repeat-x #3C9CD2; )

    so clearly i have changed just link to this image, and put ‘jelly.jpg’ into folder where bg-sidebar-h3.png was


    Syahir Hakim


    Don’t edit the theme’s files, even the style.css file. Instead, copy and paste the code Prasanna gave you either to the theme’s Custom CSS option or to your own child theme’s style.css file.



    its not a solution

    Of course im using child theme, but code which Prasanna gave me dont work. So i wanted to check if the original graphene code edit will handle it

    but still no effect




    .sidebar h3 {
    background: url("") !important;



    that works

    thanks πŸ™‚



    Ok, one more thing

    I have 2 categories, and all i want is to put different background for each of them. How to do it ?

    now it looks like :

    The same bg for ‘newsy’ and ‘artykuly’. I want different bg for each of them πŸ˜‰



    Each widget (div) has an unique ID. For, artykuΓ…β€šy it’s text-8. So, you can change its h3 background like this,

    #text-8 h3 {
    background: url("") !important;

    Use firebug Firefox extension to find widget IDs. There are handful of tutorials about using firebug in the net.



    Cheers mate. Yep i’m currently using firebug πŸ™‚

Viewing 10 posts - 1 through 10 (of 10 total)

  • You must be logged in to reply to this topic.