Η τρέχουσα ημερομηνία/ώρα είναι Πεμ Μαρ 28, 2024 3:21 pm

Η αναζήτηση βρήκε 1 εγγραφή

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

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


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

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

Θέματα με ετικέτα fa_show στο Ελληνική Κοινότητα Υποστήριξης ForumGreek 09615110Στοιχεία της Toolbar

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



Θέματα με ετικέτα fa_show στο Ελληνική Κοινότητα Υποστήριξης ForumGreek 09615110 Koλπάκι αφαίρεσης κάποιου στοιχείου


Αφαίρεση του κουτιού αναζήτησης:
Κώδικας:
#fa_search { display:none !important }

Αφαίρεση των κουμπιών Μοιραστείτε:
Κώδικας:
#fa_share { display:none !important }

Αφαίρεση του "Καλώς όρισες Επισκέπτης":
Κώδικας:
#fa_welcome { display:none !important }

Αφαίρεση του κουμπιού πάνω και κάτω (δεξιά):
Κώδικας:
#fa_hide { display:none !important }



Θέματα με ετικέτα fa_show στο Ελληνική Κοινότητα Υποστήριξης ForumGreek 09615110Έτοιμες προτάσεις

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

Πρόταση 1
Θέματα με ετικέτα fa_show στο Ελληνική Κοινότητα Υποστήριξης ForumGreek 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_show στο Ελληνική Κοινότητα Υποστήριξης ForumGreek 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_show στο Ελληνική Κοινότητα Υποστήριξης ForumGreek 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_show στο Ελληνική Κοινότητα Υποστήριξης ForumGreek 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_show στο Ελληνική Κοινότητα Υποστήριξης ForumGreek 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
Την / Το Κυρ Ιουν 21, 2015 12:27 am
 
Αναζήτηση σε...: Οδηγοί & Συμβουλές
Θεματική Ενότητα: Τροποποιήστε την Toolbar χρησιμοποιώντας CSS
Απαντήσεις: 0
Αναγνώσεις: 2526

Επιστροφή στην κορυφή

Μετάβαση σε: