Πώς να δημιουργήσετε ένα προσαρμοσμένο CSS για Webs.com

Ο λογαριασμός Webs.com σας παρέχει δυνατότητες, όπως προ-σχεδιασμένα πρότυπα σελίδων, που σας επιτρέπουν να δημοσιεύετε την επιχείρησή σας και τους προσωπικούς σας ιστότοπους χωρίς να έχετε αποκτήσει κάποια κωδικοποίηση. Ωστόσο, αν γνωρίζετε τα Φύλλα Στιγμιότυπων Στυλ ή το CSS, μπορείτε να δημιουργήσετε προσαρμοσμένους κωδικούς. Το CSS σας δίνει πλήρη έλεγχο της διάταξης και του σχεδιασμού των προτύπων ιστοτόπων σας, ώστε να μπορείτε να τα δημιουργήσετε από την αρχή ή να τροποποιήσετε υπάρχοντα σχέδια. Χρησιμοποιήστε τα μενού στο Webs.com για να εφαρμόσετε το CSS που κάνει τις σελίδες σας να ξεχωρίζουν.

Βήμα 1

Συνδεθείτε στον λογαριασμό σας στο Webs.com και κάντε κλικ στην καρτέλα "Τροποποίηση προτύπου" Γραμμή μενού στην επάνω δεξιά γωνία.

Βήμα 2 - Κάντε κλικ στο σύνδεσμο "Αλλαγή προτύπου" που εμφανίζεται κάτω από το κύριο μενού και κάντε κλικ στην επιλογή "Όλα" που εμφανίζεται στην αριστερή πλευρά. Αυτή η ενέργεια παρουσιάζει όλες τις επιλογές προτύπου που είναι διαθέσιμες στο Webs.com.

Βήμα 3

Κάντε κύλιση στα δεξιά της επιλογής του προτύπου και κάντε κλικ στο πλαίσιο "Custom CSS". Κάντε κλικ στην καρτέλα "Advanced CSS" που εμφανίζεται για να εμφανιστεί ένα πλαίσιο κειμένου όπου εισάγετε τους κανόνες στυλ.

Βήμα 4

Πληκτρολογήστε τον προσαρμοσμένο κώδικα CSS για να σχεδιάσετε το πρότυπό σας Webs.com. Για παράδειγμα, καθορίστε το χρώμα φόντου του σώματος, το οποίο ελέγχει τη συνολική εμφάνιση της σελίδας σας, όπως στο παρακάτω παράδειγμα: body {background-color: #cccccc; } Κάντε κλικ στο κουμπί "Αποθήκευση" στην επάνω δεξιά γωνία. Κάντε κλικ στο κουμπί "Δείτε το Site μου" στο παράθυρο διαλόγου που εμφανίζεται για να δείτε το προσαρμοσμένο CSS που δημοσιεύτηκε στην ιστοσελίδα σας στο Webs.com.

Συμβουλές

Προσαρμόστε το ύψος της κεφαλίδας σας, το οποίο είναι το επάνω banner στο "# fw-head {height: px;}" και πληκτρολογώντας την επιθυμητή τιμή αριθμού μετά το χαρακτηριστικό ύψους. Για παράδειγμα:

# fw-head {ύψος: 300px; }

Εφαρμόστε ένα χρώμα στα στοιχεία μενού στη γραμμή πλοήγησης πληκτρολογώντας "# fw-nav-menu li {χρώμα:;}" και εισάγοντας μια τιμή χρώματος μετά το χαρακτηριστικό χρώμα. Για παράδειγμα:

# fw-nav-menu li {χρώμα: # c0c0c0; }

Μορφοποιήστε το μέγεθος του τίτλου που εμφανίζεται επάνω από την κύρια περιοχή περιεχομένου στη σελίδα σας, πληκτρολογώντας ".fw-title {font-size: px;}" και πληκτρολογώντας έναν αριθμό μετά το χαρακτηριστικό μέγεθος γραμματοσειράς,

.fw-τίτλο {font-size: 18px; }

Σχεδιάστε την εμφάνιση φόντου της πλαϊνής γραμμής σας, η οποία είναι η κάθετη στήλη στη δεξιά ή την αριστερή πλευρά της σελίδας, πληκτρολογώντας "# fw-sidebar {background-color:;}" και εισάγοντας την επιθυμητή τιμή χρώματος. Για να απεικονίσετε:

# fw-sidebar {φόντο-χρώμα: ffff00; }

Προσαρμογή της σκιάς των υπερσυνδέσεών σας πληκτρολογώντας "a: link {color:;}" και πληκτρολογώντας μια τιμή χρώματος, όπως το ακόλουθο παράδειγμα:

a: link {χρώμα: # 00ffff; }