Ειδοποιητικά μηνύματα με χρήση CSS

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω

Ειδοποιητικά μηνύματα με χρήση CSS Empty Ειδοποιητικά μηνύματα με χρήση CSS

Δημοσίευση από Luffy Πεμ Ιαν 15, 2015 8:55 pm

Ειδοποιητικά μηνύματα με χρήση CSS


Με αυτό τον οδηγό θα μάθετε πως να χρησιμοποιείτε ειδοποιητικά μηνύματα σε κουτιά μέσω του CSS. Πιο κάτω θα σας παρουσιάσουμε ένα παράδειγμα για να καταλάβετε τι εννοούμε:
Γραμμή 1 : Το μήνυμά σας καταχωρείτε εδώ...!
Γραμμή 2 : Το μήνυμά σας καταχωρείτε εδώ...! Επιπλέον μήνυμα! Wink

Για να γίνει αυτό ακολουθήστε τα παρακάτω βήματα:


Μορφοποίηση CSS

Πάμε: Πίνακας Διαχείρισης ► Εμφάνιση ► Εικόνες και χρώματα ► Χρώματα ► CSS Stylesheet και προσθέτετε τον εξής κώδικα στο CSS σας:
Κώδικας:
.cpinfo {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.cpinfo {
color: #00529B;
background-color: #BDE5F8;
background-image: url('http://i.imgur.com/BZ17N.png');
}

Τώρα χρησιμοποιώντας τον παρακάτω κώδικα (BBCode) θα έχετε το παραπάνω αποτέλεσμα:
Κώδικας:
[table class="cpinfo"][tr][td]Το μήνυμά σας καταχωρείτε εδώ...!
Το μήνυμά σας καταχωρείτε εδώ...! Επιπλέον μήνυμα! ;)[/td][/tr][/table]

Γι' αυτούς που μπορούν να επέμβουν στο CSS:
Για να επεξεργαστείτε τα χρώματα και περισσότερα μπορείτε να αλλάξετε τις τιμές στον κώδικα που τοποθετήσaτε στο CSS σας. ( όπως background-position, padding κλπ )

Αφού τελειώσετε με τις αλλαγές σας πατάτε Ειδοποιητικά μηνύματα με χρήση CSS EVRvlh1 και είστε έτοιμοι!  cheers

Ο οδηγός γράφτηκε από Eagle8x και μεταφράστηκε στα Ελληνικά από Νemo για τις ανάγκες του ForumGreek.
Luffy

Luffy
Διαχειριστής
Διαχειριστής

Άντρας
Τόπος : Ελλάδα
Δημοσιεύσεις : 2340



Luffy ο/η συγγραφέας σας ευχαριστήσε για την απάντησή σας.

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή

- Παρόμοια θέματα

Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης