Home › Forums › Graphene WordPress theme › Support

Adding two Text widgets to an Action Hook

  • hilmil

    November 10, 2013 at 9:59 pm #8384

    Hi,

    I would like to use an action hook widget to add two HTML image/links, one floating left, the other right, neatly above my header. Since I have two HTML codes for the same Action Widget which I assume is – header.php graphene_container_before , should I use the Advanced method as per Josh’s tutorial or is there an easy way to avoid messing with divs and php?

    Thanks,

    Hillary

    Mod

    Kenneth John Odle

    November 10, 2013 at 10:18 pm #41039
    Quote:
    as per Josh’s tutorial

    You might want to provide a link so we know exactly what you are referring to .

    Quote:
    is there an easy way to avoid messing with divs and php?

    You can avoid messing with php, but if you want two different widgets to appear in two different places, you will need to identify the unique ID for each one and target your css at those id’s.

    hilmil

    November 10, 2013 at 10:39 pm #41040

    Thanks for your quick reply Kenneth. Josh Lobe has several wonderful videos on YouTube relating to Graphene Action Hooks. The advanced tutorial is at http://www.youtube.com/watch?v=NkAik-GZToM

    I’m going to follow it step by careful step as I believe i will need to add functions to my Functions php. as well adding the related codes to my CSS stylesheets.

    Mod

    Kenneth John Odle

    November 10, 2013 at 11:25 pm #41041
    Quote:
    I believe i will need to add functions to my Functions php

    Nope. You can control the placement of widgets strictly with CSS. No PHP needed.

    Quote:
    as well adding the related codes to my CSS stylesheets.

    I hope you mean “Graphene’s Custom CSS feature” or “child theme stylesheet”. You shouldn’t edit theme files directly.

    hilmil

    November 11, 2013 at 12:31 am #41042

    Thanks Ken,

    Is there a link where I can learn how to achieve the placement of those ‘float left and float right’ / ‘above the header’ widgets without php? And yes, I never edit the theme files directly.

    Mod

    Kenneth John Odle

    November 11, 2013 at 12:43 am #41043

    Ah, float is not easy to master. w3 schools has good tutorials and sandboxes: http://w3schools.com/cssref/pr_class_float.asp

    hilmil

    November 11, 2013 at 1:13 am #41044

    The big question now is where do I place my <div id for the two html codes?.. in the <head> section rather than the functions php? I’m really new to coding. Best at cutting and pasting 🙂

    Mod

    Kenneth John Odle

    November 11, 2013 at 1:20 am #41045

    Don’t worry about that.

    Everything in WordPress gets a unique css ID. You can use the Firebug addon for Firefox to find out what that ID is, and then target that ID using custom css.

    That custom css either goes in Graphene’s custom CSS feature, or in your child theme stylesheet. Do not put CSS in a functions.php file; that for php only.

    If you visit my blog with Firebug, you will see that the top widget (“Browser Check”) has an ID of php_widget-11. So if I want to style that widget and that widget only, I will target it with CSS like this:

    #php_widget-11 {property: value;}

    Strictly CSS. No HTML (other than what you enter in the widget itself), and no PHP.

    hilmil

    November 11, 2013 at 1:31 am #41046

    Wow Ken I never knew that! Very helpful. I will do some experimenting tomorrow and will let you know how I make out.

    Cheers,

    Hillary

    hilmil

    November 11, 2013 at 3:02 pm #41047

    Hi Ken,

    Well I gave it a try. It appears that the id’s for my html banners are text-6 and text-8, so I added the CSS codes into Graphene’s Custom CSS feature like this:

    #text-6 {float: left;

    padding-bottom: 10px;

    padding-top: 10px;

    }

    #text-8 {float: right;

    padding-bottom: 10px;

    padding-top: 10px;

    } my id

    It think I’m almost there. The banners are floating left and right, but the’re not sitting directly above the header as I would like. Worse is that now I have a <div id=”top-bar”> bocking the banners. You can see it at http://ecigarettenews.net. It appears differently in different browsers.

    Thanks!

    Hillary

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

  • 1
  • 2
  • You must be logged in to reply to this topic.