test
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • jp Friend
    #192410

    Good day

    I would like to have 5 icons in USER 1

    But the result is not that good. I played around with the width but cant get the right ratio

    ul.cms {
    width: 68%;
    margin: 0px auto !important;
    }

    ul.cms li {
    width: 24.99;
    float: left;
    background: none !important;
    padding: 0px !important;
    margin: 0px ;
    text-align: center;
    color: #666


    1. code1
    2. result
    TomC Moderator
    #513026

    Might you be able to provide the url of the site you’re working on, so we can take a look and see if we can assist you further?

    jp Friend
    #513050

    Hi Tom

    http://41.185.8.112/~truthcoc/

    ill pm you the username and password

    Regards

    TomC Moderator
    #513076

    Try the following modifications (within –> /templates/ja_zite/css/template.css):


    ul.cms {
    margin: 0 auto !important;
    width: 100%;
    }

    ul.cms li {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    color: #666666
    float: left;
    margin: 0;
    padding: 0 !important;
    text-align: center;
    width: 20%;
    }

    Ninja Lead Moderator
    #513081

    You need some customization in this case:

    + Custom from custom html module from Admin > Extensions->Extensions

    From


    <p style="padding-top: 15px;padding-bottom: 15px; text-align: center;">Proin Vivamus Nunc tincidunt Nullam augue felis Curabitur aliquet mauris sed. Vestibulum dapibus tellus adipiscing Nunc Nam et nisl semper elit feugiat. Justo eu odio malesuada lacinia dui eros odio dui ac justo. </p>
    <ul class="cms clearfix">
    <li>
    <div class="has-icon icon1">
    <h4>Joomla</h4>
    <span>Lorem ipsum dolor sit amet consectetuer aliquet Morbi nec In Vivamus. </span>
    </div>
    </li>
    <li>
    <div class="has-icon icon2">
    <h4>Magento</h4>
    <span>Lorem ipsum dolor sit amet consectetuer aliquet Morbi nec In Vivamus. </span>
    </div>
    </li>
    <li>
    <div class="has-icon icon3">
    <h4>Drupal</h4>
    <span>Lorem ipsum dolor sit amet consectetuer aliquet Morbi nec In Vivamus. </span>
    </div>
    </li>
    <li>
    <div class="has-icon icon4">
    <h4>Wordpress</h4>
    <span>Lorem ipsum dolor sit amet consectetuer aliquet Morbi nec In Vivamus. </span>
    </div>
    </li>
    </ul>

    Change to


    <p style="padding-top: 15px;padding-bottom: 15px; text-align: center;">Proin Vivamus Nunc tincidunt Nullam augue felis Curabitur aliquet mauris sed. Vestibulum dapibus tellus adipiscing Nunc Nam et nisl semper elit feugiat. Justo eu odio malesuada lacinia dui eros odio dui ac justo. </p>
    <ul class="cms clearfix">
    <li>
    <div class="has-icon icon1">
    <h4>Joomla</h4>
    <span>Lorem ipsum dolor sit amet consectetuer aliquet Morbi nec In Vivamus. </span>
    </div>
    </li>
    <li>
    <div class="has-icon icon2">
    <h4>Magento</h4>
    <span>Lorem ipsum dolor sit amet consectetuer aliquet Morbi nec In Vivamus. </span>
    </div>
    </li>
    <li>
    <div class="has-icon icon3">
    <h4>Drupal</h4>
    <span>Lorem ipsum dolor sit amet consectetuer aliquet Morbi nec In Vivamus. </span>
    </div>
    </li>
    <li>
    <div class="has-icon icon4">
    <h4>Wordpress</h4>
    <span>Lorem ipsum dolor sit amet consectetuer aliquet Morbi nec In Vivamus. </span>
    </div>
    </li>
    <li>
    <div class="has-icon icon5">
    <h4>Bla bla</h4>
    <span>Description bla bla</span>
    </div>
    </li>
    </ul>

    + Css file

    Open templates/ja_zite/css/template.css file

    From

    ul.cms li {
    width: 24.99%;
    float: left;
    background: none !important;
    padding: 0px !important;
    margin: 0px ;
    text-align: center;
    color: #666
    }

    Change to


    ul.cms li {
    width: 19.99%;
    float: left;
    background: none !important;
    padding: 0px !important;
    margin: 0px ;
    text-align: center;
    color: #666
    }
    ul.cms .has-icon.icon5 {
    background-image: url(../images/icon5.png);
    }

    ul.cms .has-icon.icon5:hover,
    ul.cms .has-icon.icon5:focus,
    ul.cms .has-icon.icon5:active {
    background-image: url(../images/icon5-hover.png);
    }

    With image new icon: templates/ja_zite/images/icon5.png and templates/ja_zite/images/icon5-hover.png

    Remember to clear cache from Admin area after making any changes

Viewing 5 posts - 1 through 5 (of 5 total)

This topic contains 5 replies, has 3 voices, and was last updated by  Ninja Lead 11 years, 1 month ago.

We moved to new unified forum. Please post all new support queries in our New Forum