Denne siden er en del av blogg.no-support Kontakt support  |  Infobloggen  |  Forsiden

hjelp.blogg.no






Side2-design

Samarbeidsbloggere vil ha et standarddesign eller spesialdesign fra Nettavisen, Side2, Side3 eller NA24. Det er forskjellig fra design til design hvilke endringer som kan gjøres i disse. Du kan ikke bruke designbyggeren, og heller ikke redigere i html-malene. Side2-bloggere kan endre visse elementer i stilarket (css), som for eksempel fonter og tekstfarge.

Her finner du koder du kan endre på / legge inn selv.

NB! Vær obs på at du bare kan redigere stilarket (css), widgets og moduler. Du kan ikke redigere html-malene eller bruke designbyggeren.



Retningslinjer for designendringer:

  1. Side2-designet er vårt varemerke i samarbeidsbloggene og skal i utgangspunktet ikke endres.

    Det står deg likevel fritt å endre på følgende elementer:
    • lenkene, og font og farge på lenkene i toppmenyen
    • font, farge, størrelse og tekstjustering på innleggstittel
    • font, farge, tekststørrelse, tekstjustering og linjeavstand i innleggsteksten og i sidemenyen
    • fargen på datosirkelen og font og farge på teksten i den
    • fjerne streken (.shadow) mellom toppmenyen og første innlegg og endre avstanden der
    • endre avstand mellom tekst og bilder, og mellom bilder, i innlegg
    • fjerne border over/under metainfo (dato, klokkeslett, kategori mm.)

  2. Dersom du har sidemenyen med profilen kan du fjerne hele eller deler av profilen (f.eks alder, bosted osv.)
    Du står fritt til å legge inn egne elementer i "widgets", for eksempel instagramfeed, twitterfeed, tellerknapper, social icons (Facebook, twitter, bloglovin) og lignende.

  3. Har du ikke sidemenyen i designet kan tellerkoder og lignende legges i en egen modul nederst i bloggen (localfooter).

Moduler

Her er en liste over modulene du kan legge inn / endre:

localhead: Kan brukes til å legge inn javascript etc som må ligge i html head.
favicon: Kan brukes til å legge inn et personlig favicon
headerimage: Inneholder url til headerbildet.
navmenu: Kan brukes til å overstyre den automatiske menyen.
localmenu: Kan brukes til å legge inn social icons eller andre ting, ligger like under navmenu.
sidebartop: Kan brukes til å overstyre den automatiske profilvisningen
sidebarbottom: Kan brukes til å overstyre den automatiske opplistingen av arkiv/kategorier.
localfooter: Kan brukes til å legge inn ikoner fra bloglovin, blogglisten osv. Ligger like over den globale footeren.

Designendringer utenom de nevnt over er i utgangspunktet ikke tillatt. Har du spesielle ønsker kan du selvfølgelig kontakte Side2 (Ingvill) om dette, så vil vi vurdere om endringen vil være forenlig med vår branding.



Bytte headerbilde

  1. Last opp bildet du vil bruke til et sted på internett. Bildet må være 880px bredt. Høyden bestemmer du selv. Kopier urlen til bildet (bildeadressen).
  2. Gå til "Avansert design" >> "Rediger" >> "Moduler" >> "headerimage" og bytt ut urlen til det gamle bildet med den nye urlen. Husk å lagre endringen.
    NB! Dersom modulen "headerimage" ikke eksisterer må du først lage den. Trykk på "Ny modul", skriv inn navnet (headerimage), lim inn urlen i innholdsfeltet under, og lagre.



Redigere profiltekst

  • Gå til "Innstillinger" >> "Profil". Her kan du bytte profilbildet og endre på profilteksten. Endringene du har gjort vil bli synlige i bloggen neste gang du publiserer et innlegg.
    NB! For å vise profilen må sidebaren være aktivert i designet ditt.



Widgets

  • Gå til "Avansert design" >> "Rediger" >> "Widgets" og lim inn koden til elementet du vil legge inn. Max bredde er 280 pixler.
    NB! For å bruke widgets må sidebaren være aktivert i designet ditt.



Toppmenyen

  • For å bytte ut linkene først i toppmenyen går du til "Design" >> "Lenker / Kategorier". Her kan du legge til, endre og fjerne knapper i menyen. Du kan ikke fjerne "Arkiv" og "Kategorier" herfra. Linkene du legger inn her vil bli listet i alfabetisk rekkefølge.
  • For å legge inn et søkefelt i toppmenyen:
    Er du komfortabel med å redigere html finner du koden til menyen, med søkefeltet (merket med gult), under her. Du kan legge den inn som egen modul og redigere i den. Da plasserer du den på "Avansert design" >> "Rediger" >> "Moduler" >> "navmenu". Her kan du også legge til og fjerne knapper i menyen helt etter eget ønske.

Menykoden:
(Dobbeltklikk på koden for å markere hele)

<nav>
<ul>
<tag:if test="${HasLinks == 'true'}">
<tag:linklist>
<li>
<a href="${LinkURL}">${LinkName}</a>
</li>
</tag:linklist>
</tag:if>
<li><a href="#">Kategorier</a>
<ul>
<tag:categorylist limit="50">
<li><a href="${CategoryLink}">${CategoryName}</a></li>
</tag:categorylist>
</ul>
</li>
<li><a href="#">Arkiv</a>
<ul>
<tag:archivelist limit="50">
<li><a href="${ArchiveLink}">${ArchiveName}</a></li>
</tag:archivelist>
</ul>
</li>
<li style="float:right;">
<form action="${AppUrl}index.bd?fa=search.do" name="search" method="post">
<input type="hidden" name="bl_id" value="${BlogID}" />
<input type="text" name="criteria" value="" size="11" maxlength="250" style="width: 135px;" id="soek" />
<input type="submit" value="Søk" />
</form>
</li>
</ul>
</nav>
<nav class="group">
<h2 class="navheader slide-trigger">Meny<span></span></h2>
<ul class="navigation group">
<tag:if test="${HasLinks == 'true'}">
<tag:linklist>
<li>
<a href="${LinkURL}">${LinkName}</a>
</li>
</tag:linklist>
</tag:if>
<li><a href="#"><strong>Kategorier:</strong></a></li>
<tag:categorylist limit="50">
<li><a href="${CategoryLink}"><span class="submenuitem">${CategoryName}</span></a></li>
</tag:categorylist>
<li><a href=""><strong>Arkiv:</strong></a></li>
<tag:archivelist limit="50">
<li><a href="${ArchiveLink}"><span class="submenuitem">${ArchiveName}</span></a></li>
</tag:archivelist>
</ul>
</nav>

Du kan endre font og tekstfarge på teksten i toppmenyen i stilarket (css). Her er kodelinjene som regulerer dette:

nav ul li a {
color:#000;
text-transform: uppercase;
}
nav ul li a:hover {
color:#FF025A;
}
For å endre font bruker du kodelinjen
font-family: 'DIN VALGTE FONT HER', Arial, sans-serif;
og legger den rett under "text-transform: uppercase;".
Les mer om valg av font her: Bytte font



Endre størrelse på teksten

Du kan også endre størrelse på teksten om du ønsker det.

Her er koden du skal endre:

Innleggstitler (forsiden)

#main h1 {
    font-family: 'Yanone Kaffeesatz',Arial,Helvetica,sans-serif;  /* DENNE STYRER HVILKEN FONT SOM BRUKES */
    font-size: 3.6rem; /* DENNE STYRER STØRRELSEN PÅ BOKSTAVENE - JUSTER TALLET OPP ELLER NED */
    font-weight: 600; /* DENNE STYRER HVOR TYKKE ELLER TYNNE BOKSTAVENE ER */
    line-height: 1.1; /* DENNE STYRER LINJEHØYDEN */
    margin-bottom: 2px; /* Denne styrer avstanden til det under */
    margin-left: 90px; /* Denne styrer avstanden til venstre kant */
    padding-top: 7px; /* Denne styrer hvor mye luft det er over tittelen */
}
Innleggstitler på innleggssiden, i arkivet og i kategorier styres av #main h1.archive-sub {.
Du må altså endre koden på to steder for at innleggstittelen skal være lik på alle sidene, eller du kan velge å ha en helt egen font på innleggstitlene på forsiden av bloggen.

Teksten i "hele bloggen":
(denne kan overstyres av enkeltkoder, slik som eksempelet over som overstyrer utseendet på innleggstitlene)

body {
    color: #000000; /* DENNE STYRER FARGEN */
    font-family: Arial,sans-serif; /* DENNE STYRER HVILKEN FONT SOM BRUKES */
    font-size: 1.4rem; /* DENNE STYRER STØRRELSEN PÅ BOKSTAVENE - JUSTER TALLET OPP ELLER NED */
}

Innleggsteksten:

#main p, #main ul, #main ol {
    font-family: Arial,Helvetica,sans-serif; /* DENNE STYRER HVILKEN FONT SOM BRUKES */
    line-height: 1.5; /* DENNE STYRER LINJEHØYDEN */
    font-size: 0.9em; /* DENNE STYRER STØRRELSEN PÅ BOKSTAVENE - JUSTER TALLET OPP ELLER NED */
}
Dersom linjen som styrer tekststørrelsen mangler bare legger du den til selv.



"Reparere" designet

Dersom du har trykket på feil knapp og designet ditt er blitt borte eller ødelagt, kan du tilbakestille det inne på "Design" >> "Designarkiv" eller velge det på nytt inne på "Design" >> "Velg design". Finner du ikke Side2-designet der kan du bare kontakte Ingvill i Nettavisen eller blogg.no's supporttjeneste, så får du hjelp til å legge det inn på nytt.



Bytte font

Har du lyst til å ha en kul skrifttype i bloggen din kan du enkelt bruke Google Fonts til dette.


Gå til Google Fonts
og finn den fonten du vil bruke. De har over 600 font-familier å velge blant.


Når du har funnet fonten du vil bruke trykker du på "Quick-use"-knappen.


Scroll ned til punkt 3. og velg "@import". Kopiér koden.


Så går du til "Avansert design" >> "Rediger" >> "Stilark" og limer koden inn helt øverst i stilarket.


Finn #main h1 i stilarket.
h1 er innleggstitlene i Side2-designet. Har du valgt en tynnere eller tykkere font (font-weight) hos Google Fonts kan du også endre på tallet etter font-weight her.

#main h1 {
font-size: 36px;
font-size: 3.6rem;
line-height: 1.1;
font-weight: 400;
margin-bottom: 2px;
padding-top: 7px;
}

Kopier denne kodelinjen og lim den inn rett over }:

font-family: 'DIN VALGTE FONT HER', Arial, sans-serif;
Legg din valgte font inn foran de andre (bytt ut "Din valgte font her"). Er fontnavnet to eller flere ord må du bruke en ' på hver side av det som i eksempelet. Skal du bare endre på innleggstitlene kan du i stedet legge en kortere kodelinje under den andre i stedet.
h1, h1 a {
color: #000;
font-family: 'Cinzel Decorative', Arial, sans-serif;
}

Nå kan du se resultatet i forhåndsvisningen. Husk å lagre når du er fornøyd.



Sidestille innleggstittel

For å sidestille innleggstittelen er koden følgende:

#main h1, #main h1.archive-sub, .meta-front {
text-align:left;
}





Store og små bokstaver i tittel

For å sette innleggstittelen tilbake til å vise både store og små bokstaver er koden følgende:

#main h1 {
text-transform:none;
}





Flere css-koder

Vise dato under tittel (front):

span.meta-dato {
display: inline-block;
}
Strek på hver side av dato/klokkeslett (front):
.meta-front:after, .meta-front:before {
    border-top: 1px solid #CCCCCC;
    content: "";
    display: inline-block;
    height: 8px;
    margin: 0 10px;
    width: 55px;
}
Vise antall kommentarer under tittel (front):
span.title-comments {
display:inline-block;
}
Skjule antall kommentarer under innlegg (front):
comment-count-front {
display:none;
}
Fjerne luft på sidene av innlegg (eksempel):
.bloggpost {
margin-bottom: 40px;
width: 100%;
max-width: 800px;
padding: 0px 0px; /*er orginalt padding: 0px 40px*/
}