Jump to content


Photo
- - - - -

How do I add a content box to header but instead of content have image?


  • Please log in to reply
7 replies to this topic

#1 abdesignco

abdesignco

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 18 April 2012 - 06:10 PM

Hi, I am in the middle of a website design... I wanted to add an image to the About Us page in header off to the right of the logo and below the nav bar. Previously I used the content box plugin for quote on other pages- but would like to add an image and size appropriately instead of text. please look at www.ayistyle.com/reviews for image placement(in space where quote is, but on about-us page). Please help. I need to solve this one quickly. Pagelines is not as intuitive as it is advertised, however the plugins like contentbox have made things easier- I just need one of those for images.

#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 April 2012 - 06:23 PM

The content box doesn't really go into the header. It's intended to provide an area for content, not header information. To add an image in the header other than the branding image, you may use a hook. Please see:

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

Inside the hook, you create a new div with a unique class. That will help you to hide the image on pages other than the 'about us' and align it where you want it. Please let us know if you need additional assistance.

#3 abdesignco

abdesignco

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 18 April 2012 - 06:58 PM

Thanks, which hook do I use? I need more specific instructions. I know the general use of pagelines customize plugin, and also looked up hooks. There is a list and I don't know which one to use. Also- if I can place above content that will work too, as long as I can customize the position.

#4 abdesignco

abdesignco

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 18 April 2012 - 07:27 PM

I followed this post- but what hook do I use? And also class in style.css to position image, etc...

Please Login or Register to see this Hidden Content



#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 18 April 2012 - 08:11 PM

Yes, the hook there works fine, however, before the

Please Login or Register to see this Hidden Content

and right after the , please enclose the div with

Please Login or Register to see this Hidden Content


Then, in your CSS, you'd float it right. You can see it working at my site

Please Login or Register to see this Hidden Content



As for the sidebar, if you really want the ad centered, for example, or you want a big branding image PLUS a leaderboard (728x90px) then the use that method by simple drag n drop in the template. Inside the text widget, again, wrap the image and link code inside a div with a unique class, so you can align it centered.

#6 abdesignco

abdesignco

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 18 April 2012 - 08:24 PM

Right, but what hook do I use? I don't want a link to image, I want an image to appear below nav bar. And, also make it so different images appear on different pages. How would I customize that?

#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 19 April 2012 - 12:34 AM

The hook depends on where you want to place it. Here's a list of them:

Please Login or Register to see this Hidden Content



#8 starlit

starlit

    Advanced Member

  • Members
  • 30 posts

Posted 01 May 2012 - 08:33 PM

@rangelone Thanks for the useful thread so far. I used all of the above just not quiet clear how I get my pic over the social icons. I used the hook 'pagelines_before_branding_icons' and inserted a css floating right. I just can't seem to get it up now. I would love to have it in the swirl 'over' the header image. Please have a look.

Please Login or Register to see this Hidden Content

Some CSS input would be greatly appreciated. Thank you!