Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse
Lägg in header på Blogg.se

Lägg in header på Blogg.se

Det är ganska enkelt att lägga in en header på Blogg.se. Men eftersom det finns massor av olika stilmallar att använda sig av på blogg.se nu, och när man ska lägga in en egen header, så är det inte alltid självklart hur man gör. Vissa steg är lika oavsett vilken stilmall du har, men sen kan koderna i stilmallen se lite olika ut.

Så, jag har tänkt att jag visar er hur man gör de steg som är likadana, sen får ni välja vilken stilmall ni utgår ifrån och så får ni följa stegen sen efter det.

Än så länge har jag valt att bara visa hur man gör på de stilmallar som är gratis. Ni som har PRO får vänta lite till!

Det här inlägget har jag lagt ner massor av tid på, så vill ni dela det här inlägget på Facebook, länka till det på er egen blogg osv, då blir jag väldigt tacksam!

Det absolut första du ska göra är ju att skapa din egen header, och storleken på den varierar beroende på vilken stilmall du utgår ifrån, så du får testa dig fram lite allteftersom tills det att du hittar rätt storlek.

När du har skapat din header, då gör du så här:

1. Logga in på din blogg.

2. Ladda upp din bild på din blogg. Klicka på Arkiv -> Bilder och sen väljer du din bild, antingen genom att dra och släppa eller via gamla hederliga vägen då du söker dig fram till bilden.

ny header på blogg se 1

3. Välj nu vilken storlek bilden har. Om du har en header om är 650px bred, då måste du välja en bredd på över det, dvs minst 700px. Om du väljer 600px, då kommer din bild att förminskas med automatik.

Klicka sen på starta uppladdningen.

ny header på blogg se 2

4. Nu har du laddat upp bilden, och skall nu kopiera adressen till bilden, det gör du genom att hålla muspekaren över bilden, och sen kopiera adressen för Fullstor bild.

ny header på blogg se 3

5. Håll nu ner knappen Alt och tryck på Design när menyn kommer upp.

6. Klicka på Redigera stilmall.

ny header på blogg se 5

7. Nu skall du välja vilken stilmall du har, klicka på den stilmall du har, så kommer du till fortsättningen sen.

Silentium

Bilden som finns har storlek 1000 x 217px.

1. Klicka på redigera kodmallar.

2. Leta upp följande kodrad:

<img id=”headerimg” src=”http://static.blogg.se/themes/silentium/bg.jpg” />

Byt ut adressen (markerad med rött ovan) mot adressen som du kopierade i steg 4.

3. Spara din kodmall och upprepa stegen i de övriga kodmallarna.

 

El Classico

1. Kopiera följande kod:

/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://creativecommons.org/licenses/MIT/	*/

/*	Resets
	------	*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup,
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

a img {border: 0;}

/* Selection colours (easy to forget) */

::selection 	 	{background: rgb(255,255,158);}
::-moz-selection 	{background: rgb(255,255,158);}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,255,158);}

/*		Default Layout: 992px.
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

body {
	font:16px/1.7em Helvetica, Arial, Sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family:&amp;amp;amp;amp;amp;amp;amp;amp;quot;Francois One&amp;amp;amp;amp;amp;amp;amp;amp;quot;, Arial, Sans-serif;
	line-height:1.3em;
	font-weight:normal;
}

a {
	color:#06c;
	text-decoration:none;
}

a:hover {
	color:#0e5295;
	text-decoration:underline;
}

strong {
	font-weight:bold;
}

em {
	font-style:italic;
}

p {
	margin:.5em 0 .75em 0;
}

#wrapper {
	width:980px;
	margin:0px auto;
	overflow:auto;
}

header {
	border-bottom:1px solid #dbdbdb;
	padding:20px;
	text-align:center;
	margin:0 0 20px 0;
}

header h1 {
	font-size:48px;
}

header h2 {
	font-family:Georgia, Serif;
	font-weight:normal;
	color:#999;
	font-style:italic;
}

header h1 a {
	color:#333;
	text-decoration:none;
}

#content {
	float:left;
	width:600px;
	padding-right:20px;
	border-right:1px solid #dbdbdb;
	margin-right:19px;
	margin-bottom:20px;
}

#content h3 {
	font-size:28px;
}

.post {
	margin:0 0 15px 0;
	border-bottom:1px solid #dbdbdb;
	padding-bottom:15px;
}

.post:nth-last-child(1) {
	border-bottom:none;
}

.post h3 a {
	color:#333;
	text-decoration:none;
}

.post img.thumbnail {
	float:left;
	margin:5px 20px 0 0;
	border:1px solid #dbdbdb;
	padding:6px;
}

.post img.image {
	margin:15px 0;
	max-width:600px;
}

p.meta {
	line-height:1.5em;
	color:#999;
	padding:10px 0;
	font-size:0.9em;
}

#tailsweep-div-midContent {
 	display:none;
}

#comment_anchor {
	float:right;
}

.post ul {
	list-style-type:disc;
	padding:0 0 0 20px;
	margin:.5em 0 .75em 0;
}

#comment h3:nth-child(1) {
	margin-top:0;
}

#comment fieldset {
	border:1px solid #dbdbdb;
	padding:10px;
}

#comment legend {
	font-weight:bold;
	font-size:18px;
}

#comment dl dt {

}

#comment dl dt label {
	font-weight:bold;
}

#comment dl dd {
	margin-bottom:20px;
}

#comment dl dd em {
	margin-left:10px;
	font-size:12px;
	color:#666;
}

#comment h3, #comment h4 {
	margin:.5em 0;
}

#comment .commenttext {
	border-bottom:1px solid #dbdbdb;
	padding:0 0 20px 0;
}

#comment input[type=text], #comment textarea {
	width:340px;
	padding:6px;
	border:1px solid #ccc;
	font-size:14px;
}

#comment textarea {
	height:180px;
}

.formbutton {
	color:#fff;
	padding:8px 16px;
	font-size:14px;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
	border: solid 1px #7ea02c;
	background: #c9de96; /* Old browsers */
	background: -moz-linear-gradient(top, #c9de96 0%, #8ab66b 44%, #398235 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9de96), color-stop(44%,#8ab66b), color-stop(100%,#398235)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%); /* W3C */
}

#side {
	float:left;
	width:340px;
}

#form-wrapper {
	position:relative;
}

#criteria {
	width:318px;
	border:1px solid #dbdbdb;
	padding:9px;
}

#search_btn {
	position:absolute;
	right:1px;
	top:1px;
	background:#f5f5f5;
	padding:8px 12px;
	margin-left:-2px;
	color:#555;
	border:1px solid #fff;
	background: #e6f3ff;
	background: -webkit-gradient(linear, left top, left bottom, from(#e6f3ff), to(#afcbe7));
	background: -moz-linear-gradient(top,#e6f3ff,#afcbe7);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6f3ff',endColorstr='#afcbe7');
}

#search_btn:hover {
	color:#fff;
	background: #d0e8ff;
	background: -webkit-gradient(linear, left top, left bottom, from(#d0e8ff), to(#76a1cb));
	background: -moz-linear-gradient(top,#d0e8ff,#76a1cb);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0e8ff',endColorstr='#76a1cb');
}

#side section {
	margin:0 0 5px 0;
	border-bottom:1px solid #dbdbdb;
	padding:15px 0;
}

#side section:nth-last-child(1) {
	border-bottom:none;
}

#side section h4 {
	margin:0 0 0.75em 0;
}

#side section ul {
	list-style-type:disc;
	padding:0 0 0 20px;
}

#side section ul li {
	font-size:0.9em;
}

#side section ul.services {
	list-style-type:none;
	padding-left:0px;
}

#side section ul.services li {
	background-repeat:no-repeat;
	background-position:left center;
	padding-left:20px;
}

.rss {
	background-image:url(img/icons/social/feed.png);
}

.facebook {
	background-image:url(img/icons/social/facebook.png);
}

.twitter {
	background-image:url(img/icons/social/twitter.png);
}

footer {
	text-align:center;
	background-color:#f7f7f7;
	border-top:1px solid #dbdbdb;
	padding:20px;
	color:#bbbbbb;
	font-size:.85em;
}

footer a {
	color:#999;
}

footer a:hover {
	color:#666;
	text-decoration:none;
}

/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {

	body {

	}
}

/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {

	body {
		width:292px;
		margin:0px auto;
	}

	#wrapper {
		width:292px;
		margin:0px auto;
		overflow:auto;
	}

	#content, #side {
		width:292px;
		float:none;
	}

	.post img.image {
		margin:15px 0;
		max-width:292px;
	}

	header h1 {
		font-size:24px;
	}

	header h2 {
		font-family:Georgia, Serif;
		font-weight:normal;
		color:#999;
		font-style:italic;
		font-size:14px;
	}

	#content h3 {
		font-size:18px;
	}

	#comment .commenttext {
		border-bottom:1px solid #dbdbdb;
		padding:0 0 20px 0;
	}

	#comment input[type=text], #comment textarea {
		width:250px;
		padding:6px;
		border:1px solid #ccc;
		font-size:14px;
	}

	.post iframe {
		max-width:292px;
	}

	#comment textarea {
		height:180px;
	}

}

/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {

	body {
		width:460px;
		margin:0px auto;
		font:14px/1.5em Helvetica, Arial, Sans-serif;
	}

	#wrapper {
		width:460px;
		margin:0px auto;
		overflow:auto;
	}

	#content, #side {
		width:460px;
		float:none;
	}

	.post img.image {
		margin:15px 0;
		max-width:460px;
	}

	.post iframe {
		max-width:460px;
	}

}

2. Ersätt allt som står i stilmallen med koden ovan.

3. Leta upp kodavsnittet som ser ut så här:

header {
border-bottom:1px solid #dbdbdb;
padding:20px;
text-align:center;
margin:0 0 20px 0;
}

Ersätt det med följande kod:

header {
background: #ffffff url(adressen till din bild här) no-repeat center center;
border-bottom:1px solid #dbdbdb;
padding:20px;
text-align:center;
margin:0 0 20px 0;
}

Där det står adressen till din bild, lägger du in adressen du kopierade i steg 4. Sen sparar du din stilmall.

 

Anchor, Author

1. Leta upp följande kodavsnitt i stilmallen:

div#header {
float: left;
clear: left;
display: inline;
padding: 0 20px 20px 20px;
border-bottom: 1px solid #ddd;
width: 710px;
}

2. Ersätt den med följande kod istället:

div#header {
background: #ffffff url(adressen till din bild här) no-repeat center center;
float: left;
clear: left;
display: inline;
padding: 0 20px 20px 20px;
border-bottom: 1px solid #ddd;
width: 710px;
}

3. Klicka på publicera ändringar.

 

Travel

Storleken på headern i denna stilmall är 800 x 105px.

1. Leta upp följande kod i stilmallen:

#header {
background: #FFFFCC url(http://static.blogg.se/shared/img/css/travel_top.jpg) no-repeat left top;
padding-left: 30px;
padding-bottom:15px;
padding-top:30px;
margin: 0px;
width: 800px;
height: 105px;
}

2. Byt ut adressen som är rödmarkerad till adressen för din bild som du kopierade i steg 4.

3. Klicka på Publicera ändringar.

 

Pink Fusion

1. Kopiera följande kod.

/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://creativecommons.org/licenses/MIT/	*/

/*	Resets
	------	*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup,
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

a img {border: 0;}

/* Selection colours (easy to forget) */

::selection 	 	{background: rgb(255,255,158);}
::-moz-selection 	{background: rgb(255,255,158);}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,255,158);}

/*		Default Layout: 992px.
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

body {
	font:16px/1.6em Georgia, Serif;
	background:url('http://static.blogg.se/themes/pink-fusion/img/body-bg.png');

}

h1, h2, h3, h4, h5, h6 {
	line-height:1.6em;
	font-weight:normal;
}

a {
	color:#06c;
	text-decoration:none;
}

a:hover {
	color:#0e5295;
	text-decoration:underline;
}

strong {
	font-weight:bold;
}

em {
	font-style:italic;
}

p {
	margin:.5em 0 .75em 0;
}

#header-nav {
	width:100%;
	position:fixed;
	background: #50dcff; /* Old browsers */
	background: -moz-linear-gradient(top, #ff99ff 0%, #cc66cc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff99ff), color-stop(100%,#cc66cc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ff99ff 0%,#cc66cc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ff99ff 0%,#cc66cc 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #ff99ff 0%,#cc66cc 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff99ff', endColorstr='#cc66cc',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #ff99ff 0%,#cc66cc 100%); /* W3C */
	z-index:10000000000000000000;

	-moz-box-shadow: 0 8px 10px #000;
	-webkit-box-shadow: 0 8px 10px #000;
	box-shadow: 0 8px 10px #000;
	padding:8px;
}

#header-nav nav {
	margin:0px auto;
	width:980px;
	position:relative;
}

#header-nav nav ul {
	margin:0;
	padding:0;
	list-style:none;
	float:left;
}

#header-nav nav ul li {
	display:inline-block;
	padding: 0px 12px;
}

#header-nav nav ul li:nth-child(1) {
	padding-left:0px;
	font-family:Georgia;
}

#header-nav a {
	color:#fff;
}

#header-nav .services {
	list-style:none;
	position:absolute;
	right:10px;
	top:0px;
}

#header-nav .services li {
	display:inline-block;

}

#home_nav {
	text-shadow: 1px 1px 1px #333; /* horizontal-offset vertical-offset 'blur' colour */
	-moz-text-shadow: 1px 1px 1px #333;
	-webkit-text-shadow: 1px 1px 1px #333;
	font-weight:bold;
}

#home_nav:hover {
	text-decoration:none;
}

#header-nav form {
	float:right;
}

#wrapper {
	width:980px;
	margin:0px auto;
	overflow:auto;
	padding-top:40px;
	background:#333;
	background:hsla(0, 100%, 0%, .6);
}

header {

	padding:20px 0 0 0;
	text-align:center;
}

header h1 {
	font-size:48px;
}

header h2 {
	font-family:Georgia, Serif;
	font-weight:normal;
font-size:1.1em;
	color:#999;
	font-style:italic;
padding:0 40px;
}

header h1 a {
	color:#cc66cc;
	text-decoration:none;
}

header h1 a:hover {
	color:#ff99ff;
	text-decoration:none;
}

#content {
	padding:40px 40px 0 40px;
}

#content h3 {
	font-size:28px;
}

.post, #comment {
	margin:0 0 40px 0;
	border:1em solid #ddd;
	color:#333;
	padding-bottom:15px;
	background:#fff;
	padding:40px;
}

.post:nth-last-child(1) {

}

.post h3 a {
	color:#333;
	text-decoration:none;
}

.post img.thumbnail {
	float:left;
	margin:5px 20px 0 0;
	border:1px solid #dbdbdb;
	padding:6px;
}

.post img.image {
	margin:15px 0;
	max-width:600px;
}

p.meta {
	line-height:1.5em;
	color:#999;
	padding:10px 0;
	font-size:0.9em;
}

#comment_anchor {
	float:right;
}

.post ul {
	list-style-type:disc;
	padding:0 0 0 20px;
	margin:.5em 0 .75em 0;
}

#comment h3:nth-child(1) {
	margin-top:0;
}

#comment fieldset {
	border:1px solid #dbdbdb;
	padding:10px;
}

#comment legend {
	font-weight:bold;
	font-size:18px;
}

#comment dl dt {

}

#comment dl dt label {
	font-weight:bold;
}

#comment dl dd {
	margin-bottom:20px;
}

#comment dl dd em {
	margin-left:10px;
	font-size:12px;
	color:#666;
}

#comment h3, #comment h4 {
	margin:.5em 0;
}

#comment .commenttext {
	border-bottom:1px solid #dbdbdb;
	padding:0 0 20px 0;
}

#comment input[type=text], #comment textarea {
	width:340px;
	padding:6px;
	border:1px solid #ccc;
	font-size:14px;
}

#comment textarea {
	height:180px;
}

.formbutton {
	color:#fff;
	padding:8px 16px;
	font-size:14px;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
	border: solid 1px #7ea02c;
	background: #c9de96; /* Old browsers */
	background: -moz-linear-gradient(top, #c9de96 0%, #8ab66b 44%, #398235 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9de96), color-stop(44%,#8ab66b), color-stop(100%,#398235)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #c9de96 0%,#8ab66b 44%,#398235 100%); /* W3C */
}

#side {

}

#form-wrapper {
	margin:0 10px 0 0;
	padding:0;
}

#criteria {
	width:180px;
	border:none;
	padding:5px;
}

#search_btn {

}

#side {
	padding:0 40px 40px 40px;
	width:900px;
	overflow:auto;
}

#side section:first-child {
	border-top:1em solid #ddd;
}

#side section {
	background:#fff;
	border-left:1em solid #ddd;
	border-right:1em solid #ddd;
	border-bottom:1px solid #dbdbdb;
	padding:15px;
}

#side section:nth-last-child(1) {
	margin-right:0px;
	border-bottom:1em solid #ddd;
}

#side section h4 {
	margin:0 0 0.75em 0;
}

#side section ul {
	list-style-type:disc;
	padding:0 0 0 20px;
}

#side section ul li {
	font-size:0.9em;
}

#side section ul.services {
	list-style-type:none;
	padding-left:0px;
}

ul.services li {
	background-repeat:no-repeat;
	background-position:left center;
	padding-left:20px;
}

.rss {
	background-image:url(http://static.blogg.se/themes/pink-fusion/img/icons/social/feed.png);
}

.facebook {
	background-image:url(http://static.blogg.se/themes/pink-fusion/img/icons/social/facebook.png);
}

.twitter {
	background-image:url(http://static.blogg.se/themes/pink-fusion/img/icons/social/twitter.png);
}

footer {
	text-align:center;
	padding:20px;
	font-size:.85em;
}

footer a {
	color:#999;
}

footer a:hover {
	color:#666;
	text-decoration:none;
}

/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {

	body {

	}
}

/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {

	body {
		width:292px;
		margin:0px auto;
	}

#header-nav {
/*display:none;*/
margin-left:-15px;
}

	#wrapper {
		width:292px;
		margin:0px auto;
		overflow:auto;
padding-top:0px;

	}

	#content, #side, #comment {
padding:15px;
		width:262px;
		float:none;
	}

.post {
padding:10px;
margin-bottom:10px;
}

	.post img {
		margin:15px 0;
		max-width:292px;
	}

	header h1 {
		font-size:24px;
	}

	header h2 {
		font-family:Georgia, Serif;
		font-weight:normal;
		color:#999;
		font-style:italic;
		font-size:14px;
	}

	#content h3 {
		font-size:18px;
	}

	#comment .commenttext {
		border-bottom:1px solid #dbdbdb;
		padding:0 0 20px 0;
	}

	#comment input[type=text], #comment textarea {
		width:185px;
		padding:6px;
		border:1px solid #ccc;
		font-size:14px;
	}

fieldset {
border:none;
padding:0px;
}

	.post iframe {
		max-width:292px;
	}

	#comment textarea {
		height:180px;
	}

}

/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {

	body {
		width:460px;
		margin:0px auto;
	}

	#wrapper {
		width:460px;
		margin:0px auto;
		overflow:auto;
	}

	#content, #side {
		width:430px;
		float:none;
	}

	.post img.image {
		margin:15px 0;
		max-width:410px;
	}

	.post iframe {
		max-width:410px;
	}

}

2. Ersätt allt som står i stilmallen med koden ovan.

3. Leta upp följande kodrader:

header {

padding:20px 0 0 0;
text-align:center;
}

4. Ersätt med följande kod:

header {
background: url(adressen till din bild) no-repeat center center;
padding:20px 0 0 0;
text-align:center;
}

5. Där det står adressen till din bild lägger du in adressen du kopierade i steg 4.

6. Klicka på Publicera ändringar.

 

Dusty Rose

Storleken på denna header är 600 x 300px.

1. Leta upp följande kod i stilmallen:

#header {
background: url(http://static.blogg.se/themes/dusty-rose/img/header_174341815.jpg) no-repeat left top;
margin: 0px 0px 30px;
padding: 0px 0px 0px 0px;
height: 300px;
width: 600px;
text-align: left;;
}

2. Byt ut adressen som är markerad med rött till adressen du kopierade i steg 4, dvs din egen header.

3. Klicka på Publicera ändringar.

 

Retro red, Retro blue

1. Leta upp följande kod:

#header {
background: #FFFFFF;
margin: 0px;
padding: 10px 0px 40px;
height: 90px;
text-align: left;
border: #000000;
}

2. Ersätt den med följande kod:

#header {
background: #FFFFFF url(adressen till din bild) no-repeat center center;
margin: 0px;
padding: 10px 0px 40px;
height: 90px;
text-align: left;
border: #000000;
}

3. Där det står adressen till din bild lägger du in adressen du kopierade i steg 4.

4. Klicka på Publicera ändringar.

 

Orange City, Nature

Storleken på headern:

Orange city: 790 x 126

Nature: 800 x 120

1. Leta upp följande kod i stilmallen.

#header {
background: #000000 url(http://static.blogg.se/shared/img/css/orangecity_top.jpg) no-repeat left top;
margin: 0px;
padding: 37px 0px 0px 100px;
height: 90px;
text-align: left;
border-top: 0px none;
border-right: 5px solid #000000;
border-bottom: 5px solid #000000;
border-left: 5px solid #000000;
}

2. Byt ut adressen som jag markerat med rött till adressen du kopierade i steg 4.

3. Klicka på Publicera ändringar.

 

Mr. Andersson, Bubblegum

1. Leta upp följande kod i din stilmall:

#header {
width: 760px;
background: #000;
border:1px solid #999;
padding: 12px 12px 12px 12px;
margin: 0px 0px 7px 0px;
voice-family:”\”}\””;
voice-family:inherit;
width:726px;
}html>body #header { width: 726px; }

2. Ersätt den koden med följande kod:

#header {
width: 760px;
background: #000 url(http://cdn.publishdev.se/cdn/5-2/353660/images/2012/headerblogg_4ffacf44ddf2b37132000659.png) no-repeat center center;
border:1px solid #999;
padding: 12px 12px 12px 12px;
margin: 0px 0px 7px 0px;
voice-family:&amp;amp;amp;amp;amp;amp;amp;amp;quot;\&amp;amp;amp;amp;amp;amp;amp;amp;quot;}\&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;quot;;
voice-family:inherit;
width:726px;
}html&amp;amp;amp;amp;amp;amp;amp;amp;gt;body #header { width: 726px; }

3. Där det står adressen till din bild lägger du in adressen du kopierade i steg 4.

4. Klicka på Publicera ändringar.

 

Love, Food, Fashion

1. Leta upp följande kod:

#header {
margin:0px;
background: #FFFFFF url(http://static.blogg.se/shared/img/css/love_heading.gif) no-repeat center;
padding: 26px 12px 0px 120px;
height: 74px;
width: 712px;
}

2. Byt ut den rödmarkerade adressen till adressen du kopierade i steg 4 dvs din egen header.

3. Klicka på Publicera ändringar.

 

Kottkesque

1. Leta upp följande kod:

#header {
background: #9FFF80;
padding-left: 30px;
padding-bottom:5px;
padding-top:20px;
margin: 0px;
border-bottom:1px dashed #000;
}

2. Ersätt den koden med följande kod:

#header {
background: #9FFF80 url(adressen till din bild) no-repeat center center;
padding-left: 30px;
padding-bottom:5px;
padding-top:20px;
margin: 0px;
border-bottom:1px dashed #000;
}

3. Där det står adressen till din bild lägger du in adressen som du kopierade i steg 4.

4. Klicka på Publicera ändringar.

 

Flowers

1. Leta upp följande kod:

#wrapper {
clear:none;
margin: 30px auto;
padding: 150px 0px 20px;
width: 800px;
background-color: #FFFF91;
background-image:url(http://static.blogg.se/shared/img/css/flowers_top.jpg);
background-repeat: no-repeat;
background-position: left top;
}

2. Ersätt den rödmarkerade adressen med adressen som du kopierade i steg 4.

3. Klicka på Publicera ändringar.

 

Bloom

1. Leta upp följande kod:

#header {
margin:0px auto;
background: transparent;
padding: 12px 12px 12px 12px;
}

2. Ersätt koden ovan med följande kod:

#header {
margin:0px auto;
background: #ffffff url(adressen till din bild) no-repeat center center;
padding: 12px 12px 12px 12px;
}

3. Där det står adressen till din bild så lägger du in adressen du kopierade i steg 4.

 

Simply Black

1. Leta upp följande kod:

#wrapper > header {
background: #000;
color: #fff;
text-align: center;
padding: 70px 0 45px 0;
margin: 0 0 50px 0; }

2. Ersätt ovanstående kod med följande kod:

#wrapper &amp;amp;amp;amp;amp;amp;amp;amp;gt; header {
background: #000 url(adressen till din bild) no-repeat center center;
color: #fff;
text-align: center;
padding: 70px 0 45px 0;
margin: 0 0 50px 0; }

3. Där det står adressen till din bild så lägger du in adressen till din bild som du kopierade i steg 4.

4. Klicka på Publicera ändringar.

Grundare av Designa Din Blogg. Drev den här sidan som ett hobbyprojekt under åtta år, numera har jag lämnat över ansvaret för DDB. Är pappa till Ludvig och make till Elin.

Läs mina andra inlägg

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *