2016. 03. 13.

#1 Teljes design kód

Halihó Habcsókok!
Ma ügyködtem a gépen, és két design is összehoztam. Ezekből csak az egyik vihető. Ha esetleg valaki nem értene a kódos részéhez, és nem tudja, hova kellene berakni a kódot, amit kirakok, az kérem írjon nekem e-mailt ez ügyben.
A pontos méreteit megadom külön, leírom a linkek színét is.
Ez a CSS kódja, a fejlécet külön teszem ki, valamint a DeviantArt-on is megtalálható Orchidea-s képet ajánlanám hozzá.
Mivel az egészet én kódoltam, kérném, hogy jelezze kommentben, aki viszi.

Design:



Fejléc: 


Lejjebb van a kód: 




CSS kód:

<script type="text/css"> 
 A:link, A:visited, A:active {font-size: 12px;} 
A:hover { font-size: 16px;}
</script>

<script type="text/css"> 
 A:link, A:visited, A:active {text-transform:lowercase;} 
A:hover { text-transform:uppercase;}
</script>

body {
background: #110a2b;
}

#Blog1 {
width: 600px;
top: -170px;
left: -80px;
}

.header {
position: relative;
top: -10px;
}

h3 {
text-align: left;
top: 22px;
text-shadow: 1px 1px #cca8a9;
}


.date-header span { 
background: #3d4073;
position: relative;
left: 200px;
top: 67px;
width: 80px;
padding: 10px 3px 10px 3px;
border-top: 1px dashed #cca8a9;
border-left: 1px dashed #cca8a9;
border-bottom: 1px dashed #cca8a9;
border-right: 1px dashed #cca8a9;
border-radius: 10px 0px 0px 10px;
}

.post-body {
background: #3d4073;
padding: 5px 2px 5px 7px;
border-top: 1px dashed #cca8a9;
border-left: 1px dashed #cca8a9;
border-right: 1px dashed #cca8a9;
border-radius: 0px 10px 0px 0px;
}

#PageList1 li a:link, #PageList1 li a:visited {
display: inline-block;
border-bottom: dotted 1px;
width: 150px;
margin-bottom: -2px;
font-famia:Arial;
font-size: 12px;
text-align: center;
letter-spacing: 2px;
cursor: pointer;
padding: 3px;
 -webkit-transition-duration: .50s;}
#PageList1 li a:hover {
border-radius: 10px;
background: #eee;
color:  #000; !important;
transition-timing-function: linear !important;
transition-duration: 0.6s !important;
transition-property: all !important;
box-shadow: inset 0px 30px 0px #fff,inset 00px 60px 0px white, inset 00px 90px 0px white;
}
a:link {
 text-decoration: none !important; }
#Stats1 {
text-align: center;
text-shadow: 0px 1px 0px #888;
font-family: Arial;
color: #fff !important;
}.comment-content {
background: #3d4073;
color: #fff;
padding: 13px;
border-left: 1px dashed #cca8a9;
border-bottom: 1px dashed #cca8a9;
border-right: 1px dashed #cca8a9;
border-top: 1px dashed #cca8a9;
border-radius: 10px 10px;
 .comments .avatar-image-container {
position: relative;
overflow: hidden;
float: left;
max-height: 36px;
width: 36px;
}
.avatar-image-container {
border-radius: 50%;
border: 5px double #3d4073;
}
.post-footer { 
width: 603px;
text-align: center;
background: #3d4073;
text-transform: none;
font-family: Arial;
border-left: 1px dashed #cca8a9;
border-bottom: 1px dashed #cca8a9;
border-right: 1px dashed #cca8a9;
font-size: 11px;
text-align: center;
padding: 3px !important;
color: #fff !important;
margin-top: -1px !important;
margin-left: -0px !important;
margin:right: -10px !important;
}
a:link {
text-decoration:none !important;}
a:link {
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;}

a:hover {
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-o-transition:all 1s;
}

.main-inner .column-right-inner .widget{
width: 280px;
background: #3d4073;
position: relative;
right: -60px;
top: -480px;
border-left: 1px dashed #cca8a9;
border-bottom: 1px dashed #cca8a9;
border-right: 1px dashed #cca8a9;
border-top: 1px dashed #cca8a9;
border-radius: 10px 10px 0px 0px;
padding: 10px 12px 10px 12px;
}

.main-inner .column-right-inner h2 {
text-align: center;
border-right: 1px dashed #cca8a9;
border-top: 1px dashed #cca8a9;
border-left: 1px dashed #cca8a9;
top: -30px;
background: #3d4073;
width: 180px;
left: 50px; 
border-radius: 10px 10px 0px 0px;
}

#HTML1 {
width: 230px;
left: -120px;
position: relative;
top: -590px;
}

a.menu:link, a.menu:active, a.menu:visited {
width: 150px;
height: 20px;
padding-top: 10px;
display: inline-block;
background: #3d4073;
border-right: 1px dashed #cca8a9;
border-top: 1px dashed #cca8a9;
border-left: 1px dashed #cca8a9;
border-bottom: 1px dashed #cca8a9;
text-align: center; 
text-transform: uppercase;
font-family: trebuchet ms;
font-size: 12px;
margin: 7px 50px 5px 35px; 
-webkit-transition-duration: .50s;
-moz-transition-duration: .50s;
}

a.menu:hover {
background: #cca8a9;
color: #3d4073;
border-bottom: 5px double #3d4073;
border-top: 5px double #3d4073;
border-left: 5px double #3d4073;
border-right: 5px double #3d4073;
text-decoration: none !important;
-webkit-transition-duration: .50s;
}

.main-inner .column-left-inner .widget{
width: 280px;
position: relative;
right: 180px;
top: -580px;
border-radius: 10px 10px 0px 0px;
padding: 10px 12px 10px 12px;
}

.main-inner .column-left-inner h2 {
text-align: center;
border-right: 1px dashed #cca8a9;
border-top: 1px dashed #cca8a9;
border-left: 1px dashed #cca8a9;
top: -30px;
background: #3d4073;
width: 180px;
left: 50px; 
border-radius: 10px 10px 0px 0px;
}


Hogy a menü megjelenjen, HTML/JavaScript-be ezt kell beilleszteni:

<a class='menu' href=*blog link*>Főoldal</a>
<a class='menu' href=*blog link*>Menü</a>
<a class='menu' href=*blog link*>Menü1</a>
<a class='menu' href=*blog link*>Menü2</a>


A blog elrendezésénél mind a két oldalra kell sáv, más szóval:
sidebar-left1 
sidebar-right-1

A sidebar-left-1-nél csakis a menü legyen! (fontos)


Bejegyzés címének mérete: 32px
Link színe: #a18bb2
Meglátogatott link színe: #cca8a9
Fókuszálás színe: #dddddd

Külső+fő+fejléc háttere: #110a2b

Modul címének mérete: 16px
Modul cím színe: #a18bb2
Másodlagos szín: #cca8a9

Kép felirat színe: #cca8a9


A kimaradt színek nem fontosak, valamint átlátszóak. 

Remélem tudtam segíteni, ha viszed, kérlek jelezd nekem bármilyen formában! 

10 megjegyzés:

  1. Köszönöm, hogy írtál. :)
    És szívesen tettem.

    VálaszTörlés
  2. Dehogy baj. Örülök, hogy segíthettem. :)

    VálaszTörlés
  3. Szia! Valószínűleg használni fogom. Igaz, átfogom néhol írni, de nagyon tetszik és gyönyörű. :D (igazából inkább tanulás szempontjából, hogy jobban átlássak néhány dolgot)

    VálaszTörlés
    Válaszok
    1. Szia. Köszönöm, hogy szóltál. Örülök, hogy tudtam vele segíteni.

      Törlés
  4. Ezt a megjegyzést eltávolította a szerző.

    VálaszTörlés
  5. Én is elvinném :) Nagyon szép lett <3

    VálaszTörlés
    Válaszok
    1. Köszönöm, hogy szóltál. Ennek nagyon örülök. :)

      Törlés