ΦόρουμΤροποποιήστε τα widgets χρησιμοποιώντας CSS
Σελίδα 1 από 1 • Μοιραστείτε
Τροποποιήστε τα 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 .row3 | Kελί 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 */ }
- Κώδικας:
.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 */ }
- Κώδικας:
.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 */ }
- Κώδικας:
.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 */ }
- Κώδικας:
.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 */ }
- Κώδικας:
.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 */ }
- Κώδικας:
.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;
}
Αν θέλετε να προτείνετε κάποιο άλλο στυλ που έχετε φτιάξει οι ίδιοι στείλτε σε κάποιο μέλος της Ομάδας Προσωκού ένα Προσωπικό Μήνυμα.
| Ο οδηγός γράφτηκε από Ange Tuteur & Ramdaman του Αγγλικού Φόρουμ Υποστήριξης και μεταφράστηκε από Luffy. |
Luffy- Διαχειριστής
-
Τόπος : Ελλάδα
Δημοσιεύσεις : 2340
Παρόμοια θέματα» Τροποποιήστε την Toolbar χρησιμοποιώντας CSS
» Widgets του Forum
» Τροποποιήστε τις "Λέξεις Κλειδιά" για τα θέματά σας
» Τροποποιήστε το όνομα χώρου (domain name)
» Εμφάνιση/Απόκρυψη των Widgets
» Widgets του Forum
» Τροποποιήστε τις "Λέξεις Κλειδιά" για τα θέματά σας
» Τροποποιήστε το όνομα χώρου (domain name)
» Εμφάνιση/Απόκρυψη των Widgets
Σελίδα 1 από 1
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης|
|
|
