Devpublish – Et gratis design for iPublish og bloggr.no

Ettersom jeg nå har laget meg en ny blogg og nytt design så tenkte jeg at jeg kunne starte med å gi ut det forrige designet mitt slik at noen kanskje kan få bruk for det. Designet baserer seg på wordpress sin standardmal “Twenty Ten” og fungerer derfor på blant annet iPublish og bloggr.no.

Jeg har ikke ryddet i css-koden og alt leveres derfor “som det er”. Noe kan kanskje være tilpasset mitt bruk, men det bør ikke være noe problem. Skal det derimot være et problem, så kan du ta å legge igjen en kommentar.

Her er den komplette css-koden for designet. Informasjon om header og farge befinner seg litt lengre ned i dette innlegget:

*{margin:0;padding:0;}
*,:focus{outline:none;}
body{background:#ffffff;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:12px;color:#333;}
#content,#content input,#content textarea{line-height:22px;}
#access .menu-header,div.menu,#colophon,#branding,#main,#wrapper{width:840px;}
#wrapper{padding:0;margin:0;width:100%;}
#branding img,#site-description{display:none;}
#masthead{margin:0 auto;width:840px;height:160px;}
#header{padding:0;background:#008fcb url(http://idev.ipublish.no/files/2011/03/menu.png) repeat-x bottom left;}
#site-title{width:840px;margin:0 auto;float:none;}
#site-title a{width:840px;height:120px;line-height:130px;font-weight:normal;font-size:22px;color:#fff;margin:0;display:block;}
#access{background:transparent;float:none;margin:0 auto;width:840px;}
#access .menu-header{width:840px;font-size:12px;}
#access .menu-header,div.menu{margin-left:0px;}
#access a{line-height:40px;color:#aaaaaa;}
#access ul li.current_page_item a,#access ul li.current-menu-ancestor a,#access ul li.current-menu-item > a,#access ul li.current-menu-parent a{background:#444444;color:#ffffff;}
#access li:hover a,#access ul ul :hover a,#access ul li.current_page_item{background:#000000;color:#ffffff;}
#container{margin:0;width:620px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background:#ecebe7;padding:4px 0;}
#content{margin:0;font-size:13px;background:#ffffff;border:1px solid #dcdcdc;margin:0 4px;padding:10px;}
#main{overflow:hidden;padding:25px 0 50px;background:url(http://stihk.com/files/2011/03/avstihk.png) no-repeat center bottom;}
#primary,#secondary{width:200px;}
#main .widget-area ul{padding:0px;}
.widget-container{margin:0 0 13px;}
#footer-widget-area ul.xoxo{margin:0;}
#footer-widget-area .widget-area{float:none;width:100%;}
#footer{margin:20px 0 0;background:#efefef;color:#777777;text-align:center;font-size:11px;border-top:1px solid #dddddd;}
#site-info,#site-generator{display:none;}
#colophon{border:none;margin-top:0px;padding:15px 0 0;}
.hentry{border-bottom:1px dotted #DCDCDC;margin:0 0 25px;padding-bottom:30px;}
a:link,a:active,a:visited{color:#3b5998;text-decoration:underline;}
a:hover{text-decoration:none;}
.entry-title a:active,.entry-title a:hover,
.navigation a:active,.navigation a:hover,
.comment-meta a:active,.comment-meta a:hover{color:#0093d1;}
.entry-meta a:hover,.entry-utility a:hover{color:#000000;}
#nav-above{margin:0 0 5px;display:none!important;}
#nav-below{margin:-18px 0 25px;}
#content .entry-title{font-size:28px;font-weight:normal;}
#entry-author-info{background:#ECEBE7;border-top:none;font-size:12px;line-height:20px;margin:25px 0;padding:10px;}
#entry-author-info #author-description{padding-top:3px;margin:0 0 0 88px;}
#entry-author-info #author-avatar{background:#ffffff;border:1px solid #dcdcdc;padding:5px;}
h3#comments-title,h3#reply-title{font-weight:normal;}
.comment-author img.avatar{padding:1px;background:#ffffff;border:1px solid #666666;}
.commentlist .avatar{left:10px;top:10px;}
.comment-author{padding-top:8px;}
.comment-meta{position:absolute;right:10px;top:8px;font-size:11px;}
.commentlist li.comment{background:#f7f7f7;border-bottom:1px solid #dddddd;border-top:1px solid #dddddd;padding:0 0 0 65px;margin:0 0 5px;}
.comment-body{font-size:12px;line-height:18px;padding:3px 0 0;}
.reply{font-size:11px;padding:0 0 5px;}
.commentlist ul.children li.comment{margin-right:5px;background:#f1f1f1;}
.commentlist li.bypostauthor,.commentlist li.comment-author-devpublish,.commentlist li.comment-author-stihk,
.commentlist ul.children li.comment-author-devpublish,.commentlist ul.children li.comment-author-stihk{background:#ffffdd;border-bottom:1px solid #ddddcd;border-top:1px solid #ddddcd;}
input[type="text"],textarea,
#content input,#content textarea{background:#f5f5f5;border:1px solid #dedede;font-size:14px;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;}
#respond .form-submit input{background:#f2f2f2;border-color:#dddddd #aaaaaa #aaaaaa #dddddd;border-style:solid;border-width:1px;cursor:pointer;font-size:13px;margin:10px 0;padding:5px 10px;}
#respond .comment-notes{font-size:12px;}
h3#reply-title{margin:18px 0 10px;}
#respond .form-allowed-tags{display:none;}
.entry-meta{font-size:11px;}
#content img{max-width:590px;}
#comments .pingback{border-bottom:1px solid #E7E7E7;border-top:1px solid #E7E7E7;margin:5px 0;padding:8px;}
#content .wp-caption{padding:10px 0 3px;margin-left:-10px;width:610px!important;border-top:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;}
#content .wp-caption img{margin:0 auto;}
#content .wp-caption p.wp-caption-text{color:#888888;font-size:11px;margin:2px 0;}
#content pre,#content kbd,#content tt,#content var{font-size:12px;line-height:20px;overflow:auto;}
.one-column{width:840px!important;}
.one-column #content{margin:0 auto;width:810px !important;}


Ønsker du å bruke en header eller bare bytte bakgrunnsfarge på headeren? Da kan du benytte css-kodenene under. Lager du en header bør den være maks 840px bred. Husk å gjør de forandringer (på f.eks høyde) som passer ditt behov.

For å legg til en header:

#site-title a {
background: url(LINK_TIL_HEADER) no-repeat top center;
height: 120px;
text-indent: -9999px;
}

For å endre bakgrunnsfarge (bytte den blå bakgrunnen):

#header {
background-color: #940000;
}

Pass på at du legger disse kodesnuttene under den andre css-koden.

Tar du i bruk designet ønsker jeg at du forteller leserne dine om at du fant designet her og gir meg litt cred. Håper noen får nytte av dette :)

Det kan være lurt å ta backup av ditt nåværende design i tilfelle du angrer.