Webdesign…

|

…af Ulla Thorup Nielsen…

WordPress og Google Analytics

januar 11th, 2011

Følg instruktionen på denne video

Drop down menu – med CSS

december 30th, 2010

Drop down menuer lavet med CSS stylesheets bruger ikke scripts. Det stiller ikke så store krav til hvilke browsere eller webeditorer, du bruger.

Jeg har fundet en side med kildekoderne til forskellige udgaver af drop down menuer lavet med stylesheets – se HER.

Menuerne tilpasses ved at ændre på kildekoderne, når du har sat dem ind på din side – så det kræver, at du kan arbejde med html.

Ved disse skabeloner er redaktionsmulighederne meget begrænsede. Du kan kun ændre på feltstørrelsen i første niveau, på de menuer der har 3 eller flere niveauer. De øvrige feltstørrelser ligger fast – og er linket til eksterne stylesheets, som ophavsmanden har lavet (Så vidt jeg indtil videre har forstået det). Du kan ændre på indhold, streg, farve, teksttype og størrelse.

Se eksempel på menu lavet med stylesheet, og sat ind i KompoZer dokument HER

Blog-layout: eftertanke.dk – skabelon Fusion

december 30th, 2010

Jeg har en blog på eftertanke.dk – som bruger WordPress.

På Fusion skabelonen er det muligt at lave en del ændringer i stilarket.

I det følgende kan du se kodestykker til ændring af layoutet på Fusion skabelonen.

Koderne sættes ind i boksen under Fusion Tema indstillinger.

Find flere farver her: | Find farvernes #værdi |

______________________________________________________

Side-top

Bannerbillede

#page-wrap1{ background: transparent url(http://billedearkiv.dk/billedenavn.JPG) repeat-x left top; }

#page-wrap2{ background: transparent url(images/header-center.jpg) no-repeat center top;

height: 200px; min-height: 500px; width: 100%; display:block;}

(NB: Billedet skal beskæres, så det er 200px I højden)

Blogtitel: Tekst farve og størrelse

#header h1 a{ color: #bbff00; text-decoration: none; font-size: 50px;}

#header h1 a:hover{ background: none; color: #bfbfbf;}

Blogbeskrivelse: Tekst farve og størrelse

#topnav{ color: #bfbfbf; padding-top: 20px; font-size: 130%;}

____________________________________________________

Spaltebredde og marginer

#page.with-sidebar #main-wrap #mid-wrap { right:0%; /* width of the 2nd column, 0 because it doesnt exist */ }

#page.with-sidebar #main-wrap #side-wrap { right:55%; /* width of the main column */ }

#page.with-sidebar #main-wrap #mid { width:55%; /* width of main column */

left:55%; /* same */}

#page.with-sidebar #main-wrap #sidebar { width:34%; /* width of the sidebar */

left:55%;}

#mid-wrap, #side-wrap { float:left; margin-left: 30px; width:100%; position:relative;}

#sidebar-wrap1{ background: #transparent url(images/side-start.png) no-repeat left top;

padding-left: 28px; ; margin-left: 30px; margin-top: 10px; height: 100%;}

______________________________________________

Indlægsspalten

Indlægstitel: Tekst størrelse

h2{ font-family: “Palatino Linotype”, Georgia, “Tahoma”, “Century Schoolbook L”, Arial, Helvetica;

font-size: 375%; font-weight: normal; margin: .6em 0 .3em;}

Indlægstitel: Linkfarve

.story h2 a:hover, .post h2 a:hover, .story h3 a:hover, .post h3 a:hover{ background: none; color: #663366;}

Indlægstekst: Tekst størrelse

p{ line-height: 140%; margin: .4em 0 1em; font-size: 105%}

form p{ margin: 0;}

Billederamme

.post .postbody img, .attachment img, .navigation .aligncennter img, .navigation .alignleft img, .navigation .alignright img { padding: 10px; margin: 4px 10px; border: 1px solid #663366; border-radius: 4px; -moz-border-radius: 4px; background-color: #efefef}

.post img.alignleft, .attachment img.alignleft{ margin-left: 0; }

.post img.alignright, .attachment img.alignright{ margin-right: 0; }

.post img.aligncenter, .attachment img.aligncenter{ margin: 0 auto; text-align: center; }

Linkfarve

a{ color: #663366; text-decoration: underline;}

a:hover{ color: #fff; background: #663366; text-decoration: none;}

____________________________________________

Sidebar

Overskrifter: Tekst størrelse og farve

#sidebar .widget h2,

#sidebar2 .widget h2{ background: transparent url(images/div-h2.gif) repeat-x left bottom; color: #444444; padding-bottom: 2px; font-size: 125%; margin-bottom: .4em;}

Linkfarve

#sidebar li.linkcat a, #sidebar2 li.linkcat a,

.widget.widget_links ul li a, .widget.widget_meta ul li a, .widget.widget_categories ul li a, .widget.widget_archive ul li a, .widget.widget_pages ul li a, .widget.widget_recent_entries ul li a{ color: #444444; text-decoration: none; margin-left: 10px; display: inline-block;}

Linkfarve: Aktiveret link

#sidebar li.linkcat a:hover, #sidebar2 li.linkcat a:hover,.widget.widget_links ul li a:hover, .widget.widget_meta ul li a:hover, .widget.widget_categories ul li a:hover, .widget.widget_archive ul li a:hover, .widget.widget_pages ul li a:hover, .widget.widget_recent_entries ul li a:hover{ color:#A4126E; background: none; text-decoration: underline;}

_____________________________________

Sidenavigation: Ældre og nyere indlæg (sidefod og top) – farve og størrelse på linktekst

.navigation{ font-size: 110%; color: #444444; margin: 0; padding: 0;}

.navigation a{ text-decoration: none; color: #000000;}

.navigation a:hover{ background: none; color:#A4126E;}

______________________________________________

Kommentarformularen: Farve på linktekst og linkbaggrunde

a.comments, .story p.postcontrols a.comments, .post p.postcontrols a.comments{ background:transparent url(images/post-icons.png) no-repeat 2px bottom; padding-left: 19px; color:#A4126E;}

a.comments:hover, .story p.postcontrols a.comments:hover, .post p.postcontrols a.comments:hover{ background: #A4126E; color: #fff;}

a.no.comments, .post p.postcontrols a.no.comments{ color: #A4126E;}

a.no.comments:hover, .post p.postcontrols a.no.comments:hover{ background: #A4126E; color: #fff;}

li.comment .details.admincomment .head{ background: #663366 url(images/postinfo-bg-admin.gif) repeat-x left bottom; color: #fff;}

#mid ul.menu a.active, #mid ul.menu a.current{ background-position:0% 0px; color:#a4126e;}

#mid ul.menu a.active span, #mid ul.menu a.current span { background-position:100% 0px; color:#a4126e;}

Installer Word Press på one.com

december 30th, 2010

Word Press er en gratis blogeditor – med et væld at skabeloner og redigeringsmuligheder.

Fremgangsmåde:

Find installationsfilerne til Word Press (WP) HER. Download Word Press til din PC.

Vælg et navn til din blog, og opret en mappe på dit domæne med det navn. Eksempel: mappenavn: minblog -> blognavn: minblog.domænenavn.dk.

Brug en ftp uploader, og upload Word Press filerne til den mappe du har valgt. Være obs på at det kun er indholdet i den downloadede Word Press mappe, som du uploader. Det vil sige de tre mapper: wp-admin, wp-content og wp-includes + de filer der ligge i samme mappe – blandt andet index.php.

Når filerne er uploadet til din mappe, åbner du installationsproceduren fra din browser, ved at åbne den webstedsadresse du har valgt til din blog. Eksempel: minblog.domænenavn.dk. Herfra bliver du guidet gennem installationen – der er meget nem – og kun tager få minutter.

Til installationen skal du bruge:

Oprettelse af forbindelse til database:

Navnet på din MySQL database på one.com. Det finder du ved at logge ind på one.com – åbne phpMyAdmin – og klikke på linket databases.

Dit brugernavn – er dit domænenavn med _ i stedet for .. Eks: mitdomæne_dk

Din adgangskode til MySQL databasen finder du også på phpMyAdmin. Jeg kunne dog ikke helt få det til at fungere med det. Så jeg valgte at lave en ny adgangkode ved at åbne: Avanceret – på one.com menuen.

localhost – skal du ikke ændre ved.

Præfikset i det sidste punkt under installeringen bestemmer, hvordan filerne skal ligge i databasen. Det felt er sat til wp_ . Vælg i stedet et unikt navn: f.eks. min_ , navn_ , eller noget andet. Hvis du opretter flere Word Press blogs, eller andre funktioner, der lagrer informationer i din MySQL database – så bruges præfikset til at sortere hvilke data, der tilhører hvilke blogs og funktioner.

Titel og bruger login

Titel på din blog. Den kan ændres igen.

Vælg et brugernavn. Det skal du bruge når du fremover skal logge dig ind på din blog. Det navn kan ikke ændres igen.

Vælg derefter en adgangskode. Den skal du bruge når du logger på din blog. Den kan ændres igen.

Så skulle bloggen være klar til brug…

Bloglayout: Smartlog.dk

november 11th, 2010

Grundskabelon: Kubrick

Indsæt dit eget bannerbillede

Gå ind i menuen: Flere muligheder

Vælg: Rediger kilden til den skabelon

Vælg: Ny skabelon baseret på nuværende

Giv skabelonen et navn

Find følgende sted i koderne:

#header { background: url(“<{$blog->getTemplateVariable(“kubrick_top”)}>”) no-repeat bottom center; }

Indsæt url adressen på det billede du ønsker at sætte ind:

#header { background: url(http://web.dk/billede.JPG) no-repeat bottom center; }

Billedet skal have størrelsen: 720px x 190px

Indsæt billeder i menuen

Gå ind i menuen: Flere muligheder

Vælg: Moduler

Tilføj modulet: HTML

Indsæt følgende kode med url adressen på det billede du ønsker at sætte ind:

img style=”border: #663366 1px solid” width=”180″ height=”180″ src=”http://web.dk/billede.JPG” /

(skal omgives af tagsene <> – men jeg kan ikke sætte dem ind – uden at aktivere koden? – lidt bøvlet)

Se flere muligheder

CSS stilark – grundlæggende

november 11th, 2010

Jeg har nu fået stilarkene til at fungere optimalt.

I starten lavede jeg nogle grundlæggende fejl, der gik ud over det smarte ved redigeringsmulighederne.

Stilarkene skal altid gemmes som *.css dokumenter. Jeg gjorde den fejl, at jeg gemte dem som *.txt dokumenter i notesblok. Det betød, at der skulle ligge en kopi af stilarkene i samme mappe, som de dokumenter det skulle aktiveres fra.

Når stilarkene gemmes som *.css dokumenter, behøver der kun ligger en kopi af arket på domænet – og det fungerer fint på alle dokumenter i alle mapperne. Så det kræver kun en enkelt redigering – og ‘et upload af arket – for at ændre udseende på hele siden. Smart…

En anden lille ting – som der også skal tages højde for – når du bruger KompoZer webeditor. Alle upload skal foregå med en ftp uploader. Bruger du upload funktionen i KompoZer – kopierer den automatisk en kopi af stilarket fra den webadresse det ligger i – og der kommer til at ligge en kopi af stilarket i den mappe du uploader til. Det betyder at ændringerne i det orginale stilark på domænet ikke fungere på de dokumenter, hvor der ligger en kopi af arket. Det er muligt, at der kan ændres lidt ved indstillingerne i KompoZers uploadsfunktion – for at undgå dette.

Det medfører også en anden lille praktisk ting. Billeder skal også uploades med en ftp uploader – og URL-adressen på billedet kopieres ind i dokumentet – i stedet for at hente en kopi fra PC’ens harddisk.

Det smarte ved det er – at udskiftning af billeder kan foretages ved et upload med det samme billedenavn – uden at dokumenterne skal åbnes.

Nu hvor jeg for alvor har fået det til at fungere – så er det virkelig let at redigere – med CSS.

NB. Har lige testet KompoZer – det kan fint lade sig gøre at overføre dokumenter – uden at billeder og andre filer også blive overført. Der er et afkrydsningsfelt til at aktivere og deaktivere denne funktion..

Ændringer i CSS på Blogger skabeloner

november 5th, 2010

Det er muligt at ændre på noget på Bloggers skabeloner, ved at sætte nye html koder ind i en dertil indrettet kodeboks i skabelondesigneren.

Jeg har indtil videre prøvet følgende:

Nyt baggrundsbillede

.body-fauxcolumn-outer { background: url(http:// webstedsnavn-for-uploaded-billede.JPG) repeat fixed center top; }

Forklaring:

Repeat: Billedet bliver gentaget vandret og lodret. Skal billedet ikke gentages skrives i stedet no-repeat.

Fixed: Billedet ruller ikke med siden. Skrives ikke hvis billedet skal rulle med siden.

Center: Billedet bliver centret på siden.

Top: Billedets top er i toppen af skærmbillede.

Centrer titel og blogbeskrivelse

.Header { text-align: centre; }

Skift farve og lav fed tekst på blogbeskrivelse

.Header p { color:#bbff00; font-weight:bold; }

Kommentar

Hvis koderne ikke aktiveres i første omgang, når du sætter dem ind – så prøve at lave et ekstra linieskift under nederste kodelinie. Designeren kan åbenbart ikke registrere tekst, der er kopieret ind – uden at der også sker noget manuelt i kodefeltet.

Læs mere om redigering af CSS på Blogger

Eksempel på kodernes anvendelse på en af mine blogs

Fejl ved target i nogle frames

juli 12th, 2010
Af en eller anden grund – kommer jeg ud for, at target i nogle af mine framesæt ikke fungerer. Jeg kan simpelthen ikke finde fejlen.

Jeg oplever at linkene skal aktiveres i en bestemt rækkefølge for at få dem til at åbne i rammen.

Jeg har tjekket alt – hvad der kan tjekkes. Og jeg kan simpelthen ikke finde fejlen. Der er ikke noget i opbygningen, der er anderledes end ved mine andre rammer.

Men der må jo være noget der forstyrrer linkene?

Hvad kan forstyrre linkene – så de kun fungerer, når de åbnes i en bestemt rækkefølge?

Blogger blogs: Baggrundsbilleder og indeks

juli 11th, 2010
Der en lille pudsig ting ved baggrundsbillederne på Bloggers designer. De ændrer deres zoom – alt efter hvilken dag du tilfældigvis er inde og hente dem. Nogle er billederne er ganske kønne – i en form for zoom – men ikke i et andet.

Så det samme billede er nødvendigvis ikke det samme – hvis du går ind og vil hente det igen, på et andet tidspunkt. Lidt pudsigt…

Så har jeg prøvet mig lidt frem – for at finde en måde at styre rækkefølgen på labels overskrifterne i indeks. Du kan vælge enten alfabetisk eller tidsfølge for oprettelse – som rækkefølge.

Jeg har fundet frem til at tegn – bindestreger, stjerner eller ” – altid kommer først. Så på den måde kan det lade sig gøre at kategoriserer nogle labels, så de kommer til at stå i en bestemt rækkefølge.

Illustrationer lavet i tekstbehandling – udgivet som billeder

juli 11th, 2010
Jeg kan godt lide at lave illustrationer – til de ting  jeg skriver.

Word har mange gode tegnefunktioner – så det er meget nemt at lave illustrationerne der.

Men – men…

Efter at jeg har fået hjemmeside og er begyndt at bruge blogs – så skal alt hvad der udgives af illustrationer være gemt som billeder, før de kan udgives.

Det betyder at mine illustrationer skal scannes ind som billeder – og hvis resultatet ikke bliver alt for godt, skal de efterfølgende redigeres.

Det er jo noget omstændeligt.

Jeg har fundet ud af, at gemmes dokumentet med illustrationen i kompatibel tilstand – så kan det efterfølgende åbnes i OpenOffice.org Writer, som har en lille smart finesse. Som jeg fandt ud af ved en tilfældighed – og som muligvis heller ikke er tilsigtet som “arbejdsredskab”.

Hvis et dokument i OpenOffice.org Writer gemmes som html dokument – så gemmes alt grafik automatisk særskilt som GIF filer. Det vil sige, at illustrationen nu er gemt som et billede. Kvaliteten kan være noget svingende – for det er ikke alt grafik der aflæses lige godt i kompatible tilstand. Men en noget lettere løsning end scanning.

Så fremover – må jeg hellere lave mine illustrationer i OpenOffice.org Writer – og bruge denne lette genvej til at få GIF filer.

Jeg kunne ønske mig en tilsvarende funktion i Word – for grafikken er noget mere avanceret og flot. Det er der muligvis også – jeg har bare ikke fundet den…