Jump to content

Would someone be kind enough to have a look at...


Guest Fuzquia

Recommended Posts

Guest Fuzquia

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:

Link to comment
Share on other sites

Guest Fuzquia

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

Link to comment
Share on other sites

Guest Fuzquia

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?

Link to comment
Share on other sites

  • 2 months later...
Guest kgsmith

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 ;)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...