Brug af CSS

Generelt
Kodeeksempler

Generelt

CSS (Cascading Style Sheets) benyttes til at style ens hjemmeside eller her: shoppen. CSS er for de lidt øvede. Denne lille guide er tiltænkt dem som skulle ønske en større kontrol over, hvordan deres shop ser ud og som allerede har en grundlæggende viden om HTML.

Som regel indsættes CSS kode i kodefeltet under Opsætning –> Sprog –> relevant sprog. Det gør det lettest at finde frem til igen. Men man kan uden problemer indsætte sin kode i langt de fleste kodefelter i shoppen (det kan være nødvendigt i visse situationer). Man kan lave ekstremt mange ting med CSS og alt for mange ting til, at det er overkommeligt at skrive det hele her, derfor hvis hvad du leder efter ikke står her så prøv her.

CSS manipulerer elementer på en webside og alle elementer har et navn (kaldet en CLASS), du kan se eksempler på elementnavne nedenfor. Hvis du ønsker at manipulere et element i shoppen, som ikke står beskrevet nedenfor, så må du i gang med lidt detektivarbejde. Måden at finde frem til et sådant navn er at gå ind på den relevante side i shoppen højreklik og vælge view source eller vis kilde.

Elementer kan deles i to kategorier; Standard og ikke standard. Standard elementer er f.eks. links, man kunne f.eks. lave et CSS script der fortæller shoppen, at alle Links skal have en bestemt skrifttype eller en bestemt farve. Hvis man manipulerer et standard element vil det ændre alle elementer af den type på siden. Ikke standard elementer er f.eks. kurven i shoppen.

Standard elementer	HTML TAG
Sideindhold	BODY
Sidehovedet	HEAD
Link	a
Afsnit tekst	p
Tabel	TABEL

Element	Elementnavn	Note
Produktmenu	.ProductMenu_TD
Produktmenu Kolonne	.ProductMenuCol_TD
Top menu	.TopMenu_TD
Kurv	.Basket_TD
Søgeramme	.SearchPage_TD
Top ramme	.SpaceTop_TD
Venstre ramme	.SpaceLeft_TD
Højre ramme	.SpaceRight_TD
Bund ramme	.SpaceBottom_TD
Forside	.FrontPage_TD
Flere Medier Element	.MediaViewerSelector	(varekort)
Flere Medier Element	.MediaLink_ProductInfo	(varekort)
Flere Medier Element	.MediaLinkHover_ProductInfo	(varekort)
Flere Medier Element	.MediaLinkSelected_ProductInfo	(varekort)
Flere Medier Element	.MediaViewerCanvas	(varekort)
Billeder på varekort	.Photo1_ProductInfo	(uden flere medier/egen skabelon)
Billeder på vareliste	.Photo1_ProductList	(uden egen vareliste skabelon)

Et CSS script ser sådan ud:

<STYLE TYPE="TEXT/CSS">
.Basket_TD{
position: absolute;
left: 100px;
top: 150px;
}
</STYLE>

.Basket_TD{

position: absolute;

left: 100px;

top: 150px;

}

</STYLE>

Første linje <STYLE TYPE=”TEXT/CSS”> fortæller, at nu begynder scriptet. .Basket_TD fortæller, hvilket element (hvilken CLASS) der skal manipulere. Alt der står imellem de to Tuborgklammer, er det vi ønsker at gøre ved elementet. Når der er et punktum foran et Elementnavn, så er det et ikke standard element vi manipulerer.

Kodeeksempler

I dette afsnit vil der være forskellige CSS kodeeksempler. Disse eksempler er i videst mulig udstrækning lavet så de kan indsættes direkte i shoppen, men bemærk at DanDomain ikke kan supportere disse eksempler. Vi kan hjælpe med at indsætte koden, men ikke med tilpasning af den.

Eksempler

Placering af elementer
Skjule elementer
Udskriv alle produktgruppenavne med normal eller fed tekst
Positionering af noget i bunden af produktgruppemenuen
Ændring af knapper på bestil step 1 (Avanceret script)
Fjerne indrykning på undergrupper i produktgruppemenu
Fjern Horizontal Rulers (streger) fra bestil step 1

Gentagelse af baggrundsbillede og justering
Ændring af afstand i produktmenu
Ændring af billedstørrelse for varebilleder i “Vis kurv”
Ramme omkring billeder på varekort
Skjule betalings- og/eller forsendelsesmetoder på bestil step 2
Indryk af f.eks. menupunkter i topmenu (padding):

Placering af elementer

Hvis man ønsker at placere et bestemt element (her er det kurven) kan følgende benyttes:

<STYLE TYPE="TEXT/CSS">
.Basket_TD {
position: absolute;
left: 100px;
top: 150px;
}
</STYLE>

.Basket_TD {

position: absolute;

left: 100px;

top: 150px;

}

</STYLE>

En anden metode:

<STYLE TYPE="TEXT/CSS">
padding-left: 20px;
padding-top: 65px;
</STYLE>

padding-left: 20px;

padding-top: 65px;

</STYLE>

Gentagelse af baggrundsbillede og justering

Alle elementer i shoppen kan have et baggrundsbillede. Disse gentager sig selv, hvilket kan undgås således (her i hovedvinduet):

<STYLE TYPE="TEXT/CSS">
.BODY {
background-repeat: no-repeat;
}
</STYLE>

.BODY {

background-repeat: no-repeat;

}

</STYLE>

Samtidigt ønskes måske at baggrunden skal være højre justeret, det kan opnås således:

<STYLE TYPE="TEXT/CSS">
.ELEMENT{
background-repeat: no-repeat ;
background-attachment: fixed;
background-position: top left;
}
</STYLE>

.ELEMENT{

background-repeat: no-repeat ;

background-attachment: fixed;

background-position: top left;

}

</STYLE>

Skjule elementer

Elementer kan skjules som vist herunder. Det er dog vigtigt at forstå forskellen på de 2 metoder man kan benytte. Den første er visibility: hidden; som skjuler indholdet af elementet, men pladsen er stadig reserveret. Den anden er display: none; som skjuler elementet helt og kollapser den plads der var afsat til det.

Dette eksempel skjuler overskriften på varelisten:

<STYLE TYPE="TEXT/CSS">
.Heading_ProductList {visibility: hidden;}
</STYLE>

.Heading_ProductList {visibility: hidden;}

</STYLE>

Dette eksempel skjuler hele produktmenuen, hvilket feks. kan være aktuelt hvis kunderne vælger vare på anden vis end gennem produktgruppemenuen eller hvis man ved visning af en given side ikke ønsker menuen vist:

><STYLE TYPE="TEXT/CSS">
.ProductMenuCol_TD {display: none;}
</STYLE>

><STYLE TYPE="TEXT/CSS">

.ProductMenuCol_TD {display: none;}

</STYLE>

Ændring af afstand i produktmenu:

Dette skal gøres for både de aktive og deaktive punkter i menuen. Eksemplet herunder sætter afstanden til en ret høj værdi (25px) men denne kan tilpasses efter behov

<STYLE TYPE="TEXT/CSS">
.Deactiv_Productmenu {line-height: 25px;}
.Activ_Productmenu {line-height: 25px;}
</STYLE>

.Deactiv_Productmenu {line-height: 25px;}

.Activ_Productmenu {line-height: 25px;}

</STYLE>

Udskriv alle produktgruppenavne med normal eller fed tekst

Dette script udskriver alle produktgrupper med normal tekst. I shoppen markeres grupper der har undergrupper normalt med fed skrift, men dette kan undgås via scriptet her:

<STYLE TYPE="TEXT/CSS">
.ProductMenu_MenuItemBold{font-weight:normal;}
</STYLE>

.ProductMenu_MenuItemBold{font-weight:normal;}

</STYLE>

Ønskes alle grupper med fed skrift, kan dette sættes i shoppen, ved at sætte elementerne Aktiv og Deaktiv som bold under Design –> Skins –> Produktmenu

Ændring af billedstørrelse for varebilleder i “Vis kurv”

Dette script kan ændre billedstørrelsen i “Vis kurv”. Størrelsen angives i px, og i eksemplet her er der brugt 60:

<STYLE TYPE="TEXT/CSS">
.ProductImage_ShowBasket{width:60px;}
</STYLE>

.ProductImage_ShowBasket{width:60px;}

</STYLE>

Positionering af noget i bunden af produktgruppemenuen:

Kan foreksempel benyttes hvis man ønsker en tekst eller et billede / logo indsat i bunden af sin produktgruppemenu

<STYLE TYPE="TEXT/CSS">
<div style="position: absolute; bottom:-20px;">her</div>
</STYLE>

</STYLE>

Ramme omkring billeder på varekort

Dette script giver en ramme omkring billeder på varekort, men vil kun virke når der ikke benyttes flere billeder/medier pr produkt, eller egen designet varekortskabelon:

<STYLE TYPE="TEXT/CSS">
.Photo1_ProductInfo IMG{border:1px solid black;}
</STYLE>

.Photo1_ProductInfo IMG{border:1px solid black;}

</STYLE>

Ændring af knapper på bestil step 1 (Avanceret script)

Koden her benytter teksten der indsættes for feks. feltet “Videre” under Design -> tekster/knapper -> bestil step 1 -> videre. Derudover sætter koden et baggrundsbillede på knappen, og selve knappen skaleres. “Width” og “height” indstiller hhv højde og bredde på knappen, “font-weight” bestemmer om teksten skal være feks. fed eller kursiv, og “color” bestemmer farven. Derudover indgår der stien til baggrundsbilledet (/images/design/minknap.gif), som selvfølgelig kan ændres efter behov

<STYLE TYPE="TEXT/CSS">
.SubmitButton_Orderstep1 {
width:75px;height:20px;text-transform:uppercase;font-weight:bold;color:#FFFFFF;border-style:none;border-width:0px;background-image: url('/images/design/frontpage.gif');background-repeat:no-repeat;background-color:transparent;margin-top:5px;
}
</STYTLE>

.SubmitButton_Orderstep1 {

width:75px;height:20px;text-transform:uppercase;font-weight:bold;color:#FFFFFF;border-style:none;border-width:0px;background-image: url('/images/design/frontpage.gif');background-repeat:no-repeat;background-color:transparent;margin-top:5px;

}

</STYTLE>

Skjule betalings- og/eller forsendelsesmetoder på bestil step 2

Disse scripts kan skjule henholdsvis betalingsmetoder og forsendelsesmetoder i shoppen på bestil step 2.

BEMÆRK: Det er meget vigtigt at der hvis disse eksempler benyttes, er valgt hhv. en standard betalings- og forsendelsesmetode for alle de mulige leveringslande i shoppen. Ellers vil der på ordren ikke registeres betaling eller forsendelse, hvilket forhindrer kunderne i at kunne gennemføre ordreforløbet.

Skjul betalingsmetoder:

<STYLE TYPE="TEXT/CSS">
.OrderStep2_PayMethods_TD {visibility: hidden;}
</STYLE>

.OrderStep2_PayMethods_TD {visibility: hidden;}

</STYLE>

Skjul forsendelsesmetoder:

<STYLE TYPE="TEXT/CSS">
.OrderStep2_ShippingMethods_TD {visibility: hidden;}
</STYLE>

.OrderStep2_ShippingMethods_TD {visibility: hidden;}

</STYLE>

Fjerne indrykning på undergrupper i produktgruppemenu

Dette CSS script fjerner den indrykning shoppen normalt laver foran undergrupper i produktgruppemenuen:

<STYLE TYPE="TEXT/CSS">
.SubCategoryIndent1_Productmenu {display:none;}
</STYLE>

.SubCategoryIndent1_Productmenu {display:none;}

</STYLE>

Indryk af f.eks. menupunkter i topmenu (padding):

Hvis det giver problemer at bruge marginfelterne under Design –> Skins kan i stedet bruges padding.

I eksemplet nedrykkes menupunkterne med 65 pixels, og skubbes mod højre med 20 pixels:

<STYLE TYPE="TEXT/CSS">
.TopMenu_TD {padding-left:20px; padding-top:65px;}
</STYLE>

.TopMenu_TD {padding-left:20px; padding-top:65px;}

</STYLE>

Fjern Horizontal Rulers (streger) fra bestil step 1

Eksemplet her fjerner de “dele-streger” der normalt findes på bestil step 1 i shoppen

<STYLE TYPE="TEXT/CSS">
.HR_OrderStep1 {display: none;}
</STYLE>

.HR_OrderStep1 {display: none;}

</STYLE>