Widgets / Offer Box (Spacing issue)
Hi,
I am experiencing an issue where only some Widgets are spacing out unevenly. The only difference between the working widgets and non-working is that they received an update today. The update consists of renaming one of the existing links, which is nothing much. I have also updated to BeTheme version 20, hoping that is would resolve the issue and it did not. Although, I believe its something with WP.
I think since WordPress introdced the new feature where links in the widgets area are now live, this may be affecting the code somehow.
I am including a screenshot of the items that are not functioning correctly, as well as a page that is working. I am also including the code that I use for the COMMUNICATIONS and CONFERENCES widgets and the the offer_ box div class.
CODE
Link to the page:
http://www.gocabe.org/index.php/communications/
<div class="offer_box">
<h6 style="color: #fff;">COMMUNICATIONS</h6>
<div class="offer_box_list" style="color: #e6af4b;">
<a href="http://www.cabecorner.com/">NEWSLETTER</a>
<a href="http://www.gocabe.org/index.php/cabe-store/">CABE STORE</a>
<a href="http://www.gocabe.org/index.php/calendar/">CALENDAR</a>
<a href="http://www.gocabe.org/index.php/job-corner/">JOB CORNER</a>
<a href="http://www.gocabe.org/index.php/legislative-updates/">LEGISLATIVEUPDATES</a>
<a href="http://www.gocabe.org/index.php/multilingual-educator/">MULTILINGUALEDUCATOR</a>
<a href="http://www.gocabe.org/index.php/news/">NEWS</a>
<a href="http://www.gocabe.org/index.php"><b>[icon type="icon-left-open"] HOME</b></a></div>
</div>
Link to the page:
http://www.gocabe.org/index.php/conferences/
<div class="offer_box">
<h6 style="color: #fff;">CONFERENCES</h6>
<div class="offer_box_list" style="color: #e6af4b;">
<a href="http://www.gocabe.org/index.php/conferences/cabe-2017/">CABE 2017</a>
<a href="http://www.gocabe.org/index.php/conferences/regional-events-2016-2017/">REGIONAL EVENTS 2016-2017</a>
<a href="http://www.gocabe.org/index.php/awards/">AWARDS</a>
<a href="http://www.gocabe.org/index.php/scholarships/">SCHOLARSHIPS</a>
<a href="http://www.gocabe.org/index.php/conferences/cabe-2017-planning-committee/">PLANNINGCOMMITTEE</a>
<a href="http://www.gocabe.org/index.php/conferences/past-annual-conferences/">PASTCONFERENCES</a>
<a href="http://www.gocabe.org/index.php"><b>[icon type="icon-left-open"] HOME</b></a></div>
</div>
Link to the page:
Working Widget: http://www.gocabe.org/index.php/about/
I am experiencing an issue where only some Widgets are spacing out unevenly. The only difference between the working widgets and non-working is that they received an update today. The update consists of renaming one of the existing links, which is nothing much. I have also updated to BeTheme version 20, hoping that is would resolve the issue and it did not. Although, I believe its something with WP.
I think since WordPress introdced the new feature where links in the widgets area are now live, this may be affecting the code somehow.
I am including a screenshot of the items that are not functioning correctly, as well as a page that is working. I am also including the code that I use for the COMMUNICATIONS and CONFERENCES widgets and the the offer_ box div class.
CODE
Link to the page:
http://www.gocabe.org/index.php/communications/
<div class="offer_box">
<h6 style="color: #fff;">COMMUNICATIONS</h6>
<div class="offer_box_list" style="color: #e6af4b;">
<a href="http://www.cabecorner.com/">NEWSLETTER</a>
<a href="http://www.gocabe.org/index.php/cabe-store/">CABE STORE</a>
<a href="http://www.gocabe.org/index.php/calendar/">CALENDAR</a>
<a href="http://www.gocabe.org/index.php/job-corner/">JOB CORNER</a>
<a href="http://www.gocabe.org/index.php/legislative-updates/">LEGISLATIVEUPDATES</a>
<a href="http://www.gocabe.org/index.php/multilingual-educator/">MULTILINGUALEDUCATOR</a>
<a href="http://www.gocabe.org/index.php/news/">NEWS</a>
<a href="http://www.gocabe.org/index.php"><b>[icon type="icon-left-open"] HOME</b></a></div>
</div>
Link to the page:
http://www.gocabe.org/index.php/conferences/
<div class="offer_box">
<h6 style="color: #fff;">CONFERENCES</h6>
<div class="offer_box_list" style="color: #e6af4b;">
<a href="http://www.gocabe.org/index.php/conferences/cabe-2017/">CABE 2017</a>
<a href="http://www.gocabe.org/index.php/conferences/regional-events-2016-2017/">REGIONAL EVENTS 2016-2017</a>
<a href="http://www.gocabe.org/index.php/awards/">AWARDS</a>
<a href="http://www.gocabe.org/index.php/scholarships/">SCHOLARSHIPS</a>
<a href="http://www.gocabe.org/index.php/conferences/cabe-2017-planning-committee/">PLANNINGCOMMITTEE</a>
<a href="http://www.gocabe.org/index.php/conferences/past-annual-conferences/">PASTCONFERENCES</a>
<a href="http://www.gocabe.org/index.php"><b>[icon type="icon-left-open"] HOME</b></a></div>
</div>
Link to the page:
Working Widget: http://www.gocabe.org/index.php/about/
Comments
In addition to this problem, there are two pages were we have multiple sidebars (widgets). These are also malfunctioning as well. In one case, there is no menu displayed on the STAFF page and on the BOARD page the wrong menu is being displayed.
It appears that the WIDGETS / SIDEBAR area is having a major issue. I am providing all of the Sidebars we have, the details of the code that is displaying incorrect—although the code is correct. I have also linked the additional pages above.
In addition to this problem, there are two pages were we have multiple sidebars (widgets). These are also malfunctioning as well. In one case, there is no menu displayed on the STAFF page and on the BOARD page the wrong menu is being displayed.
It appears that the WIDGETS / SIDEBAR area is having a major issue. I am providing all of the Sidebars we have, the details of the code that is displaying incorrect—although the code is correct. I have also linked the additional pages above.
LINK:
http://www.gocabe.org/index.php/about/staff/
/* Offer box */
.offer_box { text-align: left; background: #e6af4b; padding: 10px; }
.offer_box h6 { text-align: center; }
.offer_box .offer_box_list a { display: block; border-style: solid; border-color: rgba(255,255,255,.5); border-width: 1px 1px 0 1px; background: url(http://www.resources.gocabe.org/wp-content/uploads/2015/06/home_interactive_offerbox_icon.png) no-repeat 10px 15px; padding: 10px 8px 10px 25px; font-weight: 500; color: #fff; font-size: 16px; letter-spacing: 1px; }
.offer_box .offer_box_list a:last-child { border-width: 1px; }
.offer_box .offer_box_button { padding-top: 20px; background: url(http://www.resources.gocabe.org/wp-content/uploads/2015/06/home_interactive_offerbox_sep.png) no-repeat center top; text-align: center; }
.offer_box .offer_box_button a.button { margin: 0; }
@media only screen and (min-width: 768px) and (max-width: 959px) {
.offer_box .offer_box_list a { padding: 18px 15px 18px 15px; font-size: 13px; background: none; }
}
Thank you for your response. The page you reference is not having an issue. However, what ever page I edit, the sidebar menu borders get all wierd. You can compare the About page in your screenshot with the one below and you will see what I mean. Look closely at the circled menus in the screenshot, or visit the following pages:
http://www.gocabe.org/index.php/about/cabe-board/
http://www.gocabe.org/index.php/conferences/
I also want to point out that I can't edit some pages. For example, our Staff page, none of the changes I make under layou they do not save at all. To add to this, the sidebar that is assigned is not showing up. I'll add a second image to show what I mean.
http://www.gocabe.org/index.php/communications/
Just to confirm, I just went into the 'Widgets' area and randomly selelecteda known working sidebar. I made no changes to the code and clicked on 'Save.' As a result, the sidebar on the PARENTS page is now havign the same issue with the borders being all off.
So, it appers I can repliacte the problem, even though I am making no changes to the code. Here is the latest page that is affected:
http://www.gocabe.org/index.php/parents/
Issues with Rich Text Editor
https://christinacreativedesign.com/how-to-bulk-replace-the-4-8-wordpress-text-widget-with-the-classic-text-widget/