Jump to content
Sign in to follow this  
anlinares

Static Image over Feature Slider

Recommended Posts

anlinares    1
anlinares

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
anlinares    1
anlinares

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
anlinares    1
anlinares

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
James B    436
James B

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.

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
anlinares    1
anlinares

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
anlinares    1
anlinares

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
James B    436
James B

Glad that worked Anlinares :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

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  

×