Kristofers Drupalkurs Del 6: Ställa in CSS klasser för förenkling av sidor.

I denna kursdel ska vi ställa in CSS-klasser för bilder för att kunna göra snyggare pages/storys. Vi ska även undersöka hur nya CSS-klasser kan användas till WYSIWYG-editorns avancerade inställningar.

1. Placera bild i editorn.

Gå in på bildservern, IMCE Interfacet, via My Account / File browser. Gå in på Upload och ladda upp den bild till bildservern som du vill använda. Gör radbrytningar och ställ markören på den plats i texteditorns fält där du vill ha bilden. Klicka sedan på den lilla gröna bildikonen som leder till bildinställningarna, välj (Browse) och sätt in (Insert) bild. Ändra samtidigt storlek till 300 pixels på en låst ratio och klicka på Spara.

2. Flytta bild och bildinställningar.

Gå in på Edit page igen och flytta bilden genom att klicka (markera den blå) och dra den till övre vänstra hörnet av editorns textfält. Spara. Högerklicka på bilden och öppna bildinställningarna.

H Space margin = marginalerna till vänster och höger om bilden.

V Space margin = marginalerna till över och under bilden.

Sätt horizontal spacing på 15px och vertical spacing på 15px(Bilden får 15px med tomrum horisontalt och vertikalt). Markera all text och justera den. Bilden kommer placera sig med lite vänstermarginal och lite högermarginal till textstycket.

3. Avancerade bildinställningar.

På fliken Advanced settings finns olika möjligheter att ställa in och ändra till skräddarsydda CSS-inställningar. Editorn tillåter dock inte ändringar eller att koderna sparas innan alla bas-inställningar först är borttagna från de basala/enkla bildinställningarna (d.v.s. border, hspace, vspace och alignment.) De måste alltså lämnas tomma.

Under ”Style” visas alla CSS-klasser som påverkar bilden på sidan just nu.

Prova att fylla i Stylesheet class: ”right”. Funktionen är låst men med bas-inställningarna borttagna går det att editera Style-fältet: t.ex. ”margin-right 20px border style”. Om du nu undersöker bildens element kan du se att CSS-klassen verkligen ändrats till ”höger”.

3. Skapa egna CSS-klasser för bildinställningar.

Gå till [din sida]/all/themes/framework/style.css och och öppna den med en textkodseditor.

Koden vi kommer använda består av en ID del och en element del(img). ”img” står för "only applies to the image element, som att t.ex. att ha p i sin kod står för att koden bara påverkar p elementet".

Uppbyggnad: #main img{kod;} Stylar ALLA bilder på main content delen

Uppbyggnad +klass: #main img.right(eller left){kod;} Stylar ALLA bilder på main content delen som har en klasstag right/left

Punkten d.v.s.(.) för höger/vänster-delen av CSS:et är olika klasser. (Klasserna kan namnges fritt, jag namngav dem efter elementets ändamål.)

Clear = Bestämmer hur float ska hanteras och om float ska vara enablat i elementet, t.ex. clear:right; blockerar float propertyn på den högra sidan av elementet.

Float = Bestämmer om objektet/elementet ska flyta åt något håll i elementet den tillhör.

Inherit = Ärver egenskaper från en överliggande class eller parent element.

Refresha sidan. Nu går det att gå till bildeditorns Advanced settings och hämta upp dina klasser.

I det här fallet har bilden inte längre någon högermarginal, den nykonstruerade CSS-klassen påverkar bara den vänstra marginalen.

Ev. Problem

Håll utkik efter fler guider från webbyrå Storleden, och subscriba till vår YouTubekanal, Twitterfeed och Facebook fanpage.

Facebook.com/Storleden

Twitter.com/Storleden

Youtube.com/user/Storleden