Return to Support

Would like to add icons in header

Home Forums Graphene WordPress theme Support Would like to add icons in header

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #10039
    jmk909er
    Member

    It’s not a must have but I would like to have social icons in the bottom right of my header. I have this:

    <?php echo DISPLAY_ULTIMATE_PLUS(); ?>

    To manually place them but I don’t know how to format the positioning. Can someone help me with this? I have a header.php in my child theme I can place it or?

    I am including a screenshot. It shows the social icons in a post and I am pointing to where I would also like them in the header.

    social_icons.png

    #45201

    Since it’s a php function, and you already have a header.php in your child theme, I would add it there. This is exactly the kind of thing that child themes were meant for.

    An alternate route, if you decide to get rid of the header.php in your child theme, would be to use Graphene’s built-in header widget area. There are two additional things to keep in mind here:

    1) The header widget is unstyled, so you would need to add some custom css to position it appropriately.

    2) You can’t use PHP in a text widget. You would need to install a PHP widget plugin, and use that instead.

    Moved to Support.

    #45202
    jmk909er
    Member

    Thanks Kenneth I also have this short code that I can use [DISPLAY_ULTIMATE_PLUS]

    And I did try try using the header widget but it put it in the upper left and displayed [DISPLAY_ULTIMATE_PLUS] so I don’t think that would work in the widget.

    I tried playing around putting the php function in different areas of my header.php child and it showed up but in all the wrong places. Can you give me any tips on how I can position it in the lower right? I am not a coder-thanks

    #45203
    Quote:
    And I did try try using the header widget but it put it in the upper left and displayed [DISPLAY_ULTIMATE_PLUS] so I don’t think that would work in the widget.

    Some shortcodes are not designed to work in widgets. (Well, most of them, actually.)

    Quote:
    Can you give me any tips on how I can position it in the lower right? I am not a coder-thanks

    Whatever you are using will (probably) be wrapped in a CSS class or id. If you know what that class or id is, you can target it with some custom css.

    The trouble is finding what that CSS class or id is. You can view the source code for your page (use your browser’s “View Source” function, usually Ctrl + U) or developer tools (F12).

    In Chrome, you can right-click on an element and use “Inspect Element”. To do that in Firefox, you need to add the Firebug extension, which is very handy to have.

    If you add that element in, I’ll be happy to take a look at it for you, but you seem to enjoy learning new things. Hence, the quick tutorial.

    #45204
    jmk909er
    Member

    Hey Ken thanks for the info and you are right I do like the tech nerd stuff and like to learn. I have self taught myself everything I know about HTML (enough to be dangerous) but I know very little about styling, css, classes, etc. I do use Firefox and I have firebug but I am afraid that you are talking over my head about what I am to look for in the source code.

    This is what I see in Firebug:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html class="wf-pontanosans-n4-active wf-active js csstransforms csstransforms3d csstransitions" lang="en-US" prefix="og: http://ogp.me/ns#" xmlns="http://www.w3.org/1999/xhtml">
    <head profile="http://gmpg.org/xfn/11">
    <body class="home blog logged-in admin-bar custom-background two_col_left two-columns customize-support">
    </html

    Is it something you can see on the new site I am building? http://www.joekoppel.clickmoves.com

    #45205

    I’m not seeing anything. Do you have that plugin installed in a widget area somewhere?

    Which plugin is it? Is it available from the WordPress plugin repository?

    #45206
    jmk909er
    Member

    Yes the plugin is called Ultimate Social Media PLUS

    I do have it as a widget in my side bar but it does not have to be used for it to work in the posts

    #45207

    Wow, that plugin is huge. I’ll download it and take a look at it tomorrow. (I’m a few hours ahead of you.)

    #45208
    jmk909er
    Member

    Thanks Ken I really do appreciate your help

    #45209

    Okay, I think I have it figured out:

    Add the plugin to the header:

    If you are using a child theme, copy Graphene’s header.php file into your child theme folder.

    On line 106, add <?php echo DISPLAY_ULTIMATE_PLUS(); ?> (you should see <?php endif; ?> just above it and <?php do_action( 'graphene_header' ); ?> just below it.

    (Alternately, if you are using a PHP widget, you could activate Graphene’s header widget, drag a PHP widget over to it, and add the above code to it.)

    Position the icons:

    Add this to cuscom CSS:

    .sfsiplus_norm_row {
    float: right;
    min-width: 25px;
    position: relative !important;
    }

    .sfsi_plus_widget {
    bottom: -120px;
    min-height: 55px;
    position: relative;
    right: 0;
    }

    Works in localhost; your mileage may vary. Also, if you are using a different header height, you may need to play around with value for bottom.

    #45210
    jmk909er
    Member

    Hey Ken it works great! You are the master! I did need to modify the bottom value to -15 to get it where I want. Is there any way to add a little right padding to it so it’s not hard to the edge? Maybe 15px or so?

    Here is what it looks like now: http://www.clickmoves.com

    #45211

    This this css:

    .sfsiplus_norm_row {
    padding-right: 15px;
    }

    #45212
    jmk909er
    Member

    That did it, it looks wonderful! Thanks.

    #45213
    jmk909er
    Member

    I had to make my header a little taller and my icons a little lower because of the dialog boxes that open when you hover over them but I got it all dialed in now!

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

You must be logged in to reply to this topic.