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

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

Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Σελίδα 1 από 2 1, 2  Επόμενο

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

Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Gunman Την / Το Παρ Ιουν 19, 2015 3:07 am

Γεια χαρά παιδιά!
Ξεκίνησα να σχεδιάζω μερικά εικονίδια για την πάνω μπάρα και ήθελα να ρωτήσω πως θα μπορούσα να τα κάνω λίγο interactive.

Θέλω όταν περνάει από πάνω ο κέρσορας να αλλάζει το χρώμα τους...
Μπορώ να σχεδιάσω τα ίδια εικονίδια με άλλο φόντο, θα ήταν το ιδανικό έτσι ωστε να αλλάζει μόνο το χρώμα του φόντου τους.

Gunman
Eνεργό Μέλος

Δημοσιεύσεις : 250

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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Van-Helsing Την / Το Παρ Ιουν 19, 2015 3:20 pm

Καλησπέρα @Gunman,
Αν θέλεις να αλλάζουν φόντο οι εικόνες θα πρέπει να έχεις φτιάξει πρώτα και δεύτερες εναλλακτικές με άλλο φόντο και μετά με το CSS μπορούμε να το φτιάξουμε. Αν απλά θέλεις να εφαρμόσεις εφέ στις επιλογές του μενού γίνεται πολύ εύκολα αυτό με CSS.







Van-Helsing
Διαχειριστής

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

Άντρας
Ηλικία : 42
Δημοσιεύσεις : 1670

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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Gunman Την / Το Παρ Ιουν 19, 2015 7:37 pm

Ωραία! Φτιάχνω τώρα τα ενναλακτικά εικονίδια για να τα βάλω να εμφανίζονται όταν περνά ο κέρσορας από πάνω.. 
Μήπως μπορείς να μου πεις τον κώδικα?
Ευχαριστώ!

Gunman
Eνεργό Μέλος

Δημοσιεύσεις : 250

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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Επισκέπτης Την / Το Σαβ Ιουν 20, 2015 6:21 pm

Επείδη μαρέσει να κοιτάω τη λειτουργικότητα σε μια σελίδα και όχι την εμφάνιση καλά είναι να αφαιρέσεις τις εικόνες και να το δουλέψεις με css. Ένας απλός κώδικας hover είναι ο παρακάτω.

Κώδικας:
.mainmenu > img:hover {
    opacity: 0.7;
}

Αν θέλεις να αλλάζει η εικόνα τότε ακόμα χειρότερα γίνεται η δουλεια, διότι όπως είπα παραπάνω κοιτάμε τι λειτουργικότητα, αυτό σημαίνει πως βάζοντας εικόνες τότε μεγαλώνει ο κώδικας του css.

O κώδικας για αλλαγή εικόνας πηγαίνοντας το κέρσορα είναι για παράδειγμα:

Κώδικας:
#i_icon_mini_portal:hover

για την Αρχική, εσυ το έχεις ειδήσεις...

Η απόφαση δική σου...




Επισκέπτης
Επισκέπτης


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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Gunman Την / Το Σαβ Ιουν 20, 2015 7:12 pm

Αν αφαιρέσω τις εικόνες για να το δουλέψω με CSS πως θα είναι, να έχει γράμματα μόνο??

Ωραίο το hover, και έτσι μου αρέσει.

Για να δοκιμάσω και τις εικόνες τις εναλλακτικές που έφτιαξα είπες είναι:

"Κώδικας:Επιλογή Περιεχομένου
Κώδικας:
#i_icon_mini_portal:hover


για την Αρχική, εσυ το έχεις ειδήσεις..."

το ότι το μετονόμασα σε "Ειδήσεις"¨επιρεάζει κάπου τον κώδικα?

Μπορείς να μου πεις με ποιον τρόπο θα μπορούσα να χρησιμοποιήσω τον κώδικα για να τον δοκιμάσω??
Θα αργεί πολύ το site εννοείς αν δουλέψω με εικόνες?

ευχαριστώ!

Gunman
Eνεργό Μέλος

Δημοσιεύσεις : 250

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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Επισκέπτης Την / Το Σαβ Ιουν 20, 2015 7:38 pm

Ναι αν το δουλέψεις με εικόνες θα αργεί μελλοντικά, όταν έχεις γεμίσει με διάφορους κώδικες τη σελίδα τότε και η κάθε λεπτομέρεια θα παίζει το ρόλο της. Αν τσεκάρεις για παράδειγμα στη δική μου σελίδα είναι με css...

το ότι το μετονόμασα σε "Ειδήσεις"¨επιρεάζει κάπου τον κώδικα?

οχι


Επισκέπτης
Επισκέπτης


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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Gunman Την / Το Σαβ Ιουν 20, 2015 7:49 pm

Μπορεις να μου πεις πως χρησιμοποιώ το
Κώδικας:
#i_icon_mini_portal:hover
??


Η διαδικασία να φτιάξεις μπάρα όπως η δική σου με CSS είναι δύσκολη?
Αν τα κάνω css με τα εικονίδια της γραμμής πλοήγησης τί γίνεται για να μην επιβαρύνουν το site? απλά σβήνω τα links για να μην τα φορτώνει?

Gunman
Eνεργό Μέλος

Δημοσιεύσεις : 250

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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Επισκέπτης Την / Το Σαβ Ιουν 20, 2015 8:04 pm

Πας στο Αρχική σελίδα - Πάνω μέρος της σελίδας & Πλοήγηση



Και στη συνεχεια δοκίμασε ένα γρήγορο μενού που σου έκανα...

Κώδικας:
.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;
}

Όσο αν θέλεις με εικόνες αφου δοκιμάσεις αυτό που σου έδωσα μου λές αν θέλεις τις εικόνες...




Επισκέπτης
Επισκέπτης


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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Gunman Την / Το Σαβ Ιουν 20, 2015 8:23 pm

Αυτή τη στιγμή το pc κολάει απίστευτα, πρέπει να έχει και 2-3 spyware θέλει καθάρισμα, και η σύνδεση επίσης σέρνεται τώρα οπότε δεν μπορώ να καταλάβω διαφορά στην απόκριση οπότε δεν μπορώ να καταλάβω τοιχόν οφέλη.
Το δοκίμασα πάντως.
Αν θες πες μου και πως βάζω τις εικόνες και όταν φορτώσει το css μου με πολλά και διάφορα μπορεί να ανατρέξω στο θέμα και να βάλω στην CSS μπάρα.

Gunman
Eνεργό Μέλος

Δημοσιεύσεις : 250

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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Gunman Την / Το Δευ Ιουν 22, 2015 9:13 am

παιδιά μππορείτε να μου πείτε πως χρησιμοποιώ στην πράξη το
Κώδικας:
#i_icon_mini_portal:hover

για να αλλάζουν τα εικονίδια της πάνω μπάρας όταν περνάει ο κέρσορας από πάνω τους.

Gunman
Eνεργό Μέλος

Δημοσιεύσεις : 250

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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Επισκέπτης Την / Το Δευ Ιουν 22, 2015 8:25 pm

Κώδικας:
#i_icon_mini_portal:hover
{background-image: url("εικονα");
}

Για τα υπόλοιπα θα κάνεις τι ίδιο

i_icon_mini_index

i_icon_mini_register

i_icon_mini_login

Επισκέπτης
Επισκέπτης


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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Gunman Την / Το Τρι Ιουν 23, 2015 10:23 am

Όταν κάνω hover φαίνεται οτι μάλλον αλλάζει η εικόνα (εμφανίζεται άσπρο φόντο στις άκρες της εικόνας, αλλά παραμένει η ίδια.)
Μήπως αλλάζει αλλά την "καπακώνει" η τωρινή photo?

Επίσης για hover στο εικονίδιο του logout και του no message τί γράφω?

Gunman
Eνεργό Μέλος

Δημοσιεύσεις : 250

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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Επισκέπτης Την / Το Τρι Ιουν 23, 2015 11:09 pm

Θα πρέπει να σβήσεις τις εικόνες και να τις βάλεις στο 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");
}

Επισκέπτης
Επισκέπτης


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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Gunman Την / Το Τετ Ιουν 24, 2015 11:31 pm

για την αποσύνδεση τί γράφω?? το logout δεν ποιάνει..

Gunman
Eνεργό Μέλος

Δημοσιεύσεις : 250

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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Επισκέπτης Την / Το Τετ Ιουν 24, 2015 11:55 pm

Μήπως είναι i_icon_mini_logout ???

Επισκέπτης
Επισκέπτης


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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Luffy Την / Το Πεμ Ιουν 25, 2015 12:17 am

Καλησπέρα @Gunman,

Αν δεν σου πιάνει τον κώδικα όπως στον έδωσε ο Paulos με την ονομασία της εντολής να είναι αυτή που σου υπέδειξε πιο πάνω δοκίμασε να προσθέσεις το
!important
στον κώδικα εντός της εντολής. Κάποιες φορές το χρειάζεται αυτό για να τα διαβάζει γιατί υπερισχύουν οι αρχικές ρυθμίσεις. Wink
Δηλαδή:
Κώδικας:
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
Διαχειριστής

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

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

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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Gunman Την / Το Πεμ Ιουν 25, 2015 8:05 am

Λοιπόν.. έχω εμφάνιση στην πάνω μπάρα μόνο εικόνες (νομίζω είναι οκ αυτό)
Έχω σβήσει μόνο το εικονίδιο της αποσύνδεσης και τα άλλα τα άφησα να τα τραβάει μέσα από το σύστημα όχι το 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;
}


αλλά συνεχίζει να μην ποιάνει..  Sad

Gunman
Eνεργό Μέλος

Δημοσιεύσεις : 250

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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Luffy Την / Το Σαβ Ιουλ 04, 2015 2:38 pm

Καλησπέρα @Gunman,

Από όσο είδα με βάση τον δικό μου υπολογιστή όλα δουλεύουν κανονικά. Εξακολουθεί να υπάρχει το πρόβλημα;



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

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

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

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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Gunman Την / Το Κυρ Ιουλ 05, 2015 4:10 pm

τα αντικατέστησα με png, αλλά το logout icon ακόμα δεν λειτουργεί, απλά αλλάζει το opacity από την εντολή hover που είχα, αλλά η εικόνα δεν αλλάζει στην καινούργια που του λέω μέσω της εντολής

Κώδικας:
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νεργό Μέλος

Δημοσιεύσεις : 250

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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Επισκέπτης Την / Το Κυρ Ιουλ 05, 2015 7:15 pm

Θα πρέπει να αφαιρέσεις και την εικόνα που έχεις μέσα στπν CP (Πίνακα Ελέγχου).

Επισκέπτης
Επισκέπτης


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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Gunman Την / Το Σαβ Ιουλ 11, 2015 12:57 am

Αφαίρεσα και την εικόνα του Logout από το CP και απλά σβήνει την εικόνα του logout και δεν δείχνει τίποτα.

Gunman
Eνεργό Μέλος

Δημοσιεύσεις : 250

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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Luffy Την / Το Τετ Ιουλ 15, 2015 4:43 pm

@Gunman υπάρχει κάποια νέα πληροφορία σχετικά με αυτό;
Μπορείς να μας περιγράψεις γενικώς το πρόβλημα που παραμένει;



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

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

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

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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Gunman Την / Το Τετ Ιουλ 15, 2015 9:30 pm

Η κατάσταση παραμένει η ίδια.

Ορίστε το 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νεργό Μέλος

Δημοσιεύσεις : 250

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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Luffy Την / Το Πεμ Ιουλ 16, 2015 12:30 am

Και τι αλλαγή θες να γίνεται στην εικόνα του Logout. Επειδή απ' όσο βλέπω μπορείς να κάνεις τις αλλαγές που θέλεις από τον ΠΔ.



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

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

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

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

Απ: Αλλαγή χρώμματος εικονιδίων πάνω μπάρας

Δημοσίευση από Gunman Την / Το Δευ Ιουλ 20, 2015 11:50 pm

Θέλω όταν κάνω hover να μου εμφανίζει την άλλη εικόνα που έφτιαξα.
Αυτή
https://c1.staticflickr.com/1/453/18888588038_07b14b1d91_o.png

Gunman
Eνεργό Μέλος

Δημοσιεύσεις : 250

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

Σελίδα 1 από 2 1, 2  Επόμενο

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


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