Ελληνική Κοινότητα Υποστήριξης ForumGreek
Καλωσήρθατε στο Ελληνικό Φόρουμ Υποστήριξης της ForumGreek!!

Για να αποκτήσετε πλήρη πρόσβαση στο φόρουμ και στα όσα προσφέρει, μπορείτε πολύ απλά να κάνετε μια σύνδεση ή αν δεν έχετε λογαριασμό μία δωρεάν εγγραφή και μπείτε στην κοινότητά μας!!

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

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

Ειδοποιητικά μηνύματα με χρήση 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 κλπ )

Αφού τελειώσετε με τις αλλαγές σας πατάτε και είστε έτοιμοι!  cheers

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



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

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

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

Επιστροφή στην κορυφή Πήγαινε κάτω

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


 
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης
Χρειάζεστε βοήθεια;
Στις Συχνές Ερωτήσεις μπορείτε να βρείτε σημαντικές πληροφορίες που θα σας βοηθήσουν!