Home>Support>Format for adding code to widget styles panel

Format for adding code to widget styles panel

I am trying to get rid of the indent and bullets in a recent posts widget. I used the Custom CSS option and it would only remove if it removed from every ul li. I only want this one widget to be like this. Please tell me how to use the right panel in the widget styles section.

Here is my site and the home page where the recent posts lives:

Product Testing

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 9 months ago SiteOrigin
    Hi, I Work Here

    Hi Vicki

    You can fix/change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

    /* Recent Posts Widget */
    
    .widget_recent-posts ul {
    	list-style-type: none;
    	margin-left: 0;
    }
    
    .widget_recent-posts ul li {
    	margin-left: 0;
    }
    

    You might also need to install the SiteOrigin CSS Editor.

  2. 8 years, 9 months ago Vicki Dalton

    Thank you. I will use your suggestion and I am using the CSS Siteorigin plug in editor. However I wanted to learn how to use the right side panel where you can place css code into an attributes section. It is actually part of the widget. Do you know what I am referring to?

    vIcki

  3. 8 years, 9 months ago SiteOrigin
    Hi, I Work Here

    Sure :)

    To confirm, the above CSS will solve your question when inserted at Appearance > Custom CSS.

    Using the Attributes section in row or widget settings requires an understanding of CSS. For an overview, see: Thread: How do Page Builder row attributes work – row class, cell class and CSS styles

  4. 8 years, 9 months ago Vicki Dalton

    Specially my question is how I should format what class I place in the attribute or class panel.

    Do I type the CSS line of code as if in a style sheet? Or do I just type class="xxxx";

    Do I need the quote marks? Do I need the semi colon?

    The side panel in the widget isn't a style sheet it is a form. So I tried various ways to add CSS class to the widget after defining my class in the CSS editor. I want to use the widget panel but can't seem to get the right format down.

    I hope I explained that better this time. I had a hard time following the tutorial sample you sent. I will try again. Thank you.

  5. 8 years, 9 months ago SiteOrigin
    Hi, I Work Here

    Sure. For any Attributes field asking for a class, enter the class name with no period in front of it:

    my-class-name
    

    For any Attributes field asking for styles, enter your style declarations, one per line, no semi colon:

    font-size: 12px
    

    Hope that helps.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More