Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • June 6, 2014 at 1:18 am #275394
    kbarranco

    I reviewed a post on this forum that almost answered my question.
    http://www.hatchnola.com/home/
    near the bottom is the Icon List with bullet points (1st and 2nd level). How can I have the second line indent to line up with the first line of text.

    And while you are there…. How can I edit the color of the icons?
    Can you direct me to where I can see the difference in MAIN CONTENT and ALTERNATE CONTENT? This may be a simple change? Or can I add a CSS for those icons specifically?

    your help is appreciated!

    June 6, 2014 at 5:52 pm #275703
    Yigit

    Hi KK!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed

    div.iconlist_content ul {
margin: 0;
}
.main_color .avia-icon-list .iconlist_icon {
background-color: red;
}

    Cheers!
    Yigit

    June 6, 2014 at 6:06 pm #275712
    Josue

    Hey!

    Try adding this code to the Quick CSS, that will align the icons and increase its size.

    #footer .av-icon-char {
    min-width: 25px;
    display: inline-block;
    font-size: 26px !important;
}

    Cheers! 
    Josue

    June 6, 2014 at 6:25 pm #275729
    kbarranco

    Thanks so much.
    The one thing I don’t have is the CSS to make the second line of the list INDENT to line up with the first line INSTEAD of the bullet.
    (I can show a screenshot but don’t know how to upload it here)

    June 6, 2014 at 6:28 pm #275731
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    div.iconlist_content ul ul {
margin-left: 0;
}

    Best regards,
    Yigit

    June 6, 2014 at 6:36 pm #275738
    kbarranco

    I am adding numbers for “margin-left:” but don’t see any movement.
    I cleared my cache.

    June 6, 2014 at 6:41 pm #275741
    Yigit

    Hi!

    It does work fine on my end – http://i.imgur.com/hzwxI2S.png
    Please flush browser cache once again and refresh your page a few times

    Cheers!
    Yigit

    June 6, 2014 at 6:55 pm #275751
    kbarranco

    I think I am not communicating correctly. Here is a graphic: http://www.tiikoni.com/tis/view/?id=b6fd10b
    Notice the vertical line.

    June 6, 2014 at 7:01 pm #275753
    Yigit

    Hey!

    Now i see what you meant, please add following code to Quick CSS instead

    .avia-icon-list .iconlist_content li { text-indent: -14px; }

    Best regards,
    Yigit

    June 6, 2014 at 8:09 pm #275783
    kbarranco

    ooppps- my bullets disappeared

    June 6, 2014 at 9:40 pm #275838
    Josue

    Hi!

    Use this code instead:

    .avia-icon-list .iconlist_content li:before {
    display: list-item;
    content: "";
    list-style: disc inside;
    float: left;
    position: absolute;
    left: 0;
}
.avia-icon-list .iconlist_content li {
    list-style: none;
    padding-left: 13px;
}

    Regards,
    Josue

    June 7, 2014 at 1:36 am #275951
    kbarranco

    Alright Sparky! got it!
    thanks

    June 7, 2014 at 1:37 am #275953
    Josue

    You are welcome, always glad to help :)

    Regards,
    Josue

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Icon List- CSS for second line indent’ is closed to new replies.