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

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

Τροποποιήστε την 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



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

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

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

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

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


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