Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
Image replacement for TXP tag
Hi all,
I’m trying to create an image replacement button for the following tag –
<txp:section link="1" title="1" class="act_btn" wraptag="p" name="membership" />
Hand coded it would look like this –
<a id="signup_btn" class="act_btn" href="http://www.enfieldbeekeepers.org.uk/membership">
<img width="190" height="35" alt="Become a member"/>
</a>
This works, but I’d like to use tags where possible. Can anyone help me out?
Offline
Re: Image replacement for TXP tag
Why not to use CSS? The code could look like this:
<txp:section link="1" title="1" class="act_btn" name="membership" />
CSS:
.act_btn {
display: block;
width: 190;
height: 35;
background: url(/url/of/the_image.jpg);
text-indent: -9999px;
}Last edited by the_ghost (2009-03-18 10:43:45)
Providing help in hacking ATM! Come to courses and don’t forget to bring us notebook and hammer! What for notebook? What a kind of hacker you are without notebok?
Offline
Re: Image replacement for TXP tag
Why not use css and background images? The end effect is identical and that way your menu remains accessible for those not showing images. You can then use the standard <txp:section link="1" title="1" class="nav_membership" name="membership" /> tag.
Here’s a tutorial (personally I put my menu states beneath each other rather than next to one another as in the tutorial but it doesn’t matter).
EDIT. Victor was quicker ;-)
Last edited by jakob (2009-03-18 10:49:24)
TXP Builders – finely-crafted code, design and txp
Offline
Re: Image replacement for TXP tag
Thanks the_ghost and Jakob,
As I will have a few buttons throughout the site, I was trying to work with a class that could be used for all and then a div for specific buttons -
.act_btn {
float:left;
margin:20px 25px;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
overflow:hidden;
text-indent:-9999px;
}
#signup_btn {
background-image:url(/images/17.png);
background-position:left 0;
background-repeat:no-repeat;
width:184px;
}
But I guess I could make both classes then use them together within the tag –
<txp:section link="1" title="1" class="signup_btn act_btn" wraptag="p" name="membership" />
Offline
Pages: 1