OnPoint Plugins

← Back To Support

Global Styles

Resolved

Requested: 1 year and 10 months ago

Is it possible to set a global style that applies to all Sidebar Menu wigets?

I’m using custom sidebars on different sections of the website and I don’t want to have to custom the widget 10-15 times in order for the styling to be consistent.

Thanks!

  1. There is no inherit way to do this through the plugin, however if you get one setup the way you like and send me a link to it, I can write some global CSS for you that will style all the widgets.

  2. Thanks for the offer Mat.

    Here is an example of how I have it styled:

    https://mesotheliomahelp.cwdevelop.com/navy/ships/aircraft-carriers/

    For some reason there is some heavy indenting of the different levels.

    It also doesn’t fill the whole space when block styling is selected.

    https://www.screencast.com/t/pujCkGbX

    I changed the padding on the list to 0 but that affected the lists on the rest of the site.

    https://www.screencast.com/t/k3rlVJ0xfZ9

    I created a login in case you need it.

  3. Good Morning Joel,

    Here are the global styles based on your current menu settings. I have also taken care of the extra indents. You may the styles to your site any way you like. Here is a tutorial in case you need it.

    .widget-advanced-sidebar-menu li {
    list-style-type: none !important;
    list-style: none !important;
}

.widget-advanced-sidebar-menu .parent-sidebar-menu > li > a {
    color: #ffffff !important;
    background-color: #1f3e5c !important;
    font-weight: normal !important;
    font-size: 14px !important;
}

.widget-advanced-sidebar-menu .child-sidebar-menu > li > a {
    color: #ffffff !important;
    background-color: #1f3e5c !important;
    font-weight: normal !important;
    font-size: 14px !important;
}

.widget-advanced-sidebar-menu .child-sidebar-menu .children li a {
    color: #1f3e5c !important;
    background-color: #d3d3d3 !important;
    font-size: 14px !important;
}

.widget-advanced-sidebar-menu li.page_item.current_page_item > a {
    color: #ffffff !important;
    background-color: #ea861b !important;
    font-weight: bold !important;
    font-size: 14px !important;
}

.widget-advanced-sidebar-menu li.page_item.current_page_parent > a {
    font-weight: bold !important;
    font-size: 14px !important;
}

.widget-advanced-sidebar-menu a {
    display: block !important;
    padding: 5px 25px 5px 10px !important;
}

.widget-advanced-sidebar-menu ul {
    margin: 0 0 1.75em !important;
}

.widget-advanced-sidebar-menu ol {
    margin: 0 0 1.75em !important;
}

.widget-advanced-sidebar-menu ul ul {
    margin: 0 0 0 !important;
}

.widget-advanced-sidebar-menu ol ol {
    margin: 0 0 0 !important;
}

.widget-advanced-sidebar-menu li {
    margin: 0 !important;
    padding: 0 !important
}

.widget-advanced-sidebar-menu li li a {
    padding-left: 20px !important;
}

.widget-advanced-sidebar-menu li li li a {
    padding-left: 30px !important;
}

.widget-advanced-sidebar-menu li li li li a {
    padding-left: 40px !important;
}

.widget-advanced-sidebar-menu li li li li li a {
    padding-left: 50px !important;
}

.widget-advanced-sidebar-menu li {
    position: relative !important
}

.widget-advanced-sidebar-menu .dashicons {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
}

.widget-advanced-sidebar-menu > ul {
    border: 1px solid #e8e8e8 !important;
}

.widget-advanced-sidebar-menu .child-sidebar-menu > li > a {
    border-top: 1px solid #e8e8e8 !important;
}

.widget-advanced-sidebar-menu .dashicons {
    color: #ffffff !important;
}

.widget-advanced-sidebar-menu ul {
    padding-left: 0 !important;
}

  4. Thanks Mat!

    I added the code and the only thing that seems to be missing is the icons next to child pages with grandchildren.

    In my example I was using the arrows.

    How can I get those arrows added in?

  5. The arrows are part of the accordion functionality. To add arrows you may enable accordions through the widget settings on each widget or to make all widgets automatically have this enabled you may add the following code to your active theme’s functions.php file.

    add_action( 'advanced_sidebar_menu_widget_pre_render', 'enable_accordions_on_all' );
function enable_accordions_on_all( $asm ) {
   $asm->instance['enable_accordion'] = 1;
   $asm->instance['accordion_style']  = 'arrow';
}

     

  6. Hey Mat,

    I’m having 1 last issue that I can’t seem to resolve with the plugin.
    The global styles have been applied and are working in most cases.
    However when adding a widget to a page using my page builder, the styles of the menu aren’t applied.
    I added the sidebar menu here:
    Which is being pulled into the page by this widget area:
    The functionality works but the styles aren’t applied.
    They are also being pulled in from their respective widget areas.
    Any ideas to get the styles to remain consistent?

  7. I took a look at the mentioned page and the styles appear to be working now.

    Also the mentioned working page URL currently goes to a 404 page.

    Were you able to get this figured out on your own?

Respond