Δείτε τον οδηγό για την επεξεργασία html του Blog μας

[ElthaModerator Βραβείο Εγγραφής Βραβείο Εγγραφής για πάνω απο 3 χρόνια Βραβείο Μηνυμάτων Βραβείο Μηνυμάτων ( 5001 + σχόλια ) Βραβείο Θεμάτων Βραβείο Θεμάτων ( 100 νέα θέματα ) Βραβείο Ψηφοφορίας Βραβείο Ψηφοφορίας ( άνοιξε μια νέα ψηφοφορία ) Βραβείο Παιχνιδιών Βραβείο Παιχνιδιών ( άνοιξε ενα νέο θέμα - παιχνίδι ) Βραβείο Συμμετοχής Βραβείο Συμμετοχής ( σε 100 θέματα )]

Θα εξηγήσουμε εν συντομία τι είναι το καθένα .... ( ο οδηγός είναι βασισμένος στα παλαιά πρότυπα )

Το Header είναι η επικεφαλίδα μας εκει θα βρούμε όλο το section που έχει να κανει με αυτην , διάφορα πραγματακαι που προσθέτουμε εντός όπως πχ καποια menu bars κτλ μπαίνουν σε ένα γενικότερο πλαίσιο που ονομάζουμε header - wrapper

Το Sider Bar ( left & right ) είναι οι πλαϊνές μας στήλες όπου εκεί βρίσκονται όλα τα widget που προσθέτουμε, συνήθως έχουμε 2 στηλες αλλα μπορούμε να προσθέσουμε και άλλες
Στα νέα πρότυπα έχουμε την διαταξη απο τον σχεδιαστή οποτε είναι εύκολο να επιλέξουμε το σχέδιο που θέλουμε

Το Main ή main - wrapper είναι το section που περιέχει διάφορα πρόσθετα όπως date header, προσθήκες απο  τα στοιχεια σελίδας κτλ

Το Post είναι το κεντρικο κομμάτι μας όπου εκει είναι μέσα οι αναρτήσεις μας , post titles, labels, post author κτλ

Το Footer είναι το κάτω μέρος της σελιδας μας, είναι παρεμφερές με το Header

Το Body είναι ουσιαστικα ότι καλύπτει η οθόνη σας " περιμετρικά "

To Outer - wrapper περιέχει κωδικες που αφορούν το header, content και το footer

To Content - wrapper περιέχει τις πλαινές στήλες το main και το post


Να πω εν ολίγοις κάποιους γενικούς κανόνες καποια Html  ( τα πιο συνηθισμένα ) που συναντάμε και οι ερμηνίες τους ( αναλόγως το προτυπο υπαρχουν διαφοροποιήσεις ασφαλως )

Background image

no- repeat -> η εικονα δεν επαναλαμβάνεται
repeat -> η εικονα επαναλαμβανεται οριζοντια και καθετα
repeat-x -> η εικονα επαναλαμβανεται οριζόντια
repeat-y -> η εικονα επαναμβάνεται καθετα
όπου δειτε το text-align -> είναι η στοιχιση είτε  επικεφαλίδας είτε στηλης κτλ ( center , left , right )
opacity:.850; filter: alpha(opacity=85); -> ρυθμίζει ποσο διαφανης θα είναι η εικόνα μας ( μια οποιαδήποτε κοινή εικόνα εχει opacity 100% )

Γενικά

ότι δειτε να περιέχεται σε αυτον τον κωδικο a{...} -> καθορίζει τις ιδιοτητες του κειμένου των link σας
ότι δειτε να περιέχεται σε αυτον τον κωδικο a:visited{...} ->καθορίζει τις  ιδιότητες του κειμένου  των  links που επισκέφθεστε
ότι δειτε να περιέχεται σε αυτον τον κωδικο a:hover{...} -> καθορίζει τις ιδιοτητες του κειμένου των links όταν περναει απο πανω το ποντίκι σας
float -> ειναι ενα εφε που σε συνδυασμο με ολα τα αλλα εχει να κανει με τo πως "επιπλεει"  ενα στοιχειο στην σελίδα μας
blockquote -> ρυθμίζει το quote κειμενο μεσα στις αναρτησεις μας

αν θελετε να αλλάξετε τα χρωματα για background: #000000; -> αλλάξετε τους κωδικούς που αντιστοιχούν σε κάποιο χρώμα  εδω θα βρείτε τις αντιστοιχίες HTML color codes


Header

# header h1 -> καθορίζει την εμφάνιση της επικεφαλίδας
# header hi a -> ελέγχει την εμφάνιση της επικεφαλίδας σαν link κειμενο
# header.description -> ελέγχει τις ιδιοτητες του κειμενου που αφορα την περιγραφη ιστολογίου
# header a img -> ελέγχει την εικόνα που προσθέτουμε στην επικεφαλίδα

Main

h2date-header -> ρυθμίζει την ημερομηνία επικεφαλίδας πάνω απο τον τίτλο της αναρτησης
.post -> οτι εχει να κανει με την αναρτηση
.post h3 -> καθορίζει τις ιδιοτητες του τίτλου της ανάρτησης
.post-body p -> καθοριζει το περιεχομενο της αναρτησης
a img -> καθοριζει τις γενικες ιδιοτητες για μια εικονα ( το a  συνηθως ειναι για link επειδη η εικονα θεωρειται απο μονη της σαν link εφόσον παραπέμπει καπου )

Sidebar

# sidebar1 -> ιδιοτητες στηλης 1
# sidebar2 -> ιδιοτητες στηλης 2
# sidebar.widget -> ιδιοτητες όλων των πρόσθετων απο τα στοιχεία σελίδας
# sidebar.Blog.Archive ->  κανονικα και αυτο ειναι ενα απο τα προσθετα αλλα το εχει ξεχωριστα
.sidebar h2 -> ελέγχει τις ιδιοτητες των προσθέτων των στηλων

Footer

# footer h2 -> ρυθμιζει τις ιδιότητες του τιτλου /επικεφαλίδας
. footer -> ρυθμιζει τις ιδιοτητες του κειμενου link
# blog-pager -> ελέχει τις ιδιοτητες του κειμενου link κάτω κατω στην σελίδα μας  που λεει newer posts - older posts
# feed-links -> ελέχει πάλι στο τέλος της σελίδας το link "subscribe to Posts Atom


Υπάρχουν και πολλά άλλα πχ  τα margins δηλαδή την αποσταση μεταξυ των στηλων και γενικα όλη την στοιχιση του Blog μας
το θεμα αυτο ποικιλει αναλογα τι προτυπο εχουμε οστοσο μια γενικη εικονα
πχ αν δουμε αυτον τον κωδικο

#sidebar-wrapper {
margin: 0 14px 0 10px;
width: 240px;
 float: right;

το πρωτο 0 ειναι  το πανω margin
το 14 px ειναι  δεξι  margin
το δευτερο 0 ειναι κατω margin
το 15 px ειναι αριστερο margin

ειναι ουσιαστικα η αποσταση της πλαινης στηλης απο τα γυρω στοιχεια ...
σε καποια άλλα προτυπα υπαρχει μονο αυτος ο κωδικος
margin: 15px; -> που σημαινει οτι περιμετρικα υπαρχει μια ιση αποσταση των 15px

αντιστοιχως είναι και το padding το οποιο καθοριζει την αποσταση ενος στοιχειου / μια λέξης  απο το περίγραμμα του πλαισιου του

( πηγή βοήθειας ourblogtemplates.com )

[ElthaModerator Βραβείο Εγγραφής Βραβείο Εγγραφής για πάνω απο 3 χρόνια Βραβείο Μηνυμάτων Βραβείο Μηνυμάτων ( 5001 + σχόλια ) Βραβείο Θεμάτων Βραβείο Θεμάτων ( 100 νέα θέματα ) Βραβείο Ψηφοφορίας Βραβείο Ψηφοφορίας ( άνοιξε μια νέα ψηφοφορία ) Βραβείο Παιχνιδιών Βραβείο Παιχνιδιών ( άνοιξε ενα νέο θέμα - παιχνίδι ) Βραβείο Συμμετοχής Βραβείο Συμμετοχής ( σε 100 θέματα )]

σε αυτο το ποστ θα πουμε εναν γενικο κανονα στο να προσθετουμε background image
οπουδηποτε λοιπον θελουμε μια background εικονα προσθετουμε αυτο
background: URL(http://...) repeat-command x-position y-position;

αν θελουμε να βαλουμε στην πλαινη μας στηλη τοτε θα παμε στο σημειο του κωδικα που αναφερεται το sidebar 1 και θα προσθεσουμε τον παραπανω κωδικο με τις οποιες ρυθμισεις του δωσουμε

οι ρυθμισεις ειναι οι εξης
repeat-command
no- repeat -> η εικονα δεν επαναλαμβάνεται
repeat -> η εικονα επαναλαμβανεται οριζοντια και καθετα
repeat-x -> η εικονα επαναλαμβανεται οριζόντια
repeat-y -> η εικονα επαναμβάνεται καθετα

x-position οριζόντια
left -> τοποθετει την εικόνα στην αριστερη πλευρα
center-> τοποθετει την εικόνα στο κέντρο
right -> τοποθετει την εικόνα στην δεξια πλευρα

y-position κάθετα
top -> τοποθετει την εικόνα προς τα πάνω
center -> τοποθετει την εικόνα στο κέντρο
bottom -> τοποθετει την εικόνα προς τα κάτω

οπότε θα πρέπει να είναι κάπως έτσι η τελική του μορφη
background: URL(http://test12345.jpg) repeat left top;