Posted by hakan kristiansen on January 25, 2009 at 7:34pm
Jag har skapat runda hörn för mina block genom att lägga till följande i "block.tpl.php"
<div class="block-top"></div>
<div class="block-center">
<div class="block-bottom"></div>
Samt att jag uppdaterat min zen-classic.css
Med denna kod får jag runda hörn på alla block på min sida.
Min fråga är: - hur styr jag så att bara ett block får runda hörn - t.ex. sekundära länkar.
Koden i min zen-classic.css som gör runda hörn är:
.block-top{
background: url('blocktop.png') no-repeat bottom center;
height: 15px;
padding: 5px;
}
.block-bottom{
background: url('blockbottom.png') no-repeat top center;
height: 15px;
}
Mvh Håkan
REDIGERING: Jag har lagt till fyra blanktecken i början på varje rad med kod. Det gör att koden sätts inom <code>...</code>, vilket i sin tur gör koden betydligt mer lättläst. Klicka på Input format och läs vilka formatteringsmöjligheter som står till buds. Jag har också lagt till <!--break-->. //TBarregren (admin)
Comments
CSS-selektorer
Du styr vilket block som får de runda hörnen genom att ange en selektor som bara väljer ut just de blocken du är intresserade av. Läs mer om CSS-selektorer.
Thomas Barregren – NodeOne
Selektorer
Tack Thomas,
Var någon stans bör man lägga denna selektor för att styra vilka block som skall ha runda hörn?
Är det i block.tpl.php eller i Zen-classic.css ??
Kan du ge ett exempel på selektor som skulle passa här?
Mvh
Håkan
CSS-regel i CSS-fil. Använd #-selektorn.
Du skall placera CSS-regeln i en .css-fil. Ej i en .tpl.php-fil. För vilken CSS-fil du bör placera regeln gäller samma svar som förra gången.
Eftersom du vill att ett enda block skall få runda hörn så använder du #-selektorn med blockets ID. Du kan ta reda på blockes ID genom att inspektera HTML-koden (t.ex. med Firebug).
Thomas Barregren – NodeOne
Här finns en bra
Här finns en bra introduktion till CSS (selectors, properties et c):
http://htmldog.com/guides/cssbeginner/selectors/
Enklast är att söka på id (#) som Thomas beskriver.
#block-1 {color: red;
}
Jakob Persson - NodeOne
Jakob Persson – Leancept – Results-only digital and marketing consultants – Personal blog
Innebär det att
Innebär det att modifieringen av block.tpl.php modifieringen skall stå kvar?:
Enligt drupalhandboken gör koden att runda hörn visas på alla block.
Så frågan är kanske egentligen om den php koden måste göras annorlunda eller om allt överstyrs i css filen?
<
div class="block-center">
Hej! Ja koden du lade till i
Hej!
Ja koden du lade till i block.tpl.php ska står kvar, den kommer dock inte ha någon effekt utan att det finns CSS-regler som styr dess utseende och layout. Koden du lade till kallas normalt för markup och utgör en webbsidas strukturella och semantiska skelett. Taggar som span anses ha mindre semantisk tyngt än t ex strong som verkligen säger något om den text som de innefattar. Span kan man alltså lämna oanvända och med CSS-regler "aktivera" på den del av sidan där man vill att de ska synas eller ge en viss effekt, t ex runda hörn som i detta fall.
Jag rekommenderar f ö att du läser igenom HTML Dogs CSS guide, den förklarar många av de här begreppen:
http://htmldog.com/guides/cssbeginner/
mvh
Jakob Persson
NodeOne
Jakob Persson – Leancept – Results-only digital and marketing consultants – Personal blog
Tack Jakob, Jag får det
Tack Jakob,
Jag får det nästan att funka, men enbart med om jag använder bilder som runda hörn. Och då visas bara runda hörn i övre eller undre delen av blocket (round-bottom eller round-top)
Har också provat css kod utan bilder med exempel från webdesignskolan, men inte fått till det hela vägen ut.
Är det någon som har ett färdigt exempel i css på block med runda hörn som funkar så blir det julafton här!
Hälsar
Håkan
Se också...
Se också http://groups.drupal.org/node/19814.
Thomas Barregren – NodeOne