ΠΡΟΣΑΡΜΟΣΙΜΟ ΠΛΑΤΟΣ BLOG (FLUID WIDTH) ΓΙΑ ΟΛΕΣ ΤΙΣ ΟΘΟΝΕΣ

ΠΡΟΣΑΡΜΟΣΙΜΟ ΠΛΑΤΟΣ BLOG (FLUID WIDTH) ΓΙΑ ΟΛΕΣ ΤΙΣ ΟΘΟΝΕΣ
FLUID WIDTH
Για να προσαρμόζεται αυτόματα το πλάτος του blog μας σε μικρές και μεγάλες οθόνες πρέπει να αλλάξετε το min-width και το max-width που βρίσκονται μέσα στον κώδικα HTML του προτύπου σας. Πηγαίνουμε στην επεξεργασία προτύπου και αναζητούμε με τα πλήκτρα Ctrl+F την γραμμή <b:template-skin>  Θα οδηγηθούμε στις παρακάτω γραμμές κώδικα, όπου όλα τα χρωματισμένα νούμερα είναι στις τιμές που τα έχουμε ρυθμίσει μέσα από την προσαρμογή προτύπου του blogger.


<b:template-skin>
      <b:variable default='930px' name='content.width' type='length' value='1330px'/>
      <b:variable default='0' name='main.column.left.width' type='length' value='200px'/>
      <b:variable default='200px' name='main.column.right.width' type='length' value='200px'/>

Από αυτά τα νούμερα μπορούμε να πειράξουμε μόνο το πράσινο και μόνο στην περίπτωση που θέλουμε το συνολικό πλάτος του ιστολογίου να είναι πάνω από 1500px που έχει ως ανώτατο όριο ο blogger. Σε διαφορετική περίπτωση που το συνολικό πλάτος και συνάμα και ιδανικό δηλ. εκεί που το ιστολόγιο δείχνει σωστά και χωρίς περικοπές όλο το περιεχόμενό του, είναι από 1500px και κάτω δεν χρειάζετε να το πειράξουμε γιατί θα το ρυθμίσουμε μέσα από την προσαρμογή του προτύπου του blogger.

Συνεχίζουμε και αναζητούμε με τα πλήκτρα Ctrl+F την γραμμή .content-outer Θα οδηγηθούμε στις παρακάτω γραμμές κώδικα,

.content-outer, .content-fauxcolumn-outer, .region-inner {
        min-width: $(content.width);
        max-width: $(content.width);
        _width: $(content.width);
      }

Από αυτόν τον κώδικα μπορούμε να πειράξουμε το min-width: το max-width: και το _width: Όπου στο min-width: βάζουμε το συνολικό minimun πλάτος σε px που θέλουμε να έχει το ιστολόγιο.
Στο max-width: βάζουμε το συνολικό maximun πλάτος σε % που θέλουμε να έχει το ιστολόγιο. Στο _width: βάζουμε το συνολικό πλάτος σε % που θέλουμε να έχει το ιστολόγιο.
Ο νέος κώδικας που πρέπει να ατιγράψετε είναι ο παρακάτω. Τον επικολλάτε, σώζετε το πρότυπο και τέλος.

.content-outer, .content-fauxcolumn-outer, .region-inner {
        min-width: 1000px;
        max-width: 100%;
        _width: 100%;

      }

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.