Du har kanskje lagt merke til at i Origos ulike arrangementslister vises kommende arrangementer først og det pågående arrangementet til sist. (Eksempel fra Telemark her – kalenderen i høyre spalte.) For gallerier og andre utstillingssteder er det ikke sikkert dette er hensiktsmessig – ofte ønsker man tvertom å ha fullt fokus på det pågående arrangementet.
På Galleri Falkums nye nettside ville vi framheve det pågående arrangementet ved å flytte det til toppen (og gjøre overskriften større).
Gjør du overskrifter større, slik det beskrives i forrige innlegg, kan det være at du får behov for å øke luften mellom innleggene – blant annet vil du se det på en standardsones forside.
Slik gjør du det:
Farger på overskrifter kan du justere under Innstillinger → Rediger utseende → Tekst. Typografien ellers derimot må gjøres med CSS. Under er en typografisk variasjon for overskrifter.
Første linje gjør teksten større (24 punkter), andre linjen gjør den fet, tredje linje fjerner kniping, fjerde linje gjør avstanden mellom overskrift og følgende tekst større (dette er nok nødvendig når fontstørrelsen økes) og siste linje gjør teksten til versaler (“store bokstaver”).
Forfatternavnet under innleggene dine har litt økt fontstørrelse i forhold til de andre tekstelementene i byline. Du kan også framheve navnet ved å gjøre teksten fet, men legge det i samme størrelse som de andre elementene. Det gjør du slik:
.byline .byline_content .byline_author {
På arrangementsinnlegg er det en linje mellom overskrift og brødtekst der tid og sted for arrangementet angis. Tekstlinjen starter med en grønn firkant – et kalenderblad. Her viser jeg hvordan du kan fjerne denne grønne firkanten og ellers endre noe av typografien i tid og stedsangivelsen.
Første kodelinje fjerner den grønne firkanten. Andre linje justerer teksten helt til venstre.
Koden under er en variasjon av typografien i Origos bunnmeny. Første linje gir teksten normal vekt, ikke fet. Andre linje fjerner tekst-skyggen. Tredje linje transformerer teksten til versaler (“store bokstaver”)
#global_page_footer {
Slik lager du transparent bakgrunn på Origos nye bunnmeny. (Ordet “background-color” i koden under er en lenke. Bak lenken finner du ut hvordan du kan lage andre bakgrunnsfarger.
#global_page_footer {
Hvis du vil gjøre Origos toppmeny gjennomsiktig, kan du bruke koden under. Første linje gjør menyen gjennomsiktig. Andre linje fjerner bakgrunnsbildet.
#global_header.global_header_normal {
Det kommer kommentarer innimellom på at det er for lite luft mellom tekst på Origo. Det kan jeg være enig i. Heldigvis er det veldig enkelt å gjøre noe med.
Dette er koden Origo bruker for å angi avstand mellom avsnitt:
En herremann kommenterer på vaktmesterkontoret at skillet mellom kommentarer ikke er tydelig nok og ønsker at Origo-utviklerne skal gjøre noe med det. Per-Kristian Nordnes viser til at slikt kan gjøres med CSS.
Under er et forslag til hvordan det kan gjøres. Koden legger til en linje under hver kommentar og øker avstanden mellom kommentarene noe. Det er brukt samme form som brukes til å skille ulike innlegg ellers på Origo – prøv så ser du hva jeg mener.
Jeg ble nå nettopp gjort oppmerksom på teksten i kalenderen i høyre spalte er misvisende. Dette gjelder altså Origos maler.
Over de arrangementene som kommer står det “Pågår nå” uansett om arrangementet er påbegynt eller ikke. Under arrangementet står det “fram til…” men ikke noen startdato. Dette er selvfølgelig trist for dem som drar fra Seljord for å se utstilling på Telemark kunstnersenter når utstillingen allkevel ikke åpner før om et par uker.
Under nedlasting i menyen over ligger det nå 5 CSS-pakker til nedlasting. Meld deg inn, last ned, prøv ut. Kommentarer mottas med takk – slik kan pakkene bli bedre.
Alle pakkene fjerner og skjuler ulike ting fra Origos maler. To av dem fjerner dekor, en fikser designproblemer for soner som bruker lys tekst på mørk bakgrunn og de to siste er litt større pakker som kan endre hvordan sonen din fungerer.
Som jeg har påpekt tidligere: alle innholdstyper (innlegg, arrangement, tekst, avstemninger etc) er synlig i alle Origos maler. I tillegg er en del informasjon tilgjengelig mer enn ett sted. Anbefalte soner og vertskap ligger både i høyremargen på forsiden og på siden Om sonen – vertskap ligger jammen nede i fotnoten også. Nytt bidrag, bli medlem, søk, din profil er også eksempler på innhold du finner flere steder på nettstedet ditt.
Noen vil også mene at brukerveiledningen er i overkant tydelig. Er det egentlig nødvendig å ha seksjonstittelen “Arkiv” over en liste med måneder eller “Stikkord” over en liste som åpenbart er stikkord? Listen er lang, dere skjønner hva jeg mener.
Nå er det på tide å innstallere Firebug (eller skaffe seg en annen effektiv måte å lese kildekode på). Jeg forutsetter at du har dette programmet innstallert.
A. Finne klassenavn på nettsiden og i Firebug
Sannsynligvis har du som leser dette en sone på Origo allerede. Dette innlegget kan uansett være nyttig for deg. Det kan hende det kan hjelpe deg å få enda mer ut av sonen din.
Det er for øyeblikket tre ulike maler på du kan bruke på din egen sone – standard, blogg og kalender. Det står mer om de ulike malene på Origos hjelpesider om soner. Alle malene kan vise alle typer innhold (innlegg, tekster, arrangementer, bilder etc). Poenget med malene er at de vektlegger de ulike innholdstypene ulikt.
Å rigge Origo med CSS går veldig mye lettere med rett utstyr. For det første anbefaler jeg Firefox som nettleser. Du skal selvfølgelig sjekke hvordan sidene dine fungerer i de mest vanlige nettleserne, men som utviklingsplattform er Firefox førstevalget for de fleste. Det du definitivt ikke skal gjøre er å bruke Internet Explorer som utviklingsmiljø. IE følger ikke globale standarder, dermed skaffer du deg problemer fra starten av hvis du baserer utviklingen din på denne.
Rett nettleser er en god begynnelse. Men så er det et par tillegg. Firebug er det viktigste. Kort sagt setter Firebug deg i stand til å lese koden som ligger bak sonen og skisse endringer før du laster opp CSS-koden din. Du får veldig mye igjen for å investere litt tid i å lære deg Firebug.
Velkommen til Rigger. Dette er en blogg om formgivning og informasjonsdesign på Origo-soner. Den har CSS i fokus.
Rigger er et åpent prosjekt fra Springer kulturstudio. Åpent betyr i denne sammenhengen at de som ønsker kan være med å utvikle prosjektet og ta del i prosjekteierskapet. Formålet er å være en samarbeidsplattform for Origo-brukere som arbeider med design av soner.
Rigger er en blogg om formgivning og informasjonsdesign på Origo-soner. Den har CSS i fokus.
Den er et åpent prosjekt fra Atle Barcley. Åpent betyr i denne sammenhengen at de som ønsker kan være med å utvikle prosjektet og ta del i prosjekteierskapet. Formålet er å være en samarbeidsplattform for folk som arbeider med design av Origo-soner.
Del gjerne tips, koder og erfaringer. Du kan stille spørsmål, men de bør dreie seg om bruk av CSS på Origo. Mer om sonen
RIGGER er en sone på Origo. Les mer