Archived

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

  • 0

Static Image over Feature Slider

Question

Posted · Report post

Hello!  Working on a site and I'd like to add a hanging banner image on top of the feature slider so that the feature slider will rotate through on the home page but the banner image will remain, "hanging" from the top right corner.  I'm just not sure how to go about adding this.  Not sure if there is a way to do this with strictly css or if I'm going to have to add via php or something.  ???  Any direction would be much appreciated!

 

The temp site is: http://ashleylinares.com/aha

 

Image: http://ashleylinares.com/aha/wp-content/uploads/2013/03/call_hanger2.png

 

 

Thanks in advance!

Share this post


Link to post
Share on other sites

8 answers to this question

Posted · Report post

I would say try putting the image inside it's own div in the hook, then you can control it with css and edit the margin/z-index of the image.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

I've never tried this, but this seems like it should be possible. However, not being a developer, I couldn't begin to explain how. My best guess is to replace the background image (not the slide -- the one that provides the shadow) with your image, specifically positioned and with a unique z-index. I wish I could be more help.

 

Since this is a customization, I'd recommend hiring one of our Pro developers who might be able to set this up for you quickly.

Share this post


Link to post
Share on other sites

Posted · Report post

Same problem when I use #features.

 

I installed Hooker. I can get the image to appear using the 'pagelines_outer_features' but when I try to adjust the margin the space just goes white.  Nothing shows when using the 'pagelines_feature_media_top' hook - I don't see that hook in the Action Map.

Share this post


Link to post
Share on other sites

Posted · Report post

Nope.  No luck.  Still won't bump up the feature slider behind the image.... just bumps up the white space, even when using only #features, #feature_slider, or #feature_area.  Using #cycle bumps up the slider but it cuts it off rather than displaying behind the image.  (See screenshot)

 

http://ashleylinares.com/aha/wp-content/uploads/2013/03/aha_screenshot1.jpg

Share this post


Link to post
Share on other sites

Posted · Report post

I figured out a work around... maybe.  I added the banner into the universal sidebar and added that to the top of my home page template.  Then, I made the universal sidebar background transparent.  I figured I could bump up the top margin of the feature slider and set z-indexes to have the banner sitting on top of the features.  But I can't seem to get the features any higher... it just pulls the white background.  Any ideas on that?  I really appreciate the help!!!

 

Site: http://ashleylinares.com/aha

 

Code So Far:

#sb_universal .content .content-pad {
padding: 0px;
background: transparent;
float: right;
position: relative;
z-index: 100;
}

#features .content .content-pad {
padding: 0px;
position: relative;
z-index: 1;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Nevermind!  #feature-area did the trick!!  Too much time spent looking at code (was using #feature_area - oops!).  Thank you for your help!  Using the hook and putting it in a div did the trick!!!

Share this post


Link to post
Share on other sites

Posted · Report post

Glad that worked Anlinares :-)

Share this post


Link to post
Share on other sites

Posted · Report post

The only ways I can think you might be able to do this would be to use a negative margin on the #features. Just use the id instead of adding the .content and other classes, see if that pulls the whole section up.

 

Of maybe look into using a hook within the feature slider to add the content into the slider? There's a hook for pagelines_feature_media_top you could try.

 

If you're new to hooks you could use the hooker plugin - http://www.pagelines.com/store/plugins/hooker/ then you can try and paste in the html for you image directly into the hook and position it with css.

Share this post


Link to post
Share on other sites