Jump to content


Photo
- - - - -

Static Image over Feature Slider


Best Answer James B , 21 March 2013 - 03:58 AM

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.

Go to the full post


  • Please log in to reply
8 replies to this topic

#1 anlinares

anlinares

    Super Member

  • Members
  • 228 posts
  • Country: Country Flag

Posted 18 March 2013 - 09:28 PM

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!



#2 Rob

Rob

    One Smart Egg

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

Posted 18 March 2013 - 10:05 PM

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.



#3 anlinares

anlinares

    Super Member

  • Members
  • 228 posts
  • Country: Country Flag

Posted 19 March 2013 - 08:12 PM

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



#4 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 20 March 2013 - 04:06 AM

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.



#5 anlinares

anlinares

    Super Member

  • Members
  • 228 posts
  • Country: Country Flag

Posted 20 March 2013 - 07:49 PM

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.



#6 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 21 March 2013 - 03:58 AM   Best Answer

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 likes this

#7 anlinares

anlinares

    Super Member

  • Members
  • 228 posts
  • Country: Country Flag

Posted 22 March 2013 - 07:42 PM

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



#8 anlinares

anlinares

    Super Member

  • Members
  • 228 posts
  • Country: Country Flag

Posted 22 March 2013 - 09:41 PM

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



#9 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 22 March 2013 - 10:28 PM

Glad that worked Anlinares :-)