Poprzedni temat «» Następny temat
Edycja stylu
Autor Wiadomość
Ranker 
Wysłany: 2008-12-22, 16:58   Edycja stylu Adres Forum: http://Varillion.laa.pl      
Siła Spokoju



Pomógł: 73 razy
Wiek: 24
Dołączył: 06 Kwi 2008
Posty: 1051
Skąd: Wrocław
Chcesz mieć oryginalny styl na twoim forum? To zapraszam do lektury. Jednak zanim zaczniesz, wykonaj czynności opisane tutaj:
http://jun.pl/forum/topic...htm?view=newest
Teraz możesz przystąpić do edycji stylu.

Spis treści:
1. Tła
--1.1 Kolor zewnętrznego tła
--1.2 Kolor wewnętrznego tła
--1.3 Kolor tła tabel
--1.4 Kolor tła wewnątrz tabel
2. Cellpic
--2.1 Cellpic3
--2.2 Cellpic1
--2.3 Cellpic2
3. Nagłówek
--3.1 Kolor i rozmiar linków
--3.2 Kolor i dekoracja linków po najechaniu na nie myszką


1. Tła - wszystkie informacje dotyczące zmiany tła w wielu miejscach znjdują się w tym punkcie.
W kodzie css za kolor tła odpowiada linijka:
Kod:
background-color: #000000;

Gdzie #000000 to wartość określająca kolor w kodzie szesnastkowym, może to być również po prostu kolor po angielsku, np: "Red" czy "Black" lub wartości rgb (rgb(200,0,0)).
Możemy również tło zamienić na obrazek wystarczy tylko odpowiednio z edytować linijkę na:
Kod:
background-image: url("Adres Obrazka.Rozszerzenie");


1.1 Kolor zewnętrznego tła (czyli to pod wszytkim ;) ) edytujemy poprzez linijkę w body:
Kod:
[...]
body {
background-color:#000000;
[...]

lub wstawiając obrazek:
Kod:
[...]
body { [...]
background-image: url("Adres Obrazka.Rozszerzenie"); [...] }


1.2 Tło wewnętrzne możemy ze edytować poprzez taką samą linie w .bodyline:
Kod:
[...]
.bodyline { background-color: #000000;[...] }


1.3 Tło tabel (wąskie paski oddzielające fora w kategoriach) zmieniamy w lini .forumline:
Kod:
[...]
.forumline { background-color: #000010; [...] }


1.4 Kolor tła wewnątrz tabel.
- Z nazwą i opisem forum:
Kod:
[...]
td.row1 { background-color: #000000; }


- Z liczbą tematów, postów i info o ostatnim poście:
Kod:
[...]
td.row2 { background-color: #000000; }


- Kolor tła pod opisem kategorii:
Kod:
[...]
td.row3 { background-color: #000000; }


2. Cellpic - teraz zajmiemy się kilkoma elementami graficznymi stylu. Właśnie dzięki tym grafiką styl będzie się różnił od innych. Sprawny grafik może nawet bardzo zmienić swój styl. Cellpic zmieniamy edytując tak samo jak zmienialiśmy kolor czyli przekształcamy kod css.

2.1 Cellpic główny - z nazwą kategorii i napisami "Tematy", "Posty" i "Ostatni Post":
Kod:
th { [...]
background-image:    url(images/cellpic3.gif); }


2.2 Cellpic odzielający nazwę od opisu kategorii:
Kod:
td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-image: url(images/cellpic1.gif); [...] }


2.3 Cellpic pod napisami "Tematy", "Posty" i "Ostatni Post":
Kod:
td.rowpic { [...]
background-image: url('images/cellpic2.jpg');


3. Nagłówek - dwie opcje opisujące właściwości linków w nagłówku.

3.1 Kolor i rozmiar linków:
Kod:
.mainmenu    { font-size : 11px; color : #000000 }


3.2 Kolor i dekoracja linków po najechaniu na nie myszką:
Kod:
a.mainmenu:hover    { text-decoration: underline; color : #DD6900; }


*[...] - oznacza inny tekst.

Te kilka modyfikacji pozwoli wam odmienić styl, a jak już wcześniej pisałem - sprawny grafik sprawi że styl będzie w miarę oryginalny.

UWAGA!!
Aby wszystko dobrze działało należy każdy link do obrazka z takiego, np.:
Cytat:
images/cellpic.png

na taki:
Cytat:
templates/NAZWASTYLU/images/cellpic.png

Wiemy to dzięki ZolltaR`owi.
_________________
Regulamin | Szukaj Pomocy | Napisz Do Mnie [PW]

Ostatnio zmieniony przez Ranker 2009-04-14, 16:02, w całości zmieniany 1 raz  
Profil
PW Email www Cytuj
James 
Wysłany: 2009-02-18, 21:09    Adres Forum: Vinyl kills the mp3 industry.      
Daj mi bit



Pomógł: 40 razy
Dołączył: 27 Sty 2008
Posty: 1125
Skąd: Drawsko Pomorskie
Coś mi te tło nie działa. Gdy to zrobiłem kolor tła zmienił się, a cellpic są jakieś takie jakby z subsilver ;P

Kod:
<style>/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
background-image: url(http://iv.pl/images/gosp2f2xw3s3i5aweqs9.jpg);
scrollbar-face-color:        #313336;
scrollbar-highlight-color:    #55575A;
scrollbar-shadow-color:        #313336;
scrollbar-3dlight-color:    #86898B;
scrollbar-arrow-color:        #000000;
scrollbar-track-color:        #717172;
scrollbar-darkshadow-color:    #727B7E;
background-image: url(images/bg_main.gif);
margin: 4px;
}

/* General font families for common tags */
font,th,td,p            { font-family: Tahoma, Verdana, Arial}
a:link,a:active,a:visited    { color : #8E8E8E; }
p, td            { font-size : 11px; color : #CFCFCF; }
a:hover            { text-decoration: underline; color : #626160; }
hr                { height: 0px; border: solid #CFCFCF 0px; border-top-width: 1px; }

/* This is the border line & background colour round the entire page */
.bodyline { background-color: #303030; border: 1px #A9A9A9 solid; }

/* This is the outline round the main forum tables */
.forumline { background-color: #000000; border: solid #FFFFFF 1px; border-top-width: 1px; }

/* Main table cell colours and backgrounds */
td.row1 { background-color: #454545; }
td.row2 { background-color: #2C2C2C; }
td.row_helped { background-color: #000000; }

/*
    This is for the table cell above the Topics, Post & Last posts on the index.php page
    By default this is the fading out gradiated silver background.
    However, you could replace this with a bitmap specific for each forum
*/
td.rowpic {
background-color: #414141;
background-image: url('images/cellpic2.jpg');
background-repeat: repeat-y; height: 22px;
}

/* Header cells - the blue and silver gradient backgrounds */
th {
color:            #CFCFCF; font-size: 10px; font-weight: normal;
background-color:    #909090; height: 25px;
background-image:    url(images/cellpic3.gif);
}

td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-image: url(images/cellpic1.gif);
background-color:#414141; border: #FFFFFF; border-style: solid; height: 28px;
}

/*
    Setting additional nice inner borders for the main table cells.
    The names indicate which sides the border will be on.
    Don't worry if you don't understand this, just ignore it :-)
*/
td.cat,td.catHead,td.catBottom { background-color: #C7D0D7; background-image: url('images/cellpic1.gif'); height: 22px; }
th.thHead,th.thSides,th.thLeft,th.thRight,th.thBottom {
font-weight: bold; border: #FFFFFF; height: 28px;
}

th.thCornerL,th.thTop,th.thCornerR {color: #CFCFCF; font-size: 70%; font-weight: bold; background-color: #006699; background-image: url('images/cellpic3.gif'); height: 28px; }

td.row3R3/20/2006ight,td.spaceRow { background-color: #414141; border: #FFFFFF; border-style: solid; }

th.thHead,td.catHead            { font-size: 12px; border-width: 0px; }
th.thSides,td.catSides,td.spaceRow    { border-width: 1px; }
th.thRight,td.catRight,td.row3Right    { border-width: 1px; }
th.thLeft,td.catLeft            { border-width: 1px; }
th.thBottom,td.catBottom        { border-width: 1px; }
th.thTop                { border-width: 1px; }
th.thCornerL                { border-width: 1px; }
th.thCornerR                { border-width: 1px; }

/* The largest text used in the index page title and toptic title etc. */
.maintitle {
font-weight: bold; font-size: 20px; font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
text-decoration: none; line-height : 120%; color : #FFFFFF;
}

/* General text */
.gen                        { font-size : 12px; }
.genmed                    { font-size : 11px; }
.gensmall                    { font-size : 10px; }
.gen,.genmed,.gensmall            { color : #CFCFCF; }
a.gen,a.genmed,a.gensmall            { color: #CFCFCF; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover    { color: #999999; text-decoration: underline; }

/* The register, login, search etc links at the top of the page */
.mainmenu        { font-size : 11px; color : #CFCFCF }
a.mainmenu        { text-decoration: none; color : #CFCFCF; }
a.mainmenu:hover    { text-decoration: underline; color : #626160; }

/* Forum category titles */
.cattitle        { font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #CFCFCF}
a.cattitle        { text-decoration: none; color : #CFCFCF; }
a.cattitle:hover    { text-decoration: underline; }

/* Forum title: Text and link to the forums used in: index.php */
.forumlink        { font-weight: bold; font-size: 12px; color : #CFCFCF; }
a.forumlink        { text-decoration: none; color : #CFCFCF; }
a.forumlink:hover    { text-decoration: underline; color : #909090; }

/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav        { font-weight: bold; font-size: 10px; color : #CFCFCF;}
a.nav    { text-decoration: none; color : #909090; }
a.nav:hover    { text-decoration: underline; }

/* titles for the topics: could specify viewed link colour too */
.topictitle,h1,h2    { font-weight: bold; font-size: 11px; color : #FFFFFF; }
a.topictitle:link    { text-decoration: none; color : #CFCFCF; }
a.topictitle:visited    { text-decoration: none; color : #CFCFCF; }
a.topictitle:hover    { text-decoration: underline; color : #626160; }

/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name { font-size : 11px; color : #FFFFFF; text-decoration: none}

/* Location, number of posts, post date etc */
.postdetails        { font-size : 10px; color : #FFFFFF; }

/* The content of the posts (body of text) */
.postbody        { font-size : 11px; line-height: 18px }
a.postlink:link    { text-decoration: none; color : #A3A3A3 }
a.postlink:visited    { text-decoration: none; color : #626160; }
a.postlink:hover    { text-decoration: underline; color : #A4A4A4 }

/* Quote & Code blocks */
.code {
font-family:        Courier, 'Courier New', sans-serif; font-size: 10px; color: #006600;
background-color:    #FAFAFA; border: #D1D7DC; border-style: solid;
border-left-width:    1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px;
}

.quote {
font-family:        Tahoma, Verdana, Arial; font-size: 10px; color: #444444; line-height: 125%;
background-color:    #FAFAFA; border: #D1D7DC; border-style: solid;
border-left-width:    1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px;
}

/* Copyright and bottom info */
.copyright        { font-size : 10px; color: #CFCFCF; font-family: Tahoma, Verdana, Arial; }
a.copyright        { text-decoration: none; color : #C1C1C1; }
a.copyright:hover    { text-decoration: underline; color : #A4A4A4; }

/* Form elements */

form { margin: 0; }
form { display: inline; }

input,textarea, select {
color : #FFFFFF;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
}

/* The text input fields background colour */
input.post, textarea.post, select            { background-color : #434343; }
input.post2, textarea.post2, select    { background-color : #2C2C2C; }
input                        { text-indent : 2px; }

/* The buttons used for bbCode styling in message post */
input.button {
background-color :    #484848;
color :            #EFEFEF;
font-size:        11px; font-family: Verdana, Arial, Helvetica, sans-serif;
cursor:            pointer;
}

/* The main submit button option */
input.mainoption {
background-color:    #484848;
font-weight:        bold;
cursor:            pointer;
}

/* None-bold submit button */
input.liteoption {
background-color:    #484848;
font-weight:        normal;
cursor:            pointer;
}

/* This is the line in the posting page which shows the rollover
    help line. This is actually a text box, but if set to be the same
    colour as the background no one will know ;)
*/
.helpline { background-color: #000000; border-style: none; }

/* Highlight bad words for moderators instead of censoring them */
span.badwordhighlight { background-color: #FFFF00; }

.topbkg { background: #dbe3ee url(images/cellpic_bkg.jpg) repeat-x }
.topnav { font-size:10px;background: #e5ebf3 url(images/cellpic_nav.gif) repeat-x;color:#dd6900; height: 21px; white-space: nowrap; text-align: center; border: 0px solid #91a0ae; border-width: 1px 0 1px 0 }

.pm { font-size: 11px; text-decoration: none; color: #FF0000 }

.table0
{
    background-color : #EFEFEF;
    border-bottom-color : #4F4F4F;
    border-bottom-style : solid;
    border-bottom-width : 1;
    border-left-color : #4F4F4F;
    border-left-style : solid;
    border-left-width : 1px;
    border-right-color : #4F4F4F;
    border-right-style : solid;
    border-right-width : 1px;
    border-top-color : #4F4F4F;
    border-top-style : solid;
    border-top-width : 1px;
    color : #CFCFCF;
    font-size : 10px;
}

.pagination {
    color: #666;
    font-size: 10px;
    font-weight: bold;
    padding: 3px;
    padding-bottom: 4px;
    cursor: pointer;
    text-decoration: none;
}
.pagination a, .pagination a:visited, .pagination a:active {
    background-color: #454545;
    color: #C7C7C7;
    border-color: #979797;
    border: #979797 1px solid;
    padding: 1px;
    text-decoration: none;
}
.pagination a:hover {
    background-color: #FFF;
    color: #666;
    border-color: #EAECEF;
    border: #EAECEF 1px solid;
    text-decoration: none;
    padding: 1px;
}

/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("formIE.css");</style>
_________________
Zrobię, pokonam, umiem, potrafię.
Wiara jest silna - dam kiedyś radę!
Profil
PW Email Cytuj
Gutek 
Wysłany: 2009-02-18, 21:25    Adres Forum: www.ls-world.pl      



Pomógł: 235 razy
Dołączył: 21 Maj 2008
Posty: 1176
Skąd: jesteś?
Własnie po takiej edycji zmienia cellpic na jakieś inne i trzeba je zminiać od nowa jeżeli chcesz takie same.
_________________
Zapraszam na www.ls-world.pl
Profil
PW Email www Cytuj
ZolltaR 
Wysłany: 2009-02-18, 21:28         
AtlantiQ



Pomógł: 114 razy
Wiek: 27
Dołączył: 12 Lut 2008
Posty: 1476
James, ten temat był już wałkowany

http://jun.pl/forum/topic...?highlight=styl

ot przykład
_________________
Grafika na forum (odpłatnie) - pisz na maila !
Profil
PW Email Cytuj
Des
Wysłany: 2009-05-14, 18:39    Adres Forum: "A forum rzal."      


Pomógł: 1 raz
Wiek: 108
Dołączył: 09 Mar 2009
Posty: 110
Witam, próbuję z edytować styl SithLords, czy możecie mi powiedzieć, czy da się zmienić ten pasek z napisem "Forum" i "Kto jest na forum?" Link: http://dsp.laa.pl/
Profil
PW Email Cytuj
James 
Wysłany: 2009-05-16, 10:53    Adres Forum: Vinyl kills the mp3 industry.      
Daj mi bit



Pomógł: 40 razy
Dołączył: 27 Sty 2008
Posty: 1125
Skąd: Drawsko Pomorskie
Des, zmień cellpic1.gif ;>
_________________
Zrobię, pokonam, umiem, potrafię.
Wiara jest silna - dam kiedyś radę!
Profil
PW Email Cytuj
Justine 
Wysłany: 2009-06-11, 00:12         
FOREVER!


Dołączyła: 19 Paź 2008
Posty: 39
Skąd: Neverland
przydało się, a ja mam pytanie do tego jak zrobić by tło się nie ruszało.. albo jakej wielkości zrobić by było na całej stronie głownej?
_________________
[R.I.P] Michael [*]
Polska Strona Króla Pop-u;)
www.michaeljackson.pl
Profil
PW Cytuj
Łukasz 
Wysłany: 2009-06-11, 07:38    Adres Forum: http://agro.morow.pl      


Pomógł: 100 razy
Wiek: 26
Dołączył: 02 Cze 2007
Posty: 2097
znajdz :
Kod:
background-image: url(tutaj jest twoj link do tła);

dodaj po
Kod:
background-attachment: fixed;
_________________
http://agro.morow.pl - Agroturystyka Nysa
Profil
PW Email Cytuj
rubio1992gt 
Wysłany: 2009-06-15, 02:55         
LoVeLaS

Pomógł: 1 raz
Dołączył: 29 Mar 2009
Posty: 66
Skąd: Warszawa
kurdę a można zmienić też te przyciski "FAQ" "użytkownicy" etc. :?: bo jakoś mnie naszło żeby tak konkretnie zmienić styl
_________________
"...boski chill out oby trwał na wieki..." zjarany, zbakany, naćpany :?: nazwij to jak
chcesz ja jestem zchilloutowany :!:
Profil
PW Email www Cytuj
Bodziex 
Wysłany: 2009-06-16, 10:40         



Pomógł: 95 razy
Dołączył: 22 Mar 2007
Posty: 1187
Wyłącz oryginalny nagłówek i rób według upodobań :>
_________________
Pomoc techniczna, grafika - pisz na PW.
Profil
PW Email Cytuj
rubio1992gt 
Wysłany: 2009-06-16, 15:09         
LoVeLaS

Pomógł: 1 raz
Dołączył: 29 Mar 2009
Posty: 66
Skąd: Warszawa
Bodziex, dzięki a coś mi powiesz czego nie wiem :P chodzi mi o te przyciski czy da się je zmienić i jakiej wielkości muszą być te obrazy tła zwykłego i wewnętrznego :?: a moze ja po prostu zrobię to co trzeba wstawię tu grafikę a wy mi powiecie co z tego mogę wstawić i czy coś muszę poprawić w rozmiarach moge wstawic w tym temacie grafikę :?:
_________________
"...boski chill out oby trwał na wieki..." zjarany, zbakany, naćpany :?: nazwij to jak
chcesz ja jestem zchilloutowany :!:
Profil
PW Email www Cytuj
Crashia 
Wysłany: 2009-07-23, 09:46         


Pomogła: 18 razy
Wiek: 21
Dołączyła: 02 Maj 2009
Posty: 466
Cellpic'i działają, ale tylko na stronie głównej, chodzi mi o cellpic 1.
_________________
It's driving me insane.
Profil
PW Email Cytuj
DarkAngel 
Wysłany: 2009-07-23, 17:35         
elephants are lonely


Pomógł: 5 razy
Dołączył: 22 Wrz 2008
Posty: 405
Crashia, mi działają wszędzie.
Profil
PW Email Cytuj
Crashia 
Wysłany: 2009-07-24, 06:35         


Pomogła: 18 razy
Wiek: 21
Dołączyła: 02 Maj 2009
Posty: 466
Już działa, działa. Okazało się, że nie wkleiłam adresu w parę miejsc.
_________________
It's driving me insane.
Profil
PW Email Cytuj
ZolltaR 
Wysłany: 2009-08-22, 21:16         
AtlantiQ



Pomógł: 114 razy
Wiek: 27
Dołączył: 12 Lut 2008
Posty: 1476
Co Jest Czym Opisane
Koniec Problemów


Koniec problemów typu "Co jest czym opisane". Ściągacie dodatek do FireFox'a (kto nie ma niech poszuka w necie insatlkę do FF) i instalujecie. Dzięki temu skończoną się męki z CSS'em dla niektórych i edycja stylu będzie znacznie łatwiejsza. Teraz jak to działa


http://img21.imageshack.us/img21/2647/junp.png

Po najechaniu na obiekt pojawia się nam kolor oraz klasa jaka jest on opisany. Reszta już myślę z górki

pozdr
_________________
Grafika na forum (odpłatnie) - pisz na maila !
Profil
PW Email Cytuj
Wyświetl posty z ostatnich:   
Odpowiedz do tematu
Nie możesz pisać nowych tematów
Nie możesz odpowiadać w tematach
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Nie możesz ściągać załączników na tym forum
Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  

Powered by phpBB modified by Przemo © 2003 phpBB Group
Themes: junFresh & Silk icon

website value  |  gry scooby doo  |  Darmowe fora  |  mylekarze.pl  |  egipt wycieczki