Grow your CSS skills. Land your dream job.

LavaLamp and WordPress

  • # February 10, 2010 at 12:58 pm

    I’m having a problem getting lavalamp to work in WP. I’ve seen other issues with lavalamp and WP, but I can’t find anything about my issue, and I’ve been pulling my hair out for a couple of days. I’m very new to jQuery and fairly new to WP, so I’m sure I’m just missing something. I was able to get lavalamp to run correctly on my hosted site ( ganns.org ) as a simple HTML/CSS file, but when I move it into WordPress ( wip.ganns.org ) I lose the moving background. My folder structure is identical in both places, and all the supporting files are in their correct folders. Any help would be GREATLY appreciated.

    # February 11, 2010 at 11:58 am

    I thought I would throw my code up here, and hope someone see’s an obvious flaw. The code below is my header.php file at wip.ganns.org .

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    >



    < ?php wp_head(); ?>

    >

    The code below is my CSS file.

    Code:
    /* Styles for the entire LavaLamp menu */
    .lavaLamp {
    position: relative;
    height: 29px; width: 421px;
    background: url(“images/bg.gif”) no-repeat top;
    padding: 15px; margin: 10px 0;
    overflow: hidden;
    }
    /* Force the list to flow horizontally */
    .lavaLamp li {
    float: left;
    list-style: none;
    }
    /* Represents the background of the highlighted menu-item. */
    .lavaLamp li.back {
    /*background: url(“images/lava.gif”) no-repeat right -30px;*/

    width: 9px; height: 30px;
    z-index: 8;
    position: absolute;
    }
    .lavaLamp li.back .left {
    /*background: url(“images/lava.gif”) no-repeat top left;*/
    background-color: #000000;
    height: 30px;
    /*margin-right: 9px;*/
    }
    /* Styles for each menu-item. */
    .lavaLamp li a {
    position: relative; overflow: hidden;
    text-decoration: none;
    text-transform: uppercase;
    font: bold 14px arial;
    color: #fff; outline: none;
    text-align: center;
    height: 30px; top: 7px;
    z-index: 10; letter-spacing: 0;
    float: left; display: block;
    margin: auto 10px;
    }

    Both of these are identical to the index.html and CSS I have running on ganns.org (except for the php fluff at the top of the header file.)

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".