Zmiana o kolorów stylu do MyBB

Wszystko o grafice komputerowej wykorzystywanej na stronach i szeroko pojętych multimediach - w tym również technologii Flash.
Sepowaty
Posty: 85
Rejestracja: 28 gru 2012, 19:01:19
Płeć: Niewybrana
User Agent: Chrome Windows 1280x1024

Re: Zmiana o kolorów stylu do MyBB

Post autor: Sepowaty »

ACP -> Style i szablony -> Edytuj styl -> global.css -> Edytuj -> Edycja CSS zaawansowana
Awatar użytkownika
piwo
Posty: 673
Rejestracja: 13 lip 2010, 16:13:44
Płeć: Niewybrana
User Agent: Firefox Windows

Re: Zmiana o kolorów stylu do MyBB

Post autor: piwo »

Sorry, jestem w tej chwili mocno zajęty więc nie sypnę szczegółami 'krok po kroku'
ale widzę że kombinujecie więc pewnie będzie przydatne jak naprowadzę was na 'ścieżkę'
gdzie i z czym kombinować.


Teraz proszę o odstawienie mleczka, kawki, gumowej kaczuszki,
czy czegokolwiek co odwracało by uwagę i wysilić się trochę żeby to przeczytać ze zrozumieniem.

Tutorial - CSS dla zielonych :

1. Strona składa się z elementów i większość z nich jest jakoś nazwane...
(zastanów się czy rozumiesz to zdanie, bo wymagam abyś się na chwilę obudził
i zaczął czytać ze zrozumieniem. jeśli nie rozumiesz - wróć i przeczytaj jeszcze raz.)

2. Elementy mogą znajdować się jeden w drugim.
(tak jak np w elemencie 'dom' znajduje się element 'lodówka' a w lodówce... element 'piwo')

Tak samo na stronie, jest element 'body' (czyli cała strona) w nim jest np. 'header'
(czyli to na górze gdzie jest obrazek logo) a nim 'logo'.

(Niezrozumiale się to nazywa ? Jakieś body, header itd ?...
To tylko nazwa - przecież wiadomo co to 'tło strony' czy 'obrazek' na niej,
nawet gdyby nazywało się 'polichlorek wypocmokaczu z potrójną siłą spłukiwania')

3. Skoro wiemy że są 'elementy' i o co z nimi chodzi,
(nie wiemy ? mówiłem odstawić kaczuszkę - czytać jeszcze raz.)
to pora na atrybuty czyli coś co określa 'jakie dany element ma cechy'.

Robimy to poprzez podanie nazwy tego elementu, (żeby było wiadomo o czym mówimy)
a po nazwie nawiasu {} wewnątrz którego wpisujemy 'jakie to coś jest'
Dla przykładu :

Kod: Zaznacz cały

lodówka {
    kolor:      biała;
    wielkość: duża;
}
piwo {
    temperatura:    zimne;
    kolor:              złocisty;
    smak:              mniamuśne;
}
Tak szczerze, bez przynudzania, to już cała wiedza potrzebna do rozwalenia sobie strony.

Jedyne czego nie wiecie a potrzebujecie wiedzieć to
- 'jak nazywa się dany element na stronie' (żeby można go było na celownik wziąć) oraz
- 'co właściwie można wpisać aby było zrozumiane przez komputer' (np jak wpisać że ma kolor biały).

Nie trzeba się tego uczyć ani kuć. Od tego są narzędzia i dokumentacja.
Pewnie zastanawiacie się skąd wziąć dokumentację (nie, nie sprzedam wam za pół ceny)
Na razie powiem tylko że dokumentację już macie tylko jeszcze tego nie wiecie. O tym za chwilę.

Ostatecznie, po setnym zajrzeniu do dokumentacji w poszukiwaniu jak wpisać kolor,
i tak będzie wam się to śniło po nocach bez kucia.
(Innymi słowy zapamiętacie 'co ważne' a to co 'przydatne' może czekać w dokumentacji,
na moment kiedy stanie się wystarczająco ważne).

Narzędzia - Jeśli macie Firefoxa, instalujecie wtyczkę 'Firebug'.

Wtyczka ta została zrobiona dla ślepych z problemami postrzegania,
(chociaż jej autor uważa dokładnie odwrotnie) aby bez trudu mogli odnalezć i podejrzeć
każdy obiekt na ekranie przez wskazanie go myszką.
Dzięki temu nawet osoba nie mająca pojęcia o programowaniu może zarządzić
i zamienić się przed znajomymi w Neo, demonstrując 'jak się zmienia stronę w przeglądarce jednym palcem'
za pomocą samego nosa a nawet telepatycznie (myszką pod stołem).

Można tam podejrzeć, jaki kolor ma wskazany obiekt na ekranie, rozmiar, inne atrybuty,
jak się nazywa oraz czy znajduje się wewnątrz innego elementu i jakiego.

Polecam pobawić się tym, poklikać na elementy i pooglądać to sobie aby obrazowo
zrozumieć jak to jest skonstruowane (można nawet zmieniać te atrybuty i widzieć zmiany na ekranie)

Po tej zabawie pewnie zrodzi wam się pytanie : "fajnie, wiem jak zmienić kolor ale jak to zapisać ?"
- Nie można. Przy pomocy firebuga można tylko "podejrzeć", "zmieniać"
"widzieć te zmiany w czasie rzeczywistym na ekranie" a nawet wiedzieć w którym pliku dane te się znajdują.

Do zapisania zmian użyjemy notatnika aby zachować nasze dzieło sztuki dla potomności,
i pokazywać je z dumą (albo i nie) swoim wnukom.
Musi to być specjalny notatnik, np notepad++
Nie może być notatnik z windows bo zepsujecie plik i strona wam całkiem padnie.

Leniwym radzę nie lekceważyć tego ostrzeżenia, bo zamiast zaoszczędzić czas,
i przeznaczyć go na zabawę twórczą, stracicie go na mozolnym naprawianiu zniszczeń,
spowodowanych zapisaniem pliku za pomocą zwykłego notatnika z windows.

Aby zaoszczędzić wam cierpień w dochodzeniu który wskazywany plik jest tym właściwym,

W MyBB jest to plik cache/themes/themeX/global.css
Jeśli macie więcej szablonów to będziecie mieli po jednym takim pliku dla każdego szablonu.
(np. theme1, theme2, theme3, theme4 itd)

Po zabawie z firebugiem będziecie wstępnie wiedzieli 'jak coś zmienić' ale skąd wiedzieć jak coś dopisać,
bo np element nie ma wpisanego koloru ?

Od tego jest Google które prowadzi do dokumentacji i całej wiedzy ludzkości podanej na talerzu.
Trzeba tylko wiedzieć 'CO' chce się wiedzieć.

Co chcielibyśmy wiedzieć w naszym przykładzie ? - np. jak zapisać kolor elementu w CSS.
Wpisujemy w google 'CSS kolor elementu', albo "CSS kolor tła" i nie trzeba nawet męczyć oczu
aby wyłuskać z tekstu przykłady jak to zapisać.
Tyczy się to wszystkich innych cech elementów w CSS.

Mam nadzieję że po przeczytaniu tego tutoriala,
wiecie nie tylko wszystko to, co jest potrzebne do rozwiązania problemu : 'jak zmienić kolor tekstu',
ale również odpowiedzieliście sobie na wiele innych pytań takich jak : 'jak się zabrać do CSS',
'czy żyrafy odlatują do ciepłych krajów' oraz na odwieczne pytanie filozofów 'dlaczego woda jest mokra'
Ostatnio zmieniony 24 sty 2013, 00:18:32 przez piwo, łącznie zmieniany 1 raz.
{$signature}
yaro09
Posty: 40
Rejestracja: 21 lut 2012, 23:17:18
Strona na CBA.pl: http://www.music-forum.cba.pl
Płeć: Mężczyzna
User Agent: Firefox Windows

Re: Zmiana o kolorów stylu do MyBB

Post autor: yaro09 »

Sepowaty pisze:ACP -> Style i szablony -> Edytuj styl -> global.css -> Edytuj -> Edycja CSS zaawansowana
no to to przeciez to samo co tryb uproszczony. tzn prawie to samo.

Piwo dzieki za cały artykuł :D
wtyczke sprawdzę, na pewno się przyda.
teraz juz wszystko jasne, trzeba tylko nabrać wprawy w odnajdywaniu elementów,
ale skoro mówisz ze wtyczka prakycznie wszystko sama robi to powinno pójsc łatwo :)
Awatar użytkownika
piwo
Posty: 673
Rejestracja: 13 lip 2010, 16:13:44
Płeć: Niewybrana
User Agent: Firefox Windows

Re: Zmiana o kolorów stylu do MyBB

Post autor: piwo »

@yaro09
W zabawie ze stroną firebug to 'artykuł pierwszej potrzeby' dzięki czemu dokładnie wiesz czego szukasz.
Bez tego to jak szukanie czegoś w szufladzie przy zgaszonym świetle.
ACP -> Style i szablony -> Edytuj styl -> global.css -> Edytuj -> Edycja CSS zaawansowana
O tym jest mowa.
Nie jest ważne czy do edycji i zapisania używasz edytora w ACP czy notepad++,
Ważne jest że wiesz "co, gdzie i dlaczego zmianić" w tym pliku i o tym był powyższy tutorial. :)
{$signature}
yaro09
Posty: 40
Rejestracja: 21 lut 2012, 23:17:18
Strona na CBA.pl: http://www.music-forum.cba.pl
Płeć: Mężczyzna
User Agent: Firefox Windows 1920x1080

Re: Zmiana o kolorów stylu do MyBB

Post autor: yaro09 »

Nie no teraz z tą wtyczką to robota idzie :) tak mozna pracować.
Venite
Obsługa CBA
Posty: 3197
Rejestracja: 18 lut 2011, 08:01:57
Lokalizacja: Kędzierzyn-Koźle
Płeć: Mężczyzna
User Agent: Opera Mini 360x503

Re: Zmiana o kolorów stylu do MyBB

Post autor: Venite »

Tylko pamiętaj, że jeśli zmienisz coś przez firebug to zmiany są widoczne tylko dla ciebie (to podgląd na żywo) i do odświeżenia strony. Żeby działały musisz zmodyfikować plik css ;)

Może to głupio o tak prostych rzeczach przypominać, ale wiele osób jednak o tym zapomina.

Piwo, za poradnik z soczystym poczuciem humoru i świetnym tłumaczeniem masz byczego plusa ode mnie. ;D
Czy wiesz, że:
  • W Panelu CBA w sekcji "wsparcie" jest dedykowany system ticketów (obsługi technicznej)
  • Odpowiadamy na Forum oraz na adres mailowy obsluga(malpa)cba.pl
  • Jesteśmy również na Facebooku! Znajdź nas na facebook.com/hostingcba | cba.pl
W czym jeszcze możemy pomóc?
yaro09
Posty: 40
Rejestracja: 21 lut 2012, 23:17:18
Strona na CBA.pl: http://www.music-forum.cba.pl
Płeć: Mężczyzna
User Agent: Firefox Windows 1920x1080

Re: Zmiana o kolorów stylu do MyBB

Post autor: yaro09 »

Ok bede zmieniał wszystko przez CSS.
A teraz inna sprawa jeszcze, ćwiczę sobie tutaj:

http://yaro.arabsmall.eu/

jeśli już będę miał gotowy styl, to chcę go jakoś zapisać i przenieść na konkretne forum.
To jak to moge zrobić?
Sepowaty
Posty: 85
Rejestracja: 28 gru 2012, 19:01:19
Płeć: Niewybrana
User Agent: Chrome Windows 1280x1024

Re: Zmiana o kolorów stylu do MyBB

Post autor: Sepowaty »

Style i szablony -> [[Twój styl]] -> Opcje -> Eksportuj styl
yaro09
Posty: 40
Rejestracja: 21 lut 2012, 23:17:18
Strona na CBA.pl: http://www.music-forum.cba.pl
Płeć: Mężczyzna
User Agent: Firefox Windows 1920x1080

Re: Zmiana o kolorów stylu do MyBB

Post autor: yaro09 »

No to wszystko jasne :)
teraz tak, moze mi pomozecie w wymysleniu kolorów? oczywiscie kto chce :)

Forum będzie dotyczyło promocji, loterii, konkursów, mniej więcej taka tematyka.
Dlatego pomyśałem, że najbardziej odpowiednie byłoby połączenie barw żóltych i niebieskich, jak tutaj:

http://www.lotto.pl/

wchodząc na stronę to przyjemnie ogląda się te kolory (spójrzcie na 3 żolto-niebieskie, prostokątne grafiki na srodku strony),
wg mnie dobrze to wygląda.

Ale też powiedzmy wg mnie pasuje np żółty i jagodowy.
Jeśli macie jakieś pomysły (na przyklad jaki kolor gdzie wstawić) to chętnie wysłucham :wink:
Awatar użytkownika
Fineas_Nigellus
Posty: 582
Rejestracja: 08 lis 2012, 17:33:45
Płeć: Niewybrana
User Agent: Opera Mobile Android 240x301

Re: Zmiana o kolorów stylu do MyBB

Post autor: Fineas_Nigellus »

yaro09 , jak i gdzie musisz sam to wykminić :)
Ale jeśli chodzi o kolorystykę to wg mnie pasowałby żółty z JASNYM szarym, z przewagą jasnego szarego ;-)
Mówimy STOP Reklamie-Sygnaturce! ;)
ODPOWIEDZ