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

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

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

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

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

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

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

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

#fa_toolbarΟλόκληρο το toolbar
#fa_search / #fa_textareaΤροποποιήστε την Toolbar χρησιμοποιώντας CSS 6CTqC4W
#fa_magnifierΤροποποιήστε την Toolbar χρησιμοποιώντας CSS QVYqbew
#fa_shareΤροποποιήστε την Toolbar χρησιμοποιώντας CSS FCPUVzl
#fa_share_textΤροποποιήστε την Toolbar χρησιμοποιώντας CSS SMmOenc
#fa_fbΤροποποιήστε την Toolbar χρησιμοποιώντας CSS JGol4dp
#fa_twitterΤροποποιήστε την Toolbar χρησιμοποιώντας CSS A9Qg6yH
#fa_gpΤροποποιήστε την Toolbar χρησιμοποιώντας CSS LZMT5u7
#fa_mailΤροποποιήστε την Toolbar χρησιμοποιώντας CSS UZS5A1x
#fa_rssΤροποποιήστε την Toolbar χρησιμοποιώντας CSS 5ux5jZD
#fa_rightΤροποποιήστε την Toolbar χρησιμοποιώντας CSS PfKjTu0
#fa_welcomeΤροποποιήστε την Toolbar χρησιμοποιώντας CSS 4NsBqkw
#fa_notificationsΤροποποιήστε την Toolbar χρησιμοποιώντας CSS QCuUnm4
#notif_unreadΤροποποιήστε την Toolbar χρησιμοποιώντας CSS HUoJdem
#fa_hideΤροποποιήστε την Toolbar χρησιμοποιώντας CSS RRR4xWT
#fa_showΤροποποιήστε την Toolbar χρησιμοποιώντας CSS UJ6Ix6G
#fa_menulistΤροποποιήστε την Toolbar χρησιμοποιώντας CSS GWBXiFQ
#fa_usermenuΤροποποιήστε την Toolbar χρησιμοποιώντας CSS FJaJ87Y
#fa_ranktitleΤροποποιήστε την Toolbar χρησιμοποιώντας CSS 5vCWON1
#notif_listΤροποποιήστε την Toolbar χρησιμοποιώντας CSS UCwhzBg
li.see_allΤροποποιήστε την Toolbar χρησιμοποιώντας CSS LGJ9E8B
li.unreadΤροποποιήστε την Toolbar χρησιμοποιώντας CSS APbffUi
#notif_list li .contentTextΤροποποιήστε την Toolbar χρησιμοποιώντας CSS BlzgbOv
#notif_list li a.deleteΤροποποιήστε την Toolbar χρησιμοποιώντας CSS NEMLgdc
div.fa_notificationΤροποποιήστε την Toolbar χρησιμοποιώντας CSS Captur37
div.fa_notification .contentΤροποποιήστε την Toolbar χρησιμοποιώντας CSS Captur38


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


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


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

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

Πρόταση 1
Τροποποιήστε την 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
Τροποποιήστε την 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
Τροποποιήστε την 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
Τροποποιήστε την 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
Τροποποιήστε την 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 ο/η συγγραφέας σας ευχαριστήσε για την απάντησή σας.

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

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

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