WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Placing content above Menu (9 posts)

  1. colormechanics
    Member
    Posted 2 years ago #

    Hello!

    I need a bit of help on how to add either an image or a styled paragraph above the menu in this site: roof test

    Upon inspection with Firebug it looks like the area I want to modify is within the <div class="navline"> bit of my header.php, but I'm not quite sure if it is there where I have to enter an img src or my text, or what I would have to modify in the stylesheet.

    Any ideas on how to go about this will be greatly appreciated.

  2. deepbevel
    Member
    Posted 2 years ago #

    is what you need at all like this?

    If so, I have this:

    <img class="alignright size-thumbnail wp-image-478" title="holley_joey" src="http://hollymedbery.com/hollymedbery-wp/wp-content/uploads/2012/04/holley_joey-125x125.jpg" alt="" width="75" height="75"/>
    <p style="float: right; width: 250px; height: 75px;">I donate 10% of every paintings proceeds to the rescue organization of your choice.</p>

    just above this:

    <?php do_action( 'bp_before_access')?>
    <div id="access">
    <div class="menu">
    <?php do_action('bp_menu') ?>

    which is the menu code im my theme's header.

  3. Hi colormechanics,

    It looks like div.navline has a top-margin of 105px. You could put an image inside another div and place it before <div class="navline"> in header.php. The problem with div.navline using margin instead of positioning means that you can't use the space above it. In which case (if it were me), I'd change:

    div.navline {
      float: right;
      margin: 105px auto 0;
      min-width: 62%;
      padding: 0 0 0 29px;
      text-align: left;
    }

    to something like this:

    div.navline {
      float: right;
      min-width: 62%;
      padding: 0 0 0 29px;
      position: relative;
      top: 105px;
      text-align: left;
    }

    I just removed the margin and replaced it with position: relative; and top:105px;. This should allow you to place a div with an img in it just above <div class="navline">. Hope that helps.
    `

  4. colormechanics
    Member
    Posted 2 years ago #

    Yeah @deepbevel, it is something like that. Thanks to you as well @drewapicture, I will try both out and report back with results. And posibly more questions lol.

    Really appreciate your time, this is the firt worpress site I am working on and feel super lost with most of the css stuff...

  5. We're happy to help.

  6. colormechanics
    Member
    Posted 2 years ago #

    Ok, sorry to have taken sooo long, but as I'm css illiterate, took me a while to figure our. @DrewAPicture, thanks a lot!! Changing the .divnavline styling allowed me to use the space above to insert text. Thing is when I inserted the text, the navline went bonkers and moved all over the place I changed values for the .quote_text div I created. Eventually I figured out how to move both and ended up with this:

    I inserted a div class into my header for the text and then styled it in the stylesheet like so:

    div.quote_text {
    float: right;
    display: block;
    text-align: left;
    margin: 5%;
    padding-top: 2%
    padding-right: 2%;
    }

    and the navline div ended up like this:

    div.navline {
    float:right;
    padding:0 0px 0 29px;
    position: relative;
    top: 2px;
    left: 1%;
    text-align:left;
    /*border-left:1px solid #ccc;*/
    min-width:62%;
    }

    But I still need a bit of help!! As now I can't seem to change the color for the "Call us now" bit. I inserted it as h2, and can't override the black color set in the stylesheet, even tried changing it in the header.php with something like <h2 color="ffffff"> but no luck.... any ideas here?

    Thanks a lot again, hope you can come to the rescue in this one too!!

  7. deepbevel
    Member
    Posted 2 years ago #

    This is the html in Firebug:

    <p style="font: xx-large Arial; color: red;">Call us now on 07973 429 945</p>

    I changed it to red and it works in the preview. Perhaps inline css is over riding your stylesheet edits? You might try adding the style inline.

  8. colormechanics
    Member
    Posted 2 years ago #

    Oh yeah, thanks Deepbevel, I was actually using <h2> to insert that text before, which was the one I couldn't style in a different color, and somehow the penny dropped that I should use <p> instead and voila!! I did the code you just pasted, then had to play around with the css styling in the stylesheet, so now it's finally the way I wanted it!!

    Thanks so much for your help!! I really appreciate you guys taking time out to solve the puzzle with me :D

  9. deepbevel
    Member
    Posted 2 years ago #

    wow, I wouldn't have suspected that, figured you could style h in the same way. But maybe not. Good work!

Topic Closed

This topic has been closed to new replies.

About this Topic