WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Is this possible? (9 posts)

  1. xionkid
    Member
    Posted 3 years ago #

    Is this possible?

    Orginal:
    http://img684.imageshack.us/img684/3079/orgx.png

    What i want to do:
    http://img155.imageshack.us/img155/4268/newgjg.png

    I want to add the button, but how can I lay this over the original nav bar? any idéas?

  2. alchymyth
    Forum Moderator
    Posted 3 years ago #

  3. xionkid
    Member
    Posted 3 years ago #

    I'm not that good at css so if you could give me a hand I would be for ever grateful.

  4. alchymyth
    Forum Moderator
    Posted 3 years ago #

    not with looking at images - possibly looking at the live site with the code for the button already in place.

    can you post a link to your site?

  5. xionkid
    Member
    Posted 3 years ago #

    okey, my site is http://www.fiveforms.org

  6. alchymyth
    Forum Moderator
    Posted 3 years ago #

    you could possibly add the code for the button into this place (header.php ?):

    <div id="header" class="bubbleTrigger">
    
                    <div class="special-button">SPECIAL FILE CODE</div>
    
          <div id="site-title" class="clear-block">

    and use this kind of style as a starting point for formatting:

    .special-button{
    display: block;
    position: absolute;
    z-index: 50;
    top: 170px;
    right: 100px;
    height: 20px;
    width: 100px;
    padding:10px;
    background: #555;
    color:#ddd;
    font-weight:bold;
    }
  7. xionkid
    Member
    Posted 3 years ago #

    okey! that seems worth trying! thanks :) What will the "special file code" be? If I would like to link the button to a page?

  8. alchymyth
    Forum Moderator
    Posted 3 years ago #

    What will the "special file code" be? If I would like to link the button to a page?

    something like:

    <div class="special-button">
    <a href="<?php bloginfo('url'); ?>/pagename/" title="freebie">SPECIAL FILE<span><br/>freebie of the month</span></a>
    </div>

    with styles:

    .special-button{
    display: block;
    position: absolute;
    z-index: 50;
    top: 160px;
    right: 100px;
    height: 40px;
    width: 120px;
    padding:10px;
    background: #555;
    }
    .special-button a {
    color:#ddd;
    font-size: 17px;
    font-weight: bold;
    }
    .special-button a span {
    font-size: 12px;
    font-weight: normal;
    font-style: italic;
    }

    ----
    or turn the button into a graphic ('special-button.png'), and save it in the /images folder of your theme:

    <div class="special-button">
    <a href="<?php bloginfo('url'); ?>/pagename/" title="freebie"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/special-button.png" alt="freebie" /></a>
    </div>

    (untested)

  9. xionkid
    Member
    Posted 3 years ago #

    You are the best! thank you sooo much!! :D

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags