Voorbeeld CSS: verschil tussen versies
Geen bewerkingssamenvatting |
|||
Regel 22: | Regel 22: | ||
1.zet de huidige winkelwagen uit<br/> | 1.zet de huidige winkelwagen uit<br/> | ||
<code>/*1 verbergen huidige winkelwagen*/ | <code>/*1 verbergen huidige winkelwagen*/ | ||
#winkel_wagen{display:none;} | |||
2.geeft dmv extra css de vorm en positie aan van deze nieuwe winkelwagen<br/> | 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*/ | ||
Regel 41: | Regel 41: | ||
end | end | ||
%> | %> | ||
<div id="custom_winkelwagen"><a href="/main/winkelwagen">winkelwagen <%= extra %></a></div></code> | <div id="custom_winkelwagen"><a href="/main/winkelwagen">winkelwagen <%= extra %></a></div></code> | ||
== Kruimelpad zonder achtergrond afbeeldingen == | == Kruimelpad zonder achtergrond afbeeldingen == |
Versie van 28 mrt 2013 09:23
Hieronder een paar voorbeeld CSS eigenschappen.
Buttons lay-out aanpassen
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.
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>
Kruimelpad zonder achtergrond afbeeldingen
Met onderstaande code kun je ervoor zorgen dat het kruimelpad in Xpression Manager geen achtergrond afbeeldingen meer heeft, en dit op een andere positie komt te staan.
Het wordt kruimel pad straks weergegeven, zie afbeelding hieronder.
Voeg onderstaande CSS toe aan "extra CSS"
/*kruimels geen achtergrond meer en/of niet meer tonen*/
#kruimel-mid, #kruimel-left, #kruimel-right{background-image:none;}
#kruimel-left, #kruimel-right{display:none;}
/*kruimelpad positioneren*/
#kruimel{top:90px;right:0px;}
#kruimel-mid{font-weigth:normal;}
#kruimel-mid a:hover{color:#00afca;}