2016. március 31., csütörtök

Saját kódolású egyszerű design - Elvihető

Sziasztok!
Tegnap összeütöttem valami design félét, ha szeretnétek vinni jelezzétek valamilyen formában. Ha szeretnétek hozzá fejlécet, akkor írjatok e-mail-t, és elkészítem. Ha érdekel teljesben a kinézet, ITT megtekintheted.






Itt a kódja, amit az elrendezésen belül a Sablonba, Sablon szerkesztésébe, Seciális(CCS) hozzáadása helyre kell beillesztenetek.

Kód:

body {
background-image: url( /*ide a képfeltöltés.hu-ra feltöltött link kerül, ami a Direkt link, vagyis az utolsó*/);
background-color: #D2B48C; /*az egész blog hátterének színe (szürke rész)*/
}

header {
height: 500px; /*bejegyzések eltolása a fejléctől lefele*/
}

#Blog1 {
background: #CD853F; /*bejegyzések hátterének színe*/

/*bejegyzések körül levő szaggatott keret*/

border-radius: 60px 60px 0px 0px; /*mennyire legyen lekerekítve a sarka, és hogy melyik*/
border-top: 4px dotted #A0522D;  /*ez a felső szaggatott rész*/
border-left: 4px dotted #A0522D; /*bal oldali szaggatott rész*/
border-bottom: 4px dotted #A0522D; /*bejegyzés alján levő szaggatott rész*/
border-right: 4px dotted #A0522D; /*jobb oldali szaggatott rész*/
width: 650px; /*bejegyzések szélessége*/
position: relative;
top: 200px;
left: 30px;
}

.post-body {
background: none;
padding: 7px;
position: relative;
top: 0px;
left: -7px;
border-radius: 35px 35px 0px 0px;
border-top: 3px dotted #D2B48C;
border-bottom: 3px dotted #D2B48C;
}

h2. date-header span {
background: #664433;
border-radius: 60px 60px 0px 0px;
border-top: 4px dotted #A0522D;
margin-left: 50px;
text-align: center;
position: relative;
top: -30px;
left: 0px;
}

h3.post-title {
text-align: center;
margin: 0px 0px 50px 10px;
}

.main-inner .column-left-inner .widget {
background: #CD853F;

 /*szaggatott keret a szövegdoboz körül*/

border-radius: 60px 60px 60px 60px;
border-top: 4px dotted #A0522D; /*ez a felső szaggatott rész*/
border-left: 4px dotted #A0522D; /*bal oldali szaggatott rész*/
border-bottom: 4px dotted #A0522D; /*szöv.doboz alján levő szaggatott rész*/
border-right: 4px dotted #A0522D; /*jobb oldali szaggatott rész*/
width: 200px; /*szélesség*/
top: -400px; /*oldalra tolás, tehát ha -500px-re viszed, messzebb viszi a bejegyzéstől*/
left: -60px;
text-align: center;
magrin: 0px 0px 50px 0px;
}

.main-inner .column-left-inner h2 {
text-align: center;
position: relative;
top: 0px;
left: 45px;
}



1 megjegyzés:

  1. Szia! Nem az egész css-t vittem, hanem bizonyos részét. Köszönöm, nagyon okat segítettél! :3

    VálaszTörlés