Σάββατο 17 Ιανουαρίου 2009

Print this post

ΤΡΙΣΤΗΛΑ TEMPLATES... ΑΒΑΔΙΣΤΑ ΚΑΙ ΑΒΑΣΑΝΙΣΤΑ

Σήμερα θα σας δείξω πως μπορείτε να μετατρέψετε το template του blog σας σε τρίστηλο (αρκεί να ανήκετε στην πλατφόρμα του blogspot). Καλό είναι να κάνεται ένα back up τον κώδικα σας για λόγους ασφαλείας πριν ξεκινήσετε οτιδήποτε.
Πάμε στον πανόπτη, από εκεί διάταξη και από εκεί επεξεργασία HTML. Το κουτάκι που λέει επέκταση γραφικών στοιχείων το αφήνουμε έτσι όπως είναι και δεν το πειράζουμε (ατσεκάριστο).
Βρίσκουμε το κομμάτι του κώδικα που λέει:

#sidebar-wrapper { width: 220px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Το αντιγράφουμε έτσι όπως είναι (copy - paste) ακριβώς από κάτω και έτσι το έχουμε δυο φορές. Στο πρώτο εκεί που λέει float βάζουμε right και σβήνουμε αυτό που έχει, συνήθως λέει $startSide (φαίνεται πάνω η αλλαγή). Τώρα αλλάζουμε σ' αυτό που μόλις αντιγράψαμε (στο δεύτερο) αυτά που φαίνονται παρακάτω με κόκκινο χρώμα:

#left-sidebar-wrapper (αυτό δημιουργεί τη νέα στήλη) float: left; (αυτό θα κάνει την καινούρια στήλη να εμφανίζεται στα αριστερά της κεντρικής όπου εμφανίζονται τα post).

Με τις παραπάνω κινήσεις μόλις προσθέσαμε άλλη μια sidebar.
Στη συνέχεια κοιτάζουμε να βρούμε το μέρος του κώδικα που λέει:

<div id='main-wrapper'>

Ακριβώς πριν από αυτόν αντιγράφουμε και κάνουμε επικόλληση (copy - paste) τον παρακάτω κώδικα:

<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>

Αυτό γίνεται (<div id='main-wrapper'>) για να μπορέσει ο browser να καταλάβει ότι υπάρχει και άλλη μπάρα. Το άλλο κομμάτι του κώδικα (<b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>) είναι για να καταλάβει ο browser τι είδους στοιχεία (widgets) υπάρχουν στην καινούρια μας στήλη. Το ID πρέπει να είναι left-sidebar για να μην έχουμε διενέξεις και προβλήματα και για να καθορίσουμε ότι η καινούρια μας στήλη θα βρίσκεται στην αριστερή πλευρά τoυ template μας. Τα παραπάνω, όμως είναι για εγκυκλοπαιδικούς λόγους. Ας συνεχίσουμε με πράξη.
Λογικά θα πρέπει να μεγαλώσουμε το template μας για να χωρέσουν όλα. Βρίσκουμε το κομμάτι του κώδικα που λέει:

/* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }

Και αντικαθιστούμε την τιμή 660 με 880. Για να είναι όμως πιο καλαίσθητο πρέπει να μεγαλώσουμε και και το μέρος που φιλοξενεί το logo μας. Πάμε και βρίσκουμε το κομμάτι του κώδικα που λέει:

#header-wrapper { width:880px; margin:0 auto 10px; border:1px solid $bordercolor; }

Και εδώ την τιμή την αλλάζουμε από 660 σε 880 (στο ακριβώς παραπάνω παράδειγμα η τιμή έχει ήδη αλλαχτεί).
Πατάμε αποθήκευση αν και δεν τελειώσαμε για να ελέγξουμε ότι όλα πάνε καλά. Εφόσον κάνουμε αποθήκευση (save) πάμε πανόπης, διάταξη και στοιχεία σελίδας και η εικόνα που πρέπει να αντικρίσετε είναι όπως η παρακάτω:


Όπως προανέφερα δεν τελειώσαμε. Η στήλη υπάρχει αλλά θα είναι ορατή στο blog μόνο όταν βάλετε κάποιο widget. Πρέπει να κάνουμε τα στοιχεία που θα βάζουμε στην καινούρια μπάρα μας να μην ξεπερνάνε τα όρια και μπαίνουν μέσα στα post μας (κάτι το οποίο είναι ενοχλητικό). Πάμε πάλι στη διάταξη, από εκεί επεξεργασία HTML και ψάχνουμε να βρούμε το κομμάτι του κώδικα:

#main-wrapper { width: 410px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Και προσθέτουμε margin-left: 20px; εκεί που λέει float:left; Ο κώδικας πρέπει να δείχνει ακριβώς όπως παρακάτω:

#main-wrapper { width: 410px; float: left; margin-left: 20px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Πατήστε αποθήκευση (save) και τελειώσατε. Για να βάλετε στήλη στα δεξιά ακολουθήστε την ίδια διαδικασία μόνο εκεί που λέει left; βάλτε right;

UPDATE: Η παραπάνω διαδικασία αφορά τo Minima
template (σαν το δικό μου δηλαδή) και τις παραλαγές
του. Για άλλα templates πρέπει να διαθέσετε λίγο χρόνο
για να πειραματιστείτε με τις τιμές των: Outer-Wrapper,
Header-Wrapper και margin. Αυτό γιατί άλλα templates
είναι πιο σύνθετα (περιέχουν σχέδια, footers, χρώματα κλπ.)

Πηγή: ΘΕΜΑ

9 σχόλια:

  1. Οταν κάνεις εφαρμογή του Τρίστηλου δεν περιορίζεις το χώρο σου για ανάρτηση? Που οφελεί το τρίστηλο εκτός να θέλεις να έχεις μεγάλη sidebar??

    ΑπάντησηΔιαγραφή
  2. @zouzou Όχι εφόσον μεγαλώνουμε το template και στο φάρδος. Για αυτό αλλάζουμε τιμές και στο Outter-wrap.

    ΑπάντησηΔιαγραφή
  3. εγώ εάν θέλω να μεγαλώσω απλώς το μήκος της κάθε ανάρτησης, από τα 600pixels στα 800 ας πούμε, αλλά θέλω να μετακινηθούν αντίστοιχα 200pixels από όσό ήταν πριν τα widgets & το κενό στα αριστερά,γίνεται?
    ή έχω περιορισμένο χώρο από τα δεξιά & αριστερά που δεν μπορώ να υπερβώ.

    ΑπάντησηΔιαγραφή
  4. @dead cities, lost ghosts Βέβαια γίνεται. Με το Outter Wrap μεγαλώνουμε στο φάρδος όλο το template, με το header wrap την κεφαλίδα και με το margin τα κενά μεταξύ των στηλών. Η αλήθεια είναι ότι χρειάζεται χρόνο και υπομονή για να πειραματιστείς αλλάζοντας τις τιμές έτσι ώστε να φτάσεις σε ένα αποτέλεσμα που θα σου αρέσει.

    ΑπάντησηΔιαγραφή
  5. ΕΓΩ ΕΧΩ ΤΟ ΠΡΟΤΥΠΟ HERBERT.
    ΚΑΙ ΕΧΩ ΚΟΛΛΗΣΕΙ ΑΠΟ ΤΟ ΠΡΩΤΟ-ΠΡΩΤΟ ΚΟΜΜΑΤΙ .
    ΔΕΝ ΜΠΟΡΩ ΝΑ ΒΡΩ ΤΟΝ ΚΩΔΙΚΑ
    #sidebar-wrapper { width: 220px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

    ΚΑΠΟΙΕΣ ΛΕΞΕΙΣ ΒΡΙΣΚΩ ΚΑΙ ΚΑΠΟΙΕΣ ΟΧΙ.
    ΠΧ ΚΑΠΩΣ ΕΤΣΙ.
    div#sidebar-wrapper {
    margin: 0px;
    padding: 0px;
    text-align: $endSide;
    }

    div#sidebar {
    width: 30%;



    float: $endSide;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    ΔΕΝ ΞΕΡΩ ΤΙ ΝΑ ΚΑΝΩ.
    ΦΙΛΙΚΑ Ο johnpatra

    ΑπάντησηΔιαγραφή
  6. ΛΟΙΠΟΝ Ο JOHNPATRA ΕΙΜΑΙ ΠΑΛΙ.
    ΕΦΤΙΑΞΑ ΕΝΑ ΠΕΙΡΑΜΑΤΙΚΟ BLOG ΚΑΙ ΤΟΥ ΕΒΑΛΑ ΤΟ ΠΡΟΤΥΠΟ MINIMA.ΑΚΟΛΟΥΘΗΣΑ ΤΙΣ ΟΔΗΓΙΕΣ ΚΑΙ ΒΓΗΚΕ ΚΑΝΟΝΙΚΑ.ΑΛΛΑ ΓΙΑ ΤΟ ΠΡΟΤΥΠΟ HERBERT ΓΙΝΕΤΑΙ ΚΑΤΙ?
    ΟΠΟΙΟΣ ΞΕΡΕΙ ΑΣ ΜΕ ΒΟΗΘΗΣΕΙ ΣΤΕΛΝΟΝΤΑΣ ΜΟΥ ΕΝΑ ΜΑΙΛ ΣΤΟ
    johnpatra@hotmail.com

    ΑπάντησηΔιαγραφή
  7. @johnpatra Τα tricks που δείχνουμε σ'αυτό το blog αφορούνε τα templates του blogspot. Όχι ότι δε γίνεται και σε άλλα... απλά χρειάζεται περισσότερο δουλειά. Όλες οι αλλαγές γίνονται ευκολότερα σε tamplates minima.

    ΑπάντησηΔιαγραφή
  8. Φιλε πολυ ωραια αναρτηση αλλα θελω να σε ρωτησω πως γινεται να βαλω δυο στηλες δεξια

    ΑπάντησηΔιαγραφή
  9. @Alexas Δώσε μου το email σου και θα σου πω.

    ΑπάντησηΔιαγραφή

back to top