Simplr. Nytt blogger design

sinols · 21. september 2011

Hei

Simplr er nå lansert, ett nytt blogger design - Gratis!

Last ned her: http://sindreolsson.blogspot.com/2011/09/simplr-new-blogger-template-download.html

Mvh

Sindre Olsson

Endret 27. september 2011 av sinols

sinols · 7. oktober 2011

Hei

Jeg skal nå endre marginen på Simplr. Jeg har laget ett bilde som viser hvor mye mellom hver del.

Jeg har fått til 20px mellom tekst. Men resten mangler. Det vil si: 40px mellom linjer og innhold. 30px mellom innhold innenfor linjene - gjelder over hele layouten.

Lurte på om det var noen som hadde litt tid til og hjelpe meg?

css:

body {
 background:$bgcolor;
 margin:0;
 color:$textcolor;
 font-size:100%
 }
a:link {
 color:$linkcolor;
 text-decoration:none;
 }
a:visited {
 color:$visitedlinkcolor;
 text-decoration: none;
 }
a:hover {
 color:$titlecolor;
 text-decoration: underline;
}
a img {
 border-width:0;
 }

/* Decorations
----------------------------------------------- */

.jump-link{
font-size: 100%;
}

/* Facebook
----------------------------------------------- */


/* Header
----------------------------------------------- */

#header-wrapper {
 width:600px;
 margin:0 auto 25px;
 border:0px solid $bordercolor;
 }

#header-inner {
 background-position: center;
 margin-left: auto;
 margin-right: auto;
}

#header { 
 margin: 0px;
 border: 0px solid $bordercolor;
 text-align: left;
 color:$pagetitlecolor;
 padding-bottom:1.5em;
 border-bottom: 1px dotted #ccc;

}

#header h1 {
 margin:40px 0px 0;
 padding:0px 0px .0em;
 line-height:1.2em;
 text-transform:uppercase;
 letter-spacing:.2em;
 font: $pagetitlefont;
}

#header a {
 color:$pagetitlecolor;
 text-decoration:none;
 }

#header a:hover {
 color:$pagetitlecolor;
 }

#header .description {
 margin:0 0px 0px;
 padding:0 0px 0px;
 max-width:600px;
 text-transform:uppercase;
 letter-spacing:.2em;
 line-height: 1.4em;
 font: $descriptionfont;
 color: $descriptioncolor;
}

#header img {
 margin-$startSide: auto;
 margin-$endSide: auto;
}


/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {
 width: 600px;
 margin:0 auto;
 text-align:left;
 font: $bodyfont;
 }

#main-wrapper {
 width: 600px;
 float: left;
 word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
 overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
 }

.sidebar-wrapper {
 width: 600px;
 float: left;
 word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
 overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}


/* Headings
----------------------------------------------- */

h2 {
 margin:1.5em 0 .75em;
 font:$headerfont;
 line-height: 1.4em;
 text-transform:uppercase;
 letter-spacing:.1em;
 color:$sidebarcolor;
}


/* Posts
----------------------------------------------- */

h2.date-header {
 margin:1.5em 0 .5em;
 }

.post {
 margin:.5em 0 1.5em;
 border-bottom:1px dotted $bordercolor;
 padding-bottom:1.4em;
 line-height: 1.8em;
 }
.post h3 {
 margin:.25em 0 0;
 padding:0 0 5px;
 font-size:140%;
 font-weight:normal;
 line-height:1.4em;
 color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
 display:block;
 text-decoration:none;
 color:$titlecolor;
 font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
 color:$titlecolor;
}

.post p {
 margin:0 0 .75em;
 line-height:1.8em;
}

.post-footer {
 margin: .75em 0;
 color:$sidebarcolor;
 text-transform:uppercase;
 letter-spacing:.1em;
 font: $postfooterfont;
 line-height: 1.4em;
}

.comment-link {
 margin-left:.6em;
 }
.post img {
 }
.post blockquote {
 margin:1em 20px;
 }
.post blockquote p {
 margin:.75em 0;
 }

/* Comments
----------------------------------------------- */

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #000000;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
line-height: 1.5em;

}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
padding-bottom:1.5em;
border-bottom:1px dotted $bordercolor;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: left;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
/* Sidebar Content
----------------------------------------------- */

.sidebar {
 color: $sidebartextcolor;
 line-height: 1.5em;
}

.sidebar ul {
 list-style:none;
 margin:0 0 0;
 padding:0 0 0;
}
.sidebar li {
 margin:0;
 padding:0 0 .25em 15px;
 text-indent:-15px;
 line-height:1.5em;
 }

.sidebar .widget, .main .widget {
 border-bottom:1px dotted $bordercolor;
 margin:0 0 1.5em;
 padding:0 0 1.5em;
}

.main .Blog {
 border-bottom-width: 0;
}


/* Profile
----------------------------------------------- */

.profile-img {
 float: left;
 margin: 0 5px 5px 0;
 padding: 4px;
 border: 1px solid $bordercolor;
}

.profile-data {
 margin:0;
 text-transform:uppercase;
 letter-spacing:.1em;
 font: $postfooterfont;
 color: $sidebarcolor;
 font-weight: bold;
 line-height: 1.6em;
}

.profile-datablock {
 margin:.5em 0 .5em;
}

.profile-textblock {
 margin: 0.5em 0;
 line-height: 1.6em;
}

.profile-link {
 font: $postfooterfont;
 text-transform: uppercase;
 letter-spacing: .1em;
}

/* Footer
----------------------------------------------- */

#footer {

 border-top: 1px dotted #ccc;
 width:600px;
 clear:both;
 margin:0 auto;
 padding-top:33px;
 padding-bottom:33px;
 line-height:1.6em;
 text-transform:uppercase;
 letter-spacing:.1em;
 text-align: left;
}

Endret 7. oktober 2011 av sinols

Occi · 7. oktober 2011

Protip: bruk [*code*]- og [*spoiler*]-tagene. Uten *.

sinols · 7. oktober 2011

Protip: bruk [*code*]- og [*spoiler*]-tagene. Uten *.

hva mener du nå? (er litt grønn)

Occi · 7. oktober 2011

Skriv CSS-koden din i en [*code*] og en [*spoiler*] tag så det er lettere å lese. Så det blir seendes slik ut:

Quote innlegget mitt så ser du hvordan det er satt opp.

Er også lurt å ha innrykk slik som vist.


body {
   background:$bgcolor;
   margin:0;
   color:$textcolor;
   font-size:100%
}
a:link {
   color:$linkcolor;
   text-decoration:none;
}
a:visited {
   color:$visitedlinkcolor;
   text-decoration: none;
}
a:hover {
   color:$titlecolor;
   text-decoration: underline;
}
a img {
   border-width:0;
}

/* Decorations
----------------------------------------------- */

.jump-link{
   font-size: 100%;
}

/* Facebook
----------------------------------------------- */


/* Header
----------------------------------------------- */

#header-wrapper {
   width:600px;
   margin:0 auto 25px;
   border:0px solid $bordercolor;
}

#header-inner {
   background-position: center;
   margin-left: auto;
   margin-right: auto;
}

#header {
   margin: 0px;
   border: 0px solid $bordercolor;
   text-align: left;
   color:$pagetitlecolor;
   padding-bottom:1.5em;
   border-bottom: 1px dotted #ccc;

}

#header h1 {
   margin:40px 0px 0;
   padding:0px 0px .0em;
   line-height:1.2em;
   text-transform:uppercase;
   letter-spacing:.2em;
   font: $pagetitlefont;
}

#header a {
   color:$pagetitlecolor;
   text-decoration:none;
}

#header a:hover {
   color:$pagetitlecolor;
}

#header .description {
   margin:0 0px 0px;
   padding:0 0px 0px;
   max-width:600px;
   text-transform:uppercase;
   letter-spacing:.2em;
   line-height: 1.4em;
   font: $descriptionfont;
   color: $descriptioncolor;
}

#header img {
   margin-$startSide: auto;
   margin-$endSide: auto;
}


/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {
   width: 600px;
   margin:0 auto;
   text-align:left;
   font: $bodyfont;
}

#main-wrapper {
   width: 600px;
   float: left;
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

.sidebar-wrapper {
   width: 600px;
   float: left;
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


/* Headings
----------------------------------------------- */

h2 {
   margin:1.5em 0 .75em;
   font:$headerfont;
   line-height: 1.4em;
   text-transform:uppercase;
   letter-spacing:.1em;
   color:$sidebarcolor;
}


/* Posts
----------------------------------------------- */

h2.date-header {
   margin:1.5em 0 .5em;
}

.post {
   margin:.5em 0 1.5em;
   border-bottom:1px dotted $bordercolor;
   padding-bottom:1.4em;
   line-height: 1.8em;
}
.post h3 {
   margin:.25em 0 0;
   padding:0 0 5px;
   font-size:140%;
   font-weight:normal;
   line-height:1.4em;
   color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
   display:block;
   text-decoration:none;
   color:$titlecolor;
   font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
   color:$titlecolor;
}

.post p {
   margin:0 0 .75em;
   line-height:1.8em;
}

.post-footer {
   margin: .75em 0;
   color:$sidebarcolor;
   text-transform:uppercase;
   letter-spacing:.1em;
   font: $postfooterfont;
   line-height: 1.4em;
}

.comment-link {
   margin-left:.6em;
}
.post img {
}
.post blockquote {
   margin:1em 20px;
}
.post blockquote p {
   margin:.75em 0;
}

/* Comments
----------------------------------------------- */

#comments h4 {
   margin:1em 0;
   font-weight: bold;
   line-height: 1.4em;
   text-transform:uppercase;
   letter-spacing:.2em;
   color: #000000;
}
#comments-block {
   margin:1em 0 1.5em;
   line-height:1.6em;
}
#comments-block .comment-author {
   margin:.5em 0;
}
#comments-block .comment-body {
   margin:.25em 0 0;
   line-height: 1.5em;

}
#comments-block .comment-footer {
   margin:-.25em 0 2em;
   line-height: 1.4em;
   text-transform:uppercase;
   letter-spacing:.1em;
   padding-bottom:1.5em;
   border-bottom:1px dotted $bordercolor;
}
#comments-block .comment-body p {
   margin:0 0 .75em;
}
.deleted-comment {
   font-style:italic;
   color:gray;
}
#blog-pager-newer-link {
   float: left;
}
#blog-pager-older-link {
   float: right;
}
#blog-pager {
   text-align: left;
}
.feed-links {
   clear: both;
   line-height: 2.5em;
}
/* Sidebar Content
----------------------------------------------- */

.sidebar {
   color: $sidebartextcolor;
   line-height: 1.5em;
}

.sidebar ul {
   list-style:none;
   margin:0 0 0;
   padding:0 0 0;
}
.sidebar li {
   margin:0;
   padding:0 0 .25em 15px;
   text-indent:-15px;
   line-height:1.5em;
}

.sidebar .widget, .main .widget {
   border-bottom:1px dotted $bordercolor;
   margin:0 0 1.5em;
   padding:0 0 1.5em;
}

.main .Blog {
   border-bottom-width: 0;
}


/* Profile
----------------------------------------------- */

.profile-img {
   float: left;
   margin: 0 5px 5px 0;
   padding: 4px;
   border: 1px solid $bordercolor;
}

.profile-data {
   margin:0;
   text-transform:uppercase;
   letter-spacing:.1em;
   font: $postfooterfont;
   color: $sidebarcolor;
   font-weight: bold;
   line-height: 1.6em;
}

.profile-datablock {
   margin:.5em 0 .5em;
}

.profile-textblock {
   margin: 0.5em 0;
   line-height: 1.6em;
}

.profile-link {
   font: $postfooterfont;
   text-transform: uppercase;
   letter-spacing: .1em;
}

/* Footer
----------------------------------------------- */

#footer {
   border-top: 1px dotted #ccc;
   width:600px;
   clear:both;
   margin:0 auto;
   padding-top:33px;
   padding-bottom:33px;
   line-height:1.6em;
   text-transform:uppercase;
   letter-spacing:.1em;
   text-align: left;
}

sinols · 17. oktober 2011

Håper det er noen der ute som kan hjelpe meg?

Jeg trenger hjelp til og få endret marginen på alt. Mer luft igjennom hele siden.

Er det noen som kunne ha endret denne CSS:

body {
 background:$bgcolor;
 margin:0;
 color:$textcolor;
 font-size:100%
 }
a:link {
 color:$linkcolor;
 text-decoration:none;
 }
a:visited {
 color:$visitedlinkcolor;
 text-decoration: none;
 }
a:hover {
 color:$titlecolor;
 text-decoration: underline;
}
a img {
 border-width:0;
 }

/* Decorations
----------------------------------------------- */

.jump-link{
font-size: 100%;
}

/* Facebook
----------------------------------------------- */


/* Header
----------------------------------------------- */

#header-wrapper {
 width:600px;
 margin:0 auto 25px;
 border:0px solid $bordercolor;
 }

#header-inner {
 background-position: center;
 margin-left: auto;
 margin-right: auto;
}

#header { 
 margin: 0px;
 border: 0px solid $bordercolor;
 text-align: left;
 color:$pagetitlecolor;
 padding-bottom:1.5em;
 border-bottom: 1px dotted #ccc;

}

#header h1 {
 margin:40px 0px 0;
 padding:0px 0px .0em;
 line-height:1.2em;
 text-transform:uppercase;
 letter-spacing:.2em;
 font: $pagetitlefont;
}

#header a {
 color:$pagetitlecolor;
 text-decoration:none;
 }

#header a:hover {
 color:$pagetitlecolor;
 }

#header .description {
 margin:0 0px 0px;
 padding:0 0px 0px;
 max-width:600px;
 text-transform:uppercase;
 letter-spacing:.2em;
 line-height: 1.4em;
 font: $descriptionfont;
 color: $descriptioncolor;
}

#header img {
 margin-$startSide: auto;
 margin-$endSide: auto;
}


/* Outer-Wrapper

----------------------------------------------- */

#outer-wrapper {
 width: 600px;
 margin:0 auto;
 text-align:left;
 font: $bodyfont;
 }

#main-wrapper {
 width: 600px;
 float: left;
 word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
 overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
 }

.sidebar-wrapper {
 width: 600px;
 float: left;
 word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
 overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}


/* Headings
----------------------------------------------- */

h2 {
 margin:1.5em 0 .75em;
 font:$headerfont;
 line-height: 1.4em;
 text-transform:uppercase;
 letter-spacing:.1em;
 color:$sidebarcolor;
}


/* Posts
----------------------------------------------- */

h2.date-header {
 margin:1.5em 0 .5em;
 }

.post {
 margin:.5em 0 1.5em;
 border-bottom:1px dotted $bordercolor;
 padding-bottom:1.4em;
 line-height: 1.8em;
 }
.post h3 {
 margin:.25em 0 0;
 padding:0 0 5px;
 font-size:140%;
 font-weight:normal;
 line-height:1.4em;
 color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
 display:block;
 text-decoration:none;
 color:$titlecolor;
 font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
 color:$titlecolor;
}

.post p {
 margin:0 0 .75em;
 line-height:1.8em;
}

.post-footer {
 margin: .75em 0;
 color:$sidebarcolor;
 text-transform:uppercase;
 letter-spacing:.1em;
 font: $postfooterfont;
 line-height: 1.4em;
}

.comment-link {
 margin-left:.6em;
 }
.post img {
 }
.post blockquote {
 margin:1em 20px;
 }
.post blockquote p {
 margin:.75em 0;
 }

/* Comments
----------------------------------------------- */

#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: #000000;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
line-height: 1.5em;

}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
padding-bottom:1.5em;
border-bottom:1px dotted $bordercolor;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: left;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
/* Sidebar Content
----------------------------------------------- */

.sidebar {
 color: $sidebartextcolor;
 line-height: 1.5em;
}

.sidebar ul {
 list-style:none;
 margin:0 0 0;
 padding:0 0 0;
}
.sidebar li {
 margin:0;
 padding:0 0 .25em 15px;
 text-indent:-15px;
 line-height:1.5em;
 }

.sidebar .widget, .main .widget {
 border-bottom:1px dotted $bordercolor;
 margin:0 0 1.5em;
 padding:0 0 1.5em;
}

.main .Blog {
 border-bottom-width: 0;
}


/* Profile
----------------------------------------------- */

.profile-img {
 float: left;
 margin: 0 5px 5px 0;
 padding: 4px;
 border: 1px solid $bordercolor;
}

.profile-data {
 margin:0;
 text-transform:uppercase;
 letter-spacing:.1em;
 font: $postfooterfont;
 color: $sidebarcolor;
 font-weight: bold;
 line-height: 1.6em;
}

.profile-datablock {
 margin:.5em 0 .5em;
}

.profile-textblock {
 margin: 0.5em 0;
 line-height: 1.6em;
}

.profile-link {
 font: $postfooterfont;
 text-transform: uppercase;
 letter-spacing: .1em;
}

/* Footer
----------------------------------------------- */

#footer {

 border-top: 1px dotted #ccc;
 width:600px;
 clear:both;
 margin:0 auto;
 padding-top:33px;
 padding-bottom:33px;
 line-height:1.6em;
 text-transform:uppercase;
 letter-spacing:.1em;
 text-align: left;
}

til det samme som dette bildet viser:

Forklaring:

20px - luften mellom hver tekstlinje. (post, kommentarer etc)

30px - luften mellom dato, post tittel og bunn (Lagt inn av Sindre Olsson kl..)

40px - luften mellom innhold og alle linjer.

Logg inn

Simplr. Nytt blogger design

Anbefalte innlegg

sinols

Lenke til kommentar

Videoannonse

sinols

Lenke til kommentar

Occi

Lenke til kommentar

sinols

Lenke til kommentar

Occi

Lenke til kommentar

sinols

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer