Tagged: , , ,

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #518654

    I am trying to assign different icons to each li on my bullet list.

    Here is the page …

    http://dev2.electrixinternational.com/frequently-asked-questions/

    I have added this to my CSS, but cant figure out how to assign it to the actual different LI’s

    • This topic was modified 8 years, 5 months ago by Elliott.
    #518839

    Hi richardelectrix!

    Your link is giving me a 404. You could use some CSS like so to target individual items.

    ul > li:nth-child(3) {  }
    ul > li:nth-child(5) {  }
    

    Best regards,
    Elliott

    #519081

    Hi

    That wouldnt necessarily work as I dont know the order in which they will appear.

    Is there nothing I can do with an LI class?

    #519659

    Hi!

    I’m sorry but I can’t load the page. Why wouldn’t you know the order of the list? The code above should work as if you’re counting from number 1 to the next.

    ul > li:nth-child(1) {  }
    ul > li:nth-child(2) {  }
    ul > li:nth-child(3) {  }
    ul > li:nth-child(4) {  }
    

    Please refer to this link: https://css-tricks.com/how-nth-child-works/

    Regards,
    Ismael

    #519696

    Hi

    I do know the order of the list in one particular instance, it is

    phone,
    fax,
    email.

    But on another bullet list I have

    Phone
    Email
    Question mark

    Doing it using nth child I would have to have several combinations of lists configured in css.

    I was looking for a way where I could have several LI classes (one for fax, phone, email, question mark)

    Then call the LI class in for the specific LI.

    #521092

    Hi!

    You could give each element a custom class by doing this, http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/.

    Regards,
    Elliott

    #521486

    Hi

    Thats what I thought. I have ALB turned on, but I cant figure out how to apply that to my ul list.

    <ul class="list">
    	<li class="list-phone">Phone 12345678</li>
    	<li class="list-email">Email  (Email address hidden if logged out) </li>
    	<li class="list-fax">Fax 78945611</li>
    </ul>

    And I have this in my CSS:

    /* CT START Tick Box List */
    
    ul.list  {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        display: block;
        left: 0px;
        list-style-position: outside;
        width: 100%;
        padding-bottom: 0px;
    }
    
    .list li {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    
    .list li:before {
      position: absolute;
      top: 3px;
      left: -15px;
      background-color: #FFFFFF;    
      font-family: 'fontello';    
      content: "E822";
      font-size: 18px;
      color: #007ab6;
    }
    
    /* CT END Tick Box List */
    
    /* CT START Lock Symbol List */
    
    ul.list-lock {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        display: block;
        left: 0px;
        list-style-position: outside;
        width: 100%;
        padding-bottom: 0px;
    }
    
    .list-lock li {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    
    .list-lock li:before {
      position: absolute;
      top: 3px;
      left: -15px;
      background-color: #FFFFFF;    
      font-family: 'fontello';    
      content: "E839";
      font-size: 18px;
      color: #007ab6;
    }
    
    /* CT END Lock Symbol List */
    
    /* CT START Phone Symbol List */
    
    ul.list-phone  {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        display: block;
        left: 0px;
        list-style-position: outside;
        width: 100%;
        padding-bottom: 0px;
    }
    
    .list-phone li {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    
    .list-phone li:before {
      position: absolute;
      top: 3px;
      left: -15px;
      background-color: #FFFFFF;    
      font-family: 'fontello';    
      content: "E854";
      font-size: 18px;
      color: #007ab6;
    }
    
    /* CT END Phone Symbol List */
    
    /* CT START Email Symbol List */
    
    ul.list-email {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        display: block;
        left: 0px;
        list-style-position: outside;
        width: 100%;
        padding-bottom: 0px;
    }
    
    .list-email li {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    
    .list-phone li:before {
      position: absolute;
      top: 3px;
      left: -15px;
      background-color: #FFFFFF;    
      font-family: 'fontello';    
      content: "E805";
      font-size: 18px;
      color: #007ab6;
    }
    
    /* CT END Email Symbol List */
    
    /* CT START Fax Symbol List */
    
    ul.list-fax {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        display: block;
        left: 0px;
        list-style-position: outside;
        width: 100%;
        padding-bottom: 0px;
    }
    
    .list-fax li {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    
    .list-fax li:before {
      position: absolute;
      top: 3px;
      left: -15px;
      background-color: #FFFFFF;    
      font-family: 'fontello';    
      content: "E886";
      font-size: 18px;
      color: #007ab6;
    }
    
    /* CT END Fax Symbol List */

    Incidentally, it is displaying text again instead of the icons.

    #522463

    Hey!

    what do you mean you have ALB turned on? it’s turned on always (by default).
    As Elliott already mentioned, follow this tutorial and let us know when you are done:
    http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Afterwards you have a new field when editing your list elements in question where you can define a unique CSS class.

    Best regards,
    Andy

    #522476

    Hi

    I have followed those instructions previously but I still don’t see how being able to give a custom css class to a text block containing a bullet list is going to be able to allow me to choose which icons I want per bullet in a UL?

    #523088

    Hey!

    in your previous post you said this:

    I was looking for a way where I could have several LI classes (one for fax, phone, email, question mark)

    Then call the LI class in for the specific LI.

    That is why we suggested to activate custom class for all ALB elements. Because then you can call a unique LI class for the specific LI.

    Now I am not sure anymore what you want to achieve. Can you provide us links of what you have now and screenshots showing what you want to achieve instead? would be very helpful for us to understand what you need.

    Best regards,
    Andy

    #523099

    Hi

    This is what I have now …http://screencast.com/t/2rXIykf5

    This is a mockup of what I am trying to achieve … http://screencast.com/t/anLbmSD01xU

    Thanks

    #523111

    Hey!

    Your link is still giving me a 404. Send us a link to the page where you are using the list elements and have given them custom CSS classes.

    Cheers!
    Elliott

    #523128

    Hi

    Which link are you referring to?

    http://dev2.electrixinternational.com/about-electrix/frequently-asked-questions/

    <ul class="list">
    	<li class="list-phone">Order by telephone – Call: +44 (0) 1388 774455</li>
    	<li class="list-email">Send your order by email – Email: <a href="mailto: (Email address hidden if logged out) "> (Email address hidden if logged out) </a></li>
    	<li class="list-fax">Fax us your order on company letterhead – Fax: +44 (0) 1388 777359</li>
    </ul>

    CSS

    ul.list  {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        display: block;
        left: 0;
        list-style-position: outside;
        width: 100%;
        padding-bottom: 0;
    }
    
    .list li {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    
    .list li:before {
        position: absolute;
        top: 3px;
        left: -15px;
        background-color: #FFFFFF;    
        font-family: 'fontello';    
        content: "\E822"; /* Important the backslash must be present before the E822 */
        font-size: 18px;
        color: #007ab6;
    }
    
    /* CT END Tick Box List */
    
    /* CT START Lock Symbol List */
    
    ul.list-lock {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        display: block;
        left: 0;
        list-style-position: outside;
        width: 100%;
        padding-bottom: 0;
    }
    
    .list-lock li {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    
    .list-lock li:before {
        position: absolute;
        top: 3px;
        left: -15px;
        background-color: #FFFFFF;    
        font-family: 'fontello';    
        content: "\E839"; /* Important the backslash must be present before the E839 */
        font-size: 18px;
        color: #007ab6;
    }
    
    /* CT END Lock Symbol List */
    
    /* CT START Phone Symbol List */
    
    ul.list-phone  {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        display: block;
        left: 0;
        list-style-position: outside;
        width: 100%;
        padding-bottom: 0;
    }
    
    .list-phone li {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    
    .list-phone li:before {
        position: absolute;
        top: 3px;
        left: -15px;
        background-color: #FFFFFF;    
        font-family: 'fontello';    
        content: "\E854"; /* Important the backslash must be present before the E854 */
        font-size: 18px;
        color: #007ab6;
    }
    
    /* CT END Phone Symbol List */
    
    /* CT START Email Symbol List */
    
    ul.list-email {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        display: block;
        left: 0;
        list-style-position: outside;
        width: 100%;
        padding-bottom: 0;
    }
    
    .list-email li {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    
    .list-phone li:before {
        position: absolute;
        top: 3px;
        left: -15px;
        background-color: #FFFFFF;    
        font-family: 'fontello';    
        content: "\E805"; /* Important the backslash must be present before the E805 */
        font-size: 18px;
        color: #007ab6;
    }
    
    /* CT END Email Symbol List */
    
    /* CT START Fax Symbol List */
    
    ul.list-fax {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        display: block;
        left: 0;
        list-style-position: outside;
        width: 100%;
        padding-bottom: 0;
    }
    
    .list-fax li {
        list-style-type: none !important;
        list-style: none !important;
        position: relative;
        padding-left: 10px;
        margin-bottom: 10px;
    }
    
    .list-fax li:before {
        position: absolute;
        top: 3px;
        left: -15px;
        background-color: #FFFFFF;    
        font-family: 'fontello';    
        content: "\E886";
        font-size: 18px;
        color: #007ab6;
    }
    
    /* CT END Fax Symbol List */
    #523740

    Hey!

    please refuse from posting your whole CSS code into your posts again and again, as it just does not serve us at all.
    Refer to this thread: https://kriesi.at/support/topic/replace-toggle-icon-with-another-entypo-fontello-font-or-use-a-png/

    Best regards,
    Andy

    #523810

    hm try it f.e. for fax with:

    .list li.list-fax::before {
        content: "\E886";
    }

    the .list li has to be part of that declaration if it has to override the .list li::before rule
    and you did not look at the cascading order it is li.list-phone not .list-phone li

    and btw. you got in your code a mistake on email:before rule there is a phone inside

    • This reply was modified 8 years, 4 months ago by Guenni007.
    #523869

    Hi Guenni

    Thanks for your help that worked perfectly.

Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Assign different icons to a bullet list’ is closed to new replies.