Oficjalne forum pomocy serwisu PUN.pl
Nie jesteś zalogowany na forum.
- Wątki: Aktywne | Bez odpowiedzi
#1 2008-03-30 11:56:53
Jak stworzyć styl pod PunBB
Jak stworzyć prosty podstawowy styl do PunBB? Chyba każdy z was zadawał sobie te pytanie a sprawa jest naprawdę łatwa ponieważ jak ja to zajarzyłem to i każdy powinien to zajarzyć. Mam nadzieje ze ten tutoral pomoże w tworzeniu stylów dla puna i grono grafików sie powiększy. A teraz przejdźmy do rzeczy:
Żeby stworzyć prosty styl wystarczy wejść na tą stronę: http://www.jsand.net/spinkbb/?lang=en
http://img301.imageshack.us/my.php?imag … 830au3.jpg
A teraz opisze co i jak dział na tej stronie:
Na samej górze jak sama nazwa wskazuje są dostępne tłumaczenia tej strony wybieramy je naciskając na jakąś flagę w tym linku co podałem jest wersja angielska ale może ktoś lepiej zna jakiś inny język z tych co są tam podane (są 3: Francuski, Hiszpański i Angielski).
Niżej znajduje się podgląd forum jak wygląda (wszystkie zmiany jakie wprowadzimy są natychmiast narzucane na podgląd).
Jeszcze niżej na tym niebieskim polu w niby czerwonych ramkach znajdują się generatory stylów. Jest ich aż trzy:
__________________________________________________________________________________
W pierwszym generatorze wystarczy podać kolor którzy możemy wybrać z palety kolorów RBG a cała resztę zrobi za nas generator.
http://img180.imageshack.us/my.php?image=g1dc9.jpg
__________________________________________________________________________________
Drugi generator jest już całkowite zautomatyzowane naciskamy tylko przycisk i generator generuje nam jakiś styl.
http://img440.imageshack.us/my.php?image=g2sx6.jpg
__________________________________________________________________________________
Trzecim a zarazem ostatnim generatorem jest generator w którym mam już bardziej zawansowaną technologie ponieważ, że tak powiem mamy już odczynienia z tabela dzięki której możemy stworzyć taki styl prawie jaki chcemy ale niestety bez żadnych fajerwerków obrazków itp. Taki standardowy ale jeśli chcemy mieć bardziej wypasiony styl musimy przeczytać dalej ten tutorial (dokładnie temat i spis treści).
http://img301.imageshack.us/my.php?imag … 219bt6.jpg
Teraz opisze te tabele co do czego służy:
W pierwszej tabeli pod tytułem Miscellaneous są zawarte najważniejsze informacje do stylu znajdują się tam informacje odnośnie:
Dominating color => to kolor naszego głównego panelu
Structure color => kolor belek z nazwą działu oraz menu i obramowania zewnętrznego
Background color => jak sama nazwa wskazuje jest to kolor tła
Line "Forum Topics Posts" => kolor belki z legendą gdzie znajdują się takie nazwy jak tematy, posty, forum i ostatni post
Vertical line Topics and Posts => panel z liczbą postów I tematów
Internal borders => podkreślenie wewnętrzne
Texts color => kolor tekstu
Square for new posts => kolor ikony nowych postów
Square for no new posts => kolor ikony bez nowych postów
Forum titles color => kolor nazwy działów forum
Titles style => w tej opcji wybieramy czy napisy o którym mówiliśmy wyżej ma być pogrubiony czy podkreślony
Druga i trzecia są niemal ze takie same bo chodzi o to samo wiec opisze je razem co i jak się robi ponieważ razem jedyna różnica polega na tym ze w 2 tabeli ustawiamy linki podstawowe dla forum czyli nazwy tematów itp. a w 3 ustawiamy kolor linków które są w menu. Nazwy tabel drugiej i trzeciej: Links style/Menu links style.
http://img440.imageshack.us/my.php?imag … 662qz3.jpg
Characters color =>kolor podstawowy linku
Styles => działa na takie samej zasadzie jak Titles style tylko tu są pogrubiane linki
Underlining color => tu ustawiamy podkreślenie linku
Overlining => tu ustawiamy tło linku
I tak dalej az wypełnimy wszystkie podobne pola.
Pod kategorie tych tabel/co oznaczają (jeśli ktoś miałby problem):
Initial state (link nie aktywny)
Hover State (link aktywny)
__________________________________________________________________________________
Kiedy już zrobimy nasz wymarzony styl klikamy w ten przycisk (oczywiście tyczy się tych trzech generatorów nie tylko tego 3)
http://img412.imageshack.us/my.php?imag … 804pp0.jpg
Ten przycisk wprowadzi nas do generatora stylów w który mam już podany kod stylu teraz pozostało nam już wprowadzić go do notatnika i zapisać pliki o wymaganych nawach teraz wystarczy wrzucić te pliki na serwer i sprawdzić jak prezentuje się nasz styl. I tak oto mamy zrobiony najprostszy styl pod PunBB.
http://img412.imageshack.us/my.php?imag … 961vi6.jpg
__________________________________________________________________________________
Jest jeszcze jeden problem to jest standardowy styl do Pun-a więc nie spodziewajcie się jakiś fajerwerków (w tej chwili będzie wyglądał tak jak Oxygen i tym podobne style ale nie przejmujcie się w następnym tutku napisze jak dodać trochę grafiki do stylu ![[dblpt]D](http://www.forum.pun.pl/upload/pun_pl/forum/smilies/[dblpt]D.jpg)
co powinno ucieszyć już parę osób na razie pozostało wam studiowanie i poznawanie kodu co powinno pomóc przyszłym grafika pun.pl).
Na razie to tyle!
Spis treści:
Wstęp i tworzenie stylu za pomocą jsand …………………………………………………………. 1 Post
Zapisywanie i dodawanie ikon do stylu …………………………………………………………….. 14 Post
___________________________________________________________________________________
Przydatne programy do tworzenia stylów:
Grafka: GIMP, Adobe Photoshop
Wirtualny serwer: XAMPP
Edytory CSS: Notatnik
Paleta kolorów RBG (wystarczy tylko to wpisać do googla albo innej wyszukiwarki i kliknąć w pierwszy lepszy link)
Podałem tu tylko i włącznie te programy z których ja korzystam i je osobiście polecam wiec jeśli macie inne odpowiedniki tych programów to tez możecie je używać ![[sred])](http://www.forum.pun.pl/upload/pun_pl/forum/smilies/[sred]).jpg)
Do tworzenia stylów polecam poczytanie jakiegoś tutka o CSS a na pewno tworzenie styli wyda się wam łatwe (sam musze przejść jeszcze raz takowy bo już dużo rzeczy zapomniałem )
__________________________________________________________________________________
Potraktujcie ten temat jako książkę interaktywna w której możecie zadawać pytania itp.
W spisie treści będą podawane lokalizacje kolejnych tutków. Strony książek zastąpią numery postów wiec proszę o nie kasowanie żadnych postów z tego tematu żeby uniknąć nie potrzebnych intryg jeśli jest cos nie zgodne z regulaminem to proszę o cenzurowanie tego a nie kasacje ponieważ później mogę się ja sam nie połapać co i jak a tego chyba chcemy uniknąć.
Życzę miłej lektury ![[dblpt]P](http://www.forum.pun.pl/upload/pun_pl/forum/smilies/[dblpt]P.jpg)
(proszę pisać o jakich kol wiek błędach żeby poprawiać je na bieżąco a zwłaszcza w tutkach albo tłumaczeniach czegoś tam).
P.s. Tomek jak będziesz mógł to wrzuć te obrazki na ten serwer bo nie wiem jak długo one tam pożyją i pozmieniaj adresy na te nowe jak możesz. A i jeszcze jedno uważam ze ten temat nadaje sie do przyklejenia.
Ostatnio edytowany przez gufi102 (2008-04-01 17:59:59)
Offline
#2 2008-03-30 12:45:47
- Rudik
- Użytkownik
- Skąd: Iława
- Dołączył: 2007-06-18
- Liczba postów: 5,530
Odp: Jak stworzyć styl pod PunBB
No bardzo fajny tutorial, czekamy z nie cierpliwością aż napiszesz o robieniu stylów z większym wyborem
Offline
#3 2008-03-30 12:54:05
Odp: Jak stworzyć styl pod PunBB
No bardzo fajny tutorial, czekamy z nie cierpliwością aż napiszesz o robieniu stylów z większym wyborem
oto sie nie martw na jutro przewiduje 2 cześć wiec spoko a to napisałem dlatego bo żeby pisać style trzeba zrozumieć kod a nigdzie indziej nie zrozumiesz lepiej tego kodu jak na kodzie podstawowego stylu punbb bynajmniej ja to tak robiłem
Offline
#4 2008-03-30 14:28:00
- Chopin
- Użytkownik
- Dołączył: 2006-11-25
- Liczba postów: 1,936
Odp: Jak stworzyć styl pod PunBB
Baaardzo fajne! Już zabieram się do robienia styli! Warto podpiąć!
Edit: Oto mój pierwszy!
/* *************************** SpinkBB ****************** */
/* SKIN GENERE PAR SPINKBB */
/* http://www.jsand.net/spinkbb */
/* ********************************** SpinkBB *********** */
/****************************************************************/
/* 1. IMPORTED STYLESHEETS */
/****************************************************************/
/* Import the basic setup styles */
@import url(imports/base.css);
/* Import the colour scheme */
@import url(imports/spinkbb_cs.css);
/****************************************************************/
/* 2. TEXT SETTINGS */
/****************************************************************/
/* 2.1 This sets the default Font Group */
.pun, .pun INPUT, .pun SELECT, .pun TEXTAREA, .pun OPTGROUP {
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.pun {FONT-SIZE: 11px; LINE-HEIGHT: normal}
/* IEWin Font Size only - to allow IEWin to zoom. Do not remove comments \*/
* HTML .pun {FONT-SIZE: 68.75%}
/* End IE Win Font Size */
/* Set font size for tables because IE requires it */
.pun TABLE, .pun INPUT, .pun SELECT, .pun OPTGROUP, .pun TEXTAREA, DIV.postmsg P.postedit {FONT-SIZE: 1em}
/* 2.2 Set the font-size for preformatted text i.e in code boxes */
.pun PRE {FONT-FAMILY: monaco, "Bitstream Vera Sans Mono", "Courier New", courier, monospace}
/* 2.3 Font size for headers */
.pun H2, .pun H4 {FONT-SIZE: 1em}
.pun H3 {FONT-SIZE: 1.1em}
#brdtitle H1 {FONT-SIZE: 1.4em}
/* 2.4 Larger text for particular items */
DIV.postmsg P {LINE-HEIGHT: 1.4}
DIV.postleft DT {FONT-SIZE: 1.1em}
.pun PRE {FONT-SIZE: 1.2em}
/* 2.5 Bold text */
DIV.postleft DT, DIV.postmsg H4, TD.tcl H3, DIV.forminfo H3, P.postlink, DIV.linkst LI,
DIV.linksb LI, DIV.postlinksb LI, .blockmenu LI, #brdtitle H1, .pun SPAN.warntext, .pun P.warntext {FONT-WEIGHT: bold}
/****************************************************************/
/* 3. LINKS */
/****************************************************************/
.pun A:link, .pun A:visited {
text-decoration: none;
border-bottom: 1px solid #057046 }
.pun A:hover {
text-decoration: none;
border-bottom: 1px solid #8FFAEF }
/* 3.1 Remove underlining for main menu, post header links, post links and vertical menus */
#brdmenu A:link, #brdmenu A:visited, .blockpost DT A:link, .blockpost DT A:visited, .blockpost H2 A:link,
.blockpost H2 A:visited, .postlink A:link, .postlink A:visited, .postfootright A:link, .postfootright A:visited,
.blockmenu A:link, .blockmenu A:visited {
text-decoration: none }
/* 3.2 Underline on hover for links in headers and main menu */
#brdmenu A:hover, .blockpost H2 A:hover {
text-decoration: none;
border-bottom: 1px solid #8FFAEF }
/****************************************************************/
/* 4. BORDER WIDTH AND STYLE */
/****************************************************************/
/* 4.1 By default borders are 1px solid */
DIV.box, .pun TD, .pun TH, .pun BLOCKQUOTE, DIV.codebox, DIV.forminfo, DIV.blockpost LABEL {
BORDER-STYLE: solid;
BORDER-WIDTH: 1px
}
/* 4.2 Special settings for the board header. */
#brdheader DIV.box {BORDER-TOP-WIDTH: 4px}
/* 4.3 Borders for table cells */
.pun TD, .pun TH {
BORDER-BOTTOM: none;
BORDER-RIGHT: none
}
.pun .tcl {BORDER-LEFT: none}
/* 4.4 Special setting for fieldsets to preserve IE defaults */
DIV>FIELDSET {
BORDER-STYLE: solid;
BORDER-WIDTH: 1px
}
/****************************************************************/
/* 5. VERTICAL AND PAGE SPACING */
/****************************************************************/
/* 5.1 Page margins */
HTML, BODY {MARGIN: 0; PADDING: 0}
#punwrap {margin:12px 20px}
/* 5.2 Creates vertical space between main board elements (Margins) */
DIV.blocktable, DIV.block, DIV.blockform, DIV.block2col, #postreview {MARGIN-BOTTOM: 12px}
#punindex DIV.blocktable, DIV.blockpost {MARGIN-BOTTOM: 6px}
DIV.block2col DIV.blockform, DIV.block2col DIV.block {MARGIN-BOTTOM: 0px}
/* 5.3 Remove space above breadcrumbs, postlinks and pagelinks with a negative top margin */
DIV.linkst, DIV.linksb {MARGIN-TOP: -12px}
DIV.postlinksb {MARGIN-TOP: -6px}
/* 5.4 Put a 12px gap above the board information box in index because the category tables only
have a 6px space beneath them */
#brdstats {MARGIN-TOP: 12px}
/****************************************************************/
/* 6. SPACING AROUND CONTENT */
/****************************************************************/
/* 6.1 Default padding for main items */
DIV.block DIV.inbox, DIV.blockmenu DIV.inbox {PADDING: 3px 6px}
.pun P, .pun UL, .pun DL, DIV.blockmenu LI, .pun LABEL, #announce DIV.inbox DIV {PADDING: 3px 0}
.pun H2 {PADDING: 4px 6px}
/* 6.2 Special spacing for various elements */
.pun H1 {PADDING: 3px 0px 0px 0}
#brdtitle P {PADDING-TOP: 0px}
DIV.linkst {PADDING: 8px 6px 3px 6px}
DIV.linksb, DIV.postlinksb {PADDING: 3px 6px 8px 6px}
#brdwelcome, #brdfooter DL A, DIV.blockmenu LI, DIV.rbox INPUT {LINE-HEIGHT: 1.4em}
#viewprofile DT, #viewprofile DD {PADDING: 0 3px; LINE-HEIGHT: 2em}
/* 6.4 Create some horizontal spacing for various elements */
#brdmenu LI, DIV.rbox INPUT, DIV.blockform P INPUT {MARGIN-RIGHT: 12px}
/****************************************************************/
/* 7. SPACING FOR TABLES */
/****************************************************************/
.pun TH, .pun TD {PADDING: 4px 6px}
.pun TD P {PADDING: 5px 0 0 0}
/****************************************************************/
/* 8. SPACING FOR POSTS */
/****************************************************************/
/* 8.1 Padding around left and right columns in viewtopic */
DIV.postleft DL, DIV.postright {PADDING: 6px}
/* 8.2 Extra spacing for poster contact details and avatar */
DD.usercontacts, DD.postavatar {MARGIN-TOP: 5px}
DD.postavatar {MARGIN-BOTTOM: 5px}
/* 8.3 Extra top spacing for signatures and edited by */
DIV.postsignature, DIV.postmsg P.postedit {PADDING-TOP: 15px}
/* 8.4 Spacing for code and quote boxes */
DIV.postmsg H4 {MARGIN-BOTTOM: 10px}
.pun BLOCKQUOTE, DIV.codebox {MARGIN: 5px 15px 15px 15px; PADDING: 8px}
/* 8.5 Padding for the action links and online indicator in viewtopic */
DIV.postfootleft P, DIV.postfootright UL, DIV.postfootright DIV {PADDING: 10px 6px 5px 6px}
/* 8.6 This is the input on moderators multi-delete view */
DIV.blockpost INPUT, DIV.blockpost LABEL {
PADDING: 3px;
DISPLAY: inline
}
P.multidelete {
PADDING-TOP: 15px;
PADDING-BOTTOM: 5px
}
/* 8.7 Make sure paragraphs in posts don't get any padding */
DIV.postmsg P {PADDING: 0}
/****************************************************************/
/* 9. SPECIAL SPACING FOR FORMS */
/****************************************************************/
/* 9.1 Padding around fieldsets */
DIV.blockform FORM, DIV.fakeform {PADDING: 20px 20px 15px 20px}
DIV.inform {PADDING-BOTTOM: 12px}
/* 9.2 Padding inside fieldsets */
.pun FIELDSET {PADDING: 0px 12px 0px 12px}
DIV.infldset {PADDING: 9px 0px 12px 0}
.pun LEGEND {PADDING: 0px 6px}
/* 9.3 The information box at the top of the registration form and elsewhere */
DIV.forminfo {
MARGIN-BOTTOM: 12px;
PADDING: 9px 10px
}
/* 9.4 BBCode help links in post forms */
UL.bblinks LI {PADDING-RIGHT: 20px}
UL.bblinks {PADDING-BOTTOM: 10px; PADDING-LEFT: 4px}
/* 9.5 Horizontal positioning for the submit button on forms */
DIV.blockform P INPUT {MARGIN-LEFT: 12px}
/****************************************************************/
/* 10. POST STATUS INDICATORS */
/****************************************************************/
/* 10.1 These are the post status indicators which appear at the left of some tables.
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. By default only .inew is different from the default.*/
DIV.icon {
FLOAT: left;
MARGIN-TOP: 0.1em;
MARGIN-LEFT: 0.2em;
DISPLAY: block;
BORDER-WIDTH: 0.6em 0.6em 0.6em 0.6em;
BORDER-STYLE: solid
}
DIV.searchposts DIV.icon {MARGIN-LEFT: 0}
/* 10.2 Class .tclcon is a div inside the first column of tables with post indicators. The
margin creates space for the post status indicator */
TD DIV.tclcon {MARGIN-LEFT: 2.3em}Ostatnio edytowany przez Chopin (2008-03-30 14:29:25)
Nie pomagam w sprawie radia internetowego. Basta!
Offline
#6 2008-03-30 15:02:28
- Chopin
- Użytkownik
- Dołączył: 2006-11-25
- Liczba postów: 1,936
Odp: Jak stworzyć styl pod PunBB
Aha! Ojpć!
Nie pomagam w sprawie radia internetowego. Basta!
Offline
#7 2008-03-30 15:55:04
- Rudik
- Użytkownik
- Skąd: Iława
- Dołączył: 2007-06-18
- Liczba postów: 5,530
Odp: Jak stworzyć styl pod PunBB
A ja już wysłałem do tomek'a formularz z prośbą o dodanie ![[dblpt])](http://www.forum.pun.pl/upload/pun_pl/forum/smilies/[dblpt]).jpg)
Offline
#9 2008-03-30 16:12:38
- Chopin
- Użytkownik
- Dołączył: 2006-11-25
- Liczba postów: 1,936
Odp: Jak stworzyć styl pod PunBB
Zrobiłem bardzo ładny morski styl! 
/* *************************** SpinkBB ****************** */
/* SKIN GENERE PAR SPINKBB */
/* http://www.jsand.net/spinkbb */
/* ********************************** SpinkBB *********** */
/****************************************************************/
/* 1. IMPORTED STYLESHEETS */
/****************************************************************/
/* Import the basic setup styles */
@import url(imports/base.css);
/* Import the colour scheme */
@import url(imports/spinkbb_cs.css);
/****************************************************************/
/* 2. TEXT SETTINGS */
/****************************************************************/
/* 2.1 This sets the default Font Group */
.pun, .pun INPUT, .pun SELECT, .pun TEXTAREA, .pun OPTGROUP {
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.pun {FONT-SIZE: 11px; LINE-HEIGHT: normal}
/* IEWin Font Size only - to allow IEWin to zoom. Do not remove comments \*/
* HTML .pun {FONT-SIZE: 68.75%}
/* End IE Win Font Size */
/* Set font size for tables because IE requires it */
.pun TABLE, .pun INPUT, .pun SELECT, .pun OPTGROUP, .pun TEXTAREA, DIV.postmsg P.postedit {FONT-SIZE: 1em}
/* 2.2 Set the font-size for preformatted text i.e in code boxes */
.pun PRE {FONT-FAMILY: monaco, "Bitstream Vera Sans Mono", "Courier New", courier, monospace}
/* 2.3 Font size for headers */
.pun H2, .pun H4 {FONT-SIZE: 1em}
.pun H3 {FONT-SIZE: 1.1em}
#brdtitle H1 {FONT-SIZE: 1.4em}
/* 2.4 Larger text for particular items */
DIV.postmsg P {LINE-HEIGHT: 1.4}
DIV.postleft DT {FONT-SIZE: 1.1em}
.pun PRE {FONT-SIZE: 1.2em}
/* 2.5 Bold text */
DIV.postleft DT, DIV.postmsg H4, TD.tcl H3, DIV.forminfo H3, P.postlink, DIV.linkst LI,
DIV.linksb LI, DIV.postlinksb LI, .blockmenu LI, #brdtitle H1, .pun SPAN.warntext, .pun P.warntext {FONT-WEIGHT: bold}
/****************************************************************/
/* 3. LINKS */
/****************************************************************/
.pun A:link, .pun A:visited {
text-decoration: none;
border-bottom: 1px solid #034281 }
.pun A:hover {
text-decoration: none;
border-bottom: 1px solid #7DECFB }
/* 3.1 Remove underlining for main menu, post header links, post links and vertical menus */
#brdmenu A:link, #brdmenu A:visited, .blockpost DT A:link, .blockpost DT A:visited, .blockpost H2 A:link,
.blockpost H2 A:visited, .postlink A:link, .postlink A:visited, .postfootright A:link, .postfootright A:visited,
.blockmenu A:link, .blockmenu A:visited {
text-decoration: none }
/* 3.2 Underline on hover for links in headers and main menu */
#brdmenu A:hover, .blockpost H2 A:hover {
text-decoration: none;
border-bottom: 1px solid #7DECFB }
/****************************************************************/
/* 4. BORDER WIDTH AND STYLE */
/****************************************************************/
/* 4.1 By default borders are 1px solid */
DIV.box, .pun TD, .pun TH, .pun BLOCKQUOTE, DIV.codebox, DIV.forminfo, DIV.blockpost LABEL {
BORDER-STYLE: solid;
BORDER-WIDTH: 1px
}
/* 4.2 Special settings for the board header. */
#brdheader DIV.box {BORDER-TOP-WIDTH: 4px}
/* 4.3 Borders for table cells */
.pun TD, .pun TH {
BORDER-BOTTOM: none;
BORDER-RIGHT: none
}
.pun .tcl {BORDER-LEFT: none}
/* 4.4 Special setting for fieldsets to preserve IE defaults */
DIV>FIELDSET {
BORDER-STYLE: solid;
BORDER-WIDTH: 1px
}
/****************************************************************/
/* 5. VERTICAL AND PAGE SPACING */
/****************************************************************/
/* 5.1 Page margins */
HTML, BODY {MARGIN: 0; PADDING: 0}
#punwrap {margin:12px 20px}
/* 5.2 Creates vertical space between main board elements (Margins) */
DIV.blocktable, DIV.block, DIV.blockform, DIV.block2col, #postreview {MARGIN-BOTTOM: 12px}
#punindex DIV.blocktable, DIV.blockpost {MARGIN-BOTTOM: 6px}
DIV.block2col DIV.blockform, DIV.block2col DIV.block {MARGIN-BOTTOM: 0px}
/* 5.3 Remove space above breadcrumbs, postlinks and pagelinks with a negative top margin */
DIV.linkst, DIV.linksb {MARGIN-TOP: -12px}
DIV.postlinksb {MARGIN-TOP: -6px}
/* 5.4 Put a 12px gap above the board information box in index because the category tables only
have a 6px space beneath them */
#brdstats {MARGIN-TOP: 12px}
/****************************************************************/
/* 6. SPACING AROUND CONTENT */
/****************************************************************/
/* 6.1 Default padding for main items */
DIV.block DIV.inbox, DIV.blockmenu DIV.inbox {PADDING: 3px 6px}
.pun P, .pun UL, .pun DL, DIV.blockmenu LI, .pun LABEL, #announce DIV.inbox DIV {PADDING: 3px 0}
.pun H2 {PADDING: 4px 6px}
/* 6.2 Special spacing for various elements */
.pun H1 {PADDING: 3px 0px 0px 0}
#brdtitle P {PADDING-TOP: 0px}
DIV.linkst {PADDING: 8px 6px 3px 6px}
DIV.linksb, DIV.postlinksb {PADDING: 3px 6px 8px 6px}
#brdwelcome, #brdfooter DL A, DIV.blockmenu LI, DIV.rbox INPUT {LINE-HEIGHT: 1.4em}
#viewprofile DT, #viewprofile DD {PADDING: 0 3px; LINE-HEIGHT: 2em}
/* 6.4 Create some horizontal spacing for various elements */
#brdmenu LI, DIV.rbox INPUT, DIV.blockform P INPUT {MARGIN-RIGHT: 12px}
/****************************************************************/
/* 7. SPACING FOR TABLES */
/****************************************************************/
.pun TH, .pun TD {PADDING: 4px 6px}
.pun TD P {PADDING: 5px 0 0 0}
/****************************************************************/
/* 8. SPACING FOR POSTS */
/****************************************************************/
/* 8.1 Padding around left and right columns in viewtopic */
DIV.postleft DL, DIV.postright {PADDING: 6px}
/* 8.2 Extra spacing for poster contact details and avatar */
DD.usercontacts, DD.postavatar {MARGIN-TOP: 5px}
DD.postavatar {MARGIN-BOTTOM: 5px}
/* 8.3 Extra top spacing for signatures and edited by */
DIV.postsignature, DIV.postmsg P.postedit {PADDING-TOP: 15px}
/* 8.4 Spacing for code and quote boxes */
DIV.postmsg H4 {MARGIN-BOTTOM: 10px}
.pun BLOCKQUOTE, DIV.codebox {MARGIN: 5px 15px 15px 15px; PADDING: 8px}
/* 8.5 Padding for the action links and online indicator in viewtopic */
DIV.postfootleft P, DIV.postfootright UL, DIV.postfootright DIV {PADDING: 10px 6px 5px 6px}
/* 8.6 This is the input on moderators multi-delete view */
DIV.blockpost INPUT, DIV.blockpost LABEL {
PADDING: 3px;
DISPLAY: inline
}
P.multidelete {
PADDING-TOP: 15px;
PADDING-BOTTOM: 5px
}
/* 8.7 Make sure paragraphs in posts don't get any padding */
DIV.postmsg P {PADDING: 0}
/****************************************************************/
/* 9. SPECIAL SPACING FOR FORMS */
/****************************************************************/
/* 9.1 Padding around fieldsets */
DIV.blockform FORM, DIV.fakeform {PADDING: 20px 20px 15px 20px}
DIV.inform {PADDING-BOTTOM: 12px}
/* 9.2 Padding inside fieldsets */
.pun FIELDSET {PADDING: 0px 12px 0px 12px}
DIV.infldset {PADDING: 9px 0px 12px 0}
.pun LEGEND {PADDING: 0px 6px}
/* 9.3 The information box at the top of the registration form and elsewhere */
DIV.forminfo {
MARGIN-BOTTOM: 12px;
PADDING: 9px 10px
}
/* 9.4 BBCode help links in post forms */
UL.bblinks LI {PADDING-RIGHT: 20px}
UL.bblinks {PADDING-BOTTOM: 10px; PADDING-LEFT: 4px}
/* 9.5 Horizontal positioning for the submit button on forms */
DIV.blockform P INPUT {MARGIN-LEFT: 12px}
/****************************************************************/
/* 10. POST STATUS INDICATORS */
/****************************************************************/
/* 10.1 These are the post status indicators which appear at the left of some tables.
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. By default only .inew is different from the default.*/
DIV.icon {
FLOAT: left;
MARGIN-TOP: 0.1em;
MARGIN-LEFT: 0.2em;
DISPLAY: block;
BORDER-WIDTH: 0.6em 0.6em 0.6em 0.6em;
BORDER-STYLE: solid
}
DIV.searchposts DIV.icon {MARGIN-LEFT: 0}
/* 10.2 Class .tclcon is a div inside the first column of tables with post indicators. The
margin creates space for the post status indicator */
TD DIV.tclcon {MARGIN-LEFT: 2.3em}/* *************************** SpinkBB ****************** */
/* SKIN GENERE PAR SPINKBB */
/* http://www.jsand.net/spinkbb */
/* ********************************** SpinkBB *********** */
/****************************************************************/
/* 1. BACKGROUND AND TEXT COLOURS */
/****************************************************************/
/* 1.1 Default background colour and text colour */
BODY {BACKGROUND-COLOR: #6CDBFA}
.pun {COLOR: #000000}
DIV.box, .pun BLOCKQUOTE, DIV.codebox, #adminconsole FIELDSET TH, .rowodd, .roweven {BACKGROUND-COLOR: #2897D6}
#adminconsole TD, #adminconsole TH {BORDER-COLOR: #2897D6}
/* 1. 2 Darker background colours */
TD.tc2, TD.tc3, TD.tcmod, #postpreview, #viewprofile DD, DIV.forminfo,
#adminconsole FIELDSET TD, DIV.blockmenu DIV.box, #adstats DD {BACKGROUND-COLOR: #76B945}
/* 1.3 Main headers and navigation bar background and text colour */
.pun H2, #brdmenu {BACKGROUND-COLOR: #57A76E; COLOR: #2EB3D1}
/* 1.4 Table header rows */
.pun TH {BACKGROUND-COLOR: #E99415}
/* 1.5 Fieldset legend text colour */
.pun LEGEND {COLOR: #001050}
/* 1.6 Highlighted text for various items */
.pun DIV.blockmenu LI.isactive A, #posterror LI STRONG {COLOR: #333}
/****************************************************************/
/* 2. POST BACKGROUNDS AND TEXT */
/****************************************************************/
/* 2.1 This is the setup for posts. */
DIV.blockpost DIV.box, DIV.postright, DIV.postfootright {BACKGROUND-COLOR: #76B945}
DIV.postright, DIV.postfootright {BORDER-LEFT-COLOR: #2897D6}
DIV.postleft, DIV.postfootleft, DIV.blockpost LABEL {BACKGROUND-COLOR: #2897D6}
/* 2.2 Background for post headers and text colour for post numbers in viewtopic */
DIV.blockpost H2 {BACKGROUND-COLOR: #57A76E}
DIV.blockpost H2 SPAN.conr {COLOR: #2450DA}
/* 2.3 This is the line above the signature in posts. Colour and background should be the same */
.pun HR {BACKGROUND-COLOR: #333; COLOR: #333}
/****************************************************************/
/* 3. BORDER COLOURS */
/****************************************************************/
/* 3.1 All external borders */
DIV.box {BORDER-COLOR: #57A76E}
/* 3.2 Makes the top border of posts match the colour used for post headers */
DIV.blockpost DIV.box {BORDER-COLOR: #57A76E #57A76E #57A76E}
/* 3.3 Table internal borders. By default TH is same as background so border is invisible */
.pun TD {BORDER-COLOR: #2450DA}
.pun TH {BORDER-COLOR: #E99415}
/* 3.4 Creates the inset border for quote boxes, code boxes and form info boxes */
.pun BLOCKQUOTE, DIV.codebox, DIV.forminfo, DIV.blockpost LABEL {BORDER-COLOR: #ACA899 #FFF #FFF #ACA899}
/* 3.5 Gecko's default fieldset borders are really nasty so this gives them a colour
without interferring with IE's rather nice default */
.pun DIV>FIELDSET {BORDER-COLOR: #ACA899}
/****************************************************************/
/* 4. LINK COLOURS */
/****************************************************************/
/* 4.1 This is the default for all links */
.pun A:link, .pun A:visited {COLOR: #001050}
.pun A:hover {COLOR: #045392}
/* 4.2 This is the colour for links in header rows and the navigation bar */
.pun H2 A:link, .pun H2 A:visited, #brdmenu A:link, #brdmenu A:visited {COLOR: #9FFEFD}
.pun H2 A:hover, #brdmenu A:hover {COLOR: #7DECFB}
/* 4.3 This is for closed topics and "hot" links */
LI.postreport A:link, LI.postreport A:visited, TR.iclosed TD.tcl A:link, TR.iclosed TD.tcl A:visited {COLOR: #888}
LI.postreport A:hover, TR.iclosed TD.tcl A:hover {COLOR: #AAA}
LI.maintenancelink A:link, LI.maintenancelink A:visited {COLOR: #B42000}
LI.maintenancelink A:hover {COLOR: #B42000}
/****************************************************************/
/* 5. POST STATUS INDICATORS */
/****************************************************************/
/* These are the post status indicators which appear at the left of some tables.
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. The default is "icon". By default only .inew is different.*/
DIV.icon {BORDER-COLOR: #5DCD31 #3BAB10 #2A9A00 #3BAB10}
TR.iredirect DIV.icon {BORDER-COLOR: #2897D6 #2897D6 #2897D6 #2897D6}
DIV.inew {BORDER-COLOR: #F71A07 #D50805 #C40704 #D50805}Nie pomagam w sprawie radia internetowego. Basta!
Offline
![[dblpt][slash]](http://www.forum.pun.pl/upload/pun_pl/forum/smilies/[dblpt][slash].jpg)
#12 2008-03-31 18:05:38
- Chopin
- Użytkownik
- Dołączył: 2006-11-25
- Liczba postów: 1,936
Odp: Jak stworzyć styl pod PunBB
A co zrobiesz. Bo chyba coś ominąłem.
Nie pomagam w sprawie radia internetowego. Basta!
Offline
#13 2008-03-31 19:20:09
- Rudik
- Użytkownik
- Skąd: Iława
- Dołączył: 2007-06-18
- Liczba postów: 5,530
Odp: Jak stworzyć styl pod PunBB
gufi102'iemu chodziło o tutorial na bardziej złożony styl
Offline
#14 2008-04-01 17:56:43
Odp: Jak stworzyć styl pod PunBB
A wiec przejdźmy do rzeczy czemu mówiłem wam żeby na razie nic nie wysyłać dla tomka sprawa ma się następująco zapomniałem wam podać jak się zmienia nazwę stylu i żeby to działo poprawnie i unikać konfliktów stli a no wystarczy zrobić to tak:
Ja preferuję to robić tak:
Zmieniamy nazwy plików najlepiej przy zapisywaniu wcześniejszego stylu w notatniku:
Nazwa stylu.css
Nazwa stylu_cs.css
Żeby było tego mało trzeba zrobić jeszcze coś takiego:
W pliku nazwa stylu.css trzeba zimnic to :
@import url(imports/spinkbb_cs.css);Na to:
@import url(imports/nazwa stylu_cs.css);Jeśli natomiast macie już zapisany ten styl na dysku normalnie tak jak poprzednio to wystarczy zmienić nazwy plików oraz w edytować ten plik i to wszystko jeśli chodzi o zapisywanie styli.
P.S. Ja osobiście polecam tez je ułożyć tak aby wystarczyło tylko skopiowanie folderu z stylem itd. A to takie małe drzewo jak powinno to wyglądać:
Folder style => Nazwa stylu.css /Folder imports
Folder imports => Nazwa stylu_cs.css
__________________________________________________________________________________
Drugą częścią którą chciałbym by poruszyć w tej części tutoriala jest dodawanie ikon tematów itp.
Wbrew pozorom jest to łatwe nie wliczam w to stworzenia ikon itd. ale tylko dodanie ich do kodu.
A wiec tak robimy to tak wchodzimy do pliku Nazwa stylu.css i zmieniamy to:
/* 10.1 These are the post status indicators which appear at the left of some tables.
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. By default only .inew is different from the default.*/
DIV.icon {
FLOAT: left;
MARGIN-TOP: 0.1em;
MARGIN-LEFT: 0.2em;
DISPLAY: block;
BORDER-WIDTH: 0.6em 0.6em 0.6em 0.6em;
BORDER-STYLE: solid
}
DIV.searchposts DIV.icon {MARGIN-LEFT: 0}
/* 10.2 Class .tclcon is a div inside the first column of tables with post indicators. The
margin creates space for the post status indicator */
TD DIV.tclcon {MARGIN-LEFT: 2.3em}Na to:
/* 10.1 These are the post status indicators which appear at the left of some tables.
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. By default only .inew is different from the default.*/
DIV.icon {
FLOAT: left;
MARGIN-TOP: 0.1em;
MARGIN-right: 0.4em;
DISPLAY: block;
/* BORDER-WIDTH: 0.6em 0.6em 0.6em 0.6em;
BORDER-STYLE: solid*/
HEIGHT: XXpx;
WIDTH: XXpx;
}
DIV.searchposts DIV.icon {MARGIN-LEFT: 0}
/* 10.2 Class .tclcon is a div inside the first column of tables with post indicators. The
margin creates space for the post status indicator */
TD DIV.tclcon {MARGIN-LEFT: 2.3em}Tu radze pozostawić wszystko bez zmian oprócz wielkości i szerokości czyli HEIGHT/WIDTH tych ikon które podajemy do stylu w innym razie będą one nam się podwajać bądź potrajać itd. wartość jest podawana w px (żeby ktoś nie wiedział co to jest px to są to piksele) wielkość ikon możemy sprawdzić w programach graficznych bądź po prostu klikając w właściwości tego obrazku w Win
A następnie w pliku Nazwa stylu_cs.css zmieniamy to:
/* These are the post status indicators which appear at the left of some tables.
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. The default is "icon". By default only .inew is different.*/
DIV.icon {BORDER-COLOR: #8DB520 #6B9300 #5A8200 #6B9300}
TR.iredirect DIV.icon {BORDER-COLOR: #E7F7B9 #E7F7B9 #E7F7B9 #E7F7B9}
DIV.inew {BORDER-COLOR: #6A9ADF #4878BD #3767AC #4878BD}Na to:
/* These are the post status indicators which appear at the left of some tables.
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. The default is "icon". By default only .inew is different.*/
DIV.icon { background: url(../../img/nazwa stylu/nazwa pliku.format pliku);}
DIV.inew { background:url(../../img/nazwa stylu/nazwa pliku.format pliku);}
TR.isticky DIV.icon {background:url(../../img/nazwa stylu/nazwa pliku.format pliku);}
TR.isticky DIV.inew {background:url(../../img/nazwa stylu/nazwa pliku.format pliku);}
TR.iclosed DIV.icon {background:url(../../img/nazwa stylu/nazwa pliku.format pliku);}
TR.iclosed Div.inew {background:url(../../img/nazwa stylu/nazwa pliku.format pliku);}
TR.iredirect DIV.icon {background:url(../../img/nazwa stylu/nazwa pliku.format pliku);}Co oznaczają poszczególne nazwy:
DIV.icon => ikona bez nowych wiadomości
DIV.inew => ikona z nowymi wiadomościami
TR.isticky => ikona wątku przyklejonego
TR.iclosed => ikona wątku lub działu zamkniętego
TR.iredirect => ikona hiperłącza do innej strony www(rzadko kto oprócz mnie jej używa w stylach ale niech będzie)
Ten dodatek po tych nazwach to adres obrazka. Wracając do obrazka to jeszcze taka ciekawostka ale nie wymuszona ale lubiana rzecz przez adminów stron itp. jest zapisywanie obrazków tak jak ja to pokazałem czyli do katalogu img i katalogu stylu (nazwa stylu => najlepiej wtedy sie nikt nie pogubi).
I w ten oto sposób mamy już ikony na swoim stylu.
Ostatnio edytowany przez gufi102 (2008-04-01 19:38:58)
Offline
#15 2008-04-01 21:47:42
- Rudik
- Użytkownik
- Skąd: Iława
- Dołączył: 2007-06-18
- Liczba postów: 5,530
Odp: Jak stworzyć styl pod PunBB
O dzięki za tutka, na pewno się przyda, mam nadzieję, że wszystko zrozumiałem
Ale mam pytanko, jak są te adresy do ikonek (ostatnie rzeczy), to z tymi lokalizacjami (img/nazwa stylu/plik) to ja mam sam to stworzyć? Czy interesuję mnie tylko nazwa pliku i nazwa stylu, a img ma zostać, ani nie mam tworzyć żadnych katalogów?
Oczywiście czekamy na nowe tutki
Offline
- Użytkowników czytających ten temat: 0, gości: 1
- [Bot] ClaudeBot