Logga

Panelen Utseende

När du högerklickar på en modul kan du längst ned välja att gå till modulens egenskaper. Där har du ett antal inställningsmöjligheter.

Egenskapsdialog på modul

I dialogrutan som kommer upp kan du komma åt olika delar av egenskapsdialogen. Som standard visas panelen Utseende. Denna täcker upp egenskapsinställningarna för utseende. Här kommer du åt dekorationerna för modulen, avstånd (CSS paddings), marginaler (CSS margins), storlek, responsiv webb och grid, bakgrund. kantlinjer och stil (CSS).

Klicka på menyvalet i övre vänstra hörnet så kommer du åt översikten av alla paneler på en modul.

Egenskaper på modul - menyval

Om det visas en blå stjärna till höger om rubriken så indikerar den att på denna modul är något inställt under just denna rubrik. Så i detta exempel är inställningar gjorda på Avstånd och Bakgrund.

Dekoration

Under valet dekoration kan du i dropmenyn peka ut den dekoration du vill använda. Du kan också härifrån byta ut eller ta bort den dekoration som ligger vald. Klicka på krysset i dekorationsmenyn för att plocka bort dekorationen från modulen.

Dekorationsdialog i egenskaper på modul

Avstånd (CSS padding)

Under avstånd (CSS padding) kommer du åt avståndsinställningar. Avstånd påverkar avstånden inom modulen eller layouten. Här ställer du in avstånd upptill, nertill, vänster eller höger.

Dialogruta för avstånd i modulegenskaperna

Marginaler (CSS margin)

Under marginaler (CSS margin) gör du marginalinställningar. Inställningen påverkar marginalerna runt om modulen eller layouten. Här ställer du in marginal upptill, nertill, vänster eller höger.

Dialogruta för marginalinställningar på modul

Storlek

En moduls eller layouts storlek - bredd och höjd - ställer du in under storlek. Standardbredd på modulen blir hela innehållsytans bredd. Här kan du minska eller öka på den bredden samt ställa in höjden.

Dialogruta för bredd på modul

Responsiv webb och grid

Här kan du ange modulens eller layoutens bredd i kolumner utifrån de som finns uppsatta på er webbplats. Här går också modulens placering justeras i sidled. Placeringen sker i förhållande till kolumnerna som finns uppsatta på webbplatsen.

Visa endast i brytpunkter och dölj i brytpunkter innebär att du här kan göra inställningarna för att dölja eller visa en modul i de brytpunkter som finns uppsatta för webbplatsen.

Dialogruta för egenskaper för responsiv webb och grid på modulnivå

Varför justera kolumner i sidled?

Normalt visas innehållet i den ordning som det visas i innehållsrutan, uppifrån och ned. Du kan använda justera i sidled för att ändra ordningen för när innehållet staplas. Anledningen varför du skulle vilja justera ordningen kan vara att du vill ha olika utseende på din webbplats för en besökare som kommer på en dator kontra den som kommer till webbplatsen med en mobiltelefon eller läsplatta.

Hur gör du för att justera innehållet på din sida?

Om förutsättningen är att mittenspalten är 8 kolumner och högerspalten 4 kolumner.

1. Flytta högerspalten så att den ligger ovanför mittenspalten i innehållsrutan.

2. Gå in på egenskaperna för högerspalten och Justera i sidled: 8 kolumner höger.

3. Gå in på egenskaperna för mittenspalten och Justera i sidled: 4 kolumner vänster.

4. Klart!

I redigeringsläget ser allt ut som innan, men i innehållsrutan ser du att ordningen är en annan på dina innehållsytor.

Bakgrund

Bakgrundsegenskaperna låter dig sätta en bakgrundsfärg på den aktuella modulen eller layouten. Här väljer du också ifall du vill peka ut en bakgrundsbild. Vilka färger du har att välja på beror på de färger som finns uppsatta på webbplatsen, vilka färger din behörighet kommer åt och vilka färger modulen tilldelats.

Dialogruta för bakgrundsegenskaper på modul

Väljer du att peka ut en bakgrundsbild till din modul får du göra storleksinställningar direkt under egenskaperna för den aktuella modulen. En ny vy visas där du får välja bild.

Storlek

Här ställs storleken på bakgrundsbilden in med CSS. Det finns följande alternativ:

  • Auto - Bakgrundsbildens normala bredd och höjd
  • Contain -Skalar om bilden till den största storleken så att både dess bredd och dess höjd får plats inuti innehållsområdet
  • Cover -Skalar bakgrundsbilden så att den är så stor som möjligt, så att bakgrundsområdet är helt täckt av bakgrundsbilden . Vissa delar av bakgrundsbilden kanske inte får plats.

Placering

Här ställer du in hur du vill placera bilden, där standard är Uppåt - vänster. Det finns följande alternativ:

  • Uppåt- Vänster
  • Uppåt - Mitten
  • Uppåt - Höger
  • Mitten - Vänster
  • Mitten - Mitten
  • Mitten - Höger
  • Nedåt - Vänster
  • Nedåt -Mitten
  • Nedåt - Höger

Upprepning

Här justerar du om bilden ska upprepas och på vilket sätt. Följande alternativ finns:

  • Horiontellt och vertikalt
  • Horisontellt
  • Vertikalt
  • Ingen upprepning

Kantlinjer

Här kan du välja om modulen eller layouten ska ha kantlinje och om den såfall ska vara runt om (det vill säga topp, nedåt, höger och vänster) eller bara enstaka kantlinjer. Därefter kan du välja typ, färg och tjocklek.

Kantlinjer runt om

Exempel när kantlinjer runt om är valt

  • Typ - Välj typ i listan. Det finns följande alternativ:
    • Heldragen
    • Punkter
    • Bindesstreck
    • Dubbel
    • "groove"
    • "ridge"
    • "inset"
    • "outset"
  • Färg - Välj färg i listan. De färger som finns inställda som webbplatsfärger finns tillgängliga i listan.
Blå färg vald på kantlinje.

Blå färg vald på kantlinje. Klicka på krysset till höger för att ta bort färgen.

  • Tjocklek - Ställ in tjocklek på kantlinjen. Klicka på plusknappen för att öka tjocklek och minusknappen för att minska tjocklek. Det går att välja mellan enheterna px eller em. Klicka på pilen för att byta enhet.
Byt enhet för tjockleken på kantlinjen

Välj mellan px eller em som enhet för tjocklek på kantlinje

Om du väljer Enstaka kantlinjer kan du välja vilken kantlinje du vill lägga till genom att bocka i en eller flera kryssrutor. Därefter får du ställa in typ, färg och tjocklek.

Kantlinje nedåt

Exempel när Enstaka kantlinjer är valt

För att ställa in ytterligare en kantlinje, exempelvis Kantlinje topp, bocka i den rutan..

För att ta bort kantlinjer, välj alternativet "Inga kantlinjer".

Stil (CSS)

Om inställningarna i gränssnittet inte räcker till så går det sätta upp egna CSS-klasser på webbplatsen. CSS-klassnamnen kan du sedan peka ut mot modulen eller layouten för att påverka modulens utseende eller funktion. Du kan också skriva in egna stilmappar i fältet Egen stil.

Dialogruta för CSS-egenskaper på modul

De inlänkade klassnamnen måste finnas definierade på webbplatsen och alternativet visas endast om dessa finns uppsatta och tillgängliga. För att märka upp en modul med ett css-klassnamn så klickar du på välj. En dialog öppnas upp med de CSS-klassnamn som finns lagrade på webbplatsen.

Dialogruta för egen stil på modul

För att avaktivera den egna stilen på modulen klickar du på krysset intill CSS-klassnamnet, så tas den bort.

Panelen Utseende hittar du på objekten:

  • Egenskaper på modul
  • Egenskaper på layout
  • Egenskaper på grid/gridrad/spalt
  • Egenskaper på lauout med vy
  • Egenskaper på vy

Denna sida publicerades: 2019-10-15

Missa inga nya rön, tips och tricks! Prenumerera på insite!

Hitta till oss!

SiteVision AB (huvudkontor)
Drottninggatan 18A
702 10 Örebro

Info: 019-17 30 30
Support: 019-17 30 39

Senaste Tweets