Joomla Templates Club 406,261 posts

[neilpovey Friend neilpoveyJoin date: March 2008Posts: 21Downloads:0Uploads:1 Thanks: 6 Thanked: 1 times in 1 posts]

#185369

Just wondering how I can add an icon like the ones used for the Gallery and Contact Us

1 user says Thank You to neilpovey for this useful post

1. franbrak

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#484794

<em>@neilpovey 362110 wrote:</em><blockquote>Just wondering how I can add an icon like the ones used for the Gallery and Contact Us</blockquote>

Hi

In this file templatesja_merocsstemplate.css around line 2254 you have

.icon-contact {
background-image: url('../images/ico/mail-big.png');
}
.icon-photo {
background-image: url('../images/ico/photo-big.png');
}

You can add your icon

.icon-yourname {
background-image: url('../images/ico/yourimage.png');
}

in the custom-html module add this html

<p><a class="btn-icon btn-big icon-youricon" href="#" title="some text"><span>some text</span></a></p>

remember to add the module suffix “mod-hilite1 no-padding”

Look HERE for any other reference

Regards

2 users say Thank You to pavit for this useful post

1. neilpovey
2. franbrak

[gringo211985 Friend gringo211985Join date: May 2012Posts: 678Downloads:197Uploads:121 Thanks: 77 Thanked: 123 times in 27 posts]

#491803

Just to let others know that this process has changed since the template update.

Now you will also need to change the file “templates.ja_mero.less.typo.less”

Then you need to make these folders in t3-assests>dev>images>ico and place your images in there.

Hope this helps anyone trying to change the icons on JA Mero 🙂

1 user says Thank You to gringo211985 for this useful post

1. franbrak

[ankris Friend ankrisJoin date: June 2011Posts: 1Downloads:4Uploads:4]

#493622

I made a big Facebook icon and a Shopping Cart icon. They’re included in this post.

(The images are transparent, so place them on a colored background to see them. ;))

Happy sharing !

---

Attachments:

1. 
2. 
3. 
4. 

[neilpovey Friend neilpoveyJoin date: March 2008Posts: 21Downloads:0Uploads:1 Thanks: 6 Thanked: 1 times in 1 posts]

#497306

I still can’t seem to get this to work can someone please have a look at the following page and let me know what is wrong:

http://beta.festive.org.uk/index.php/students/resources

Thanks.

[gringo211985 Friend gringo211985Join date: May 2012Posts: 678Downloads:197Uploads:121 Thanks: 77 Thanked: 123 times in 27 posts]

#497361

Did you make the changes to the file “templates.ja_mero.less.typo.less”?

Then you need to make these folders in t3-assests>dev>images>ico and place your images in there.

[neilpovey Friend neilpoveyJoin date: March 2008Posts: 21Downloads:0Uploads:1 Thanks: 6 Thanked: 1 times in 1 posts]

#497367

where do I create these folders? I can’t seem to find t3-assets anywhere

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

#497433

Hi guys,
@gringo211985 & @neilpovey: it’s not due to the template update, you can see that less file when you turn on Development Mode in template manager > General tab.

If you’re good at LESS, you can edit LESS file, otherwise, it’s recommended to make change in CSS file (as pavit’s suggestion)

For the ico location, as demo site, they are hold in: /templates/ja_mero/images/ico folder

Hope this makes senses.

1 user says Thank You to Saguaros for this useful post

1. gringo211985

[neilpovey Friend neilpoveyJoin date: March 2008Posts: 21Downloads:0Uploads:1 Thanks: 6 Thanked: 1 times in 1 posts]

#500664

it still doesn’t seem to be working for me – can someone please take a look? http://beta.festive.org.uk/index.php/students/resources

I uploaded the images to the correct folder and edited the CSS but still nothing. I’d really appreciate some help, thanks.

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

#500670

Hi neilpovey,

Could you make screenshot of how you want to achieve – which image in which block ?

[neilpovey Friend neilpoveyJoin date: March 2008Posts: 21Downloads:0Uploads:1 Thanks: 6 Thanked: 1 times in 1 posts]

#501214

here’s how I would like it to look

---

Attachments:

1. 

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

#501244

Hi neilpovey,

As I can see in your site: http://beta.festive.org.uk/index.php/students/resources

The 3rd block named Outreach, it has this CSS class:


.icon-photo {
background-image: url("/templates/ja_mero/images/ico/photo-big.png");
}


You can make the same with remained ones by adding css rule to /templates/ja_your_template_name/css/custom.css

Running a CU


.icon-cu {
background-image: url("/your_image_path_here");
}


Bible Studies


.icon-biblestudy {
background-image: url("/your_image_path_here");
}


Seasonal


.icon-seasonal {
background-image: url("/your_image_path_here");
}


Hope it helps.

1 user says Thank You to Saguaros for this useful post

1. neilpovey

[neilpovey Friend neilpoveyJoin date: March 2008Posts: 21Downloads:0Uploads:1 Thanks: 6 Thanked: 1 times in 1 posts]

#501287

Brilliant – that’s all working now – thanks so much for your help!

[Author]

Posts