Jump to content
Sign in to follow this  
johnathan

How to add a custom "clickable" image in header

Recommended Posts

johnathan

My website: www.paydattention.com I have a header right now that I really like, and I don't want to change it. I uploaded via the Pagelines setting (Im currently using Framework). I want to add a custom image to the right that is separate from the header and is also clickable. I'm really a rookie when it comes coding and all the other language so if you can, please explain in simple terms. I have the HTML code for the image and it's destination. How would I add this as a separate image in the header from what I already have? Thank you for your help :)

Share this post


Link to post
Share on other sites
Danny
Hi Johnathan, Can you follow the instructions below and then reply here once you have completed them please. 1. Login to your Wordpress Admin Dashboard > PageLines > Templates. 2. Select the "Header Template", then drag and drop the "Universal Sidebar" in to the header and position it above every other section you have in the template. 3. Now navigate to Appearances > Widgets, then add a "Text Widget" to the "Universal Sidebar". 4. The add your HTML code for the image into the "Text Widget". Once you have completed these steps, reply here and we may be able to position it with CSS.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
johnathan
Awesome Danny! Your steps worked perfectly :) Thank you. Okay now my image is above my header ([url]www.paydattention.com[/url] and I would like it on the right next to the "Call Now" and right above the search bar. Please let me know how to do this. Thanks again

Share this post


Link to post
Share on other sites
catrina
http://paydattention.com/wp-content/uploads/2012/02/NewerHeaderLogo1.png <- If this is one entire image file and the left image needs to be put on the right side, that image and the "Call Now" image needs to be separate images. Does that make sense? Or am I misunderstanding your request?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
johnathan
Okay check out the site [url]www.paydattention.com[/url] You see the frame above? I'd like that on the right side in the header right above the search bar. I want this to be separate from the regular header that includes the picture of me, my logo, and the "Call Now" part. Thanks Catrina

Share this post


Link to post
Share on other sites
Danny
Hi Johnathan, Give this a try please: [code]#sb_universal .content-pad{padding: 15px 0 0;} #text-3 {width: 160px;position: absolute;top: 0;right: 0;z-index: 99;}[/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
digsea
Why don't you remove everything from the 'header' area of the template so that you actually completely remove the header from your site. Then drop a 'banner' into the top of the content area, which has the same effect of looking like a header. Then add two separate banners into this banner area; one on the left and one on the right. Sounds to me like this could be a far simpler solution - but I am a non-techie and a first-timer user of this theme so this is all theory!

Share this post


Link to post
Share on other sites
johnathan
Hey Danny, that almost worked! Check it out [url]www.paydattention.com[/url], now is there any way that we can move it down closer to the search bar? Thanks so much!

Share this post


Link to post
Share on other sites
catrina
Just to clarify: What do you want to move down closer to the search bar? The navigation menu or the image?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Danny
Hi Johnathan, In the code I provided you above, simply change top:0px to something like below: [code]#text-3 { width: 160px; position: absolute; top: 5em; right: 0; z-index: 99; }[/code] Have a play with the figure going higher or lower, if you want more control replace em with px

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
johnathan
Beautiful Danny! You're a genius. Thanks for the easy and understanding process. Great customer service!

Share this post


Link to post
Share on other sites
oinegue1960
Hi everybody. Thank you Danny for your code. I've a couple questions for you. (I'm not a coder that's why I choosed Pagelines as excellent theme for my need):) 1)what 'text-3' does it means? (I tested either 'text-1' or 'text-2' as well and they display different than 'text-3') 2) I'm using your code to overlay a flash object to the header of my tester-website and it works fine. The page is 'responsive' at the change of space and resolution by Firefox and IE but the flash object isn't so. It 'floats' its position... where I close the browser's bookmarks bar it moves...where I reopen the bar the object will move again. I'm sure the problem is up to my poor html preparation so any help to understand my bad is much appreciated. Thanks

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×