Skapa mellanrum mellan inläggstext och kant
Har länge bloggat till och från och har nyligen startat upp på nytt med en ny blogg. Har inga jätte stora krav på design men en sak stör mig otroligt med den nuvarande designen. Jag kan inte öka mellanrummet mellan inläggstexten och själva "kanten" på inläggssidan. Tidigare var desamma på högra sidan, men löste det genom att minska ner bredden på inlägget som jag ändå tyckte var för bred. Nu är jag nöjd med både bredden på texten och inläggssidan, men vill öka avståndet på vänster sida.
Har googlat och gjort flera försök utan att komma åt själva problemet, lösningarna verkar sällan fungera på just min mall… Någon som kan hjälpa? Postar kod i nästa inlägg.
Vill man se problemet lajv gå in här: http://provtank.blogg.se/
Medarbetare på Fantasy. Försöker även underhålla på pipiga bloggen.
Om någon nördig kodare orkar leta så kommer stilmallen här:
/* Theme Stark from Blogg.se */
@import url("http://static.blogg.se/themes/stark/css/style.css");
{{options.importstr}}
body {
{{options.customstyle.lineheight}}
color: {{options.color.body1}};
background-color: {{options.color.body2}};
background-image: {{options.image.body.urlsrc}};
}
input, #comment-author, #comment-email, #comment-url, #comment-content, .formbutton { color: {{options.color.body1}}; }
body, input, textarea, #content .share-button label span, #content .share-button label {
font-family: "{{options.gfont.body.name}}", {{options.gfont.body.fallback}};
font-size: {{options.fontsize.body}};
}
a {
color: {{options.color.a1}};
{{options.customstyle.textdecoration}}
}
a:hover { color: {{options.color.a2}}; }
#content .share-button label span { {{options.customstyle.textdecoration}} }
#content .share-button label { color: {{options.color.a1}}; }
#content .share-button label:hover { color: {{options.color.a2}}; }
#side svg, #sidr-btn svg { fill: {{options.color.a1}}; }
#side svg:hover, #sidr-btn svg { fill: {{options.color.a2}}; }
#wrapper {
{{options.customstyle.size}}
{{options.customstyle.boxshadow}}
background-color: {{options.color.wrapper}};
}
#content .commentform input, #content .commentform textarea, #content .commentform .formbutton {
background-color: {{options.color.wrapper}};
}
#content { {{options.customstyle.pos1}} }
#side { {{options.customstyle.pos2}} }
#content .entry {width:630px;
{{options.customstyle.textalign1}}
}
#content h3 {
{{options.customstyle.textalign2}}
}
.entry, .commentform { {{options.customstyle.marginentry}} }
input[placeholder] {
color: {{options.color.body1}};
font-family: "{{options.gfont.body.name}}", {{options.gfont.body.fallback}};
text-overflow: ellipsis;
opacity: 1;
}
input::-moz-placeholder {
color: {{options.color.body1}};
font-family: "{{options.gfont.body.name}}", {{options.gfont.body.fallback}};
text-overflow: ellipsis;
opacity: 1;
}
input::-webkit-input-placeholder {
color: {{options.color.body1}};
font-family: "{{options.gfont.body.name}}", {{options.gfont.body.fallback}};
text-overflow: ellipsis;
opacity: 1;
}
input:-ms-input-placeholder {
color: {{options.color.body1}};
font-family: "{{options.gfont.body.name}}", {{options.gfont.body.fallback}};
text-overflow: ellipsis;
opacity: 1;
}
#header {
background-image: {{options.image.header.urlsrc}};
background-color: {{options.color.header1}};
{{options.customstyle.headerposition}}
}
#header h1, #header h2 {
{{options.customstyle.title}}
}
#header h1 a, #header h2 {
color: {{options.color.header2}};
}
#header h1 {
font-family: "{{options.gfont.header.name}}", {{options.gfont.header.fallback}};
font-size: {{options.fontsize.header}};
line-height: 1em !important;
{{options.customstyle.italic3}}
}
#side h4 {
font-family: "{{options.gfont.hfour.name}}", {{options.gfont.hfour.fallback}};
font-size: {{options.fontsize.hfour}};
color: {{options.color.h4}};
{{options.customstyle.marginside}}
{{options.customstyle.italic1}}
}
#side h5 {
font-family: "{{options.gfont.hfour.name}}", {{options.gfont.hfour.fallback}};
font-size: {{options.fontsize.hfour}};
color: {{options.color.h4}};
{{options.customstyle.italic1}}
}
#header h2 {
font-size: {{options.fontsize.subheading}};
}
#content h3 {
font-family: "{{options.gfont.hthree.name}}", {{options.gfont.hthree.fallback}};
font-size: {{options.fontsize.heading}};
background-color: {{options.color.h3b}};
{{options.customstyle.italic2}}
}
#content h3 a { color: {{options.color.h3a}}; }
#content h3, #side h4, .response-by, #header h1, #header h2, #header h1, #side h5 {
{{options.customstyle.case}}
}
#content .meta {
color: {{options.color.meta}};
{{options.customstyle.textalign3}}
}
#content .entry,
#content .comment {
border-bottom: {{options.customstyle.border2}} {{options.customstyle.border1}} {{options.color.border}};
}
#content .comment .response, #content .comment .response-by {
border-left: 1px solid {{options.color.border}};
border-right: 1px solid {{options.color.border}};
}
#content .comment .response-by { border-bottom: 1px solid {{options.color.border}}; }
#content .comment .response { border-top: 1px solid {{options.color.border}}; }
#side #home h4, #side #search form, #sidr-btn, #back-top, #content .commentform input, #content .commentform textarea, #content .commentform .formbutton { border: 1px solid {{options.color.border}}; }
#sidr-btn, #back-top { background-color: #FFF; }
#side #links li, #side #archives li, #side #posts li, #side #category li {
{{options.customstyle.liststyle}}
}
#nav {
font-family: "{{options.gfont.nav.name}}", {{options.gfont.nav.fallback}};
color: {{options.color.nav1}};
background-color: {{options.color.nav2}};
font-size: {{options.fontsize.nav}};
{{options.customstyle.marginnav}}
{{options.customstyle.textalign4}}
{{options.customstyle.italic4}}
{{options.customstyle.case1}}
{{options.customstyle.bordernav}}
}
#nav a {
color: {{options.color.nav1}};
}
#nav a:hover {
background-color: {{options.color.nav3}};
color: {{options.color.nav4}};
}
#nav {
border-bottom: {{options.customstyle.border2}} {{options.customstyle.border1}} {{options.color.border}};
}
.like-container {
}
.like-container .likebtn .likebtn__btn {
color: {{options.color.likebtn}} !important;
background: none !important;
padding: 0px 4px;
border: none;
box-shadow: none;
text-shadow: none;
border-radius: 3px;
}
.like-container .likebtn.clicked .likebtn__btn {
background: {{options.color.likebtn}} !important;
color: white !important;
}
.like-container .likebtn .likebtn__btn:before {
opacity: 0.5;
}
.likebtn.likebtn_pos_right > .likebtn__count {
padding: 2px 6px;
margin-top: -2px;
}
Medarbetare på Fantasy. Försöker även underhålla på pipiga bloggen.
Lättaste är att klistra in det här längst ner i stilmallen:
#content .entry, #content .comment, #content .commentform {
padding-left: 20px;
}
och sen ändra 20 px till hur mycket space du nu vill ha. Då kommer inlägget, kommentarerna och kommentarsformuläret flyttas in. (Egentligen skulle kommentarerna behöva kortas i bredd då också, till samma bredd som inläggen).
TACK! Har kämpat med detta ett bra tag och nu tog det bara några sekunder att åtgärda. Ska titta på om jag ändra bredden på kommentarerna till samma bredd som inlägget också, lyckades ju ändra bredden på inläggen så torde inte vara omöjligt.
Medarbetare på Fantasy. Försöker även underhålla på pipiga bloggen.
Vad bra att du fick det att fungera! :)
Om du vill ändra till samma bredd som på inläggen (630px) är det bara att skriva såhär i stilmallen:
#content .comment {
width: 630px;
}
Tack! Det råkar inte vara så att du kan hjälpa mig med en annan sak, hur jag ökar mellanrummet mellan rubrik och inläggstext? Jag har gjort ett uppehåll med bloggandet och efter att jag kom tillbaka har jag så svårt att förstå koden på blogg. se. Det känns som den är så annorlunda, eller kanske är det denna mall som skiljer sig mycket från den jag använde tidigare.
Medarbetare på Fantasy. Försöker även underhålla på pipiga bloggen.
Absolut. Lägg till detta i CSS:en och ändra "20px" till så många pixlars mellanrum du vill ha :)
article header {
margin-bottom: 20px;
}
Blogg.se har ändrat sin kodstruktur för något år sedan eller så. Både HTML:en och CSS:en är ändrad, så jag förstår om det är svårt att känna igen sig om man är van vid det gamla!