Guest Fuzquia Posted January 31, 2007 Share Posted January 31, 2007 a little problem I am having turning my category links into images. I have changed the categories.tpl file to read as follows: <!-- BEGIN: categories --> <div class="boxTitleLeft">{LANG_CATEGORY_TITLE}</div> <div class="boxContentLeft"> <a href="http://www.mattscanvas.co.uk/index.php"><img src="http://www.mattscanvas.co.uk/catbuttons/HomepageButton.jpg"></a> <ul> <li class="bullet"><a href="index.php" class="txtDefault">{LANG_HOME}</a></li> <!-- BEGIN: li --> <li class="bullet"><a href="index.php?act=viewCat&catId={DATA.cat_id}" class="txtDefault">{DATA.cat_name}</a></li> <!-- END: li --> <!-- BEGIN: sale --> <li class="bullet"><a href="index.php?act=viewCat&catId=saleItems" class="txtDefault">{LANG_SALE_ITEMS}</a></li> <!-- END: sale --> </ul> </div> <!-- END: categories --> I thought this code would change my link to an image as listed in the code. However it only adds an additional link 'above' the original text link? Can anyone point out where I am going wrong to 'replace' the homepage link with the image instead of adding an extra link? Quote Link to comment Share on other sites More sharing options...
Guest Posted January 31, 2007 Share Posted January 31, 2007 If you want the image to replace the HomePage link, you'll have to remove the original HomePage link. This line: <li class="bullet"><a href="index.php" class="txtDefault">{LANG_HOME}</a></li> is creating the default HomePage link. Quote Link to comment Share on other sites More sharing options...
markscarts Posted February 1, 2007 Share Posted February 1, 2007 Well, I am seeing the button perfectly at http://www.mattscanvas.co.uk/ Of course, you have the default blue border that goes around image links, and which looks ugly IMO. Replace the code above with this code, which is valid and will look better, too: <!-- BEGIN: categories --> <div class="boxTitleLeft">{LANG_CATEGORY_TITLE}</div> <div class="boxContentLeft"> <a href="index.php"><img src="http://www.mattscanvas.co.uk/catbuttons/HomepageButton.jpg" alt="" border="0" /></a> <ul> <!-- BEGIN: li --> <li class="bullet"><a href="index.php?act=viewCat&catId={DATA.cat_id}" class="txtDefault">{DATA.cat_name}</a></li> <!-- END: li --> <!-- BEGIN: sale --> <li class="bullet"><a href="index.php?act=viewCat&catId=saleItems" class="txtDefault">{LANG_SALE_ITEMS}</a></li> <!-- END: sale --> </ul> </div> <!-- END: categories --> BTW, very nice gray skin, I like it alot :w00t: Quote Link to comment Share on other sites More sharing options...
Guest Fuzquia Posted February 1, 2007 Share Posted February 1, 2007 Thabnks very much for the advice. I have managed to remove the line: <li class="bullet"><a href="index.php" class="txtDefault">{LANG_HOME}</a></li> Which solved my problem with the omepage, however now I have added all my other links the same problem applies to all other links. The graphic link is simply side by side with the text link. I can't see any other lines of code (as above) to remove for these other links? My file now looks like this: <!-- BEGIN: categories --> <div class="boxTitleLeft">{LANG_CATEGORY_TITLE}</div> <div class="boxContentLeft"> <a href="index.php"><img src="http://www.mattscanvas.co.uk/catbuttons/HomepageButton.jpg" alt="" border="0" /></a> <a href="photo-to-canvas/cat_2.html"><img src="http://www.mattscanvas.co.uk/catbuttons/PhototocanvasButton.jpg" alt="" border="0" /></a> <a href="photo-to-pop-art/cat_3.html"><img src="http://www.mattscanvas.co.uk/catbuttons/PhototoPopartButton.jpg" alt="" border="0" /></a> <a href="geometric/cat_4.html"><img src="http://www.mattscanvas.co.uk/catbuttons/GeometricButton.jpg" alt="" border="0" /></a> <a href="abstract/cat_5.html"><img src="http://www.mattscanvas.co.uk/catbuttons/AbstractButton.jpg" alt="" border="0" /></a> <a href="nature/cat_6.html"><img src="http://www.mattscanvas.co.uk/catbuttons/NatureButton.jpg" alt="" border="0" /></a> <a href="gift-vouchers/cat_7.html"><img src="http://www.mattscanvas.co.uk/catbuttons/GiftVoucherButton.jpg" alt="" border="0" /></a> <a href="photography-prints/cat_9.html"><img src="http://www.mattscanvas.co.uk/catbuttons/PhotographyPrintsButton.jpg" alt="" border="0" /></a> <a href="examples-of-our-work/cat_10.html"><img src="http://www.mattscanvas.co.uk/catbuttons/ExamplesButton.jpg" alt="" border="0" /></a> <a href="book-a-photographer/cat_11.html"><img src="http://www.mattscanvas.co.uk/catbuttons/BookPhotographerButton.jpg" alt="" border="0" /></a> <a href="cat_saleItems.html"><img src="http://www.mattscanvas.co.uk/catbuttons/SaleItemsButton.jpg" alt="" border="0" /></a> <ul> <!-- BEGIN: li --> <li class="bullet"><a href="index.php?act=viewCat&catId={DATA.cat_id}" class="txtDefault">{DATA.cat_name}</a></li> <!-- END: li --> <!-- BEGIN: sale --> <li class="bullet"><a href="index.php?act=viewCat&catId=saleItems" class="txtDefault">{LANG_SALE_ITEMS}</a></li> <!-- END: sale --> </ul> </div> <!-- END: categories --> Do i remove this part? <!-- BEGIN: li --> <li class="bullet"><a href="index.php?act=viewCat&catId={DATA.cat_id}" class="txtDefault">{DATA.cat_name}</a></li> <!-- END: li --> I am presuming it has something to do with this line, but I have no experience of web design and its just a gues i'm afraid! Can anyone advise on what I need to delete now? Thanks again... Quote Link to comment Share on other sites More sharing options...
Guest Fuzquia Posted February 1, 2007 Share Posted February 1, 2007 Its ok, I just went for it and delted th part I was thinking needed deleted! I backed it up first though, worked a treat. Thanks to thos who offered advice. Is there any way of moving them closer together? I dont have much space on the actual graphic so I presume there must be default space between the buttons? Is there a way to make this smaller and move the graphics closer together? Quote Link to comment Share on other sites More sharing options...
Guest kgsmith Posted April 6, 2007 Share Posted April 6, 2007 I love the idea with the category buttons.. where did you go to make those? I would love to try that on my site.. keith sportsbykeith.com Well, I am seeing the button perfectly at http://www.mattscanvas.co.uk/ Of course, you have the default blue border that goes around image links, and which looks ugly IMO. Replace the code above with this code, which is valid and will look better, too: <!-- BEGIN: categories --> <div class="boxTitleLeft">{LANG_CATEGORY_TITLE}</div> <div class="boxContentLeft"> <a href="index.php"><img src="http://www.mattscanvas.co.uk/catbuttons/HomepageButton.jpg" alt="" border="0" /></a> <ul> <!-- BEGIN: li --> <li class="bullet"><a href="index.php?act=viewCat&catId={DATA.cat_id}" class="txtDefault">{DATA.cat_name}</a></li> <!-- END: li --> <!-- BEGIN: sale --> <li class="bullet"><a href="index.php?act=viewCat&catId=saleItems" class="txtDefault">{LANG_SALE_ITEMS}</a></li> <!-- END: sale --> </ul> </div> <!-- END: categories --> BTW, very nice gray skin, I like it alot Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.