Virtuemart 2 mygtuko „Įdėti į krepšelį“ apipavidalinimas

PDFSpausdintiEl. paštas

Sekmadienis, 18 Rugpjūtis 2013 21:06 Parašė Rimvydas Peržiūrų: 3140

( 4 Balsai )
Virtuemart 2 mygtuko „Įdėti į krepšelį“ apipavidalinimas - 4.8 out of 5, based on 4 votes

 

Pradedantys dirbti su Virtuemart komponentu nemažai laiko sugaišta ieškodami ir bandydami pritaikyti prie dizaino firminį VM žalią mygtuką „Įdėti į krepšelį“. Šiame straipsnyje ir išsiaiškinsime kaip tai greitai ir paprastai padaryt.

Standartiškai mes turime tokį vaizdą:

Pats užrašas esantis ant mygtuko yra www.manotinklalapis.lt/language/lt-LT/lt-LT.com_virtuemart.ini faile eilutė:

1
COM_VIRTUEMART_CART_ADD_TO="Įdėti į krepšelį"

Mygtuko stilius aprašomas components/com_virtuemart/assets/css/vmsite-ltr.css faile . Spalva (fonas) apytiksliai 52 eilutė:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
span.addtocart-button input.addtocart-button,
span.addtocart-button input.notify-button{
width:152px;background:#e8e8e8 url(../images/vmgeneral/backgrounds.png) top repeat-x;
background-position:0 -160px;
color:#fff;
border:solid #00a000 1px;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
font-size:14px;
cursor:pointer;
height:34px;
text-align:center;
letter-spacing:1px;
padding:4px 5px;}
 

Žodžiu visa mygtuko išvaizda aprašoma šiame faile. Išvaizda kai užvedame ant mygtuko kursorių 170 eilutė:

1
2
3
4
5
6
7
span.addtocart-button input.addtocart-button:hover,
span.addtocart-button input.notify-button:hover,
input.highlight-button:hover,
a.highlight:hover{
background-position:0 -200px;
color:#f2f2f2;}
 

Jei norime pakeisti greta esančius + - ženkliukus ar jų išvaizdą 43, 44 eilutė:

1
2
3
4
5
6
7
8
span.quantity-controls input.quantity-plus{
background:url(../images/vmgeneral/quantity-controls.png) repeat-x;
margin-bottom:2px;}
 
span.quantity-controls input.quantity-minus{
background:url(../images/vmgeneral/quantity-controls.png) repeat-x;
background-position:15px 0;}
 

Pats laukelio dydis kuriame atvaizduojamas prekės kiekis 40 eilutė:

1
2
3
4
5
6
7
input.quantity-input{
height:19px;
width:25px;
text-align:center;
font-weight:700;
padding:2px;}
 

Jei šis (prekių kiekio laukelis) mums nereikalingas ji visai paslėpti/išimti galime pakeisdami 39 eilutės įraša:

1
span.quantity-box{float:left;width:27px;padding-top:5px;}

keičiame į:

1
span.quantity-box{display:none;}

ir plius/minus ženkliukus šaliname atsidarę failą components/com_virtuemart/views/productdetails/tmpl/default_addtocart.php  ir pašalinę kodo gabaliuką 109-112 eilutės:

1
2
3
4
5
<span class="quantity-controls js-recalculate">
		<input type="button" class="quantity-controls quantity-plus"/>
		<input type="button" class="quantity-controls quantity-minus"/>
 </span>
 

Aptarkite šį straipsnį forume
Norėdami dalyvauti diskusijoje turite prisijungti arba užsiregistruoti .

Joomla123.lt is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.
The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries.