Webdesign…

|

…af Ulla Thorup Nielsen…

Posts Tagged ‘Fusion’

Blog-layout: eftertanke.dk – skabelon Fusion

torsdag, 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;}