Archived

This topic is now archived and is closed to further replies.

  • 0

How to add extra photo to header on right side + css

Question

Posted · Report post

I've looked at all of these previous example and none have worked for me. 

 

I'm trying to add a picture/image above the social media icons on the right side of the header.

 

I have the pagelines customization plugin installed and am familiar with adding code to .php and .css

 

Just none of the code I have found has worked.

 

I need the php and css for inserting and image and lining it up correctly.

 

Any help is much appreciated.

Share this post


Link to post
Share on other sites

3 answers to this question

Posted · Report post

Hi onlinegrowth
You can add a Hook for add the image.
You can find at
You can see this links to begin:
 
There are a free plugin called "Action Map" which will help you find the proper hook to use. Then, we also have a product called "Hooker" that will allow you to paste your code (once you know which hook to select).  It creates the code for you, so that you don't have to do more than look, select and paste.  Once saved, the hook is done and your shortcode will be functional where you want it.  Positioning it precisely is simply a matter of CSS.
 
This is an example:
 
// ADD IMAGE BEHIND LOGO
add_action('pagelines_inside_top_branding', 'google_leaderboard_ad');
// function name
function google_leaderboard_ad(){
// This hook adds a stumbleupon icon to the header of your theme. The class referenced in the link can be seen in the style.css
// and is the image from the CSS is placed in the images folder
?>
<div class="leaderboard">
<img alt="" src="http://YOUR IMAGE; " />
</div>
<?php }
// end function


Then you can edit the position with CSS rules, like
/*--POSICION LEADERBOARD--*/
#branding .leaderboard {
position: absolute;
left: 450px;
z-index: 28;}

 

 

For move the image as you like

You can try add in

PageLines > Site Options > Custom Code > CSS Rules

or in

Pagelines Customize (plugin)

The "Css rules"

It is advisable to learn how to do this on your own too.  

Check out 

http://support.pagel...ion/custom-css/

 

If you need more CSS help, make sure you've downloaded Firebug for Firefox

and check out W3 Schools for more info. 

http://www.w3schools.com/

Share this post


Link to post
Share on other sites

Posted · Report post

Awesome Batman. Thank you for the information and code!

Share this post


Link to post
Share on other sites

Posted · Report post

No problem, happy to help!

;)

Share this post


Link to post
Share on other sites