Tagged: 

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • April 14, 2017 at 10:52 am #777764
    Trystan

    Dear Kriesi team,

    I was just trying to implement a custom ol style to a list I have. The code should work within a section with 3 tabs.

    Unfortunately though every time I try to add my custom ol style including spans, the custom HTML is reverted to a standard ol style format when I hit save.

    This is the HTML I want to implement:

    <div>

    1. <span>1.</span><p>Lorem ipsum dolor sit amet</p>
    2. <span>2.</span><p>Lorem ipsum dolor sit amet</p>
    3. <span>3.</span><p>Lorem ipsum dolor sit amet</p>

    </div>

    Once I hit save though, the following code is saved:

    <div>

    1. 1.Lorem ipsum dolor sit amet
    2. 2.Lorem ipsum dolor sit amet
    3. 3.Lorem ipsum dolor sit amet

    </div>

    The CSS that should go along with this to style the list the way I like goes like this:

    div {
    width: 500px;
    margin: 10px
    }

    ol {
    color: #ccc;
    list-style-type: none;
    }

    ol li {
    position: relative;
    font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif;
    margin-bottom: 20px;
    }

    li p {
    font: 12px/1.5 Helvetica, sans-serif;
    padding-left: 60px;
    color: #555;
    }

    span {
    position: absolute;
    }

    The code and how it should look like can be found here:

    My question to you: what do I need to do, to implement a custom ol style like on the code repository to my ordered list in my tab element?

    Attached you will find the website I am referring to, as well as the login credentials.

    Thanks in advance for the help!

    Best regards,
    Felix

    April 16, 2017 at 2:40 am #778337
    Mike

    Hey Felix,
    I was able to do this on my localhost:
    postimage
    It is not exactly what you wanted, but maybe you can use it.
    First use the “code block element” were you want the list. Then use this code for your list:

    <ol>
    <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p></li>
    
    <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.  </p></li>
    
    <li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur.  </p></li>
  </ol>

    Then use this css code in the General Styling > Quick CSS field:

    
ol {
color: #ccc;
list-style-type: none;
}

ol li {
position: relative;
font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif!important;
margin-bottom: 20px!important;
}

li p {
font: 12px/1.5 Helvetica, sans-serif!important;
padding-left: 3px!important;
top: -5px!important;
position: absolute; 
color: #555;
}

    Hope this helps :)

    Best regards,
    Mike

    April 16, 2017 at 10:53 am #778400
    Trystan

    Hi Mike,

    Thank you! Your screenshot looks really great!

    The problem in my case though is the implementation. I cannot use the code block unfortunately because I want to use the ordered list within a tab element.

    Can you take a look at the site and tell me if there is a way to implement this style within the tab element?

    Thank you!

    Felix

    April 16, 2017 at 3:44 pm #778434
    Mike

    Hi,
    I might be able to do that with some custom css, but it would be page specify, and it would affect all bullets on that page. Can you create the page and element for me to work with?
    Best regards,
    Mike

    April 18, 2017 at 9:23 am #779137
    Trystan

    Hi Mike,

    OK, I understand. That’s not ideal, but let’s try it please.

    Attached you will find the credentials to the site. Is there anything else you need?

    Best regards,
    Felix

    April 19, 2017 at 6:29 am #779785
    Ismael

    Hi,

    We created an example in a test page. (see private field)

    Best regards,
    Ismael

    April 19, 2017 at 7:18 am #779817
    Trystan

    Dear Ismael,

    Thanks a lot! It looks really good, but is there no
    Way to add this code within a tab element? I tried it and it didn’t work unfortunately :(

    April 20, 2017 at 5:44 am #780293
    Ismael

    Hey!

    It’s possible but you have to add the following css code.

    .tabcontainer .custom_list li {
    position: relative;
    font: bold italic 13px/1.65em Helvetica, Verdana, sans-serif;
    margin-bottom: 20px;
    font-weight: normal;
    font-style: normal;
    color: #555;
}

.tabcontainer .custom_list li span {
    font-size: 45px;
    position: relative;
    color: #ccc;
    margin-right: 5px;
}

    Best regards,
    Ismael

    April 20, 2017 at 10:58 am #780438
    Trystan

    Hey Ismael,

    Thank you! I added the code to my quick CSS, but it doesn’t seem to work unfortunately :(

    It does work, but there is the “normal” ordered list first, then comes the styled ordered list. I would like to get rid of the “normal” ordered list.

    How would you do that?

    Best regards,
    Felix

    April 21, 2017 at 6:29 am #780984
    Ismael

    Hey!

    We modified the code in the Quick CSS field. Please check the second tab. ( see private field )

    Regards,
    Ismael

    May 2, 2017 at 5:52 pm #786582
    Trystan

    Hi Ismael,

    Thank you! It looks good on the test page, but when I copy the code 1:1 on the front page it doesn’t work.

    Is there anything else I need to take care of when implementing this code on the site?

    Thanks,
    Felix

    May 2, 2017 at 9:41 pm #786731
    John Torvik

    Hi,

    Ensure that the front page hasn’t another code thats conflicting with the Ismael code because its strange the code works normally in the test page and stop to work in your front page. – Clear your cache is an option to try too.

    Best regards,
    John Torvik

    August 21, 2017 at 12:44 pm #841971
    Trystan

    Hi John,

    I don’t know which code would conflict with it. Could you please check it out? I have troubles implementing it on my own.

    Thanks,
    Felix

    August 24, 2017 at 11:30 am #843401
    Ismael

    Hi,

    Did you add the “custom_list” class attribute? Where can we see the issue?

    Best regards,
    Ismael

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.