Joomla Templates Club 406,261 posts

[ftwent Friend ftwentJoin date: October 2010Posts: 72Downloads:0Uploads:7 Thanks: 17 Thanked: 1 times in 1 posts]

#179293

Hello,

I am building a new webdesign site and i want to know how i change the icons use in cms.

I am running it on a localserver so i cant give any link.

Is there a possibily to use my own images? And can i make it so when you click on it goes to a link.

Under here is the code from the page:

<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>

remco

[yasser4design Friend yasser4designJoin date: October 2011Posts: 2Downloads:0Uploads:0 Thanked: 1 times in 2 posts]

#461738

Hi

Open template.css in css folder, then press Ctrl+F to search about (icon1, … icon4),
So, you can change the images urls.

Yasser

[ftwent Friend ftwentJoin date: October 2010Posts: 72Downloads:0Uploads:7 Thanks: 17 Thanked: 1 times in 1 posts]

#461740

Ok great…

And do you by any why know how to make it so when i click on it..it will go to a link?

[yasser4design Friend yasser4designJoin date: October 2011Posts: 2Downloads:0Uploads:0 Thanked: 1 times in 2 posts]

#461741

Hi again

About your qustion (And can i make it so when you click on it goes to a link. ?)
I know how you can link a text here but the images maybe someone can help.

Yasser

1 user says Thank You to yasser4design for this useful post

1. ftwent

[ftwent Friend ftwentJoin date: October 2010Posts: 72Downloads:0Uploads:7 Thanks: 17 Thanked: 1 times in 1 posts]

#461742

Ok thank you for your fast reply..

[mandig Friend mandigJoin date: October 2010Posts: 48Downloads:0Uploads:10 Thanks: 15 Thanked: 2 times in 1 posts]

#462048

Hi everybody, I would like to add 2 more icons to the standard 4 one. Does everybody know how can I do it?

Thanks for the help.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#462282

Hi there,
@ftwent: If you wanna add link to images, please follow my reply in this thread: http://www.joomlart.com/forums/topic/how-to-ser-cms-icons-on-user1-to-be-clicable-on-ja-zite/#post-462263
@mandig: Do you mean that you want to add 2 more images next to 4 current ones, so you need to add 2 more tag: <li></li> smt like:

<li>
<div class="has-icon icon4">
<h4>Wordpress</h4>
<span>Lorem ipsum dolor sit amet consectetuer aliquet Morbi nec In Vivamus. </span></div>
</li>
Then you can change images like above reply.

Hope this helps.

[mandig Friend mandigJoin date: October 2010Posts: 48Downloads:0Uploads:10 Thanks: 15 Thanked: 2 times in 1 posts]

#462298

<em>@Saguaros 331830 wrote:</em><blockquote>Hi there,
@ftwent: If you wanna add link to images, please follow my reply in this thread: http://www.joomlart.com/forums/topic/how-to-ser-cms-icons-on-user1-to-be-clicable-on-ja-zite/#post-462263
@mandig: Do you mean that you want to add 2 more images next to 4 current ones, so you need to add 2 more tag: <li></li> smt like:

<li>
<div class="has-icon icon4">
<h4>Wordpress</h4>
<span>Lorem ipsum dolor sit amet consectetuer aliquet Morbi nec In Vivamus. </span></div>
</li>
Then you can change images like above reply.

Hope this helps.</blockquote>
@saguaros thank you very much for your reply but the problem is just a little bit more complex. Yes I want to add 2 more images nex the the current 4 ones but I need to change the images with 6 different ones so this mean that if I use the icon4 class 3 times I cannot use 3 different images.

Please let me know if I’m not right or I misunderstanded something. Basically I want 6 icons with 6 brand new images.

Thanks

1 user says Thank You to mandig for this useful post

1. ftwent

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#462304

Hi again,

I got your idea, I just want to make an example of what you should add to achieve what you need, you don’t have to use any icon more than once, you can create a new CSS class such as you can add 2 more class for icon5 and icon6 and add style for those 2 new icons in file: templates/your_default_template/css/template.css

ul.cms .has-icon.icon5 {
background-image: url(../images/joomla.png); <<<<< change to your own image
}

ul.cms .has-icon.icon5:hover,
ul.cms .has-icon.icon5:focus,
ul.cms .has-icon.icon5:active {
background-image: url(../images/joomla-hover.png); <<<<< change to your own image
}
and you could make the same with icon6

Hope you got the idea.

1 user says Thank You to Saguaros for this useful post

1. mandig

[mandig Friend mandigJoin date: October 2010Posts: 48Downloads:0Uploads:10 Thanks: 15 Thanked: 2 times in 1 posts]

#462443

Thank you very much Saguaros. Now everything’s clear.

[jcsanjurjo Friend jcsanjurjoJoin date: May 2012Posts: 116Downloads:0Uploads:46 Thanks: 26 Thanked: 2 times in 1 posts]

#463047

Hi @saguaros, my question is that I need just 3 points in user1 section. So when I remove the last class (icon4), the problem is that the three points appear left aligned, and I’d like to put it centered.

Sorry but I’m newbie and no idea what code has to be addapted

I’ll appreciatte your help

Joan Carles

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#463055

Hi jcsanjurjo,

You could open file: /templates/ja_zite (your default template)/css/template.css and find CSS code for this class:

#ja-topsl .ja-moduletable.cms, #ja-topsl .moduletable.cms{
..........
left: 100px; <<<< add this line and change to your desired value
}

Hope this helps.

[jcsanjurjo Friend jcsanjurjoJoin date: May 2012Posts: 116Downloads:0Uploads:46 Thanks: 26 Thanked: 2 times in 1 posts]

#463082

Hi @saguaros, here is an screeenshot of what I’m trying to do

As you can see, when removing the 4th class (icon4) the other three circles remains aligned left, and I’d like to align center, just like the title of the section (NUESTRO … ADN?)

I find out, in line 1511 of my template.css file, the following code:

#ja-topsl .ja-moduletable.cms,
#ja-topsl .moduletable.cms {
margin-bottom: 60px;
margin-top: 20px;
}

and following your advice,I tried to insert

#ja-topsl .ja-moduletable.cms,
#ja-topsl .moduletable.cms {
margin-bottom: 60px;
margin-top: 20px;
left: 100px; <<<< add this line and change to your desired value
}

but no changes in frontend

Instead of left: 100px; I tried also alignment-adjust:central; or alignment-adjust:middle; or alignment-baseline:central; or alignment-baseline:middle; but nothing happen in frontend in any case.

Please, I’ll appreciate your help

Thanks for your assistance

joan carles

---

Attachments:

1. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#463095

Hi again,

Did you try to clean all the cache after making change ? and also go to this module and disable cache in advanced option.

If it still doesn’t change, please post your url here and set Compress Css in Template Manager to No, I shall check for you.

[jcsanjurjo Friend jcsanjurjoJoin date: May 2012Posts: 116Downloads:0Uploads:46 Thanks: 26 Thanked: 2 times in 1 posts]

#463166

Hi @saguaros, digging on the template.css file, I find out another class called ul.cms li and replaced there the parameter width as follows

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

Now the block is centered. My doubt is now if this class is being used in some other place so I’ll expect more problems. Can you confirm if it’s used in more places?

Thanks in advance

joancarles

[Author]

Posts