Sidebar Coding Help

[christy25]

So I don't know if anyone else has been having this problem (there's a lot to sift through) but for whatever reason I am having trouble getting codes to work for my Sidebar Redux plugin... 

For example:

I'm trying to get text to appear on hover over one of the images but I cant get the codes to work for me... :/

So under ADMIN>ADVANCED STYLE AND CSS>STYLE SHEET at the very bottom I posted:

.hover-container { width: 75px; height: 150px; background-size: cover; background-position: center center; }

.hover-content { opacity: 0; -webkit-transition-duration: 1s; transition-duration: 1s; -moz-transition-duration: 1s; }

.hover-container:hover .hover-content { opacity: 1; -webkit-transition-duration: 1s; transition-duration: 1s; -moz-transition-duration: 1s; }





And in the content box in PLUGINS>MANAGE>SIDEBAR REDUX>LEFT SIDEBAR I posted:

<br>

<center><div class="hover-container" style="background-image:url('http://i.imgur.com/pxGXQnE.jpg');">

   <div class="hover-content">CHRISTINA</div></div></center><br>

And this is what I've been getting...




I've been away for proboards for a while and coding was never my strong suit so any advice is welcome! 

[Tumbleweed]

Hey christy25 ,

It's always a good idea to give each of your side table boxes an id. There is a place for that in the plugin and then preface your css with that ID. But you should be able to just do this as well:


#sidebarr-left .hover-container {width: 75px; height: 150px; background-size: cover; background-position: center center;}
#sidebarr-left .hover-content { opacity: 0; -webkit-transition-duration: 1s; transition-duration: 1s; -moz-transition-duration: 1s;}
#sidebarr-left .hover-container:hover .hover-content { opacity: 1; -webkit-transition-duration: 1s; transition-duration: 1s; -moz-transition-duration: 1s; }


Normally, with a id for each "box" you'd then replace the #sidebarr-left with whatever id. The reason it probably isn't working right is there are so many "containers" and "content" in the templates that the browser gets confused (lol) so you just want your css to target that one area, the side table and better yet the individual box in the side table.

Hope that makes sense but what I posted should be good enough unless you have a bunch more .hover-container's/.hover-content floating around in your side bar. Oh, if you are using the right side then it should be #sidebarr-right. (Couldn't tell by what you posted.)

[christy25]

Hi Tumbleweed

Yes it was the left side bar and this should be my only hover since I haven't been able to get any of them working... also I have tried the code using the #sidebarr-left and #admin (what I IDed the box as) and I'm still getting the same results... The box is set on style one and I even have the style tags plugin installed...

It's weird because it looks right in the preview pane but when I refresh the screen it still looks exactly the same...

[Tumbleweed]

Apr 30, 2016 15:18:33 GMT -8 christy25 said:

Hi Tumbleweed

Yes it was the left side bar and this should be my only hover since I haven't been able to get any of them working... also I have tried the code using the #sidebarr-left and #admin (what I IDed the box as) and I'm still getting the same results... The box is set on style one and I even have the style tags plugin installed...

It's weird because it looks right in the preview pane but when I refresh the screen it still looks exactly the same...

You did say left side bar in your first post so I apologize for overlooking that.  Is that all you have in the content area of that side table box? I ask because I installed what you have on my test site and it seems to work fine (with the addition I suggested to the css): putteraround10.freeforums.net/

I may need a link to your site but if you don't want to go public with a link, you can pm me the link.

Edit: Christy pm'd me her link and we worked it out via pm mainly because we forgot to come back to this thread. Am labeling as complete.