Add Image behind sidemenu options

  • lordair7

    #4277

    Hello, totally new to website design and have just switched over to WordPress for ease of use. Hoping for some help on http://www.hoodsbasketball.com/2012.

    I would like to place an image behind each link in the menu on the side (fixtures & results, league tables etc), as a button (you can see what I mean on the left column at http://www.hoodsbasketball.com/html/home.html – this was not done with WordPress) The only one I have managed to change put them across the top menu bar! Even if I could just change the white cirlce bullet points to a custom image would be great. I also cannot find where to change the font size for these. Is it possible to have a different menu here dependent on which page you are on?

    I would also like to know how to remove the downward arrow on the top menu bar (next to Junior)but still show the linked pages below when you hover?

    Many thanks for any help on a great theme

    ronangelo

    #27775

    try adding this on your style.css

    .sidebar ul li
    {
    url("path of your background image");
    }

    this will result in the menus having the same background image.

    for font size, add this

    .sidebar ul li
    {
    font-size: 16px;
    }

    to remove the arrow try adding this..

    #header-menu > li.menu-item-ancestor > a
    {
    background: none;
    padding-left: none;
    }

    lordair7

    #27776

    great thank you, I had to tweak it slightly to read

    .sidebar ul li

    {

    background: url(“my image”);

    font-size: 14px!important;

    font-weight: bold!important;

    which then worked well. Is there a way of changing this image when the mouse highlights it? the text changes colour and I would like the image to change slightly

    Also, how do i now get rid of the white circle bullet points to the left?

    Thanks again

    Prasanna SP

    #27777

    Is there a way of changing this image when the mouse highlights it?

    .sidebar ul li:hover {
    background: url("Hover Image");
    }

    lordair7

    #27778

    thank you – just noticed the font and background image has changed for the other widgets (twitter feed and mailchimp) as well – can this be stopped or is it one for all?

    Also, how do I remove those white circles?

    Thank you

    Prasanna SP

    #27779

    Remove all of your css mentioned above and try this,

    (Replace image path with the correct ones)

    #nav_menu-3 .sidebar ul li {
    background: url("Your Image");
    font-size: 14px !important;
    font-weight: bold !important;
    }

    #nav_menu-3 .sidebar ul li:hover {
    background: url("Hover Image");
    }

    lordair7

    #27780

    Sorry didn’t work, just removed the image completely. I have left the code as stated in your most recent reply above

    Thanks

    ronangelo

    #27781

    try to remove the .sidebar like this.

    #nav_menu-3 ul li {
    background: url("Your Image");
    font-size: 14px !important;
    font-weight: bold !important;
    list-style-type: none !important;
    }

    #nav_menu-3 ul li:hover {
    background: url("Hover Image");
    }

    the list-style-type: none; removes the white bullets.

    lordair7

    #27782

    perfect – sorted it. Thank you very much for your help.

    Can I ask another question – As you can see, I have a scrolling sponsors bar in the footer of my page using a ‘Text Widget’. This seems to have affected my footer from the standard – not a problem, just think it could look cleaner. Is there another way of doing this, or a pre-defined widget that you know of with the same functionality. i.e. scrolling images, pause on hover and website link on click.

    Many Thanks

    ronangelo

    #27783

    Do you have a footer.php on a graphene-child folder?

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

You must be logged in to reply to this topic.