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

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

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

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

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

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

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

Στοιχεία της Toolbar

#fa_toolbarΟλόκληρο το toolbar
#fa_search / #fa_textarea
#fa_magnifier
#fa_share
#fa_share_text
#fa_fb
#fa_twitter
#fa_gp
#fa_mail
#fa_rss
#fa_right
#fa_welcome
#fa_notifications
#notif_unread
#fa_hide
#fa_show
#fa_menulist
#fa_usermenu
#fa_ranktitle
#notif_list
li.see_all
li.unread
#notif_list li .contentText
#notif_list li a.delete
div.fa_notification
div.fa_notification .content


Koλπάκι αφαίρεσης κάποιου στοιχείου


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


Έτοιμες προτάσεις

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

Πρόταση 1

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

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





avatar

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

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

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

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


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