Joomla Templates Club 406,261 posts

[markwilliam Friend markwilliamJoin date: January 2014Posts: 39Downloads:1Uploads:2 Thanks: 10]

#195211

Hi everyone,

I like the Hot, New and Free extended classes and I would like to add a new one, Visit, to my new travel site.

I suspect it’s a very complex process and a virtual minefield for a beginner like myself, so rather than just plunge in to the respective css file and try my luck, I thought it would be wiser to tap into the brains here on the JA Wall forum.

If anyone could usher me through the steps, I would really appreciate it.

With many thanks and my very best regards,

Mark William
http://www.portugaltravelguide.com

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#524355

Be positive – it’s not as difficult as you think.

The art here is to be smart – copy the others, look at how they differ and then copy it. No black arts needed. 😉

If you look in your css file for your theme, hunt out the words ‘hot’, ‘new’ and ‘free’. We just want to copy those and add ‘visit’ and then use ‘ item-visit’ in the extended class the same as the others.

If we look at /templates/ja_wall/themes/retro/css/theme.css at line 576 we see this

.item-hot .header h2 { text-indent: 25px;
}

so let’s copy that with visit and add it to the file

.item-visit .header h2 { text-indent: 25px;
}

later in the file at line 695 we have

.item-hot .header h2:before,.item-hot .header > h2:before {
background: url(../images/bg-hot.png) left top no-repeat;
font-family: 'Droid Sans', sans-serif;
border-radius: 0;
color: #fff
content: "Hot";
display: inline-block;
font-size: 10px;
padding: 0 5px 0 10px;
text-align: left;
text-transform: uppercase;
vertical-align: top;
position: absolute;
left: -3px;
top: 20px;
width: 30px;
height: 20px;
line-height: 18px;
z-index: 500;
}

again let’s copy it replacing hot with visit

.item-visit .header h2:before,.item-visit .header > h2:before {
background: url(../images/bg-visit.png) left top no-repeat; < need to make an image for visit
font-family: 'Droid Sans', sans-serif;
border-radius: 0;
color: #fff
content: "Visit";
display: inline-block;
font-size: 10px;
padding: 0 5px 0 10px;
text-align: left;
text-transform: uppercase;
vertical-align: top;
position: absolute;
left: -3px;
top: 20px;
width: 30px;
height: 20px;
line-height: 18px;
z-index: 500;
}

further into the file… at line 717

body.basegrid-s .item-hot .header h2:before,
body.basegrid-s .item-new .header h2:before,
body.basegrid-s .item-free .header h2:before {
top: 10px;
left: -3px;
}
body.display-imageview .item-hot .header h2:before,
body.display-imageview .item-new .header h2:before,
body.display-imageview .item-free .header h2:before {
top: 10px;
left: -13px;
}

we need to add the new suffix here to the others

body.basegrid-s .item-hot .header h2:before,
body.basegrid-s .item-new .header h2:before,
body.basegrid-s .item-free .header h2:before
body.basegrid-s .item-visit .header h2:before{
top: 10px;
left: -3px;
}
body.display-imageview .item-hot .header h2:before,
body.display-imageview .item-new .header h2:before,
body.display-imageview .item-free .header h2:before
body.display-imageview .item-visit .header h2:before{
top: 10px;
left: -13px;
}


getting the idea yet? 🙂

Check this – (after your backup) and try using ‘ item-visit’ in the extended class and let’s see what I’ve missed!!

[markwilliam Friend markwilliamJoin date: January 2014Posts: 39Downloads:1Uploads:2 Thanks: 10]

#524515

Hi Swissa,

Many thanks for your kind help.

I created a new image and have done what you said but the Visit logo doesn’t appear although the title text moves along to the right, which means it’s there but hidden.

Seems we’re just lacking a tweak to make it appear!

Best regards,

Mark William

[markwilliam Friend markwilliamJoin date: January 2014Posts: 39Downloads:1Uploads:2 Thanks: 10]

#528347

sill no success creating this new extended class. ****!!!
It seems JA might have got the coding wrong in their documentation.
Could one of the develops check this please?
Thanks,
Mark

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

#528438

Hi Mark,

Did you try to check out documentation for extended class in JA Wall template: http://ja-wall.demo.joomlart.com/index.php/en/extended-class ?

Also make sure that after making change, you clean Joomla cache.

Best

[Author]

Posts