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

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

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

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

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

Δημοσίευση από Luffy Την / Το Παρ Μαϊος 15, 2015 10:56 pm

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


Aυτός ο οδηγός θα σας βοηθήσει να καταλάβετε τις διάφορες μεταβλητές των widget που έχει κάθε μορφή φόρουμ στο CSS.

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


Μεταβλητές

Οι παρακάτω κώδικες παρουσιάζονται και προτείνεται να χρησιμοποιηθούν από έμπειρους χρήστες σχετικά με CSS. Θυμηθείτε να χρησιμοποιήσετε τις μεταβλητές που αναγράφονται για την μορφή του φόρουμ σας.

PhpBB2
#right .forumline, #left .forumlineΟλόκληρο το widget
#right td.catHead .genmed, #left td.catHead .genmed, #right td.catLeft .genmed, #left td.catLeft .genmedΚείμενο τίτλου
#right td.catHead, #left td.catHead, #right td.catLeft, #left td.catLeftΦόντο τίτλου
#right .forumline .row1, #left .forumline .row1Κελί 1 του widget
#right .forumline .row2, #left .forumline .row2Κελί 2 του widget
#right .forumline .row3, #left .forumline .row3Κελί 3 του widget
PhpBB3
.moduleΟλόκληρο το widget
.module .h3Κείμενο τίτλου
.module .innerΠεριεχόμενο του widget
PunBB
.moduleΟλόκληρο το widget
.module .main-headΚείμενο τίτλου
.module .main-contentΠεριεχόμενο του widget
Invision
.module.borderwrapΟλόκληρο το widget
.module .maintitleΚείμενο τίτλου
.module .box-contentΠεριεχόμενο του widget
PhpBB3, PunBB, Invision
.module .row1Κελί 1 του widget
.module .row2Κελί 2 του widget
.module .row3Kελί 3 του widget

Kολπάκια


Εμφάνιση της αρχικής μορφής του τίτλου των widget για PhpBB3
(δηλαδή από ΚΕΦΑΛΑΙΑ σε Κανονικά)
Κώδικας:
.module .h3 { text-transform:none }

Προσθέστε μια σκιά στα widgets
Κώδικας:
#right .forumline, #left .forumline, .module { box-shadow:2px 2px 2px rgba(0,0,0,0.4) }

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


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

Πρόταση 1

Κώδικες Πρότασης 1:
PhpBB2:
Κώδικας:
#right td.catHead, #left td.catHead, #right td.catLeft, #left td.catLeft {
  background:#EEE; /* background color */
  box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
  border-radius:6px 6px 0 0; /* rounds the borders */
  border-bottom:1px solid #CCC; /* border size and color */
}
#right td.catHead .genmed, #left td.catHead .genmed, #right td.catLeft .genmed, #left td.catLeft .genmed {
  color:#666; /* color of the title font */
  font-size:12px; /* size of the title font */
  padding:6px; /* Inner padding */
}
#right .forumline, #left .forumline {
  background:#EEE; /* background color */
  border:1px solid #CCC; /* border size and color */
  border-radius:6px; /* rounds the borders */
}
#right .forumline .row1, #left .forumline .row1, #right .forumline .row2, #left .forumline .row2, #right .forumline .row3, #left .forumline .row3 { background:none /* removes the background color on the rows */ }
PhpBB3:
Κώδικας:
.module .h3 {
  color:#666; /* color of the title font */
  font-size:10px; /* size of the title font */
  text-transform:none; /* Changes the text transformation from uppercase */
  background:#EEE; /* background color */
  box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
  border-bottom:1px solid #CCC; /* border size and color */
  border-radius:6px 6px 0 0; /* rounds the borders */
  margin:-5px -10px 5px -10px; /* spacing around the title | top left bottom right */
  padding:6px; /* Inner padding */
}
.module {
  background:#EEE; /* background color */
  border:1px solid #CCC; /* border size and color */
  border-radius:6px; /* rounds the borders */
}
.module .row1, .module .row2, .module .row3 { background:none /* removes the background color on the rows */ }
PunBB:
Κώδικας:
.module .main-head {
  color:#666; /* color of the title font */
  font-size:11px; /* size of the title font */
  font-weight:700; /* boldness of the title */
  background:#EEE; /* background color */
  box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
  border-bottom:1px solid #CCC; /* border size and color */
  border-radius:6px 6px 0 0; /* rounds the borders */
  padding:6px; /* Inner padding */
}
.module .main-content { background:#EEE; /* background color */ }
.module {
  border:1px solid #CCC; /* border size and color */
  border-radius:6px; /* rounds the borders */
}
.module .row1, .module .row2, .module .row3 { background:none /* removes the background color on the rows */ }
Invision:
Κώδικας:
.module .maintitle {
  color:#666; /* color of the title font */
  background:#EEE; /* background color */
  box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
  border-bottom:1px solid #CCC; /* border size and color */
  border-radius:6px 6px 0 0; /* rounds the borders */
  padding:6px; /* Inner padding */
}
.module .box-content { background:none /* removes background color */ }
.module.borderwrap {
  background:#EEE; /* background color */
  border:1px solid #CCC; /* border size and color */
  border-radius:6px; /* rounds the borders */
}
.module .row1, .module .row2, .module .row3 { background:none /* removes the background color on the rows */ }

Πρόταση 2

Κώδικες Πρότασης 2:
Phpbb2:
Κώδικας:
#right td.catHead, #left td.catHead, #right td.catLeft, #left td.catLeft {
  background:#19E; /* background color */
  box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
  border-radius:12px 3px 0 0; /* rounds the borders */
  border-bottom:1px solid #39C; /* border size and color */
}
#right td.catHead .genmed, #left td.catHead .genmed, #right td.catLeft .genmed, #left td.catLeft .genmed {
  color:#FFF; /* color of the title font */
  font-size:12px; /* size of the title font */
  padding:6px; /* Inner padding */
}
#right .forumline, #left .forumline {
  background:#DEF; /* background color */
  border:1px solid #39C; /* border size and color */
  border-radius:12px 3PX; /* rounds the borders */
}
#right .forumline .row1, #left .forumline .row1, #right .forumline .row2, #left .forumline .row2, #right .forumline .row3, #left .forumline .row3 { background:none /* removes the background color on the rows */ }
PhpBB3:
Κώδικας:
.module .h3 {
  color:#FFF; /* color of the title font */
  font-size:10px; /* size of the title font */
  text-transform:none; /* Changes the text transformation from uppercase */
  background:#19E; /* background color */
  box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
  border-bottom:1px solid #39C; /* border size and color */
  margin:-5px -10px 5px -10px; /* spacing around the title | top left bottom right */
  padding:6px; /* Inner padding */
}
.module {
  background:#DEF; /* background color */
  border:1px solid #39C; /* border size and color */
  border-radius:12px 3px; /* rounds the borders */
}
.module .row1, .module .row2, .module .row3 { background:none /* removes the background color on the rows */ }
PunBB:
Κώδικας:
.module .main-head {
  color:#FFF; /* color of the title font */
  font-size:11px; /* size of the title font */
  font-weight:700; /* boldness of the title */
  background:#19E; /* background color */
  box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
  border-bottom:1px solid #39C; /* border size and color */
  padding:6px; /* Inner padding */
}
.module .main-content { background:#DEF; /* background color */ }
.module {
  border:1px solid #39C; /* border size and color */
  border-radius:12px 3px; /* rounds the borders */
}
.module .row1, .module .row2, .module .row3 { background:none /* removes the background color on the rows */ }
Invision:
Κώδικας:
.module .maintitle {
  color:#FFF; /* color of the title font */
  background:#19E; /* background color */
  box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
  border-bottom:1px solid #39C; /* border size and color */
  border-radius:12px 3px 0 0; /* rounds the borders */
  padding:6px; /* Inner padding */
}
.module .box-content { background:none /* removes background color */ }
.module.borderwrap {
  background:#DEF; /* background color */
  border:1px solid #39C; /* border size and color */
  border-radius:12px 3px; /* rounds the borders */
}
.module .row1, .module .row2, .module .row3 { background:none /* removes the background color on the rows */ }

Πρόταση 3

PhpBB3 μόνο, ευχαριστίες στον Rhino.Freak του Αγγλικού Φόρουμ Υποστήριξης
Κώδικες Πρότασης 3:
Κώδικας:
.module .h3 {
  margin-top: 8px;
  text-align: center;
  margin-bottom: 10px;
  color: red !important; /*Change to whatever suits your forum style*/
  border-bottom-color:red;
}
.module .row1, .module .row2 { background:none }
.module {
  margin-left: 10px;
  background-image: url('http://i57.servimg.com/u/f57/18/80/95/58/module11.png');
  border: 1px solid #444;
  background-position: center bottom;
  background-repeat: repeat-x;
  box-shadow: inset 0px 15px 5px #1B1B1B, 2px 2px 5px #000;
  color:#CCC !important;
  border-radius: 4px;
  background-color:#0F0F0F;
  color: #536482;
  margin-bottom: 4px;
  border: 1px dashed #444;
  margin-top: 15px;
}

Αν θέλετε να προτείνετε κάποιο άλλο στυλ που έχετε φτιάξει οι ίδιοι στείλτε σε κάποιο μέλος της Ομάδας Προσωκού ένα Προσωπικό Μήνυμα. Hello

Ο οδηγός γράφτηκε από Ange Tuteur & Ramdaman του Αγγλικού Φόρουμ Υποστήριξης και μεταφράστηκε από Luffy.



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

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

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

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

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


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