Διαμόρφωση της toolbar

Να μαι πάλι
Θα ήθελα να ρωτήσω αν θα μπορούσα να διαμορφώσω κάπως την πάνω μπάρα όπως την δική σας?
Δεν έχω αγοράσει credits για να αλλάξω το αριστερό εικονίδιο και το link, αλλά θέλω να ρωτήσω αν μπορώ να πειράξω το εικονίδιο του search και να το κάνω αναδυόμενο όπως εσείς και με άλλο εικονίδιο.
Και επίσης αν γίνεται να αφήσω όσα από τα κουμπιά θέλω εγώ.(πχ μόνο facebook και rss) και να τους βάλω ότι εικονίδια θέλω όπως εσείς με παρόμοιο εφέ.. 

@Gunman δοκίμασε να κάνεις τις εμφανισιακές αλλαγές της μπάρας σου με βάση αυτόν τον οδηγό.

Ευχαριστώ @Luffy τον χρησιμοποιώ τον οδηγό..

Πως μπορώ να κάνω το πεδίο της αναζήτησης αναδυόμενο όπως εδώ??
Και επίσης πως μπορώ να αντικαταστήσω να εικονίδια από το facebook tweeter κλπκλπ?

Ο οδηγός αναφέρει πως να τα σβήσω όλα τα εικονίδια αλλά εγώ θέλω να σβήσω μερικά.google plus και tweeter πχ. πως γίνεται?? 

ευχαριστώ πολύ

edit:επίσης πως μπορώ να εμφανίσω πάνω στην μπάρα εικόνα του profile μας?? όπως εδώ.

Kαλημέρα @Gunman,

Προκειμένου να κάνεις την αναζητηση στην toolbar αναδυόμενη όπως εδώ πρέπει να ορίσεις ένα javascript προκειμένου οι μεταβλητές που της ορίσεις να αλλάξουν όπως τις θες. Δηλαδή βάζεις αυτό το javascript τοποθετημένο Σε όλες τις σελίδες:

Κώδικας:

// Αναδυομενη αναζητηση στην toolbar
$(function(){$(function(){
  var area = document.getElementById('fa_textarea');
 
  if (area) {
    if (area.setAttribute) area.setAttribute('style', 'text-indent:0px !important;'); // remove indentation
   
    // κειμενο αναζητησης !! :D
    // αντικαταστηστε ολα τα 'Αναζητηση...' με αυτο που θελετε να φαινεται.
    area.value = 'Αναζήτηση...';
    area.onclick = function() { if (this.value == 'Αναζήτηση...') this.value = '' };
    area.onblur = function() { if (!this.value) this.value = 'Αναζήτηση...' };
   
    // αναζητηση οταν πατησετε το κουμπι αναζητησης
    document.getElementById('fa_magnifier').onclick = function() { this.parentNode.submit() };
  }
})});

και αυτό στο CSS σου:

Κώδικας:

#fa_search #fa_textarea {
    background: #000!important; /*Χρώμα φόντου*/
    border: 1px solid #000!important; /*Χρώμα περιγράμματος*/
    border-radius: 3px 0 0 3px!important;
    color: #FFF!important; /*χρώμα κειμένου*/
    cursor: text;
    font-size: 12px!important;
    height: 16px!important;
    line-height: 12px!important;
    margin-right: 23px!important;
    padding: 3px 0 3px 1px !important;
    transition: 300ms;
    width: 0!important;
}
#fa_search #fa_textarea:focus, #fa_search #fa_textarea:hover, #fa_search:hover #fa_textarea {
    background: #FFF!important; /*Χρώμα φόντου*/
    color: #444!important; /*Χρώμα γραμμάτων στην αναζήτηση*/
    outline: none;
    padding: 3px!important;
    width: 150px!important;
}

Τώρα για το avatar στην toolbar υπάρχουν πολλά js όπου μπορείς να το κάνεις αυτό.
Ένας από αυτούς είναι να προσθέσεις σε ένα νέο javascript τοποθτεημένο Σε όλες τις σελίδες με τον εξής κώδικα:

Κώδικας:

$(function(){$(function(){$('#fa_welcome').prepend('<span class="fa_avatar">'+_userdata.avatar+'</span>')})});

και το εξής CSS:

Κώδικας:

.fa_avatar img {
  width:25px;
  height:25px;
  margin-right:5px;
  margin-bottom:-6px;
  -webkit-border-radius:3px;
    -moz-border-radius:3px;
          border-radius:3px;
}

Όσο για τα εικονίδια του Facebook κλπ μπορείς να τα αλλάξεις μέσω του οδηγού που σου είπα. Εκεί ορίζουμε ξεκάθαρα ποιές είναι οι μεταβλητές του. Ορίζοντας την εικόνα του αναφερθέντος εικονιδίου μετά μπορείς να κάνεις οποιαδήποτε αλλαγή σε αυτά μέσω του CSS.
Για να αλλάξεις την εικόνα του κάθε εικονιδίου χρησιμοποιείς τον εξής κώδικα:

Κώδικας:

background: url(LINK εικόνας εδώ...) no-repeat!important;

Mε αυτό αντικαθιστάς την εικόνα και με τις εντολές του οδηγού μπορείς μετά να κάνεις οποιοδήποτε εφέ θες χρησιμοποιώντας τις μεταβλητές :hover, :active, :focus, :visited.


Luffy

ευχαριστώ πολύ @Luffy!

Μια ερώτηση.. Το μήνυμα το έκανα "    Αναζήτηση...", ώστε να υπάρχουν κενά και να μην φαίνεται κάτω από το μικροσκόπιο η λέξη. Αλλά όταν πάω να γράψω κάτι φαίνεται από κάτω.
Μπορείς να μου πεις με ποια εντολή κάνει hover? προς τα δεξιά όπως εδώ?
Και αν δεις την σελίδα μου εμφανίζει μία "άσχημη" bold κάθετο εκεί που ξεκινάει το search, μπορεί να αλλάξει??

ευχαριστώ


edit: τώρα που έγινε αναδυόμενο και μαζεύτηκε αριστερά, ήρθαν και πιο αριστερά τα εικονίδια του "Μοιραστείτε" και πηγαινοέρχονται όταν κάνω hover στην αναζήτηση.
Υπάρχει τρόπος να τα κάνω στοίχηση στο κέντρο και να μην μετακινούνται δεξιά-αριστερά?

Καλησπέρα @Gunman
Πίνακας Διαχείρισης ► Εμφάνιση ► Εικόνες και χρώματα ► Χρώματα ► CSS Stylesheet

και βρίσκεις το:

Κώδικας:


#fa_share {
    margin-left: 20px;
    font-size: 16px;
    line-height: 30px !important;
}


αυτό θα σου κεντράρει τα εικονίδια.
και το αλλάζεις σε:

Κώδικας:


#fa_share {
    margin-left: 300px;
    font-size: 16px;
    line-height: 30px !important;
}


@Gunman, όταν μπορέσεις επανάφερε τον κώδικα όπως ήταν πριν και ενημέρωσέ με να του ρίξω μια ματιά να δούμε το πρόβλημα.

@Van-Helsing δεν υπάρχει αυτό το κομμάτι στον κώδικά μου, αλλά έβαλα αυτό που είπες το αλλαγμένο και φαίνεται το ίδιο.
@Luffy  Το μόνο που έχω πειράξει είναι στον κώδικα του java που έβαλα μερικά κενά πριν την λέξη αναζήτηση. Και επίσης πρόσθεσα το java που μου έδωσες για το αναδυόμενο και το εικονίδιο του profile.

@Gunman τώρα δηλαδή ποιό είναι το ακριβής πρόβλημα;; Τι πρέπει να φτιαχτεί; Γιατί εγώ το βλέπω κανονικά να δουλεύει..

@Luffy  Το #fa_search #fa_textarea  αν το βάλω margin left 300 px πάει στο κέντρο όπως θέλω, και όταν κάνω hover στο παράθυρο της αναζήτησης, ενώ το #fa_search #fa_textarea  δεν ενοχλεί, πηγαίνει πιο δεξιά.

Μπορώ να το κάνω να είναι σταθερά στα pixel που θέλω και να μην επιρεάζεται με το αν κάνω hover στην αναζήτηση ή όχι?

Γεια σου @Gunman,

Για το Μοιραστείτε λες έτσι; Αυτό δεν μπορείς να το σταθεροποιήσεις γιατί όσο είναι αναδυόμενο το παράθυρο τότε θα κουνιέται..

Luffy έγραψε:Γεια σου @Gunman,

Για το Μοιραστείτε λες έτσι; Αυτό δεν μπορείς να το σταθεροποιήσεις γιατί όσο είναι αναδυόμενο το παράθυρο τότε θα κουνιέται..

@Luffy κρίμα.. ας κλειδώσει τότε... ευχαριστώ!