Joomla Templates Club 406,261 posts

[jonathonlee Friend jonathonleeJoin date: November 2012Posts: 17Downloads:0Uploads:9 Thanks: 9 Thanked: 6 times in 1 posts]

#185970

In the backend under Module Manager. I have made a custom module and added this code to it

<p><img src="file:///C|/Users/familyof6/Downloads/parking.png" align="left" width="48" height="48" alt="Parking" /><br />
<a href="http://lahc.edu"> Click here for parking information</a></p>
<p><img src="file:///C|/Users/familyof6/Downloads/agent.png" align="left" width="48" height="48" alt="SchoolPolice" /><br /><a href="http://lahc.edu"> Click here for school police information</a></p>
<p><img src="file:///C|/Users/familyof6/Downloads/book.png" align="left" width="48" height="48" alt="Shedule" /><br />
<a href="http://lahc.edu"> Schedule of Classes & Catalog</a></p>
<p><img src="file:///C|/Users/familyof6/Downloads/user_group.png" align="left" width="48" height="48" alt="DirectoryInformation" /><br />
<a href="http://lahc.edu"> Click here for directory information</a></p>

But in the image attachment you can see that it has way to much gap in space. How can I make it look like image 2.

---

Attachments:

1. 
2. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#487242

You can use on this way

from


<p><img src="file:///C|/Users/familyof6/Downloads/parking.png" align="left" width="48" height="48" alt="Parking" /><br />
<a href="http://lahc.edu"> Click here for parking information</a></p>
<p><img src="file:///C|/Users/familyof6/Downloads/agent.png" align="left" width="48" height="48" alt="SchoolPolice" /><br /><a href="http://lahc.edu"> Click here for school police information</a></p>
<p><img src="file:///C|/Users/familyof6/Downloads/book.png" align="left" width="48" height="48" alt="Shedule" /><br />
<a href="http://lahc.edu"> Schedule of Classes & Catalog</a></p>
<p><img src="file:///C|/Users/familyof6/Downloads/user_group.png" align="left" width="48" height="48" alt="DirectoryInformation" /><br />
<a href="http://lahc.edu"> Click here for directory information</a></p>

change to


<ul id="icons_custom">
<li><img src="file:///C|/Users/familyof6/Downloads/parking.png" width="48" height="48" alt="Parking" /><a href="http://lahc.edu"> Click here for parking information</a></li>
<li><img src="file:///C|/Users/familyof6/Downloads/agent.png" width="48" height="48" alt="SchoolPolice" /><a href="http://lahc.edu"> Click here for parking information</a></li>
<li><img src="file:///C|/Users/familyof6/Downloads/book.png" width="48" height="48" alt="Shedule" /><a href="http://lahc.edu"> Click here for parking information</a></li>
<li><img src="file:///C|/Users/familyof6/Downloads/user_group.png" width="48" height="48" alt="DirectoryInformation" /><a href="http://lahc.edu"> Click here for parking information</a></li>
</ul>


Open templates/ja_university/css/template.css file

add new script


#icons_custom img {
vertical-align: middle;
}


Remember to clear cache from Admin area

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

1. jonathonlee

[Author]

Posts