1. Carrie Wrigley
  2. Commercial Templates
  3. Wednesday, 27 August 2014
  4.  Subscribe via email
I just added an Icon gallery to impactmusic4kids.org. For now, it's at the bottom of the home page - I'm hoping I can resolve these questions and then move it higher up to a more visible spot. Here's the questions:

1) Is it possible somehow to center the icon display , relative to the right and left margin? I have 3 icons which seemed to default to left justification. I jerry-rigged it for now by using the longer word "Children" in all 3 titles, where I really wanted to use the more inclusive word "Kids" (meaning children + teens.) Any way of making the whole thing center on the page, so I can plug back in that preferred word?

2) In Firefox, the icons aren't displaying at all. They're beautiful in Safari, and pretty solid in Chrome (on my display, the circle around the icon is a little ragged - but not big deal.) But in Firefox, it displays as the circle with a weird little thin rectangle inside - like on a page when the image is missing. Any tips on how to fix that in Firefox?

3) Is there a way within the Icon extension to adjust the font of the "description?" I like the size of the default "title" for my main text on each icon, but the words "Through Music" below I'd like to have a little bigger. Suggestions?

Happily, you'll notice, my questions are getting fewer and fewer, about smaller and smaller details. I'm getting more confident and independent with what I've learned from you in these recent weeks (see for example the lovely slideshow on this site that I was able to plug in last weekend, without having to consult with you again.) It's looking like all 4 sites will be done by the end of the day. So grateful for all your amazing help and guidance throughout this building process! :)
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Carrie

1. One option would be to add the following to the Custom CSS field of your templates paremeters which will add some padding to the left of your icons. You may have to edit this to your own taste to best suit your icon text...



.j51_icons100 {
padding-left: 50px;
}


2. To amend this issue could you try loading FontAwesome from a CDN by adding the following to the Custom Code field of your templates parameters...


<l-ink href="//http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">


Note: Replace 'l-ink' with 'link'

3. Sure. Try adding the following to the Custom CSS field of your templates parameters where 18px is your new descrtiption font size...


.j51_icon > p {
font-size: 18px;
}


Delighted to hear everything is getting a little easier for you. All things considered you have been very quick to pick up these new skills :)

CiarĂ¡n
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
Perfect fixes all - thank you! I did some minimal numbers-tweaking, but by and large these fixes worked instantly.

It's true - I've learned a lot very fast this summer. Largely because of having a kind and consistent master teacher. A million thanks, Ciaran! :)
  1. more than a month ago
  2. Commercial Templates
  3. # 2
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!