Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
Ελληνική Κοινότητα Υποστήριξης ForumGreek :: ΤΟΜΕΑΣ ΥΠΟΣΤΗΡΙΞΗΣ :: Βοήθεια για Σχεδίαση Φόρουμ & Εμφάνιση :: Αρχείο Βοήθειας για Σχεδίαση Φόρουμ & Εμφάνισης
Σελίδα 1 από 2 • Μοιραστείτε
Σελίδα 1 από 2 • 1, 2
Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
Γεια χαρά παιδιά!
Ξεκίνησα να σχεδιάζω μερικά εικονίδια για την πάνω μπάρα και ήθελα να ρωτήσω πως θα μπορούσα να τα κάνω λίγο interactive.
Θέλω όταν περνάει από πάνω ο κέρσορας να αλλάζει το χρώμα τους...
Μπορώ να σχεδιάσω τα ίδια εικονίδια με άλλο φόντο, θα ήταν το ιδανικό έτσι ωστε να αλλάζει μόνο το χρώμα του φόντου τους.
Ξεκίνησα να σχεδιάζω μερικά εικονίδια για την πάνω μπάρα και ήθελα να ρωτήσω πως θα μπορούσα να τα κάνω λίγο interactive.
Θέλω όταν περνάει από πάνω ο κέρσορας να αλλάζει το χρώμα τους...
Μπορώ να σχεδιάσω τα ίδια εικονίδια με άλλο φόντο, θα ήταν το ιδανικό έτσι ωστε να αλλάζει μόνο το χρώμα του φόντου τους.
Gunman- Eνεργό Μέλος
- Δημοσιεύσεις : 287
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
Καλησπέρα @Gunman,
Αν θέλεις να αλλάζουν φόντο οι εικόνες θα πρέπει να έχεις φτιάξει πρώτα και δεύτερες εναλλακτικές με άλλο φόντο και μετά με το CSS μπορούμε να το φτιάξουμε. Αν απλά θέλεις να εφαρμόσεις εφέ στις επιλογές του μενού γίνεται πολύ εύκολα αυτό με CSS.
Αν θέλεις να αλλάζουν φόντο οι εικόνες θα πρέπει να έχεις φτιάξει πρώτα και δεύτερες εναλλακτικές με άλλο φόντο και μετά με το CSS μπορούμε να το φτιάξουμε. Αν απλά θέλεις να εφαρμόσεις εφέ στις επιλογές του μενού γίνεται πολύ εύκολα αυτό με CSS.
Van-Helsing- Διαχειριστής
-
Ηλικία : 49
Δημοσιεύσεις : 1990
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
Ωραία! Φτιάχνω τώρα τα ενναλακτικά εικονίδια για να τα βάλω να εμφανίζονται όταν περνά ο κέρσορας από πάνω..
Μήπως μπορείς να μου πεις τον κώδικα?
Ευχαριστώ!
Μήπως μπορείς να μου πεις τον κώδικα?
Ευχαριστώ!
Gunman- Eνεργό Μέλος
- Δημοσιεύσεις : 287
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
Επείδη μαρέσει να κοιτάω τη λειτουργικότητα σε μια σελίδα και όχι την εμφάνιση καλά είναι να αφαιρέσεις τις εικόνες και να το δουλέψεις με css. Ένας απλός κώδικας hover είναι ο παρακάτω.
Αν θέλεις να αλλάζει η εικόνα τότε ακόμα χειρότερα γίνεται η δουλεια, διότι όπως είπα παραπάνω κοιτάμε τι λειτουργικότητα, αυτό σημαίνει πως βάζοντας εικόνες τότε μεγαλώνει ο κώδικας του css.
O κώδικας για αλλαγή εικόνας πηγαίνοντας το κέρσορα είναι για παράδειγμα:
για την Αρχική, εσυ το έχεις ειδήσεις...
Η απόφαση δική σου...
- Κώδικας:
.mainmenu > img:hover {
opacity: 0.7;
}
Αν θέλεις να αλλάζει η εικόνα τότε ακόμα χειρότερα γίνεται η δουλεια, διότι όπως είπα παραπάνω κοιτάμε τι λειτουργικότητα, αυτό σημαίνει πως βάζοντας εικόνες τότε μεγαλώνει ο κώδικας του css.
O κώδικας για αλλαγή εικόνας πηγαίνοντας το κέρσορα είναι για παράδειγμα:
- Κώδικας:
#i_icon_mini_portal:hover
για την Αρχική, εσυ το έχεις ειδήσεις...
Η απόφαση δική σου...
Επισκέπτης- Επισκέπτης
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
Αν αφαιρέσω τις εικόνες για να το δουλέψω με CSS πως θα είναι, να έχει γράμματα μόνο??
Ωραίο το hover, και έτσι μου αρέσει.
Για να δοκιμάσω και τις εικόνες τις εναλλακτικές που έφτιαξα είπες είναι:
"Κώδικας:Επιλογή Περιεχομένου
για την Αρχική, εσυ το έχεις ειδήσεις..."
το ότι το μετονόμασα σε "Ειδήσεις"¨επιρεάζει κάπου τον κώδικα?
Μπορείς να μου πεις με ποιον τρόπο θα μπορούσα να χρησιμοποιήσω τον κώδικα για να τον δοκιμάσω??
Θα αργεί πολύ το site εννοείς αν δουλέψω με εικόνες?
ευχαριστώ!
Ωραίο το hover, και έτσι μου αρέσει.
Για να δοκιμάσω και τις εικόνες τις εναλλακτικές που έφτιαξα είπες είναι:
"Κώδικας:Επιλογή Περιεχομένου
- Κώδικας:
#i_icon_mini_portal:hover
για την Αρχική, εσυ το έχεις ειδήσεις..."
το ότι το μετονόμασα σε "Ειδήσεις"¨επιρεάζει κάπου τον κώδικα?
Μπορείς να μου πεις με ποιον τρόπο θα μπορούσα να χρησιμοποιήσω τον κώδικα για να τον δοκιμάσω??
Θα αργεί πολύ το site εννοείς αν δουλέψω με εικόνες?
ευχαριστώ!
Gunman- Eνεργό Μέλος
- Δημοσιεύσεις : 287
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
Ναι αν το δουλέψεις με εικόνες θα αργεί μελλοντικά, όταν έχεις γεμίσει με διάφορους κώδικες τη σελίδα τότε και η κάθε λεπτομέρεια θα παίζει το ρόλο της. Αν τσεκάρεις για παράδειγμα στη δική μου σελίδα είναι με css...
το ότι το μετονόμασα σε "Ειδήσεις"¨επιρεάζει κάπου τον κώδικα?
οχι
το ότι το μετονόμασα σε "Ειδήσεις"¨επιρεάζει κάπου τον κώδικα?
οχι
Επισκέπτης- Επισκέπτης
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
Μπορεις να μου πεις πως χρησιμοποιώ το
Η διαδικασία να φτιάξεις μπάρα όπως η δική σου με CSS είναι δύσκολη?
Αν τα κάνω css με τα εικονίδια της γραμμής πλοήγησης τί γίνεται για να μην επιβαρύνουν το site? απλά σβήνω τα links για να μην τα φορτώνει?
- Κώδικας:
#i_icon_mini_portal:hover
Η διαδικασία να φτιάξεις μπάρα όπως η δική σου με CSS είναι δύσκολη?
Αν τα κάνω css με τα εικονίδια της γραμμής πλοήγησης τί γίνεται για να μην επιβαρύνουν το site? απλά σβήνω τα links για να μην τα φορτώνει?
Gunman- Eνεργό Μέλος
- Δημοσιεύσεις : 287
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
Πας στο Αρχική σελίδα - Πάνω μέρος της σελίδας & Πλοήγηση
Και στη συνεχεια δοκίμασε ένα γρήγορο μενού που σου έκανα...
Όσο αν θέλεις με εικόνες αφου δοκιμάσεις αυτό που σου έδωσα μου λές αν θέλεις τις εικόνες...
Και στη συνεχεια δοκίμασε ένα γρήγορο μενού που σου έκανα...
- Κώδικας:
.mainmenu {
background: #fbfbfb none repeat scroll 0 0;
border: 1px solid #777;
border-radius: 3px;
box-shadow: 0 0 2px #777;
font-family: comic sans ms;
font-size: 16px !important;
margin: 2px;
padding: 3px 6px 10px;
}
- Κώδικας:
.mainmenu:hover {
box-shadow: 0 0px 3px inset;
}
Όσο αν θέλεις με εικόνες αφου δοκιμάσεις αυτό που σου έδωσα μου λές αν θέλεις τις εικόνες...
Επισκέπτης- Επισκέπτης
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
Αυτή τη στιγμή το pc κολάει απίστευτα, πρέπει να έχει και 2-3 spyware θέλει καθάρισμα, και η σύνδεση επίσης σέρνεται τώρα οπότε δεν μπορώ να καταλάβω διαφορά στην απόκριση οπότε δεν μπορώ να καταλάβω τοιχόν οφέλη.
Το δοκίμασα πάντως.
Αν θες πες μου και πως βάζω τις εικόνες και όταν φορτώσει το css μου με πολλά και διάφορα μπορεί να ανατρέξω στο θέμα και να βάλω στην CSS μπάρα.
Το δοκίμασα πάντως.
Αν θες πες μου και πως βάζω τις εικόνες και όταν φορτώσει το css μου με πολλά και διάφορα μπορεί να ανατρέξω στο θέμα και να βάλω στην CSS μπάρα.
Gunman- Eνεργό Μέλος
- Δημοσιεύσεις : 287
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
παιδιά μππορείτε να μου πείτε πως χρησιμοποιώ στην πράξη το
για να αλλάζουν τα εικονίδια της πάνω μπάρας όταν περνάει ο κέρσορας από πάνω τους.
- Κώδικας:
#i_icon_mini_portal:hover
για να αλλάζουν τα εικονίδια της πάνω μπάρας όταν περνάει ο κέρσορας από πάνω τους.
Gunman- Eνεργό Μέλος
- Δημοσιεύσεις : 287
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
- Κώδικας:
#i_icon_mini_portal:hover
{background-image: url("εικονα");
}
Για τα υπόλοιπα θα κάνεις τι ίδιο
i_icon_mini_index
i_icon_mini_register
i_icon_mini_login
Επισκέπτης- Επισκέπτης
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
Όταν κάνω hover φαίνεται οτι μάλλον αλλάζει η εικόνα (εμφανίζεται άσπρο φόντο στις άκρες της εικόνας, αλλά παραμένει η ίδια.)
Μήπως αλλάζει αλλά την "καπακώνει" η τωρινή photo?
Επίσης για hover στο εικονίδιο του logout και του no message τί γράφω?
Μήπως αλλάζει αλλά την "καπακώνει" η τωρινή photo?
Επίσης για hover στο εικονίδιο του logout και του no message τί γράφω?
Gunman- Eνεργό Μέλος
- Δημοσιεύσεις : 287
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
Θα πρέπει να σβήσεις τις εικόνες και να τις βάλεις στο css.
Παράδειγμα:
Παράδειγμα:
- Κώδικας:
img#i_icon_mini_portal {
background: url("https://c1.staticflickr.com/1/487/18775240060_3da8aeb828_o.png");
}
img#i_icon_mini_portal:hover {
background: url("https://c1.staticflickr.com/1/554/18957860392_6136798e69_o.png");
}
Επισκέπτης- Επισκέπτης
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
για την αποσύνδεση τί γράφω?? το logout δεν ποιάνει..
Gunman- Eνεργό Μέλος
- Δημοσιεύσεις : 287
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
Μήπως είναι i_icon_mini_logout ???
Επισκέπτης- Επισκέπτης
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
Καλησπέρα @Gunman,
Αν δεν σου πιάνει τον κώδικα όπως στον έδωσε ο Paulos με την ονομασία της εντολής να είναι αυτή που σου υπέδειξε πιο πάνω δοκίμασε να προσθέσεις το
Δηλαδή:
Luffy
Αν δεν σου πιάνει τον κώδικα όπως στον έδωσε ο Paulos με την ονομασία της εντολής να είναι αυτή που σου υπέδειξε πιο πάνω δοκίμασε να προσθέσεις το
!important
στον κώδικα εντός της εντολής. Κάποιες φορές το χρειάζεται αυτό για να τα διαβάζει γιατί υπερισχύουν οι αρχικές ρυθμίσεις. Δηλαδή:
- Κώδικας:
img#i_icon_mini_logout {
background: url("Image URL HERE") !important;
}
img#i_icon_mini_logout:hover {
background: url("Image URL HERE") !important;
}
Luffy
Luffy- Διαχειριστής
-
Τόπος : Ελλάδα
Δημοσιεύσεις : 2340
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
Λοιπόν.. έχω εμφάνιση στην πάνω μπάρα μόνο εικόνες (νομίζω είναι οκ αυτό)
Έχω σβήσει μόνο το εικονίδιο της αποσύνδεσης και τα άλλα τα άφησα να τα τραβάει μέσα από το σύστημα όχι το css.
και τέλος πρόσθεσα στο css μόνο αυτό:
αλλά συνεχίζει να μην ποιάνει..
Έχω σβήσει μόνο το εικονίδιο της αποσύνδεσης και τα άλλα τα άφησα να τα τραβάει μέσα από το σύστημα όχι το css.
και τέλος πρόσθεσα στο css μόνο αυτό:
- Κώδικας:
img#i_icon_mini_logout {
background: url("https://c1.staticflickr.com/1/317/18938483696_8ff4a61b7a_t.jpg") !important;
}
img#i_icon_mini_logout:hover {
background: url("https://c1.staticflickr.com/1/453/18888588038_a02f3d195b_t.jpg") !important;
}
αλλά συνεχίζει να μην ποιάνει..
Gunman- Eνεργό Μέλος
- Δημοσιεύσεις : 287
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
Καλησπέρα @Gunman,
Από όσο είδα με βάση τον δικό μου υπολογιστή όλα δουλεύουν κανονικά. Εξακολουθεί να υπάρχει το πρόβλημα;
Από όσο είδα με βάση τον δικό μου υπολογιστή όλα δουλεύουν κανονικά. Εξακολουθεί να υπάρχει το πρόβλημα;
Luffy- Διαχειριστής
-
Τόπος : Ελλάδα
Δημοσιεύσεις : 2340
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
τα αντικατέστησα με png, αλλά το logout icon ακόμα δεν λειτουργεί, απλά αλλάζει το opacity από την εντολή hover που είχα, αλλά η εικόνα δεν αλλάζει στην καινούργια που του λέω μέσω της εντολής
Ορίστε και όλο το css μου
- Κώδικας:
img#i_icon_mini_logout {
background: url("https://c1.staticflickr.com/1/317/18938483696_f0e395d25d_o.png") !important;
}
img#i_icon_mini_logout:hover {
background: url("https://c1.staticflickr.com/1/453/18888588038_07b14b1d91_o.png") !important;
}
Ορίστε και όλο το css μου
- Κώδικας:
a.mainmenu[href="/faq"] {
display: none;
}
a.mainmenu[href="/groups"] {
display: none;
}
a.mainmenu[href="/gallery/index.htm"] {
display: none;
}
a.mainmenu[href="/search"] {
display: none;
}
#logo-desc > p {
display: none;
}
.headerbar {
background: url(https://c1.staticflickr.com/1/407/18909772776_c39eb2783d_o.png) repeat-x !important;
}
.postprofile {
width: 16% !important;
}
.postbody {
width: 82% !important;
}
.mainmenu > img:hover {
opacity: 0.7;
}
#logo img {
height: 100px;
width: 650px;
}
.LGlike {
background: #85c9c7;
border-radius: 3px;
box-shadow: 1px 1px 1px #888;
color: #e8e8e8;
cursor: pointer;
font-size: 12px;
font-weight: 700;
margin: -80px 0px 0px 1200px !important;
padding: 5px;
position: absolute;
text-shadow: -1px .5px #888;
}
.LGlike:hover {opacity: 0.7;}
.LGvote { margin: 0 5px;
fotn-size: 6px;}
.LGnovote {
filter:Alpha(opacity=50);
opacity: 0.2;
cursor: default;
box-shadow: none;
text-shadow: none;
}
.LGnovote:hover {opacity:0.3;}
.postmain {position:relative;}
.LGvote{position:relative;
right:2%;
top:48px;
}
.LGlikecount {
position: absolute;
font-size: 10px;
font-weight: 700;
margin: -74px 0px 0px 1315px!important;
opacity: .5;
}
img#i_icon_mini_logout {
background: url("https://c1.staticflickr.com/1/317/18938483696_f0e395d25d_o.png") !important;
}
img#i_icon_mini_logout:hover {
background: url("https://c1.staticflickr.com/1/453/18888588038_07b14b1d91_o.png") !important;
}
Gunman- Eνεργό Μέλος
- Δημοσιεύσεις : 287
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
Θα πρέπει να αφαιρέσεις και την εικόνα που έχεις μέσα στπν CP (Πίνακα Ελέγχου).
Επισκέπτης- Επισκέπτης
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
Αφαίρεσα και την εικόνα του Logout από το CP και απλά σβήνει την εικόνα του logout και δεν δείχνει τίποτα.
Gunman- Eνεργό Μέλος
- Δημοσιεύσεις : 287
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
@Gunman υπάρχει κάποια νέα πληροφορία σχετικά με αυτό;
Μπορείς να μας περιγράψεις γενικώς το πρόβλημα που παραμένει;
Μπορείς να μας περιγράψεις γενικώς το πρόβλημα που παραμένει;
Luffy- Διαχειριστής
-
Τόπος : Ελλάδα
Δημοσιεύσεις : 2340
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
Η κατάσταση παραμένει η ίδια.
Ορίστε το css μου:
Αν σβήσω την εικόνα του logout από τα μενού των εικόνων, απλά δεν εμφανίζει καμιά εικόνα για Logout.
Ορίστε το css μου:
- Κώδικας:
a.mainmenu[href="/faq"] {
display: none;
}
a.mainmenu[href="/groups"] {
display: none;
}
a.mainmenu[href="/gallery/index.htm"] {
display: none;
}
a.mainmenu[href="/search"] {
display: none;
}
#logo-desc > p {
display: none;
}
.headerbar {
background: url(https://c1.staticflickr.com/1/407/18909772776_c39eb2783d_o.png) repeat-x !important;
}
.postprofile {
width: 16% !important;
}
.postbody {
width: 82% !important;
}
.mainmenu > img:hover {
opacity: 0.7;
}
#logo img {
height: 100px;
width: 650px;
}
.LGlike {
background: #85c9c7;
border-radius: 3px;
box-shadow: 1px 1px 1px #888;
color: #e8e8e8;
cursor: pointer;
font-size: 12px;
font-weight: 700;
margin: -80px 0px 0px 1000px !important;
padding: 5px;
position: absolute;
text-shadow: -1px .5px #888;
}
.LGlike:hover {opacity: 0.7;}
.LGvote { margin: 0 5px;
fotn-size: 6px;}
.LGnovote {
filter:Alpha(opacity=50);
opacity: 0.2;
cursor: default;
box-shadow: none;
text-shadow: none;
}
.LGnovote:hover {opacity:0.3;}
.postmain {position:relative;}
.LGvote{position:relative;
right:2%;
top:48px;
}
.LGlikecount {
position: absolute;
font-size: 10px;
font-weight: 700;
margin: -74px 0px 0px 1115px!important;
opacity: .5;
}
img#i_icon_mini_logout {
background: url("https://c1.staticflickr.com/1/317/18938483696_f0e395d25d_o.png") !important;
}
img#i_icon_mini_logout:hover {
background: url("https://c1.staticflickr.com/1/453/18888588038_07b14b1d91_o.png") !important;
}
.content.clearfix > div a {
color: #496fe3 !important;
}
.content.clearfix > div a:hover {
color: #6384e6 !important;
}
.content.clearfix > div a:active{
color: #b02b27 !important;
}
.content.clearfix > div a:visited {
color: #f5aa13!important;
}
Αν σβήσω την εικόνα του logout από τα μενού των εικόνων, απλά δεν εμφανίζει καμιά εικόνα για Logout.
Gunman- Eνεργό Μέλος
- Δημοσιεύσεις : 287
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
Και τι αλλαγή θες να γίνεται στην εικόνα του Logout. Επειδή απ' όσο βλέπω μπορείς να κάνεις τις αλλαγές που θέλεις από τον ΠΔ.
Luffy- Διαχειριστής
-
Τόπος : Ελλάδα
Δημοσιεύσεις : 2340
Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας
Θέλω όταν κάνω hover να μου εμφανίζει την άλλη εικόνα που έφτιαξα.
Αυτή
https://c1.staticflickr.com/1/453/18888588038_07b14b1d91_o.png
Αυτή
https://c1.staticflickr.com/1/453/18888588038_07b14b1d91_o.png
Gunman- Eνεργό Μέλος
- Δημοσιεύσεις : 287
Σελίδα 1 από 2 • 1, 2
Παρόμοια θέματα
» Αλλαγή μπάρας προειδοποιήσεων
» Συνεχής εμφάνιση της μπάρας πλοήγησης (sticky navbar)
» κουμπί προς τα πάνω
» Πως βγάζουμε τα -------- πάνω από την υπογραφη
» τιτλος πεφτει πανω απο τον αλλο
» Συνεχής εμφάνιση της μπάρας πλοήγησης (sticky navbar)
» κουμπί προς τα πάνω
» Πως βγάζουμε τα -------- πάνω από την υπογραφη
» τιτλος πεφτει πανω απο τον αλλο
Ελληνική Κοινότητα Υποστήριξης ForumGreek :: ΤΟΜΕΑΣ ΥΠΟΣΤΗΡΙΞΗΣ :: Βοήθεια για Σχεδίαση Φόρουμ & Εμφάνιση :: Αρχείο Βοήθειας για Σχεδίαση Φόρουμ & Εμφάνισης
Σελίδα 1 από 2
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης
|
|