(SOLVED) Some basic HTML/CSS help?

[Twinkles]

Hello.

I am trying to replace the text here "Buy It" written in white with an image of a button.

http://www.jahwaggysdubplatedownloads.com/gb/home/10-test-product-1.html


Can someone kind out there show me where I need to edit and the code I should use please? I realize I need to link to an image which I will upload.

Edited September 8, 2013 by Twinkles (see edit history)

[vekia]

i don't see there any "buy it", can you clarify it a bit? what exactly you want to change?

you're talking about this:

 

?

 

how you added this feature?

[Twinkles]

Hi Vekia,

 

Yes that bit. Its via a module for selling MP3's.

[vekia]

so go to the localization > translations

 

from the first drop down select "modules translation", click on flag

 

now you will see list of modules and available to translate / change fields. search for this module and this strin "Buy it !" and change translation

[Twinkles]

Thanks Vekia - I dont want to change the word to another - i want to insert a button/image instead.

[vekia]

ahh so in this case you have to modify the module .tpl file, instead the simple "Buy it" use code with button.

unfortunately i don't know how this module looks like (especially sources) so it's hard to say what and where you have to change / add

[Norwegian Rat]

This might work for you.

 

Locate the tpl file as vekia said. Search for the link you want to change to a button, replace the code with this one:

 

<a class="button" href="{$link->getPageLink('CHANGETHISTOWHEREEVERTHELINKMAYLEAD.php', true)}" title="{l s='Buy it!'}">{l s='Buy it!'}</a>

[Twinkles]

Sorry for the late reply - been away. I am not sure what to change. I have found the lable in the tpl file - but not sure what to change. I just want a small image (button) instead of the text "Buy It Now"

 

Code from the tpl is this :-

 

{/if}
			    <span class="mp3_label">{$download.display_filename}</span>
		    {if $download.physically_filename neq ''}
			    <span class="mp3_label"><a onclick="$('#idCombination').val({$download.id_product_attribute});$('#add_to_cart .exclusive').click();$('#idCombination').val(0);">{l s='BUY IT NOW !' mod='mp3downloadmagavenue'}</a></span>			   
		    {/if}

[Twinkles]

Can anyone help me?

[vekia]

change this:

{l s='BUY IT NOW !' mod='mp3downloadmagavenue'

and use some image:

 

<img src="URL TO THE IMAGE" />

[Twinkles]

Hi Vekia - when I try this - I end up with nothing. Do I delete the entire bit of text there, and then replace it with something like this

 

url("img/icon/cart.gif")

[Twinkles]

Anyone help please?

[vekia]

sorry for late reply,

 

where you added: url("img/icon/cart.gif")  this?

 

im asking because it is css style and you need to define block for this

[Twinkles]

Thanks for you help so far Vekia.

 

I just replaced the text you mentioned

 

{l s='BUY IT NOW !' mod='mp3downloadmagavenue

 

with

 

url("img/icon/cart.gif")

 

Is that not correct then?

[vekia]

no, it isn't correct.

 

you have to define new class in css styles, for example:

.mynewclass{
url("img/icon/cart.gif")
}

then in .tpl file use class="mynewclass" in dom object where you want to display button

[Twinkles]

OK maybe I am not able to do this. 

 

I can create a new class in the CSS no problem.  (Or could I use an absolute path to image - like www.website.com/myimage/someimage.gif ???)

 

But after this I am lost as to what you mean.  Sorry for being a newbie but huh? 

[vekia]

can you show your code (after changes) from your tpl file

+ css styles definition (from stylesheet file)

 

i will inspect it

[Twinkles]

Thanks  Vekia - but thats my problem, I am not sure what to change on  the tpl.

 

For the css

 

I added the follow to the global.css excatly as below.

 

.buyitnowsingle{
url("img/icon/cart.gif")
}

 

Then I get stuck as what to do next in the tpl file.  Somewhere I guess with this code?

 </object>
                {/if}
                    <span class="mp3_label">{$download.display_filename}</span>
                {if $download.physically_filename neq ''}
                    <span class="mp3_label"><a onclick="$('#idCombination').val({$download.id_product_attribute});$('#add_to_cart .exclusive').click();$('#idCombination').val(0);">{l s='BUY IT NOW !' mod='mp3downloadmagavenue'}</a></span>                
                {/if}
            </div>

[vekia]

 <span class="mp3_label"><a class="buyitnowsingle" onclick="$('#idCombination').val({$download.id_product_attribute});$('#add_to_cart .exclusive').click();$('#idCombination').val(0);">{l s='BUY IT NOW !' mod='mp3downloadmagavenue'}</a></span>                

and in:

.buyitnowsingle{

background: url("img/icon/cart.gif")

}

 

define also width and height related to the size of your img/icon/cart.gif image size

[Twinkles]

Thanks Vekia - but I must be stupid - I copy the code as you have suggested,  but it still appears as text.  I can changeit via CSS if I use background image - but it does not show the image itself. I noticed the URL does not get picked up in Firefox either?

[vekia]

yess because there is still {l s='BUY IT NOW !' mod='mp3downloadmagavenue'}

i checked sources of your code and it looks like:

.buyitnowsingle{
url("img/icon/cart.gif")
	height:100%;
	width:100%
}

you should use:

.buyitnowsingle{
background: url("img/icon/cart.gif");
height:100%;
width:100%
}

and of course you need to upload cart image to the img/icon/cart !

[Twinkles]

Thansk Vekia but when I remove that bit - it removes the images too - I guess becuse they are backgrounds?  The image is displaying now but behind the text and not fully in view.

 

I do appreciate your patience.

[vekia]

so remove the {l s='BUY IT NOW !' mod='mp3downloadmagavenue'} from .tpl file and define width and height the same, as image has

ps. we are so close

[Twinkles]

ah we really are close - I cant quite find where it goes

 

It shows the text width etc - soooo close.

<span class="mp3_label"><a class="buyitnowsingle" onclick="$('#idCombination').val({$download.id_product_attribute});$('#add_to_cart .exclusive').click();$('#idCombination').val(0);">width="25"height="25"</a></span>  

[vekia]

i mean height and width in css styles

 

use this style:

.buyitnowsingle {
display: inline-block;
background: url("http://www.jahwaggysdubplatedownloads.com/themes/default/img/icon/add.png") no-repeat;
height: 35px;
width: 35px;
}

and this code:

<span class="mp3_label"><a class="buyitnowsingle" onclick="$('#idCombination').val({$download.id_product_attribute});$('#add_to_cart .exclusive').click();$('#idCombination').val(0);"></a></span>  

[Twinkles]

ahhhh so close.  I almost have it - (I changed the image) and it is not looking quite right but almost.

[vekia]

to the styles add:

 

1. position: absolute;

[Twinkles]

Getting closer!  They seem to overlap when directly above like on this product.

 

http://www.jahwaggysdubplatedownloads.com/gb/home/35-wayne-mcarthur.html

Edited September 8, 2013 by Twinkles (see edit history)

[vekia]

so what to change right now?    

[Twinkles]

Sorry just edited my last post - check this product and you will see

 

http://www.jahwaggysdubplatedownloads.com/gb/home/35-wayne-mcarthur.html

[vekia]

in this case you need to add padding to the divs

 

in this case, in global.css use this:

#mp3download div {padding:5px;}

[Twinkles]

Vekia Sir - you are officially my hero!  Thank you so much for your help!  This is one job I can tick off.

 

On to combination issues - but I will start another thread for this

 

I will mark this has solved.

[vekia]

glad to hear that i could help you a little in this case  This is our common success

best regards

[siblibusro]

@vekia

i send you message in fb 

please advise

 

regards

[vekia]

to my personal account? i haven't received any message from you there

[siblibusro]

i send to 

Miłosz Myszczuk account

is it you ?? or ?

[vekia]

yea that's right, maybe i don't see your message because we aren't friends on FB?