Joomla Templates Club 406,261 posts

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

#196244

Hello, I’ve tried and failed to create a new extended class for the JA Wall template (Retro style). I want to add ‘Visit’ to some of my articles in the same way I can ‘Free’, for instance. An experienced user of this site kindly provided me with the following instructions but it doesn’t work, nothing appears, just a space where the word Visit should be. Can someone please tell me what is wrong with this CSS coding? Many thanks in advance for your help, Mark William.

USERS’S INSTRUCTIONS;
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

Code:
.item-hot .header h2 { text-indent: 25px;
}
so let’s copy that with visit and add it to the file

Code:
.item-visit .header h2 { text-indent: 25px;
}
later in the file at line 695 we have

Code:
.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

Code:
.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

Code:
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

Code:
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;
}

[cssyeah Moderator cssyeahJoin date: June 2006Posts: 653Downloads:73Uploads:15 Thanked: 121 times in 81 posts]

#528688

I checked and see that your custom code missed to comma as noted in the attachment below:

---

Attachments:

1. 

[Author]

Posts