July 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.July 27, 2015 at 3:10 pm #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.July 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-thanksJuly 27, 2015 at 9:01 pm #45203Quote: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.July 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.comJuly 27, 2015 at 11:06 pm #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?July 28, 2015 at 12:40 am #45206
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 postsJuly 28, 2015 at 1:55 am #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.)July 28, 2015 at 3:26 am #45208
Thanks Ken I really do appreciate your helpJuly 30, 2015 at 4:05 pm #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.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
bottom.July 30, 2015 at 6:19 pm #45210
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.comJuly 30, 2015 at 6:30 pm #45211
This this css:
}July 30, 2015 at 6:31 pm #45212
That did it, it looks wonderful! Thanks.July 30, 2015 at 6:58 pm #45213
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!
You must be logged in to reply to this topic.