Τροποποιήστε την Toolbar χρησιμοποιώντας CSS

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

fa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS Empty Τροποποιήστε την Toolbar χρησιμοποιώντας CSS

Δημοσίευση από Luffy Κυρ Ιουν 21, 2015 12:27 am

Τροποποιήστε την Toolbar χρησιμοποιώντας CSS

Με αυτό τον οδηγό θα μάθετε πως να αλλάζετε τροποποιήσετε την Toolber της ForumGreek όπως θέλετε εσείς χρησιμοποιώντας CSS.

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

fa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS 09615110Στοιχεία της Toolbar

#fa_toolbarΟλόκληρο το toolbar
#fa_search / #fa_textareafa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS 6CTqC4W
#fa_magnifierfa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS QVYqbew
#fa_sharefa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS FCPUVzl
#fa_share_textfa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS SMmOenc
#fa_fbfa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS JGol4dp
#fa_twitterfa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS A9Qg6yH
#fa_gpfa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS LZMT5u7
#fa_mailfa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS UZS5A1x
#fa_rssfa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS 5ux5jZD
#fa_rightfa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS PfKjTu0
#fa_welcomefa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS 4NsBqkw
#fa_notificationsfa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS QCuUnm4
#notif_unreadfa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS HUoJdem
#fa_hidefa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS RRR4xWT
#fa_showfa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS UJ6Ix6G
#fa_menulistfa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS GWBXiFQ
#fa_usermenufa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS FJaJ87Y
#fa_ranktitlefa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS 5vCWON1
#notif_listfa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS UCwhzBg
li.see_allfa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS LGJ9E8B
li.unreadfa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS APbffUi
#notif_list li .contentTextfa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS BlzgbOv
#notif_list li a.deletefa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS NEMLgdc
div.fa_notificationfa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS Captur37
div.fa_notification .contentfa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS Captur38


fa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS 09615110 Koλπάκι αφαίρεσης κάποιου στοιχείου


Αφαίρεση του κουτιού αναζήτησης:
Κώδικας:
#fa_search { display:none !important }
Αφαίρεση των κουμπιών Μοιραστείτε:
Κώδικας:
#fa_share { display:none !important }
Αφαίρεση του "Καλώς όρισες Επισκέπτης":
Κώδικας:
#fa_welcome { display:none !important }
Αφαίρεση του κουμπιού πάνω και κάτω (δεξιά):
Κώδικας:
#fa_hide { display:none !important }


fa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS 09615110Έτοιμες προτάσεις

Αντιγράψτε/Επικολλήστε τους καρακάτω κώδικες στο CSS σας για να έχετε όμοιο στυλ με τα παρακάτω. Απλά πηγαίνετε:
Πίνακας Διαχείρισης ► Εμφάνιση ► Εικόνες και χρώματα ► Χρώματα ► CSS Stylesheet
και προσθέστε τα εξής:
Τα χρώματα επιλέγηκαν τυχαία και μπορούν να αλλαχτούν πολύ εύκολα!

Πρόταση 1
fa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS YAZO6i7
Κώδικας:
div#fa_toolbar {
  background-color: #24384c;  /* Χρώμα Φόντου */
  border-radius: 0 0 50px 50px;  /* Γωνίες δεξιά και αριστερά */
  box-shadow: 0 0 5px #000000;  /* Σκια */
  margin: auto;  /* Κεντρική στοίχιση */
  width: 98%;  /* πλάτος toolber */
}
 
div#fa_toolbar div, div#fa_toolbar span {
  margin: 0 15px;  /* Τοποθέτηση του περιεχομένου της toolbar  */
}

Πρόταση 2
fa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS Wg9rG7B
Κώδικας:
div#fa_toolbar {
    background-color: #657488;  /* χρώμα φόντου */
    border: 2px solid white;  /* Λευκό περίγραμμα */
    border-radius: 50px;  /* γωνίες γύρω γύρω της toolbar */
    margin: auto;  /* Στοίχιση της toolbar */
    top: 10px;  /* Κενό πάνω από την toolbar */
    width: 98%;  /* πλάτος της toolbar */
}
 
a#fa_hide {
    display: none!important;  /* Αφαίρεση του κουμπιού πάνω κάτω */
}
 
div#fa_toolbar div, div#fa_toolbar span {
    margin: 0 15px;  /* Τοποθέτηση περιεχομένου της toolbar */
}

Πρόταση 3
fa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS JZVaqVC
Κώδικας:
#fa_toolbar {
    background-color: transparent !important;  /* Κάνει το κεντρικό φώντο της toolbar διάφανο */
}
#fa_right {
    background-color: #000000;  /* Χρώμα Φόντου */
    border-radius: 0 0 40px 40px;  /* κυκλικές γωνίες */
    padding-left: 10px;  /* Κενό από αριστερά */
    padding-right: 10px;  /* Κενό από δεξιά */
    position: relative;  /* Τοποθέτηση της toolbar */
    right: 20px;  /* απόσταση από δεξιά */
}
 
#fa_left {
    background-color: #000000;  /* χρώμα φόντου */
    border-radius: 0 0 0 40px;  /* κυκλικές γωνίες */
    position: relative;  /* Τοποθέτηση της toolbar */
    left: 20px;  /* απόσταση από αριστερά */
    margin-top: -1px;  /* απόσταση από πάνω */
    padding-left: 10px;  /* Κενό από αριστερά */
    padding-right: 10px;  /* Κενό από δεξιά */
}
 
#fa_search {
    background-color: #000000;  /* χρώμα φόντου */
    margin-top: -1px;  /* απόσταση από πάνω */
    padding-left: 10px;  /* κενό αριστερά */
    padding-right: 10px;  /* κενό δεξιά */
}
 
#fa_share {
    background-color: #000000;  /* χρώμα φόντου */
    border-radius: 0 0 40px;  /* κυκλικές γωνίες */
    position: relative;  /* Τοποθέτηση της toolbar */
    left: -20px;  /* απόσταση από αριστερά */
    margin-top: -1px;  /* απόσταση από πάνω */
    padding-left: 10px;  /* κενό από αριστερά */
    padding-right: 10px;  /* κενό από δεξιά */
}

Πρόταση 4
fa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS WkhhYby
Κώδικας:
#fa_toolbar {
    background-color: transparent !important;  /* κάνει το κεντρικό φόντο διάφανο */
}
 
#fa_right {
    background-color: #b3b3b3;  /* χρώμα φόντου */
    border-radius: 0 0 0 40px;  /* κυκλικές γωνίες */
    padding-left: 10px;  /* κενό από αριστερά */
    padding-right: 10px;  /* κενό από δεξιά */
}
 
#fa_left {
    background-color: #b3b3b3;  /* χρώμα φόντου */
    margin-top: -1px;  /* αποσταση από πάνω */
    padding-left: 10px;  /* κενό από αριστερά */
    padding-right: 10px;  /* κενό από δεξιά*/
}
 
#fa_search {
    background-color: #b3b3b3;  /* χρώμα φόντου */
    margin-top: -1px;  /* αποσταση από πάνω */
    padding-left: 10px;  /* κενό από αριστερά */
    padding-right: 10px;  /* κενό από δεξιά */
    position: relative;  /* τοποθέτηση της toolbar */
    left: -20px;  /* κενό από αριστερά */
}
 
#fa_share {
    background-color: #b3b3b3;  /* χρώμα φόντου */
    border-radius: 0 0 40px;  /* κυκλικές γωνίες */
    left: -40px;  /* απόσταση από αριστερά */
    margin-top: -1px;  /* αποσταση από πάνω */
    padding-left: 10px;  /* κενό από αριστερά */
    padding-right: 10px;  /* κενό από δεξιά */
    position: relative;  /* τοποθέτηση της toolbar */
}

Πρόταση 5
fa_twitter - Τροποποιήστε την Toolbar χρησιμοποιώντας CSS BpnmFPU
Κώδικας:
    #fa_share:after{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-right: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-3px!important;
    }
    #fa_share:before{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      left:-29px !important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-left: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-3px !important;
    }
    #fa_share{
      margin-left:450px!important;
      background-color: rgba(0,0,0, 0.5)!important;
      position:absolute!important;
      border-radius: 0px 0px 2px 2px!important;
    }

    #fa_search:after{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-right: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px!important;
    }
    #fa_left:before{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      left:-30px !important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-left: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px !important;
    }
    #fa_search{
      margin-left:151px!important;
      background-color: rgba(0,0,0, 0.5)!important;
      position:absolute!important;
    }
    #fa_left{
      margin-left:40px!important;
      background-color: rgba(0,0,0, 0.5)!important;
      position:absolute !important;
    }
    #fa_toolbar{
      background-color:transparent!important;
    }
    #fa_right:after{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-right: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px!important;
    }
    #fa_right:before{
      border-radius: 0px 0px 5px 5px!important;
      content:""!important;
      left:-30px !important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-left: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px !important;
    }
    #fa_right{
      margin-left:780px!important;
      background-color: rgba(0,0,0, 0.5) !important;
      position:absolute !important;
      border-radius: 0px 0px 2px 2px!important;
    }
#fa_toolbar_hidden:after{
  border-radius: 0px 0px 5px 5px!important;
  content:""!important;
  position:absolute!important;
  border-top: 35px solid  rgba(0,0,0, 0.5)!important;
  border-right: 30px solid transparent!important;
  display:inline-block!important;
  margin-top:-5px!important;
}
    #fa_toolbar_hidden:before{
      border-radius: 0px 0px 5px 5px!important;
      content:"";left:-30px !important;
      position:absolute!important;
      border-top: 35px solid  rgba(0,0,0, 0.5)!important;
      border-left: 30px solid transparent!important;
      display:inline-block!important;
      margin-top:-5px !important;
    }
    #fa_toolbar_hidden{
      margin-right:30px!important;
      background-color: rgba(0,0,0, 0.5)!important;
      border-radius: 0px 0px 2px 2px!important;
    }

    #fa_menulist{
      float:right!important;
      margin-left: -210px !important;
      background-color: rgba(0,0,0, 0.5)!important;
      position: absolute !important;
      border-radius: 0px 0px 2px 2px!important;
      border:none;
    }
    #fa_toolbar #fa_right #notif_list li.see_all {
      color:white !important;
      background-color: rgba(0,0,0, 0.5)!important;
    }
    #fa_menulist:after{
      content:""!important;
      position:absolute!important;
      top:-2px!important;
      border-bottom: 270px solid  rgba(0,0,0, 0.5) !important;
      right:-20px!important;
      border-right: 20px solid transparent!important;
      display:inline-block!important;
      margin-top:-0px!important;
    }
    #fa_menulist:before{
      content:""!important;
      left:-20px !important;
      position:absolute!important;
      border-top: 270px solid  rgba(0,0,0, 0.5)!important;
      border-left: 20px solid transparent!important;
      display:inline-block!important;
      margin-top:6!important!;
    }
    #fa_welcome,#fa_toolbar #fa_right #notif_list,#fa_notifications,
#fa_toolbar #fa_menulist li a,#fa_menulist #fa_ranktitle,#fa_menulist td{
  background-color:transparent !important;
  color:white !important;
}
#notif_list li { background:#CCC !important }
Μπορείτε να θέλετε να μας στείλετε τις δικές σας προτάσεις και θα τις προσθέσουμε. Οι προτάσεις σας να στέλνονται μέσω ΠΜ. Angel

Ο οδηγός γράφτηκε από Matriochka & Tech του Γαλλικού Φόρουμ Υποστήριξης, μεταφράστηκε στα Αγγλικά από Ange Tuteur του Αγγλικού Φόρουμ Υποστήριξης και μεταφράστηκε στα Ελληνικά από Luffy
Luffy

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

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



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

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

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

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