Posted by hakan kristiansen on March 8, 2009 at 7:05am
Hej
Får inte till det med runda hörn i mina block. - hoppas någon kan se vad som är fel och komma med bra tips. Jag har ställt frågan innan och också läst på så gott jag kan, men inte lyckats få till det i mitt Zen tema. bifogar koden för block.tpl samt kopierar in nedan det som skall styra åtminstonde ett av blocken "news" Koden är såsom drupalhandboken tipsar om.Tacksam för all hjälp. Mvh Håkan
#block-views-news-block {
font-size: 85%;
}
.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;
}
.block-center{
border left: 0px;
}
Tack för hjälp
Mvh
Håkan
| Attachment | Size |
|---|---|
| block.tpl_.php_.txt | 518 bytes |
Comments
Ett tips:
Ett tips: http://drupal.org/node/271859
Eller ta en titt på Acquias grundtema, det använder rundade hörn i menyerna: http://drupal.org/project/acquia_marina
22 miljoner lösningar
Jag sökte på "rounded corners" på Google och fick 22 miljoner träffar. Redan på förstasidan fanns flera bra instruktioner om hur man gör runda hörn i CSS (rekommenderas) eller i JavaScript (rekommenderas ej!).
Thomas Barregren – NodeOne
Runda hörn
Tack Rustan - Acquias grundtema verkar vara en bra mall att använda och funkar för mig.
Att leta bland 22 000 googleträffar har inte hjälp mig -inte ens bland de bra träffarna. (och ja, min CSS kunskap är inte hög, därför söker jag fungerande exempel) Drupalhandboken har givit ett exempel hur man modifierar block.tpl samt style.css. Tittar man på exemplet från drupalhandboken samt det i Acquias så skiljer det markant. Ni alla har säkert diskuterat det innan - men ett exempelbibliotek på "smarta enkla koder" för användbara saker som runda hörn etc. hade jag som användare gillat.
Mvh
Håkan
CSS
Bland de 22 000 000 träffarna finns flera mycket bra beskrivningar för nybörjare, t.ex. från A List Apart. Om du finner dessa instruktioner svåra att förstå så bör du nog börja med att lära dig åtminstone grunderna i CSS. Så som CSS är konstruerad så går det sällan att bara klippa ut kodsnuttar och klistra in i din egen mall. Du måste anpassa koden med avseende på selektorer och specificitet. Här kommer några förslag på webbplatser med nybörjarkurser:
Och några förslag på böcker om CSS för både nybörjare och erfarna:
De skiljer sig åt markant eftersom det är två olika exempel för två olika teman och för att det finns, om inte 22 miljoner, så åtminstone hundratals olika tekniker för att skapa runda hörn.
Handboken Theming guide innehåller massor av goda råd, howtos och kodsnuttar. Naturligtvis finns inte mycket som handlar om renodlad (X)HTML eller CSS, som t.ex. att göra runda hörn, dels eftersom det ligger lång utanför Drupalprojektets scoop och dels eftersom det redan finns mycket skrivit om detta på annat håll. Men om du hittar en bra lösning som du vill dela med dig av så är det bara att lägga till en sida i handboken. Detta är ju trots allt en ideell verksamhet där alla är välkomna -- och förväntas -- bidra med det lilla man kan.
Du efterfrågar "ett exempelbibliotek på 'smarta enkla koder' för användbara saker som runda hörn etc". En sådan katalog för just runda hörn är 25 Rounded Corners Techniques with CSS som jag länkade till i mitt förra svar.
Thomas Barregren – NodeOne
Klart
Detta funkade för mig tillsammans med block.tpl bifogat.
I detta exempel är det endast nyhetsblocket samt primary-links som får rundade hörn.
Om detta är ett bra eller dåligt exempel eller bra eller dålig kod vet jag ej, men det funkar för mig iaf.
#block-views-news-block, #block-menu-primary-links
{
background-color: #94CE18;
color: #fff;
padding: 8px 8px 6px 46px;
text-align: right;
text-shadow: #545454 1px 1px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
}
Fungerar bara i FF
Du använder
-moz-border-radius-...vilket bara förstås av Mozilla webbläsare som Firefox (därav prefixet-moz). Besökare som har t.ex. Internet Explorer kommer inte se runda hörn.Samma lösning, fast utan
-moz-prefixet är föreslagen att bli del av CSS level 3 som inte lär komma än på några år. Till dess är det bakgrundsbilder eller JavaScript som gäller.Thomas Barregren – NodeOne
insåg jag precis
Tack för den Microsoft.
Om det finns något lika enkelt som funkar i både internet explorer och Firefox så återkommer jag...
JavaScript lösningarna är lika enkla
En del av JavaScript lösningarna är lika enkla, t.ex.
Tag för exempel Editsite.net Rounded Corners. Med denna teknik behöver du bara hänga på klassen
roundedpå ett<div>-element för att det skall få runda hörn.Personligen är jag tveksam till sådana här JavaScript-baserade lösningar. Jag rekommenderar CSS-baserad lösningar som använder sig utav bakgrundsbilder.
Thomas Barregren – NodeOne
P.S. Alla ovannämda lösningar hittade jag i 25 Rounded Corners Techniques with CSS som jag länkade till i mitt första svar. Sensmoral: Google and thou shall find. D.S.
Kanske en lösning lik din
Kanske en lösning lik din ursprungliga fungerar om du använder dessa selectors
.block h2.title istället för .block-top och
.block .content istället för .block-bottom
i css och så kan du plocka bort
div class="block-top"
och
div class="block-bottom"
ur block.tpl.php
och ser till att bakgrundsbilderna är korrekta - i css också. Bakgrundsbilden till .block .content måste vara "högre" än högsta blockstorleken och satt till position left bottom för att det ska funka i den lösningen.
Bifogar ett alternativ om du vill göra det helt i css utan bakgrundsbilder.
Löst
Tack Karl-Johan. Det funkar alldeles utmärkt med dina bifogade filer.
Jag kör alltså med css kod utan bilder. (Det andra fick jag inte till)
Sen förstår jag inte varför alla block får runda hörn nu när jag skrivit som i den bifoga filen.
Enbart nyhetsblock borde få runda hörn !?
Tack också Thomas för bra länkar
http://drupal.org/node/104319
oj, missade att du bara ville ha nyhetsblocken. Vet inte om den här sidan kan hjälpa till
http://drupal.org/node/104319
Vill ha på "nästan" alla
Vill ha på "nästan" alla block. Om PHP koden i block.tpl gör att jag får runda hörn på alla block, så kan man väl "släcka ner" de block som inte skall ha runda hörn i min CSS fil ?
I Denna PHP fil så skriver du "
<
div class="box2">" - jag är inte med på vad "box2" gör?
Bestämmer utseendet mellan
Bestämmer utseendet mellan rundade toppen och botten.
padding: 5px;
border-left: 1px solid #d4d4d4;
border-right: 1px solid #d4d4d4;
background: #fff;
Rekommenderar att använda firebug, här finns en guide
Samt titta på de cssguider som Thomas länkat upp mot.
Använder firebug redan -
Använder firebug redan - guld värd.
länken http://drupal.org/node/104319 har jag gått igenom men känns som det är över min nivå att förstå hur jag skall modifiera block.tpl att bara ta med ett block. t.ex. "news-block"
Se också...
Se också http://groups.drupal.org/node/18542.
Thomas Barregren – NodeOne
Modulen jQuery Eye Candy
Modulen jQuery Eye Candy (och dess Curvy Corners implementation) kan också vara värd att kika på.
mvh Jens
Runda hörn
Karl Johan, du hade ett bra exempel, men din kod för block.tpl gav som sagt runda hörn i alla block.
Från Era tips så kan man man gå in och välja bara ett eller flera om man vill. Detta får jag inte till - jag lyckas inte få tpl filen att välja bara ett block.
Från bifogade koden , är det någon som kan ge ett exempel på hur det skulle kunna se ut i block.tpl om blocket heter t.ex. "newsblock" och var i koden den skall in i denna fil?
Mvh Håkan
ID och klasser
Det du behöver göra för att bara påverka utvalda block är att använda rätt klasser eller ID:n.
Det har inte så mycket med Drupal att göra egentligen, utan är mer CSS. Kolla in denna utmärkta guide på w3schools så borde det bli klarare.
De ändringarna du vill göra är inte i någon tpl-fil, utan i en CSS-fil. (Förmodligen styles.css, men det beror på vilket tema du använder – kolla med Firebug för att veta vilket ID det berörda blocket har, och vilken fil CSS-grejerna ligger i.)
//Johan Falk, Solna
Id och klasser
Med de förslaget jag fått innan så blir alla block med runda hörn. Det blir det genom det som står i block.tpl. Det måste väl ändå innebära att det skall finnas något i den filen som styr att det kan visas runda hörn. Är det så att det som står i min block.tpl är felaktigt? Drupalhandboken har ett exempel som gör att mina block arrangeras fel och trycks nedåt på sidan.
Kanske är det så att skelettet i block.tpl spökar för mig. - och hur ser då étt sådant rätt skelett ut?
Är bara block.tpl rätt så har jag inga problem att med hjälp av css styla blocken. Firebug är som sagt värdefull hjälp.
Mvh Håkan
VIlket tema?
Hur ditt block.tpl fungerar beror på vilket tema du använder.
De som temar mycket brukar rekommendera Zen-temat. Det märker upp block (och massa annat innehåll) med klasser och ID:n som är lätta att utnyttja med CSS.
//Johan Falk, Solna
Tackar för all hjälp med
Tackar för all hjälp med runda hörn. Nu är jag i mål