5 icons in USER 1

Forums    Joomla Templates Club    JA Zite    5 icons in USER 1
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • jp Friend
    November 20, 2013 at 12:50 pm #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
    November 21, 2013 at 4:55 pm #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
    November 21, 2013 at 8:41 pm #513050

    Hi Tom

    http://41.185.8.112/~truthcoc/

    ill pm you the username and password

    Regards

    TomC Moderator
    November 21, 2013 at 11:49 pm #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%;
    }

    1 user says Thank You to TomC for this useful post

    1. jp
    Ninja Lead Moderator
    November 22, 2013 at 1:49 am #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

    1 user says Thank You to Ninja Lead for this useful post

    1. jp
  • Author
    Posts
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 ago.

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

Important Notice :

New Unified Portal is live

Must Read

Jump to forum

Categories