WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Rollover image

[Resolved] Rollover image

  • Ricardo
    Member

    @r1cardo01

    I want to add 3 rollover image’s (logo’s) vertically next to my right sidebar (On the background). But how do I make that work. I have the button’s (normal and hover) on my file server, but all the tutorials I find are for HTML websites, and I only have PHP files.

    Can someone please help me out?

    My site http://www.fastforwardandrewind.com

Viewing 5 replies - 1 through 5 (of 5 total)
  • Kathryn
    Automattic Happiness Engineer

    @zoonini

    You can use the rollover tutorials you found. Even though your theme files have .php extensions, they are actually a mix of PHP and HTML code. You can still use HTML rollover code on them as you would on any HTML site.

    Ricardo
    Member

    @r1cardo01

    I want the rollover image’s on my background, In what file should I put the HTML code? Index.php?

    Michael
    Forum Moderator

    @alchymyth

    you probably need to start by adding the html code to header.php.

    (depending on your code)

    give them some unique css classes; and add the styles for the positions, sizes, and image hover into style.css of your theme.

    Ricardo
    Member

    @r1cardo01

    Thanks! 🙂

    Ricardo
    Member

    @r1cardo01

    It worked locally with this code:
    In the header, under the body tag:
    <div id="twitter"></div><!

    In my child-theme stylesheet:

    #twitter {
    	background:url(http://www.fastforwardandrewind.com/buttons/twitter.png);
    	width:70px;
    	height:140px;
    }
    #twitter:hover {
    	background:url(http://www.fastforwardandrewind.com/buttons/twitter.png);
    	width:70px;
    	height:140px;
    	background-position:0 -70px;
    }

    But when I added it to the on-line version of my site, the entire lay out of the page went wrong. Can somebody please help me? I really want this to work. (The buttons needs to hover over my background, on the right side next to the sidebar)

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Resolved] Rollover image’ is closed to new replies.