Voorbeeld CSS: verschil tussen versies

Uit XpressionManager
Naar navigatie springen Naar zoeken springen
Regel 16: Regel 16:
 
  .middle_button_link a, .middle_button_link a:link, .middle_button_link a:visited, .middle_button_link a:active{font-size: 1.15em;}</code>
 
  .middle_button_link a, .middle_button_link a:link, .middle_button_link a:visited, .middle_button_link a:active{font-size: 1.15em;}</code>
  
== Winkelwagen ==
+
== Winkelwagen aanpassen ==
 
Winkelwagen op een andere positie in combinatie met login gegevens.<br/>
 
Winkelwagen op een andere positie in combinatie met login gegevens.<br/>
#zet de huidige winkelwagen uit<br/>
+
'''Begin met het aanpassen van de CSS d.m.v. "Extra CSS"'''<br/>
#geeft dmv extra css de vorm en positie aan van deze nieuwe winkelwagen<br/>
+
<br/>
#verplaatst de login, zodat deze naast de winkelwagen komt te staan.<br/>
+
1.zet de huidige winkelwagen uit<br/>
 
  <code>/*1 verbergen huidige winkelwagen*/
 
  <code>/*1 verbergen huidige winkelwagen*/
 
  .winkel_wagen{display:none;}
 
  .winkel_wagen{display:none;}
 
+
2.geeft dmv extra css de vorm en positie aan van deze nieuwe winkelwagen<br/>
 
  /* 2 nieuwe winkelwagen positioneren vormgeven*/
 
  /* 2 nieuwe winkelwagen positioneren vormgeven*/
 
  #custom_winkelwagen{position:absolute;top:19px;right:0px;width:115px;height:30px;padding-left:5px;display:block;border-left:solid 1px #000;text-transform:uppercase;}
 
  #custom_winkelwagen{position:absolute;top:19px;right:0px;width:115px;height:30px;padding-left:5px;display:block;border-left:solid 1px #000;text-transform:uppercase;}
 
  #custom_winkelwagen a{color:000;}
 
  #custom_winkelwagen a{color:000;}
 
+
3.verplaatst de login, zodat deze naast de winkelwagen komt te staan.<br/>
 
  /*3 inlog gedeelte verplaatsten naast nieuwe winkelwagen*/
 
  /*3 inlog gedeelte verplaatsten naast nieuwe winkelwagen*/
 
  #inlog{float:right;text-align:right;margin-top:0px;position:absolute;top:16px;right:125px;}
 
  #inlog{float:right;text-align:right;margin-top:0px;position:absolute;top:16px;right:125px;}
 
  #inloggen a{color:#000;}</code>
 
  #inloggen a{color:#000;}</code>
 +
 +
'''Plak de tekst in de extra HTML van je stijlthema:'''<br/>
 +
<code>&lt;% extra = ''
 +
order = getorder(false)
 +
unless order.nil?
 +
extra = " (#{order.orderrows.find(:all, :conditions => 'orderstatus_id >= 1').length})"
 +
else
 +
extra = ' (0)'
 +
end
 +
%>
 +
  &lt;div id="custom_winkelwagen">&lt;a href="/main/winkelwagen">winkelwagen &lt;%= extra %>&lt;/a>&lt;/div></code>

Versie van 18 feb 2013 17:03

Hieronder een paar voorbeeld CSS eigenschappen.

Buttons

Met onderstaande code kun je ervoor zorgen dat de buttons in Xpression Manager geen pijltjes meer aan de linker kant, en geen afgeronde hoeken aan de rechterkant meer hebben.
Het worden dan rechthoekige buttons, zie afbeelding hieronder.
caption
Voeg onderstaande CSS toe aan "extra CSS"

/*buttons*/ 

/*linker- en rechterdeel van de button verbergen*/
.left_button, .right_button{display:none;} 

/*zorgen dat de buttons meer ruimte krijgen naast de tekst, en tekst even groot*/
.middle_button2, .button{padding-right:10px;background-color:#00afca;padding-left:10px;}
.middle_button2 {font-size:1.2em;}
.middle_button_link a, .middle_button_link a:link, .middle_button_link a:visited, .middle_button_link a:active{font-size: 1.15em;}

Winkelwagen aanpassen

Winkelwagen op een andere positie in combinatie met login gegevens.
Begin met het aanpassen van de CSS d.m.v. "Extra CSS"

1.zet de huidige winkelwagen uit

/*1 verbergen huidige winkelwagen*/
.winkel_wagen{display:none;}

2.geeft dmv extra css de vorm en positie aan van deze nieuwe winkelwagen

/* 2 nieuwe winkelwagen positioneren vormgeven*/
#custom_winkelwagen{position:absolute;top:19px;right:0px;width:115px;height:30px;padding-left:5px;display:block;border-left:solid 1px #000;text-transform:uppercase;}
#custom_winkelwagen a{color:000;}

3.verplaatst de login, zodat deze naast de winkelwagen komt te staan.

/*3 inlog gedeelte verplaatsten naast nieuwe winkelwagen*/
#inlog{float:right;text-align:right;margin-top:0px;position:absolute;top:16px;right:125px;}
#inloggen a{color:#000;}

Plak de tekst in de extra HTML van je stijlthema:

<% extra =  
order = getorder(false) 
unless order.nil? 
	extra = " (#{order.orderrows.find(:all, :conditions => 'orderstatus_id >= 1').length})"
else
	extra = ' (0)'
end
%>
  <div id="custom_winkelwagen"><a href="/main/winkelwagen">winkelwagen <%= extra %></a></div>