@lgltd. That is a good question. It is not this will result in the breaking of your output. There is not any need to change the snippet to add a class to achieve what you want. Just use .PJN_Menu a to select the links and make the text-indent a really big negative number. If you feel that you must add a class or id then you should do it at the bottom where the snippet sets the placeholders at around line 255.
Again you already have a parent class so to grab elements beneath you use the cascade to select an element that qualifies.
.PJN_Menu a{
background: ...
display:block;
width:100px;
height:100px;
text-indent:-10000px;
}
.PJN_Next a{...}
.PJN_Prev a{...}
That is all the rules you need to set. extra classes are unnecessary.
@jeffrhysjones
Sorry, I was confused as I was doing two things at once.
Now that I am paying attention.
I don’t have time to give you the whole deal but here is how it should be done.
First: The background should be set on the PJN_Next a and PJN_Prev a and not on the spans. Second, you need to make your PJN_Menu a elements block elements that are the same size as their container or define the width and height. Third by adding the images as the backgrounds of the a elements and using text-indent: -10000px you should get what you want.
See the big onrange link on this page as an example of how it can be done:
http://www.kneadedbodywork.com/
It uses the exact same principal.
Looking at the CSS files though it looks as though some problems may arise from the cascade since some things are all out of order.
Let me know if you need some small help.
Cheers,
Jay
MODX Staff
