Guide til tilpasning af designet i Sitemagic CMS
Designet på din nye hjemmeside kan tilpasses på to måder.
- Redigering vha. udvidelsen Sitemagic Designer.
- Ved at redigere koden (HTML og CSS) til design-skabelonen.
I dette afsnit ser vi på, hvordan designet nemt redigeres med Sitemagic Designer. Skulle du have kendskab til HTML og CSS, vil du dog hurtigt blive i stand til at redigere koden til de eksisterende design-skabeloner, da de er forholdsvis simple og velstrukturerede.
Bemærk at ZIP filen til Sitemagic Designer indeholder to mapper. Indholdet af mappen extensions kopieres til mappen extensions på webhotellet. I mappen templates findes to nye design-skabeloner, som kan redigeres med Sitemagic Designer. Det er nemlig ikke alle design-skabeloner der kan redigeres med udvidelsen. Glem dog de ekstra design-skabeloner i første omgang. Sitemagic CMS kommer forudinstalleret med design-skabelonen Breeze, som er den nemmeste design-skabelon at redigere.
For at design-skabelonen kan redigeres, skal rettighederne på to filer ændres. Gør følgende på webhotellet via FTP programmet.
- Gå til Breeze i mappen templates
- Giv skriverettigheder til filerne index.css og basic.css
|
|
Vis video (1:05) |
Design-skabelonen er nu klar til redigering med Sitemagic Designer - lad os dog først tilpasse banneret i toppen.
Tilpas banner
Typisk ønsker man et unikt grafisk banner i toppen af hjemmesiden, oftest med firmaets navn og logo. Størrelsen på banneret kan variere fra design til design. For den medfølgende design-skabelon er størrelsen 900 x 160 pixels (bredde x højde).
Lav et nyt banner til hjemmesiden. Når det er færdigt, uploades det til løsningen vha.
Filhåndtering i kontrolpanelet. Placer det nye banner i mappen "images".
Rediger design-skabelonen
Vi er nu klar til at redigere udseendet på hjemmesiden. Gå til den nye udvidelse Rediger udseende i kontrolpanelet. Opdater siden hvis menu-punktet endnu ikke er dukket op.
I den øverste menu vælges design-skabelonen Breeze. I den nederste menu vælges hvilken del af design-skabelonen der skal redigeres. Vi starter med Layout. Tryk nu på knappen Rediger.
Et skema fyldt med indstillinger og farver indlæses. I første omgang kan det virke overvældende, da værktøjet kan bruges til alt fra ganske små ændringer, til meget avanceret tilpasning. Fokus vil dog være på simple ændringer så som justering af farver og banneret i toppen.
I toppen af skemaet ses en række farve-indstillinger. Du har måske bemærket, at farverne i felterne svarer til farverne på hjemmesiden. Klik ganske simpelt på en farve, for at ændre den i farve-skemaet. Hvis du er i tvivl om hvor farven bliver brugt, så prøv at ændre den til eksempelvis rød, og gem så skabelonen. Den nye farve bliver straks vist.
Videoen viser hvordan farver og banneret i toppen let ændres, for at skabe et helt nyt design på få minutter.
|
|
Vis video (3:27) |
Avancerede ændringer
Sitemagic Designer er reelt en såkaldt CSS editor. Værktøjet kan altså bruges til at redigere en design-skabelons CSS kode, og der er således kun få begrænsning for, hvad man kan ændre. Mere avancerede ændringer kræver dog kendskab til CSS kode, men det er helt ufarligt at prøve sig frem med værktøjet. Ændr værdier, gem skabelonen, og se ændringerne træde i kraft. Tag eventuelt en sikkerhedskopi af skabelonen Breeze i mappen template, inden du begynder. Så kan du altid vende tilbage til den originale skabelon, hvis ændringerne løber løbsk.
Bemærk: Tilføjes nye egenskaber til designet, er det vigtigt at bemærk, at Sitemagic Designer ikke understøtter kombinerede CSS egenskaber - eksempelvis border: 1px solid #DD0000. Dette skal i stedet deles op i 3 egenskaber; border-width, border-style og border-color.