Joomla Templates Club 406,261 posts

[amarks Friend amarksJoin date: July 2011Posts: 260Downloads:0Uploads:40 Thanks: 138 Thanked: 1 times in 1 posts]

#171230

How do I go about putting an image on the actual tab. I would like to have the title and a small picture underneathe for each tab.

Thanks!

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#427135

Hi,

Can you please elaborate on your requirement using a screenshot / image? I think it can be possible using css but can give a better solution if I can see the expected end result.

1 user says Thank You to himangi for this useful post

1. amarks

[amarks Friend amarksJoin date: July 2011Posts: 260Downloads:0Uploads:40 Thanks: 138 Thanked: 1 times in 1 posts]

#427147

A bit sloppy, but for the sake of demonstration 🙂

Thanks!

---

Attachments:

1. 

[himangi Friend himangiJoin date: April 2011Posts: 1406Downloads:1Uploads:86 Thanks: 21 Thanked: 345 times in 332 posts]

#427258

Hi,

If you check the JA Portfolio demo you will see icons displayed on the left of every tab title. in the JA portfolio, modules are displayed in Ja Tabs. Every module has a different module class suffix (since every tab needs to have a different icon, if same image is to be used single module class suffix can be used for all modules).

e.g. The module published in first tab has module class suffix _icon1. And the stylesheet in JA tabs has the following styling to display an image with the title.. Please note the code below will show image only when it is placed in the same folder as the related stylesheet..
<blockquote>
.portfolio ul.ja-tabs-title li.ja-tab-title_icon1 h3 {
background-image: url(icon1.png);
}

.portfolio .ja-tabs-title-top ul.ja-tabs-title li h3 {
font-size: 100%;
font-weight: bold !important;
line-height: normal;
margin: 0;
padding: 15px 15px 10px 55px;
color: #88888A;
border-top: none;
background-position: 15px 15px;
background-color: #CACCCD;
}</blockquote>

If you want more help with this to implement it on your site, please provide your site url here / via PM.

1 user says Thank You to himangi for this useful post

1. amarks

[amarks Friend amarksJoin date: July 2011Posts: 260Downloads:0Uploads:40 Thanks: 138 Thanked: 1 times in 1 posts]

#427280

Wow, thanks for such a detailed response!! This was very helpful 🙂

[Author]

Posts