sidebar boxes disappeared

STLUEE v6 Beta Tester Posts: 1,165 STLUEE inherit Female v6 Beta Tester 233889 0 Aug 24, 2023 5:39:54 GMT -8 STLUEE 1,165 Senior Member June 2016 stluee1	sidebar boxes disappeared Mar 6, 2019 14:51:23 GMT -8 Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by STLUEE on Mar 6, 2019 14:51:23 GMT -8 Forum URL: southernliving.proboards.com/ I changed my calendar events and my side boxes disappeared. The info is still in them. Whats up with that?

Former Member

Posts: 0

sidebar boxes disappeared Mar 6, 2019 15:41:20 GMT -8 Michael likes this

Post by Former Member on Mar 6, 2019 15:41:20 GMT -8

Hello STLUEE,

After reviewing the code in your Sidebar Redux plugin settings in the march section, I noticed on line 36 through 38, there are some open <div> tags that are missing closing tags. Without a closing tag, everything after the March section is affected. Try adding </div> to those open <div> tags to cover up those lose ends.

STLUEE
v6 Beta Tester

Posts: 1,165

sidebar boxes disappeared Mar 7, 2019 6:45:47 GMT -8

Post by STLUEE on Mar 7, 2019 6:45:47 GMT -8

Well I sort of got it fixed. Except the picture isn't fading in and out and the box is way too long! I may have had a scroll code with the fading code but, can't find it.

I had to leave for a bit so I disabled in case support needs to get in and take another look. Thank you.

Last Edit: Mar 7, 2019 6:52:55 GMT -8 by STLUEE

Craig
Support Helper

Posts: 208,883

sidebar boxes disappeared Mar 7, 2019 7:33:25 GMT -8

Post by Craig on Mar 7, 2019 7:33:25 GMT -8

You have some css in the box, but without the <style> tags. So this:

</style>



#the_hover_wrap{
position:relative;
width:400px;
height: 300px;
background-color: white;
opacity: 9;
background-image:url(http://i66.tinypic.com/24me0xx.jpg);
background-repeat:no-repeat;
margin:auto;
}
.hover {
background-color:#bbbbbb;
width: 377px;
height: 376px;
padding:12px;
opacity: 0;
transition-duration: 2s;
-moz-transition-duration: 2s;
-webkit-transition-duration: 2s;
overflow:auto;
}
.hover:hover{
opacity: .9;
}
.my_trans_cont{
font-size:12px;
color:red;
}

Should be changed to:


<style>
#the_hover_wrap{
position:relative;
width:400px;
height: 300px;
background-color: white;
opacity: 9;
background-image:url(http://i66.tinypic.com/24me0xx.jpg);
background-repeat:no-repeat;
margin:auto;
}
.hover {
background-color:#bbbbbb;
width: 377px;
height: 376px;
padding:12px;
opacity: 0;
transition-duration: 2s;
-moz-transition-duration: 2s;
-webkit-transition-duration: 2s;
overflow:auto;
}
.hover:hover{
opacity: .9;
}
.my_trans_cont{
font-size:12px;
color:red;
}
</style>

STLUEE v6 Beta Tester Posts: 1,165 STLUEE inherit Female v6 Beta Tester 233889 0 Aug 24, 2023 5:39:54 GMT -8 STLUEE 1,165 Senior Member June 2016 stluee1	sidebar boxes disappeared Mar 7, 2019 15:19:09 GMT -8 Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by STLUEE on Mar 7, 2019 15:19:09 GMT -8 Where do I put the text? lol

Michael ProBoards Admin Support Manager Posts: 19,550 Michael #e61919 Support Manager Male ProBoards Admin 154778 0 1 May 9, 2024 13:41:35 GMT -8 Michael 19,550 Part of the Furniture May 2010 wiseowl	sidebar boxes disappeared Mar 7, 2019 15:26:14 GMT -8 Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by Michael on Mar 7, 2019 15:26:14 GMT -8 Mar 7, 2019 15:19:09 GMT -8 STLUEE said: Where do I put the text? lol Which text? The code Craig provided?

Michael ProBoards Admin Support Manager Posts: 19,550 Michael #e61919 Support Manager Male ProBoards Admin 154778 0 1 May 9, 2024 13:41:35 GMT -8 Michael 19,550 Part of the Furniture May 2010 wiseowl	sidebar boxes disappeared Mar 7, 2019 18:06:49 GMT -8 Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by Michael on Mar 7, 2019 18:06:49 GMT -8 That would replace the code you have in the "March" box of your side table.

STLUEE v6 Beta Tester Posts: 1,165 STLUEE inherit Female v6 Beta Tester 233889 0 Aug 24, 2023 5:39:54 GMT -8 STLUEE 1,165 Senior Member June 2016 stluee1	sidebar boxes disappeared Mar 7, 2019 18:14:33 GMT -8 Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by STLUEE on Mar 7, 2019 18:14:33 GMT -8 Now I am trying to figure how to put the fading image back over it.

Michael ProBoards Admin Support Manager Posts: 19,550 Michael #e61919 Support Manager Male ProBoards Admin 154778 0 1 May 9, 2024 13:41:35 GMT -8 Michael 19,550 Part of the Furniture May 2010 wiseowl	sidebar boxes disappeared Mar 7, 2019 18:16:49 GMT -8 Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by Michael on Mar 7, 2019 18:16:49 GMT -8 That question would be best in one of the coding boards, this whole thread actually.

STLUEE
v6 Beta Tester

Posts: 1,165

sidebar boxes disappeared Mar 9, 2019 9:58:50 GMT -8

Post by STLUEE on Mar 9, 2019 9:58:50 GMT -8

I got the image right but its back to being squished. Here is the code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
width: 50%;
}

.image {
display: block;
width: 100%;
height: auto;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}

.container:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
</style>
</head>
<body>

<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
<img src=http://i66.tinypic.com/dq109h.jpg alt="Avatar" class="image">
<div class="overlay">
<div class="text"

<div style="width250px;height:150px;line-height:3em;overflow:scroll;padding:5px;">
10 Daylight Savings Time Begins</br>
14 Pi Day (3.14)</br>
15 Ides of March</br>
17 St. Patrick's Day</br>
20 st Day of Spring</br>
21 Purim Begins at sundown. </br>
</div>
"><img src="" width="250" height="309" </div>
</div>
</div>

</body>
</html>

STLUEE v6 Beta Tester Posts: 1,165 STLUEE inherit Female v6 Beta Tester 233889 0 Aug 24, 2023 5:39:54 GMT -8 STLUEE 1,165 Senior Member June 2016 stluee1	sidebar boxes disappeared Mar 11, 2019 19:20:34 GMT -8 Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by STLUEE on Mar 11, 2019 19:20:34 GMT -8 I got it fixed. Thanks.

Post by STLUEE on Mar 6, 2019 14:51:23 GMT -8

Post by Former Member on Mar 6, 2019 15:41:20 GMT -8

Post by STLUEE on Mar 7, 2019 6:45:47 GMT -8

Post by Craig on Mar 7, 2019 7:33:25 GMT -8

Post by STLUEE on Mar 7, 2019 15:19:09 GMT -8

Post by Michael on Mar 7, 2019 15:26:14 GMT -8

Post by Michael on Mar 7, 2019 18:06:49 GMT -8

Post by STLUEE on Mar 7, 2019 18:14:33 GMT -8

Post by Michael on Mar 7, 2019 18:16:49 GMT -8

Post by STLUEE on Mar 9, 2019 9:58:50 GMT -8

Post by STLUEE on Mar 11, 2019 19:20:34 GMT -8