Would like to add icons in header
AnonymousJuly 27, 2015 at 3:30 am #10039
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.Mod
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.
AnonymousJuly 27, 2015 at 3:32 pm #45202
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-thanksModQuote: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.
AnonymousJuly 27, 2015 at 10:21 pm #45204
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">
<body class="home blog logged-in admin-bar custom-background two_col_left two-columns customize-support">
Is it something you can see on the new site I am building? http://www.joekoppel.clickmoves.comModMod
AnonymousJuly 28, 2015 at 3:26 am #45208
Thanks Ken I really do appreciate your helpMod
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.phpfile 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:
position: relative !important;
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
You must be logged in to reply to this topic.