How Can I move something in graphene_container_before action hook ??

  • ianizaguirre

    #7510

    How Can I move something in graphene_container_before action hook?

    I put the word “Welcome” To try to move on my site. Right now it appears at the top left…

    What Code could I use to move these words next to the left of the slider, next to it? I cant figure it out using FireBug

    Thank You For all of your Help

    Prasanna SP

    #38493
    #text-29 {
    margin-top: 438px;
    position: absolute;
    z-index: 1;
    margin-left: 35px;
    }

    But why can’t you use the hooks available near the slider area?

    ianizaguirre

    #38494

    because I was going to use the Header Widget Area which I am already for my “Be Happy” Picture that you can see. I used this code

    <div id="header-widget-right">
    <p style="text-align: center;"><img class="aligncenter size-full wp-image-3018" style="border: 0px currentColor;" alt="Be Happy TAG PNG" src="http://iamdentistry.com/wp-content/uploads/2013/05/Be-Happy-TAG-PNG.png" width="35" height="102" /></p>
    </div>

    And in my CSS I have it as the following for the “Be happy Tag”

    /* formats header widget left position for location outside of content area on background*/
    #header-widget-left {
    position: fixed;
    top: 10px;
    left: 10px;
    }
    /* formats header widget right position for location outside of content area on background*/
    #header-widget-right {
    position: fixed;
    top: 10px;
    right: 10px;
    }
    /* formats header widget position general for location outside of content area on background*/
    .header-widget {
    position:fixed;
    top:10px;
    left:10px;
    }

    (As you can see even with position Fixed it still moves, So I am trying a new widget area )

    BUT I cant figure out any way to make the picture or words I put in the text box NOT Move when someone scrolls up or down. I don’t want the image to follow the user, but no matter what I add it stays moving. So I thought of trying this widget area which someone elses also recommended and just moving it into position. But the code you gave me for some reason does not move the words “welcome” at all, it has no visible effect.

    Mod

    Kenneth John Odle

    #38495
    Quote:
    What Code could I use to move these words next to the left of the slider, next to it? I cant figure it out using FireBug

    Graphene and WordPress action hooks aren’t visible through Firebug. You need to have a list of them ahead of time.

    Quote:
    As you can see even with position Fixed it still moves, So I am trying a new widget area

    It’s not the widget area that makes a difference; it’s the css you apply to it.

    BTW, a colon (:) denotes a pseudo-class in CSS and a double color (::) denotes a pseudo-element. However, there is no “selection” or “-moz-selection” pseudo class or pseudo element. You should delete these lines from your stylesheet:

    ::selection {
    color: #fff;
    background-color: #A1C436;
    }

    ::-moz-selection {
    color: #fff;
    background: #A1C436;
    }

    unless, of course, you meant to use them just as a regular class:

    .selection {
    color: #fff;
    background-color: #A1C436;
    }

    -moz- is a vendor prefix; it belongs in the property portion of your declaration, not the selector.

    ianizaguirre

    #38496

    Kenneth, what does that above code that you put for me to change control? I did not add for some reason what it changes, so id like to know before I change it, just in case. Thank you for your help.

    And any ideas of how to fix the css and make it take effect so the welcome moves next to the slider? or how to make the Be Happy tag not move and follow when the user scrolls?

    Mod

    Kenneth John Odle

    #38497

    You are applying this CSS to the “Be Happy” widget:

    #header-widget-right {
    position: fixed;
    right: 0;
    top: 50px;
    }

    position:fixed means fixed in relation to the screen, not the rest of the page. If you want it to scroll along with the rest of that page, just take it out.

    Quote:
    how to make the Be Happy tag not move and follow when the user scrolls?

    #text-29 {
    left: 30px;
    position: relative;
    text-align: right;
    top: 500px;
    }

    But seriously, it would be better to use an action hook that is closer to the slider, maybe. We’re not real sure where you want this.

    ianizaguirre

    #38498

    Thanks for your quick reply, I understand this

    #header-widget-right {
    position: fixed;
    right: 0;
    top: 50px;
    }

    This is what I have had the entire time , this is the full CSS for it

    /* formats header widget left position for location outside of content area on background*/
    #header-widget-left {
    position: fixed;
    top: 10px;
    left: 10px;
    }
    /* formats header widget right position for location outside of content area on background*/
    #header-widget-right {
    position: fixed;
    top: 50px;
    right: 0px;
    }
    /* formats header widget position general for location outside of content area on background*/
    .header-widget {
    position:fixed;
    top:10px;
    left:10px;
    }

    YET Even though it has been like this the be happy tag still moves?

    and the welcome does not move anywhere its like that

    #text-29 {
    left: 30px;
    position: relative;
    text-align: right;
    top: 500px;
    }

    has no effect?

    Mod

    Kenneth John Odle

    #38499

    Here are some examples to help you understand this:

    http://code.kjodle.net/positions/positioning.htm

    If it confuses you, feel free to ignore it.

    ianizaguirre

    #38500

    Thank you for that information I read it and I understand it. My problem is this:

    /* formats header widget left position for location outside of content area on background*/
    #header-widget-left {
    position: absolute;
    top: 10px;
    left: 10px;
    }
    /* formats header widget right position for location outside of content area on background*/
    #header-widget-right {
    position: fixed;
    top: 50px;
    right: 0px;
    }
    /* formats header widget position general for location outside of content area on background*/
    .header-widget {
    position:fixed;
    top:10px;
    left:10px;
    }

    In the last part , the “/* formats header widget position general for location outside of content area on background*/”

    If I change its position to absolute it works BUT I want to keep the right side Fixed like it is. It makes the left and right side absolute, How can I specify just the left side I want absolute, because the way you see the code I put is the way I have it and it only works by changing the last part to absolute?

    Mod

    Kenneth John Odle

    #38501
    Quote:
    If I change its position to absolute it works BUT I want to keep the right side Fixed like it is. It makes the left and right side absolute

    You need to create separate classes and apply them to different widgets.

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

You must be logged in to reply to this topic.