Stilassistenten (Style Manager)

Hvordan du ændrer udseende og layout af dit website

Du får adgang til  Style Manager (stilassisteneten) på Admins Ternings forside ved klik på dette ikon:

Eller alternativt ved at klikke på tredje ikon fra højre på webmasterbåndet:

Når du klikker på et af disse ikoner åbner Style Manageren, som du ser afbilledet herunder.
Bemærk at værdierne på grafikken blot er eksempler. Din Style Manager vil have andre farver og værdier, når du åbner den efter installationen af dit n-gen.net CMS.

Style Managerens indhold og felter forklaret

Når du arbejder med tekststørrelser i n-gen.net CMS skal du selv eksplicit angive en størrelsesenhed uanset om det er for »Page text size,« »Headings (h1 - h6) text sizes«, »Menu text size« eller »Footer text size«. Enheden skrives umiddelbart efter størrelsesværdien.
Her er nogle almindelige og accepterede tekststørrelsesenheder:

• em eller rem (relative em),
• % (procent),
• px (pixels),
• pt (points).

Du kan bruge mange flere enheder og du kan blande de forskellige typerf.eks. have absolutte enheder i din header (f.eks. px) og relative enheder i din sidekropf.eks. % eller rem.
Læs meget mere om dette på w3schools.com website. 

Style Manageren har tre skydere. skydernes værdier er altid i enheden pixels:
px

Baggrunden for alle felter som indeholder farveværdier har værdiens farve.
Ved at klikke på felterne får du en farvevælger, se herunder:

Alle farver skal angives som seks-cifrede hexadecimale (HEX ~ 0-9, A-F) værdier - svarende til 24 bit farvedybde ("True Color") eller én farve ud af ca. 16,7 millioner farver.
 

Style Manageren er inddelt i de fire nedennævnte sektioner efter hinanden:
Den øverste sektion indeholder:

• Style Manager ikonet for genkendeligheden (og som samtidig er et link til Admins Terning)
• En »Save Style Values« knap, som når man klikker på den gemmer felternes værdier i databasens styles-tabel,
• En »Export styles as a skin file« knap, som når man klikker på den gemmer felternes aktuelle værdier i en  .skin fil (men ikke lagrer felternes værdier i databasen),
• En »Import Styles from skin file« dropdown liste, som når man klikker viser de rådige .skin filer i dit n-gen CMS og når du klikker på et af filnavnene henter værdierne fra filen og indsætter dem i databasen.

Page sektionen består af fem rækker af felter:

1. række fra venstre:
   - et felt med et Id nummer. Feltet er til fremtidig brug..
   - et felt med et style navn. Navnet er for at gøre referencen lettere at genkende og samtidig bruges navnet til navngivning af den skin-fil, som oprettes når du eksporterer værdierne: [style-navn].skin
   - et felt med din sides baggrundsfarve. Denne farveværdi har ingen indflydelse på header (sidehovedets) eller footer (sidefodens) baggrundsfarve.
   - et felt med angivelse af fonte på alle dine sider (undtaget herfra er menubjælken, som har sine egne fonte).
   
   Du bør erindre, at ikke alle platforme / operativsystemer understøtter alle fonte. Derfor kan det være hensigtsmæssigt, at angive et font-hierarki med flere font-navne, så hvis den førstnævnte font ikke findes i computerens eller telefonens operativsystem, så fortsættes der til den næste font på listen. Font-navne skal angives med »,« (komma) i mellem hvert font-navn. Hvis der i font-navnet er et mellemrum, så skal navnet omgives af " ", f.eks. "Times New Roman". 
    
2. række fra venstre:
   - De to første felter indeholder skriftstørrelse og -farve på tekst uden formatering.
      Bemærk at du kan angive størrelsen i forskellige enheder; enten som em eller root em (rem), procent (%) eller pixels (px), Dette gælder for alle felter med skriftstørrelser (font sizes). Men der skal angives en enhed efter værdien
   - De sidste fire felter indeholder farveværdierne for hyperlinks.
      (link hover har ingen effekt på enheder uden musemarkør f.eks. en SmartPhone eller en iPad )
3. række fra venstre:
   - Alle seks felter indeholder skriftstørrelserne på overskrifts-hierarkiet (h1 - h6). Brug em, rem, % eller px efter eget valg, men husk at angive enheden!
4. række fra venstre:
   - Alle seks felter indeholder farveværdierne for overskrifts-hierarkiet (h1 - h6).
5. række fra venstre:
   - Kun et stort felt, hvor i du selv kan skrive brugerdefinerede CSS-værdier for ID'er, HTML-elementer og klasser.
      (feltet har et maksimum / begrænsning på 65.536 karakterer - hvilket er tilstrækkeligt for langt de fleste brugerdefinerede CSS værdier)
   I Custom CSS feltet kan du således style både en del af de indbyggede klasser og du kan give elementer på dine sider deres egne klasser, som du så efterfølgende kan style fra eét centrals sted, nemlig dette felt.
   Nogle af de indbyggede klaser, som du kan ændre på er:
      .header
      .nav
      .flex-container
      .updateVis
      .footer
      .photoThumbContainer
      .galleryPhoto
      .searchInput
   
   [ . (punktummet)foran klassenavnet er CSS syntax, som fortæller browseren at der er tale om en typografi for alle elementer med dette klassenavn. {} (Tuborg-paranteserne) efter klassenavnet er ligeledes CSS syntax, som bruges til at angive selektorens (klassenavnets) attributter og deres tilhøremde værdier.]
   
   Eksempel a.
   Klassen »photoThumbContainer« findes i filen »photoIndex.aspx« (som er siden med billed miniaturer) og klassen »galleryPhoto« finde i filen »photoShow.aspx« (siden med de skalerede individuelle fotos). Det betyder, at hvis du skriver:
   .photoThumbContainer {filter: grayscale(100%);}
   .galleryPhoto {filter: grayscale(100%);}
   i dit Custom CSS felt, så gør den første linje at alle dine miniaturer på siden »photoIndex.aspx« bliver gråtone (gray-scale) og den anden linje gør alle de individuelle fotos på siden »photoShow.aspx« gråtone (gray-scale).
   
   Eksempel b.
   Tilsvarende indeholder filen »index.aspx« klassen »updateVis«, som sætter typografien for sidernes "Last updated date / time" så de optræder med samme skriftsnit og farver som brødteksten med skaleret ned til 75% i størrelsen. Hvis du slet ikke ønsker at se denne tekst med opdateringstidspunkt kan du blot i Custom CSS feltet skrive:
   .updateVis {visibility: hidden;}  eller
   .updateVis {display: none;}
   
   Du vil også kunne se, at hvis du anvender nogle af n-gen.net forud definerede temaer, so vil feltet Custom CSS være populeret med værdier for forskellige elementer for at opnå det ønskede visuelle udtryk.

Menu & Search box sektionen består af fire rækker:

1. række fra venstre:
   - to felter med baggrundsfarven for menubjælkens hhv. øverste og nederste baggrundsfarve.
      (Hvis du vil have en massiv farve (uden gradient), så skal du bare vælge samme farve i begge felter)
   - to felter med baggrundsfarven for menubjælkens hhv. øverste og nederste baggrundsfarve når musens markør svæver over dem
      (har ingen effekt når menuen vises i mobiltilstand)
   - to felter med tekstfarven for menubjælkens tekst og tekstfarve, når musens markør svæver over dem.
      (har ingen effekt når menuen vises i mobiltilstand)
2. række fra venstre:
   - Samme betydning som ovenstående række, blot for undermenupunkter (niveau 1, 2 and 3)
   Bemærk: Mange mobile enheder kan ikke vise niveau 3 og enkelte hverken niveau 2 eller 3 - vær derfor forsigtig med at lave for mange niveauer i din menu-struktur.
3. række fra venstre:
   - et felt med tekststørrelsen på din menu.
   Bemærk at du kan angive størrelsen i forskellige enheder; enten som em eller root em (rem), procent (%) eller pixels (px), Men der skal angives en enhed.
   - en dropdown liste med menubjælkens placering: Højre-, venstre-stillet, centreret, eller fra vinduet venstre kant til højre kant eller kun i mobiltilstand.
   Bemærk at hvis du vælger »Always show mobile menu« er valgt, så er ingen af værdierne for når musens markør svæver over et menupunkt i kraft.
   - en skyder, der angiver skæringspunktet for hvor mange pixels menuen skal have for at skifte til mobiltilstand. Værdierne strækker sig fra min. 475px til max. værdien på 1085px.
      Hvis vinduets størrelse eller skærmens opløsning er  mindre end den anførte værdi vises menuen i mobiltilstand uanset hvor få punkter menuen har. 
   - et felt med menuen fonte-navn(e)
   
   Du bør erindre, at ikke alle platforme / operativsystemer understøtter alle fonte. Derfor kan det være hensigtsmæssigt, at angive et font-hierarki med flere font-navne, så hvis den førstnævnte font ikke findes i computerens eller telefonens operativsystem, så fortsættes der til den næste font på listen. Font-navne skal angives med »,« (komma) i mellem hvert font-navn. Hvis der i font-navnet er et mellemrum, så skal navnet omgives af " ", f.eks. "Times New Roman".
    
4. række fra venstre:
   - en skyder, som angiver bredden af mellemrummet mellem menupunkterne på menubjælken.
   - et felt med farven på afstandsstykkerne mellem menupunkterne når menuen vises i PC tilstand. Farveværdien kan ikke vises hvis afstanden mellem menupunkterne sættes til 0px, så hvis du ikke ønsker en lodret farvet streg mellem dine menupunkter skal du blot sætte afstandsskyderens værdi til 0px.
   - en checkbox som når den er markeret fastholder menuen synlig i PC-tilstand når der er mere indhold på en siden end der kan vises i vinduet (der skal rulles). Menu vil krympe og blive halvgennemsigtig og forblive synlig langs vinduets øverste kant. Når checkboxen er markeret vil »Til-toppen-af-siden-knappen« i nederste højre hjørne (på sidefoden) være synlig uanset hvor lidt indhold, der er på siden.
   - en checkbox, som når den er markeret, gør al skrift på menuen med fed (bold).
   - to felter, som positionerer søgefeltet. Det første felt angiver afstanden fra vinduets højre kant og det næste angiver afstanden fra vinduets top. Værdierne er automatis angivet som pixels (px) og skal derfor angives som heltal. Positionen af søgefeltet er absolut, hvilket betyder, at det vil vises uanset indholdet af menuen, sidehovedet og siden, Hvis du ikke ønsker at vise søgefeltet overhovedet, så sæt begge felter værdier til -200px.

Footer sektionen består af en række:

• en checkbox, som når den er markeret, vises antallet af samtidige brugere på dit n-gen.net CMS i venstre side af sidefoden.
• et felt med tekststørrelsen på sidefoden. Sidefoden anvender samme font som resten af siden (bortset fra menuen, som har sine egen font(e)).
• to felter med sidefodens farver i hhv. toppen og bunden. Sæt til samme værdi, hvis du vil have en massiv farve uden gradient.
• en skyder som angiver hvor meget sidehovedets, menuen og sidefodens hjørner skal afrundes. Værdierne anvives i trin af to pixels startende fra 0 til 32 px..
  Hvis værdien sættes til 0px vil sidefod (footer) og menuelementer blive helt rektangulære.
  Hvis værdien sættes til 32px vil sidefod (footer) og menuelementer blive afslutte med halv-cirkler.