Ibland vill man ha något som går utöver default-inställningarna på sin hemsida. I b*cms kan man använda fältet för egen css-kod under inställningar > utseende för att finjustera avstånd, storlekar och färger på alla css-element som används av systemet. Det kräver förstås att man har bra kunskap om hur css fungerar och att man satt sig in i hur det fungerar för b*cms. Här är i alla fall ett exempel på hur man kan göra en egen inställning för menyn. Ni som inte är ett dugg intresserade av kodning whatsoever kan sluta läsa här!

Börja med att sätta menyvalet till horisontell med tom separator på inställningar > webbplats samt att publicera om menyn under inställningar > meny och kategorier.

Klistra sedan in följande kod i css-fältet under inställningar > utseende

ul.dropdown li {
max-width: 100px;
min-width: 40px;
padding: 2px 12px 2px 8px;
border-left:1px solid #ccc;
line-height: 1.4em;
}

ul.dropdown li span {
margin: 0px;
}

Vad gör då ovanstående kod? Max-width och min-width begränsar bredden på meny-objekten vilket är användbart t.ex. om man har långa menyobjekt som man vill ska visas på flera rader. Padding finjusterar avstånden till ovanstående linje och till övriga objekt. Border-left gör en linje på vänster sida om menyobjekten. Höjden på menyobjekten (och därmed linjen) sätts med line-height.

Den sista kod-snutten används för att ta bort avstånd som skapats av default-inställningen.

Hur ser då detta ut i verkligheten? Du behöver inte titta längre än till menyn på denna sajt som använder just denna inställning.

Happy modding!