8 replies to this topic

[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:

Please Login or Register to see this Hidden Content

 

Image:

Please Login or Register to see this Hidden Content

 

 

Thanks in advance!

[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

Please Login or Register to see this Hidden Content

who might be able to set this up for you quickly.

[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:

Please Login or Register to see this Hidden Content

 

Code So Far:

Please Login or Register to see this Hidden Content

[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 -

Please Login or Register to see this Hidden Content

then you can try and paste in the html for you image directly into the hook and position it with css.

[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.

[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.

[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)

 

Please Login or Register to see this Hidden Content

[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!!!

[James B]

Glad that worked Anlinares :-)