Need to customize the standard list dropdown button

[maayan]

Hi all,
First is hello to Rocky; i use many of your solutions many thanks!
So, i want to change the look of the select list buttons globally like in this tutorial:
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
Example attached.
How will i go about implementing this into Prestashop 1.3.1

Thank
Maayan

[tomerg3]

Did you try to add it to global.css?

[maayan]

No i did not, and as i understand it will have to be inserted into other pages too, any way i am not that Prestashop smart.

Thank you any way.

Any other help please?

[tomerg3]

If you add it to global.css, it will affect all the page.

Try it first, if it doesn't work, then ask...

[maayan]

Please help

 

 

Yes i did and it dos not work<br/>Thanks<br/><br/>Dos any one knows where to insert the Java and where the css?<br/><br/>Please help<br/>ThankYou

[maayan]

Help Please!

[tomerg3]

What did you try and where?

 

Can you paste the code you added and the file / location you added it?

 

What happened? Are you getting any Javascript errors?

[maayan]

Hi Tomer,

 

i added the code into global.css as suggested by you, it looks like this:

 

 

 

.checkbox, .radio {

width: 19px;

height: 25px;

padding: 0 5px 0 0;

background: url(checkbox.gif) no-repeat;

display: block;

clear: left;

float: left;

 

}

.radio {

background: url(radio.gif) no-repeat;

 

}

.select {

position: absolute;

width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */

height: 21px;

padding: 0 24px 0 8px;

color: #fff;

font: 12px/21px arial,sans-serif;

background: url(select.gif) no-repeat;

overflow: hidden;

 

}

/*--------------------------------------------------------------*/

/*

CUSTOM FORM ELEMENTS

Created by Ryan Fait

www.ryanfait.com

The only things you may need to change in this file are the following

variables: checkboxHeight, radioHeight and selectWidth (lines 24, 25, 26)

The numbers you set for checkboxHeight and radioHeight should be one quarter

of the total height of the image want to use for checkboxes and radio

buttons. Both images should contain the four stages of both inputs stacked

on top of each other in this order: unchecked, unchecked-clicked, checked,

checked-clicked.

You may need to adjust your images a bit if there is a slight vertical

movement during the different stages of the button activation.

The value of selectWidth should be the width of your select list image.

Visit http://ryanfait.com/ for more information.

*/

 

 

var checkboxHeight = "25";

var radioHeight = "25";

var selectWidth = "190";

 

/* No need to change anything after this */

 

 

document.write('<style type="text/css">input.styled { display: none; } select.styled { position: relative; width: ' + selectWidth + 'px; opacity: 0; filter: alpha(opacity=0); z-index: 5; } .disabled { opacity: 0.5; filter: alpha(opacity=50); }</style>');

 

 

var Custom = {

init: function() {

var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;

for(a = 0; a < inputs.length; a++) {

if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {

span[a] = document.createElement("span");

span[a].className = inputs[a].type;

 

if(inputs[a].checked == true) {

if(inputs[a].type == "checkbox") {

position = "0 -" + (checkboxHeight*2) + "px";

span[a].style.backgroundPosition = position;

} else {

position = "0 -" + (radioHeight*2) + "px";

span[a].style.backgroundPosition = position;

}

}

inputs[a].parentNode.insertBefore(span[a], inputs[a]);

inputs[a].onchange = Custom.clear;

if(!inputs[a].getAttribute("disabled")) {

span[a].onmousedown = Custom.pushed;

span[a].onmouseup = Custom.check;

} else {

span[a].className = span[a].className += " disabled";

}

}

}

inputs = document.getElementsByTagName("select");

for(a = 0; a < inputs.length; a++) {

if(inputs[a].className == "styled") {

option = inputs[a].getElementsByTagName("option");

active = option[0].childNodes[0].nodeValue;

textnode = document.createTextNode(active);

for(b = 0; b < option.length; b++) {

if(option.selected == true) {

textnode = document.createTextNode(option.childNodes[0].nodeValue);

}

}

span[a] = document.createElement("span");

span[a].className = "select";

span[a].id = "select" + inputs[a].name;

span[a].appendChild(textnode);

inputs[a].parentNode.insertBefore(span[a], inputs[a]);

if(!inputs[a].getAttribute("disabled")) {

inputs[a].onchange = Custom.choose;

} else {

inputs[a].previousSibling.className = inputs[a].previousSibling.className += " disabled";

}

}

}

document.onmouseup = Custom.clear;

},

pushed: function() {

element = this.nextSibling;

if(element.checked == true && element.type == "checkbox") {

this.style.backgroundPosition = "0 -" + checkboxHeight*3 + "px";

} else if(element.checked == true && element.type == "radio") {

this.style.backgroundPosition = "0 -" + radioHeight*3 + "px";

} else if(element.checked != true && element.type == "checkbox") {

this.style.backgroundPosition = "0 -" + checkboxHeight + "px";

} else {

this.style.backgroundPosition = "0 -" + radioHeight + "px";

}

},

check: function() {

element = this.nextSibling;

if(element.checked == true && element.type == "checkbox") {

this.style.backgroundPosition = "0 0";

element.checked = false;

} else {

if(element.type == "checkbox") {

this.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";

} else {

this.style.backgroundPosition = "0 -" + radioHeight*2 + "px";

group = this.nextSibling.name;

inputs = document.getElementsByTagName("input");

for(a = 0; a < inputs.length; a++) {

if(inputs[a].name == group && inputs[a] != this.nextSibling) {

inputs[a].previousSibling.style.backgroundPosition = "0 0";

}

}

}

element.checked = true;

}

},

clear: function() {

inputs = document.getElementsByTagName("input");

for(var b = 0; b < inputs.length; b++) {

if(inputs.type == "checkbox" && inputs.checked == true && inputs.className == "styled") {

inputs.previousSibling.style.backgroundPosition = "0 -" + checkboxHeight*2 + "px";

} else if(inputs.type == "checkbox" && inputs.className == "styled") {

inputs.previousSibling.style.backgroundPosition = "0 0";

} else if(inputs.type == "radio" && inputs.checked == true && inputs.className == "styled") {

inputs.previousSibling.style.backgroundPosition = "0 -" + radioHeight*2 + "px";

} else if(inputs.type == "radio" && inputs.className == "styled") {

inputs.previousSibling.style.backgroundPosition = "0 0";

}

}

},

choose: function() {

option = this.getElementsByTagName("option");

for(d = 0; d < option.length; d++) {

if(option[d].selected == true) {

document.getElementById("select" + this.name).childNodes[0].nodeValue = option[d].childNodes[0].nodeValue;

}

}

}

}

window.onload = Custom.init;

 

 

 

Thanks

 

Maayan

[tomerg3]

I suspect that .checkbox, .radio in the CSS gets overridden by the prestashop CSS.

 

You should use a tool like firebug to check which CSS code is actually being used.

[maayan]

Tomer, thanks you for your answer.

 

This is a 2 part code:

The JV script

And PHP one

 

I just pasted both of them for you to see.

 

I got it from here: http://ryanfait.com/...-radio-buttons/

I know it is overridden by the prestashop global.css

Question is where to put CSS and where to insert java?

 

Thanks

Maayan

[tomerg3]

you can create a new .js file and a new .css file with their respected code (place them in your theme folder, under css and js), and include the files in header.tpl.

 

You will likely have to add a container div with an ID around the place where the content would be, and change the CSS to be specific to that block

For example

Original CSS:

   .checkbox { .........}

Original HTML:

<input type='checkbox' />[code]


New CSS:
[code]   #custom_menu.checkbox { .........}

New HTML:

<div id="custom_menu"><input type='checkbox' /></div>[code]

[maayan]

Thank you tomer

 

I am sorry but i do not know how to do this things,

I looked inside header.tpl and could not understand where to input file name .css or .tpl

and you said:

"You will likely have to add a container div with an ID" again where do i do that and how in the global css? in /tpl?

As you can see i am a new bee at this.

If you will be so kind and have the time i will be happy for more detail for lame man.

 

This is my tpl:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">

<head>

<title>{$meta_title|escape:'htmlall':'UTF-8'}</title>

{if isset($meta_description) AND $meta_description}

<meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />

{/if}

{if isset($meta_keywords) AND $meta_keywords}

<meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />

{/if}

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<meta name="generator" content="PrestaShop" />

<meta name="robots" content="{if isset($nobots)}no{/if}index,follow" />

<link rel="icon" type="image/vnd.microsoft.icon" href="{$img_ps_dir}favicon.ico" />

<link rel="shortcut icon" type="image/x-icon" href="{$img_ps_dir}favicon.ico" />

{if isset($css_files)}

{foreach from=$css_files key=css_uri item=media}

<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />

{/foreach}

{/if}

<script type="text/javascript" src="{$content_dir}js/tools.js"></script>

<script type="text/javascript">

var baseDir = '{$content_dir}';

var static_token = '{$static_token}';

var token = '{$token}';

var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};

var roundMode = {$roundMode};

</script>

<script type="text/javascript" src="{$content_dir}js/jquery/jquery-1.2.6.pack.js"></script>

<script type="text/javascript" src="{$content_dir}js/jquery/jquery.easing.1.3.js"></script>

<script type="text/javascript" src="{$content_dir}js/jquery/jquery.hotkeys-0.7.8-packed.js"></script>

{if isset($js_files)}

{foreach from=$js_files item=js_uri}

<script type="text/javascript" src="{$js_uri}"></script>

{/foreach}

{/if}

{$HOOK_HEADER}

</head>

 

<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>

{if !$content_only}

<noscript><ul><li>{l s='This shop requires JavaScript to run correctly. Please activate JavaScript in your browser.'}</li></ul></nipt>

<div id="page">

 

<!-- Header -->

 

<div id="header">

 

<p class="align_left"></p>

 

<!-- <img src="{$img_ps_dir}constract.jpg"}"> -->

<br></br>

<br></br>

 

 

 

<h1 id="logo"><a href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"><img src="{$img_ps_dir}logo_{$lang_iso}.jpg" alt="{$shop_name|escape:'htmlall':'UTF-8'}"></a></h1>

<div id="header_right">

{$HOOK_TOP}

</div>

</div>

 

<div id="columns">

<!-- Left -->

<div id="left_column" class="column">

{$HOOK_LEFT_COLUMN}

</div>

 

<!-- Center -->

<div id="center_column">

{/if}

 

 

Thanks Agin

 

Maayan

[tomerg3]

I am more than happy to give you pointer (which I did), or help with a specific technical question, however, I cannot code this for you.

 

If you do now know how to code, you may want to find a developer and pay him to do this work.