CSS koder: Rund tynn scrollbar



Dersom bloggen min ikke har en slik scrollbar på pcen din så vil den mest sannsynelig ikke virke på din blogg.

Virker på:

Chrome (Win)

Virker ikke på:

Mozilla Firefox (Win/Mac)

Internet Explorer

Safari

Husk det kan være unntak så jeg anbefaler å prøve.

 

Her er koden, den kan limes inn hvor som helst i på Stilsett CSS.

 

::-webkit-scrollbar {

margin-right: 5px;

background-color: #ddd;

width: 12px;

}

::-webkit-scrollbar-track {

-webit-box-shadow: 0 0 2px #ccc;

box-shadow: 0 0 2px #ccc;

}

::-webkit-scrollbar-thumb {

border: 1px #ff4499 solid;

border-radius: 12px;

background: #ff4499;

-webit-box-shadow: 0 0 8px #ff99cc inset;

box-shadow: 0 0 8px #ff4499 inset;

-webit-transition: all .3s ease-out;

transition: all .3s ease-out;

}

::-webkit-scrollbar-thumb:window-inactive {

background: #bbb;

box-shadow: 0 0 8px #999 inset;

}

::-webkit-scrollbar-thumb:hover { background: #ff4499

}



Gratis design: Comic book



Husk at design virker ulikt på ulike nettlesere dette har vært testet på chrome. Hvis du finner feil I designet så si ifra.

Klikk på for og se større versjon.

LIMES INN PÅ STILSETT (CSS)

Fjern alt av tidligere koder.

.entry .meta2 {

background: #cc0055 url() repeat;

padding: 3px;

border-top-right-radius: 3px;

border-bottom-right-radius: 15px;

border-bottom-left-radius: 3px;

border-top-left-radius: 15px;

}

.entry {

padding:15px;

border: 5px solid #000000;

background: #ffffff url() repeat;

-moz-border-radius: 20px;

-moz-border-radius-bottomright: 20px;

border-bottom-right-radius: 20px;

border-bottom-left-radius: 20px;

border-top-right-radius: 20px;

border-top-left-radius: 20px;

-webkit-box-shadow: 0px 0px 0px #cc0000;

-moz-box-shadow: 0px 0px 0px #cc0000;

box-shadow: 0px 0px 0px #cc0000

-moz-border-radius: 0px;

width: 493px;

font-size: 9pt;

color: #000000;

margin-left: 70px;

margin-right: auto;

}

#navbar {

text-align: center;

background-color: #transparent;

}

#navbar li {

float: left;

list-style: none;

background-color: #transparent;

}

#navbar li a {

padding: 3px;

display: block;

border-bottom: 2px dotted #ff0066;

color: #000000;

text-decoration: none;

font-family: sunshiney;

font-size: 18px;

line-height: 12px;

width: 168px; /* Bredde */

background: #transparent;

}

#navbar li ul {

padding: 0px;

display: none;

background-color: #fff;

}

#navbar li:hover ul, #navbar li.hover ul {

display: block;

position: absolute;

margin: 0;

padding: 0;

z-index: 0;

text-align: left;

}

#navbar li:hover li, #navbar li.hover li {

float: none;

}

#navbar li:hover li a, #navbar li.hover li a {

border-bottom: 2px dotted #ff0066;

}

#navbar li li a:hover {

background: #ff0066 url() repeat;

color: #000000;

}

#meny2 {

width: 890px; /* Bredde */

margin-left: auto;

margin-right: auto;

}

h2 {

letter-spacing:.0em;

background: #cc0055 url() repeat;

border-top-right-radius: 3px;

border-bottom-right-radius: 15px;

border-bottom-left-radius: 3px;

border-top-left-radius: 15px;

border-right: 0px solid #F2E4D5;

text-shadow: #000000 1px 2px 3px;

font-family: Sunshiney;

color: #000000;

font-size: 18pt;

-webkit-box-shadow: 0px 0px 0px #ffffff;

-moz-box-shadow: 0px 0px 0px #ffffff;

box-shadow: 0px 0px 0px #ffffff;

}

body {

background-image:url('http://oi42.tinypic.com/9pxo5i.png');

background-color: #dff2f7;

background-attachment:fixed;

font-family: Century gothic, century gothic, century gothic;

color: #000000;

}

#header {

background-color: #transparent;

height: 20px;

width: 734px;

margin-right: 100px;

margin: 0px 0px 0px 0px;

}

#wrapper {

background-color: #transparent;

width: 864px;

font-size: 9pt;

margin-left: 0px;

margin-right: auto;

}

#main {

float: right;

}

#side {

float: left;

position: fixed;

padding-top:50px;

padding-bottom:10px;

padding-right:0px;

padding-left:10px;

}

#footer {

background-color: #transparent;

-moz-border-radius: 10px;

-moz-border-radius-bottomright: 10px;

border-bottom-right-radius: 10px;

border-bottom-left-radius: 10px;

border-top-right-radius: 10px;

border-top-left-radius: 10px;

width: 700px;

margin-left: 75px;

margin-right: auto;

}

#side {

text-align: center;

background: #transparent url() repeat;

border: 0px solid #009966;

padding-top:10px;

padding-bottom:0px;

padding-right:10px;

padding-left:10px;

width: 200px;

font-size: 9pt;

color: #000000;

border-style: solid;

margin-left: 50px;

margin-right: 0px;

a { color: #000000}

a:link { color: #000000}

a:visited { color: #000000}

a:active { color: #000000}

::-moz-selection {

</style>

------------------------------------------------------------------------------

LIMES INN PÅ MALER (HTML)

Alt av tidligere koder fjernes. (Her må du fylle inn din egen informasjon til side menyen)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:tag="http://blogg.no/ns/tag" xml:lang="no" lang="no">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>${BlogTitle}</title>

<script type="text/javascript">var domainName = ".${AppDomain}";</script>

<script type="text/javascript" src="http://static.blogg.no/blogs/script.js"></script>

<link rel="alternate" href="http://feeds.blogg.no/${BlogId}/post.rss" title="Siste innlegg" type="application/rss+xml" />

<link rel="stylesheet" href="http://design.blogg.no/builder/screen.css" type="text/css" />

<link rel="stylesheet" href="${BlogUrl}style.css" type="text/css" />

<link rel="shortcut icon" href="http://i36.tinypic.com/314w0mr.png" type="image/gif" />

<link href='http://fonts.googleapis.com/css?family=Sunshiney' rel='stylesheet' type='text/css'>

</head>

<body class="front">

<div id="doc2">

<div id="header">

<div id="meny">

</div>

<p>${BlogDescription}</p>

</div>

<div id="wrapper" class="yui-gc">

<div id="main" class="yui-u first">

<div id="meny2">

<ul id="navbar">

<li><a href="#">Kategorier</a>

<ul>

<tag:categorylist>

<li><a href="${CategoryLink}">&raquo; ${CategoryName}</a></li>

</tag:categorylist>

</ul>

</li>

<li><a href="#">Arkiv</a>

<ul>

<div style="height:400px; overflow-y:scroll">

<tag:archivelist limit="100">

<li><a href="${ArchiveLink}">&raquo; ${ArchiveName}</a></li>

</tag:archivelist>

</ul>

</li>

<li><a href="#">Lenker</a>

<ul>

<li><a href="http://www.flickr.com/lindeh">&raquo; Flickr </a>

<li><a href="http://www.myweirdimagination.deviantart.com">&raquo; Deviant Art </a>

<li><a href="http://www.youtube.com/MyWeirdImagination">&raquo; Youtube </a>

<li><a href="http://www.Lindeh.tumblr.com">&raquo; Ego Tumblr </a>

<li><a href="http://www.mystrangeimagination.tumblr.com">&raquo; Vanlig Tumblr </a>

<li><a href="http://www.formspring.me/lindeh">&raquo; Formspring </a>

<li><a href="http://www.weheartit.com/lindeh">&raquo; We Heart It </a>

<li><a href="http://blogsoft.no/index.bd?fa=pf.view&us_id=275638">&raquo; Blogg Profil </a>

</ul>

</li>

</div>

<tag:entrylist limit="30">

<div class="entry">

<h2>

<body link="#000000" vlink="#000000" alink="#000000">

<center><a href="${EntryPermaLink}">${EntryTitle}</a></center>

</h2>

<div class="meta">

<ul>

<tag:if test="${EntryCommentCount == 0}">

<a href="${EntryPermaLink}#comment">0 kommentarer</a>

<tag:elseif test="${EntryCommentCount == 1}" />

<a href="${EntryPermaLink}#comment">1 kommentar</a>

<tag:else />

<a href="${EntryPermaLink}#comment">${EntryCommentCount} kommentarer</a>

</tag:if><img src="http://oi42.tinypic.com/vwbuu.png"><li> ${EntryDate} kl.${EntryTime}</a>

</li>

</ul>

</div>

<div class="content">${EntryBody}</div>

<div class="meta2">

<ul>

<tag:if test="${EntryCommentCount == 0}">

<a href="${EntryPermaLink}#comment">0 kommentarer</a>

<tag:elseif test="${EntryCommentCount == 1}" />

<a href="${EntryPermaLink}#comment">1 kommentar</a>

<tag:else />

<a href="${EntryPermaLink}#comment">${EntryCommentCount} kommentarer</a>

</tag:if><img src="http://oi42.tinypic.com/vwbuu.png"> ${EntryDate} kl.${EntryTime}</a>

</li>

</ul>

</div>

</div>

</tag:entrylist>

<div>Les mer i arkivet

<tag:archivelist limit="6"> »

<a href="${ArchiveLink}">${ArchiveName}</a></tag:archivelist></div>

</div>

<div id="side">

<div id="example-one">

</font>

</center>

</ul>

<tag:profile>

<tag:if test="${ProfileExists == 'true'}">

<li>

<div id="profile" class="clearfix">

<center><img style="float: center; border: 0;" src="http://farm8.staticflickr.com/7014/6474582105_f7cc0090b4_m.jpg">

<h2>NAVNET DITT</h2>

ALDER, BOSTED<br><br>

&#149; &#149; &#149; &#149; &#149; &#149; &#149; &#149;<br><font size="1" width="10">DIN TEKST VIDERE HER<br>

Jeg startet å blogge for å ha mer oversikt på hendelser i livet.

Jeg liker kunst og bruker mye tid på å tegne og ta bilder. Jeg driver også med musikk.<br><br></font>

</a>

<div class="hide">

<p>${ProfileName}, ${ProfileAge}, ${ProfileFrom}<p/>

${ProfileDescription} <p/>

</div>

</tag:if>

</li>

</ul>

</div>

<div id="box2">

<tag:include module="sidebar"></tag:include>

<div><div class="hide">

<h3>Kategorier</h3>

<ul><div class="hide">

<tag:categorylist>

<li><div class="hide">

<a href="${CategoryLink}">${CategoryName}</a>

</li><div class="hide">

</tag:categorylist>

</ul>

</div>

<div><div class="hide">

<h3>Arkiv</h3>

<ul><div class="hide">

<tag:archivelist>

<li><div class="hide">

<a href="${ArchiveLink}">${ArchiveName}</a>

</li><div class="hide">

</tag:archivelist>

</ul>

</div>

<div><div class="hide">

<h3>Siste innlegg</a></h3>

<ul><div class="hide">

<tag:recentlist limit="10">

<li><div class="hide">

<a href="${EntryPermaLink}">${EntryTitle}</a>

</li><div class="hide">

</tag:recentlist>

</ul>

</div>

<div><div class="hide">

<h3>Kommentarer</h3>

<ul><div class="hide">

<tag:commentlist global="true" limit="10" sort="desc">

<li>${CommentAuthorLinkIf} om ${CommentArticleLink}</li>

<div class="hide">

</tag:commentlist>

</ul>

</div>

<tag:if test="${HasLinks == 'true'}">

<div><div class="hide">

<h3>Lenker</h3>

<ul><div class="hide">

</li><div class="hide">

</ul>

</html>

</body>

</html>



CSS Koder: Stillestående sidemeny/bakgrunn



Stillestående bakgrunn.

Limes inn under bakgrunssbildet koden. Bakgrunnen skal være under "Body".

Koden:

background-attachment:fixed;

 

Stillestående sidemeny

(Dersom du  har lang sidemeny med kategorier, akriv osv... anbefaler jeg at du får det fjernet eller flyttet til egen boks. Hvis ikke blir det umulig og scrolle ned.)

Koden limes inn inder "Side"

Koden:

position: fixed;



CSS koder: Skrift typer som virker hos alle



Jeg skal vise hvordan du kan få noen litt mer fancy skrift typer på bloggen din og hvordan du kan få dem til å virke hos de fleste.

Eksempel (Menyen min burde se slik ut hos deg)



1. Finn den skriften du vil ha på denne adressen her:

http://www.google.com/webfonts#ChoosePlace:select

2. Når du har funnet den typen skrift du liker klikker du på Quick Use.

Det er dette ikonet: 

3. Du vil nå komme inn på en ny side hvor du skal bla ned til du finner lignende:

(VÆR OPPMERKSOM PÅ HVA SKRIFTTYPEN DIN HETER)



4. Kopier denne koden.

Du skal nå gå på Design > Rediger > Maler (HTML)

Du kan lime koden inn hvor du vil bare ikke øverst jeg vil anbefale etter alle de første kodene som starter med <script.

Så lagrer du.

5. Gå på Stilsett (CSS) og bytter ut din nåværende skrift type med den nye på de feltene du vil ha dem.

Skrift typen på bloggen er som regel det som kommer etter font-family: skrift type;

Når du har prøvd det ut er det bare og lagre.

 

Håper du fikk nytte av dette, om det er noe du ikke forstår er det bare og si ifra. Om det er andre ting du vil jeg skal forklare bare spør.



Skygge/Glow rundt bloggen (CSS kode)



Her er CSS koden for og få skygge på bloggen, du velger selv hvor du vil ha den. Jeg bruker den rundt innleggs tittelene (Koden virker ikke på alle pcer så hvis du ikke ser det på min blogg vil det sannsyneligvis ikke virke hos deg). 

Koden skal limes inn på Stilsett (CSS)

Den kan limes inn under disse feltene: Entry, H2, Wrapper, Side.

-webkit-box-shadow: 0px 0px 20px #5c5c5c;

-moz-box-shadow: 0px 0px 20px #5c5c5c;

box-shadow: 0px 0px 20px #5c5c5c;

-moz-border-radius: 15px;

 

Kode for skygge på tekst

text-shadow: #CC6633 1px 2px 3px;



CSS koder 2



RUNDE HJØRNER

LEGG MERKE TIL: Jeg har testet koden på ulike nettlesere både på mac og windows. Desverre fungerer den ikke på alle, hos meg fungerte den ikke på Internet Explorer og Safari men Mozilla og Chrome gikk fint. Det betyr nødvendigvis ikke at den ikke virker på de nettleserene.

Jeg bruker koden selv på min blogg så dersom det ikke ser slik ut (Som vist på bildet) hos deg vil den nok ikke virke.



Koden plasseres der du vil ha runde hjørner innen for de ulike feltene på Stilsett (CSS).

Koden:

-moz-border-radius: 10px; 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;

Eksempel på plassering (Koden er plassert inne på .entry { da får innlegene runde kanter)

.entry {
text-align:left;
padding:15px;
background-color: #ffffff;
border: 1px solid #000000;
-moz-border-radius: 10px; 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}

 

ENDRE FARGE PÅ KOMMENTARER

Du kan ha forskjellige utseende på kommentarer fra forskjellige type brukere. Owner er dine kommentarer når du kommenterer innlogget på din egen blogg. User er ande innloggede brukere. Other er de som kommenterer uten en blogg eller uten å være innlogget på blogg.

(Koden limes inn på Stilsett (CSS). Jeg minner på at du ikke kan se koden ved å forhåndsvise, du må lagre siden kommentarene bare synes når man går inn på et innleg)

Koden skal plasseres under

.entry {
text-align:left;
padding:15px;
background-color: #ffffff;
border: 1px solid #000000;
}

Koden:

#comments .owner{
border: 1px solid #000000;
background-color: #ffffff;
}
#comments .user{
border: 1px dashed #000000;
background-color: #b4dee2;
}
#comments .other{
border: 1px dashed #000000;
background-color: #dff2f7;
}

 

ENDRE FARGE PÅ KOMMENTAR FELTET

Denne koden er for å endre farge og skrift på kommentarfeltet, alså der kommentaren blir skrivd. Dersom koden ovenfor ikke skal brukes plasserer du denne der den andre skulle plaseres, dersom du skal bruke begge kodene plasserer du den under koden ovenfor.

Koden:


input{
background-color: #b4dee2;
border: 1px dashed #000000;
font-family: century gothic;
color: #000000;
font-weight: bold;
font-size: 12px;
}
textarea{
background-color: #b4dee2;
border: 1px dashed "ff99cc;
font-family: century gothic;
color: #000000;
font-weightb: bold;
font-size: 12px;
}



GRATIS DESIGN



Siden ikke alle har muligheten til å sette seg ned å lære CSS og HTML koder, eller egenskapen til å forstå dem like bra som noen andre gjør så skal jeg innimellom lage CSS (Stilsett) design som jeg rett og slett gir ut. Idag lagde jeg foreløbig bare 1 design. Jeg har heller ikke giddi å legge inn at jeg har lagd designet kommer heller ikke til å gjøre det, så fri for linker og spam av hvem som har lagd det.

Her er eksempelet koden finner du under den skal limes inn på Design > Rediger > Stilsett (CSS). (Ikke alle nettlesere klarer å få frem gjenomsiktig innlegg eller runde kanter koden) Klikk på bildet for å se det større.

Klikk for å forstørre

KODEN:

.entry {
text-align:left;
padding:15px;
background-color: #cc3366;
border: 1px solid #ffffff;
-moz-border-radius: 10px; 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
filter:alpha(opacity=70); -moz-opacity:0.70; opacity:0.70; -khtml-opacity:0.70;
}
h2 {
text-transform:uppercase;
letter-spacing:.0em;
background-color: #ffffff;
-moz-border-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
border-right: 0px solid #F2E4D5;
font-family: Georgia;
font-size: 12pt;
font-color: #ffffff;
a:link {color: #ffffff; text-decoration: none; }
a:active {color: #ffffff; text-decoration: none; }
a:visited {color: #ffffff; text-decoration: none; }
a:hover {color: #ffffff; text-decoration: none; }
}
body {
background-image:url('http://stuff.pyzam.com/layouts/img/b/e/nvbeautifuldisaster.jpg');
background-color: #cc0066;
background-attachment:fixed;
font-family: georgia, georgia, georgia;
color: #ffffff;
}
#header {
background-color: #transparent;
background-image: url('HVIS DU VIL HA HEADER TAR DU BILDE URLEN HER, HUSK Å JUSTERE HEIGHT, WIDTH FOR AT DEN SKAL SYNES');
height: 0px;
width: 0px;
margin-left: auto;
margin-right: 100px;
margin: 0px 0px 0px 0px;
}
#wrapper {
background-color: #transparent;
width: 804px;
font-size: 9pt;
margin-left: 25px;
margin-right: auto;
}
#main {
float: right;
}
#side {
float: left;
}
#footer {
background-color: #transparent;
-moz-border-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
width: 700px;
margin-left: 75px;
margin-right: auto;
}
#side {
background-color: #cc3366;
border: 1px solid #ffffff;
-moz-border-radius: 10px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
filter:alpha(opacity=70); -moz-opacity:0.70; opacity:0.70; -khtml-opacity:0.70;
width: 180px;
font-size: 9pt;
border-style: solid;
border-left-color: #ffffff;
margin-left: 50px;
margin-right: auto;
h1, h2, h3, h4, h5 { font-family: century gothic, century gothic, century gothic; }
#header { color: #fffff; }
h1 a, h1 a:link, h1 a:visited, h1 a:active { text-decoration: none; color: #ffffff; }
#header h1, #header p { display:none }
::-moz-selection {
</style>



HTML koder



Alt her gjøres inne på Maler (HTML)

Få dato tid og antall kommentarer i senteret av innlegget.

Finn koden: (Koden gjentas fordi det er dato både oppe på innleget og under, den først er for den øverste datoen og siste er for den nederste datoen)

<li>${EntryDate} kl.${EntryTime} i

<a href="${EntryCategoryLink}">${EntryCategoryName}</a></li>

<li>

<tag:if test="${EntryCommentCount == 0}">

<a href="${EntryPermaLink}#comment">0 kommentarer</a>

<tag:elseif test="${EntryCommentCount == 1}" />

<a href="${EntryPermaLink}#comment">Én kommentar</a>

<tag:else />

<a href="${EntryPermaLink}#comment">${EntryCommentCount} kommentarer</a>

 

Det eneste du trenger å gjøre er og skrive <center> forran koden og </center> etter koden.

Slik:

<center>

<li>${EntryDate} kl.${EntryTime} i

<a href="${EntryCategoryLink}">${EntryCategoryName}</a></li>

<li>

<tag:if test="${EntryCommentCount == 0}">

<a href="${EntryPermaLink}#comment">0 kommentarer</a>

<tag:elseif test="${EntryCommentCount == 1}" />

<a href="${EntryPermaLink}#comment">Én kommentar</a>

<tag:else />

<a href="${EntryPermaLink}#comment">${EntryCommentCount} kommentarer</a>

</center>

 

Få bildesignatur etter hvert innlegg

 

Da limer du inn denne koden over koden vist ovenfor:

<p><image class="centered"alt="post signature" src="Bilde linken til signaturen din her" /></p>

 

Favoritt ikon til bloggen

 

Finn koden:

<link rel="shortcut icon" <- det står mer videre her.

Den skal være på linje 14.

Så bytter du ut blogg sin bildelink med din egen bildelink til det du vil ha som link bilde.

 

Bilde ved kategorier, Arkiv, Siste innlegg, osv?

Finn kodene

<h3>Kategorier</h3>

<h3>Arkiv</h3>

<h3>Siste innlegg</h3>

 

Det du gjør nå er og lime in denne html koden med linken til det bildet du vil ha vesidenav i den. Husk på at du ikke burde bruke store bilder.

<img src="Bilde linken din her">

 

Så skal du lime den inn i Kategorier osv, så det skal se slik ut:

<h3>Kategorier <img src="Bilde linken din her"></h3> 



CSS koder



Diss kodene plaseres inn på Stilsett (CSS)

Sidemenyen over på venstre side
}
#main {
float: right;
}
#side {
float: left;
}

Bakgrunn som ikke flytter på seg når du blar nedover på siden. (Plasseres innenfor body { feltet)

background-attachment:fixed;

Bakgrunnsbilde på innleggs tittelen. (Limes inn innenfor h2 { feltet, der som du ikke har det skal du få koden.)

Hvis du har h2 feltet
background: #000000 url(LIM INN BILDE LINKEN HER) repeat;

Hvis du i kke har h2 feltet
h2 {
background: #000000 url(LIM INN BILDE LINKEN HER) repeat;

Kant rundt innleggene (Kan brukes på sidemenyen også, limes inn enten under .entry { eller #side { )

border: 1px solid #000000;

Skriftstørrelse (Limes inn under det feltet hvor du ønsker og endre skriftstørelsen)

font-size: 9pt;





  • OM MEG


    Jeg er 21 år og kommer fra Porsgrunn. Jeg bruker denne bloggen relativt lite nå, mest som en dagbok for meg selv.


    MENY


  • hits