Posted by hakan kristiansen on January 23, 2009 at 9:11pm
Hej,
Jag undrar hur man gör för att separera olika block på en sida i CSS.
På min sida har jag en meny till vänster, content i mitten samt nyhetsblock till höger.
Som det är nu så ändrar jag på egenskaperna i nyhetsblocket- t.ex. texthöjd - då ändras alla andra block också
Jag förstår att det påverkar alla de andra blocken eftersom det står följande i zen-classic.css
div.content, div.links
{
font-size: 100%;
Info om blocket och menyn från firebug ger:
<
div id="block-views-news-block" class="block block-views region-odd odd region-count-1 count-3">
Skall jag skriva in ett nytt stycke i zen-classic.css genom att lägga till en ny rad med "div xxxxxx" ?
Tacksam för hjälp.
Mvh H
Comments
Använd tillräcklig specifik CSS-selektor
Du behöver skriva en CSS-regel som har en tillräcklig specifik selector för att bara gälla det block du önskar påverka.
Om du t.ex. vill ändra färgen på texten i blocket med nyheter men inte på texten i något annat block så kan du skriva någåt i stil med:
Om du vill exprimentera utan att behöva hacka i temat varje gång kan du installera CSS Injector.
Lär dig mer om CSS genom att studera standarden, läsa en bok och ta en on-line kurs. Här finns fler lästips.
Thomas Barregren – NodeOne
Tack Thomas, Jag vill
Tack Thomas,
Jag vill alltså separera det blocket helt för att kunna styra form och färg och skiljt ifrån andra block och menyer.
Då skulle det kunna stå ungeför så här för att styra fontfärg, bakgrundsfärg och texthöjd:
"#block-views-news-block {"
color: red;
font-size: 80%;
background-color: #ccc;
}
Är det smartast att lägga denna nya regel i zen-classic.css eller skall den styras ifrån någon annan av css filerna som styr min sida??
(jag använder zen-classic som tema)
Mvh
Håkan
Det "korrekta" och det "fula" sättet
Det mest "korrekta" sättet är att skapa ett subtema och göra förändringarna i det. Det "fulaste" sättet är att hacka direkt i zen-classic temat. Vilket du väljer är förstås upp till dig själv.
Thomas Barregren – NodeOne