Sidebar Menu - issues with plugins and Abundance overiding styling « Support Forum | Kriesi.at

Support Forum » Abundance

Sidebar Menu - issues with plugins and Abundance overiding styling

13 posts from 5 voices

Started 11 months ago by pawoodster
Latest reply from Dude
This topic is not resolved

Tags:

pawoodster
Member

Hi,

No matter what plugin I try to use in the sidebar to create a vertical dropdown menu, the abundance theme styling overrides it. Either the dropdown won't funtion properly, part of the menu gets cut off, or I can't tell it what colors or font etc to use. I've tried about 8 different plugins now...jquery, flash, CSS only and nothing is working right with this theme. Disabling all plugins didn't help and when I test them on Twenty Eleven and other themes, they all worked fine.

What code causes Abundance to take over styling of sidebar that makes other plugins not work? Can it be fixed to not override and how? Would greatly appreciate help with this. Been trying different things for a few weeks now.

P.S. Here is the dropdown menu I'm currently trying to use with this theme if you want to test it as a vertical menu in the sidebar.

http://wordpress.org/extend/plugins/dropdown-menu-widget/

Thanks

Posted 11 months ago #
Ismael
Moderator

Hi,

Can you post a link to your site(that has those plugins in the sidebar)? so we can inspect further.

Regards,
Ismael

Posted 11 months ago #
pawoodster
Member

Here is the site link, please remove after testing please http://188.65.112.30/~jpsmachi/

Right now I'm using this http://wordpress.org/extend/plugins/dropdown-menu-widget/ and have it set to a blue gradient theme. Whatever theme style I pick doesn't work and as you can see, the menu is getting cut off in certain places and not displaying correctly.

Another plugin I wanted to use was jQuery Vertical Accordion Menu. That menu styles ok but won't expand or collapse.

Posted 11 months ago #
pawoodster
Member

Any ideas?

Posted 11 months ago #
Ismael
Moderator

Hello,

Try to locate the stylesheet/stylesheets/css use on each plugin. Open the file then copy everything on your custom.css. Custom.css will override any stylesheets that theme have.

You need to be careful because this may break the layout of the theme.

Regards,
Ismael

Posted 11 months ago #
aliciachong
Member

I did exactly what you recommended but it still does not work. the plugin i am using is jquery accordion menu. please advise.
http://www.businessphonezone.com

Posted 5 months ago #
Ismael
Moderator

Hi aliciachong,

I tried to check your site but it keeps on redirecting me to this page: http://www.businessphonezone.com/cgi-sys/suspendedpage.cgi

Regards,
Ismael

Posted 5 months ago #
aliciachong
Member

I checked my websites on 2 different computer with different IP addresses in separate locations - it did not re-direct me to another page. Can you try again?

Posted 5 months ago #

Ismael
Moderator

Hi aliciachong,

I can check it now. Kindly replace the plugin css code that you added in custom.css and replace it with this code:

.dcjq-accordion{font: bold 14px Arial, sans-serif; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc;}
.dcjq-accordion ul, .dcjq-accordion ul li {margin: 0; padding: 0; border: none; list-style: none;}
.dcjq-accordion ul a {padding: 10px 10px 10px 50px; background: #ececec; text-decoration:none; display: block; color: #333; border-bottom: 1px solid #ccc; border-top: 1px solid #fff; position: relative; text-shadow: 1px 1px 1px #fff;}
.dcjq-accordion ul a.dcjq-parent, .dcjq-accordion ul a.dcjq-parent:hover {background: #D7D4D4 url('http://www.businessphonezone.com/wp-content/plugins/jquery-vertical-accordion-menu/skins/images/bg_grey.png') repeat-x 0 -1px;}
.dcjq-accordion ul a .dcjq-icon {position: absolute; top: 50%; left: 14px; width: 34px; margin-top: -17px; height: 34px; background: url('http://www.businessphonezone.com/wp-content/plugins/jquery-vertical-accordion-menu/skins/images/arrow_grey_right.png') no-repeat 0 center;}
.dcjq-accordion ul a.dcjq-parent.active .dcjq-icon {background: url('http://www.businessphonezone.com/wp-content/plugins/jquery-vertical-accordion-menu/skins/images/arrow_grey_down.png') no-repeat 0 center;}
.dcjq-accordion ul a:hover {background: #fff; color: #990000;}

Regards,
Ismael

Posted 5 months ago #

aliciachong
Member

Hi Ismael,

I copied and pasted the codes but nothing happen again.

Posted 5 months ago #
Devin
Moderator

Hi aliciachong,

It looks like the mega menu code is taking over whatever the plugin attempts to output. I'll tag the topic for the head of support as I'm not sure what the best way (or if possible) to prevent that from happening.

Regards,

Devin

Posted 5 months ago #
aliciachong
Member

Thanks looking forward to it - for the meantime, would disabling the mega menu help?

Posted 5 months ago #
Dude
Dude
Afaik you can easily remove the mega menu class from the sidebar menu. Afterwards the mega menu js and css code won't affect the menu widget anymore. Open up abundance/js/avia.js and replace following code (at the very top):
```
jQuery(document).ready(function(){
```
with:
```
jQuery(document).ready(function(){
jQuery('.sidebar .widget .dcjq-accordion .avia_mega').removeClass('avia_mega');
```
Posted 5 months ago #