Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

List Style in Accordions

  • Hi, I use the following CSS to style the <li> of my content:

    .entry-content>ul {
        list-style: none;
        margin-left: 0;}
    
    .entry-content>ul>li {
        position: relative;
        padding-left: 20px;}
    
    .entry-content>ul>li:before {
        content: '';
        display: block;
        width: 9px;
        height: 9px;
        border-radius: 2px;
        background-color: #39ba32;
        position: absolute;
        left: 0;

    I would like to know how I can apply this style in the <li> that I apply inside the new GenerateBlocks accordions. Thank you so much,

  • Hi Garrigui,

    For clarity, can you edit your topic and place all code in code tags? See: https://share.getcloudapp.com/L1uDZN41

    Some of the text of your message seems to be missing.

    Also, for support, can you add your support key for GenerateBlocks Pro to your account here?

  • Hi, I use the following CSS to style the

    .entry-content>ul {
        list-style: none;
        margin-left: 0;}
    
    .entry-content>ul>li {
        position: relative;
        padding-left: 20px;}
    
    .entry-content>ul>li:before {
        content: '';
        display: block;
        width: 9px;
        height: 9px;
        border-radius: 2px;
        background-color: #39ba32;
        position: absolute;
        left: 0;
        top: 7px;}

    I would like to know how I can apply this style in the

    that I apply inside the new GenerateBlocks accordions. Thank you so much,

  • Hi there,

    can you share a link to your site where we cans see the issue ?

  • Until now I used the plugin Lightweight Accordion, but with the incorporation of the accordions in GenerateBlocks I would like to know to which class I should apply the style that I have shown you.

    An example of styling lists with the Lightweight Accordion plugin is this:
    https://www.banyeresdelpenedes.cat/ajuntament/horaris/

    And I’d like to apply it to a page like this that uses the new GenerateBlocks accordions:
    https://www.banyeresdelpenedes.cat/temes/medi-ambient/analitiques-aigua/

    The style I use for the lists (<li) is this:

    .entry-content>ul {
        list-style: none;
        margin-left: 0;}
    
    .entry-content>ul>li {
        position: relative;
        padding-left: 20px;}
    
    .entry-content>ul>li:before {
        content: '';
        display: block;
        width: 9px;
        height: 9px;
        border-radius: 2px;
        background-color: #39ba32;
        position: absolute;
        left: 0;
        top: 7px;}

    Thanks!!

  • Ok, this:

    .entry-content ul {
        list-style: none;
        margin-left: 0;}
    
    .entry-content ul>li {
        position: relative;
        padding-left: 20px;}
    
    .entry-content ul>li:before {
        content: '';
        display: block;
        width: 9px;
        height: 9px;
        border-radius: 2px;
        background-color: #39ba32;
        position: absolute;
        left: 0;
        top: 7px;
    }
  • Thank you very much David, it works perfectly.

    Finally, I would like to know how I can remove the bottom margin that exists within the content of the accordions, so that it is at the same distance as the top margin.

    Example: https://www.banyeresdelpenedes.cat/municipi/entitats/

    Thank you so much,

  • You can remove the bottom margin from the last list inside accordion content with this CSS:

    .entry-content .gb-accordion__content ul:last-child {
        margin-bottom: 0;
    }
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.