×

Langue

Fermer
Atelier 801
  • Forums
  • Dev Tracker
  • Connexion
    • English Français
      Português do Brasil Español
      Türkçe Polski
      Magyar Română
      العربية Skandinavisk
      Nederlands Deutsch
      Bahasa Indonesia Русский
      中文 Filipino
      Lietuvių kalba 日本語
      Suomi עברית
      Italiano Česky
      Hrvatski Slovensky
      Български Latviešu
      Estonian
  • Langue
  • Forums
  • /
  • Atelier 801
  • /
  • Discussions
  • /
  • Stylish - udekoruj swoje forum!
1 / 4 › »
Stylish - udekoruj swoje forum!
Fadrosss
« Censeur »
1490300760000
    • Fadrosss#0000
    • Profil
    • Derniers messages
#1
  15
  • Start
  • Tworzenie
  • Klasy przydatne przy edycji forum A801 i podstawowe atrybuty
  • Pomocne strony

fancywatek.exe



https://lh3.googleusercontent.com/MBqzsu8imULhQnOLYKVNh4s3sdxrb517usd2pbEGF5sslN7676nQc37xa5NeNM4gpQrWH9QRAtg=s26-h26-e365-rw

★ Czym jest Stylish?
Jest to rozszerzenie dla przeglądarek, które pozwoli na zmienienie kodu CSS (język służący do opisu wyglądu) dowolnej strony

★ A teraz po ludzku?
W prosty sposób możesz zmienić wygląd strony, z której korzystasz, przykładowo tego oto forumka

Podgląd - duże!
http://i.imgur.com/J0z3lSt.png


★ Jak je dostać?
Wystarczy wejść tutaj: userstyles.org
Dodatek jest dostępny dla przeglądarek Chrome, Firefox, Safari oraz Opera, dla których linki do pobrania rozszerzenia zostały podane na powyższej stronie

★ Gdzie znajdę gotowe motywy do forum?
Otutajo: userstyles.org/styles/browse/atelier801

★ No fajnie, fajnie, ale wolę zrobić coś własnego. Jak?
Zapraszam do kolejnej zakładki ;-)

★Śmiało można mówić o problemie przy edycji, a ja czy ktoś inny w miarę możliwości postaram się go rozwiązać. Screenki z nowych forume też są super. :-)



fancywatek.exe



Zakładam, że mądre z Was mysie i procesu dodawania rozszerzenia opisywać nie muszę, więc lecim z edycją!

Przede wszystkim - nie musisz rozumieć słów występujących w kodzie, znajomość ich znaczeń nie ma wpływu na przebieg edytowania tak długo, jak potrafisz kopiować i wklejać. Nie zraź się bełkotem!



  • Znajdźmy magiczne miejsce, w którym leżą nasze rozszerzenia. W Chrome jest to oczywiście zaraz obok paska wyszukiwania, po wejściu w Stylish rozwija nam się zakładka, na której dole wisi Create new style
  • Po lewej nazywamy nasz nowy super elegancki motyw i zaznaczamy Enabled - inaczej przy każdej edycji będzie się wyłączał i trzeba będzie go na nowo aktywować, a z tą opcją mamy podgląd na bieżąco. Jeśli u dołu jeszcze tego nie ma, definiujemy, że styl jest tworzony pod URL atelier801.com
  • Przechodzimy do konsoli! Jeśli nie wiesz od czego zacząć, w spoilerze czeka przyśpieszony tryb lekcji z tworzenia witryn internetowych, ale tylko ta część o CSS, nie jestem cudotwórcą :-(

    fancynauka.exe

    Każda strona ma zdefiniowane swego rodzaju fragmenty - znaczniki oraz klasy.
    Znaczniki są proste i łatwo je skojarzyć np. z formatowaniem postów na forum A801. Przykładowo znacznik <p> służy do utworzenia paragrafu
    1
    <p>tu leży paragraf pogrzebany</p>

    Zwykłe napisy to nudziarstwo, więc chcemy sobie taki paragrafik upięknić. Zróbmy go na niebiesko:
    1
    <font color="blue"><p>tu leży paragraf pogrzebany</p></font>

    W CSS, naszej super konsoli, możemy napisać to samo szybciej i przyjemniej:
    1
    2
    3
    p{
    color: blue;
    }

    I gitara siemano kolano luzik arbuzik, co nie?
    No nie.
    Ktoś tam na górze wpadł na pomysł, że on chce dużo takich udekorowanych paragrafów, wszystkie odcienie tego świata, a może i nawet trzy. Żeby się nie cackać z dopisywaniem każdemu atrybutów jak w drugim przykładzie zrobił klasy:
    1
    2
    3
    <p class="niebieskie">tekst</p>
    <p class="zielone">tekst</p>
    <p class="skrajnie-brutalne">tekst</p>

    Klasa sama sobie nie wpadnie na pomysł co autor miał na myśli tworząc ją, więc w CSS opisane jest jak ma wyglądać:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .niebieskie{
    color: blue;
    }

    .zielone{
    color: green;
    }

    .skrajniebrutalne{
    color: red;
    }


    Teraz ta osoba może określić wygląd paragrafu za jednym dopisaniem klasy, zamiast przecierać biedne klawisze i pisać nadprogramowy tekst spod przykładu drugiego. Wracając do samego początku, Stylish to rozszerzenie do pracy w języku CSS, co za tym idzie - pracujemy na stworzonych już przez autorów strony klasach.
  • Teraz czas na szukanie klas, na których będziemy pracować:
    http://i.imgur.com/B5Eq0Wq.png

    I to, co się nam otworzy:
    http://i.imgur.com/VbKPN1c.png

    1 - cały skrypt strony
    2 - poszczególne znaczniki z nazwanymi klasami
    3 - narzędzie to wskazywania który element chcemy zbadać. To nie taki zwykły kursor, bo przekierowuje nas do odpowiedniej linijki kodu. Nie trzeba się zrażać jeśli w wyświetlonej linijce nie znajdziemy atrybutu, który by nas interesował, bo najmniejszy ruch może zmienić badany obszar ;-)
    4 - tu wyświetlają nam się atrybuty linii, w której siedzimy. W tym przypadku pokazuje wszystkie definicje dotyczące znacznika div, klasy container-fluid oraz menu-secondaire - jej części składowe. Kliknięcie na kwadrat koloru pomoże od razu dobrać odpowiedni kolor, bo siedzi w nim próbnik i superowy kolorowy klocek z prywatnym suwakiem, co to nam barwę określi
    5 - w tym pasku możemy spojrzeć jak głęboko i którym rozgałęzieniu kodu siedzimy, ewentualnie ruszyć tyłek niżej czy wyżej
  • Znalezione klasy/znaczniki przepisujemy lub kopiujemy do konsoli Stylish'a, dopisujemy co chcemy lub edytujemy istniejące atrybuty.
    Edycja klasy - zawartość początkowa:
    1
    2
    3
    .menu-secondaire {
    background-color: #55585a;
    }

    Przykładowa zmiana:
    1
    2
    3
    4
    .menu-secondaire {
    background-color: #759fbb;
    border: 1px solid #000000;
    }

    W efekcie nasz element jest cudnie błękitny i wszedł w posiadanie rozkosznego obramowania o wysokości 1px, nieprzerywanego, o kolorze czarniutkim jak węgiel
    Zapisujemy nasz Stylish'owy plik i widzimy zmianę!

  • Ważne jest by zapamiętać, że:
    ★ znaczniki (body, hr itp.) pisze się bez początkowej kropki: body { background-color: red; }
    ★ nazwy klas muszą rozpoczynać się od kropki: .menu-secondaire { background-color: red; }
    ★ atrybuty elementu, którego się uczepiliśmy, siedziały w klamerkach: body { background-color: red; }
    ★ po atrybucie wystąpił średnik: body { background-color: red; }

    + nazwy elementów możemy zapisywać po przecinku: body, .menu-secondaire { background-color: red; } . Za jednym wystukaniem można zdefiniować dwa tła na raz, bo atrybut zostanie przypisany do wszystkich wypisanych przed klamrą atrybutów
    Ale to nie jest zasada. To poczucie estetyki.


    Z pewnym prawdopodobieństwem Twój element nie działa, bo po prostu walnąłeś się przy którejś gwiazdce. :-)





fancywatek.exe




body - ogół strony
footer - stopka

.container-fluid - scalony górny pasek nawigacji
.menu-principal - górna połowa
.menu-secondaire - dolna połowa

.navbar-inverse .nav>li>a - przyciski na pasku nawigacji
.navbar-inverse .nav .active>a - wciśnięty
.navbar-inverse .nav .active>a:hover - najechany

.cadre-forum - kadry, np. Atelier801 i Nekodancer w głównej sekcji forum
.table-section - mini-kadr, w którym znajdują się tytuły działów
.line-striped - co drugi pasek powyższego kadru
.table-section-cellule - komórka z tytułem działu i tytułem tematu, autorem, datą
.table-section-cellule-bouton-afficher-masquer - przestrzeń między powyższymi komórkami
.cadre-sujet-postit - przypięte tematy
.cadre-sujet - zwykłe tematy
.cadre-upload-image-utilisateur - obwód przycisku do dodawania zdjęć na Micepix
.cadre-dernieres-images-utilisateurs - obwód zdjęć na Micepix
.contenant-image-utilisateur-grille-sans-marge - pojedyncze zdjęcia
.cadre-pagination input - wpisywanie na którą stronę chcemy iść
.composant-selection-image-utilisateur-upload - przycisk dodawania zdjęć
.composant-selection-image-utilisateur-upload:hover - wciśnięty

.cadre-sujet-titre-sombre - tytuły tematów widziane przed wejściem w działy, z których pochodzą
.lien-blanc - tytuły tematów oraz przycisków stopki stopki
.nombre-messages - liczba postów
.nombre-messages-nouveau - liczba nowych postów
.date-image-utilisateur - data zdjęcia
.cadre-sujet-date - zwykła data
.cadre-repondre - tworzenie wiadomości
.cadre legend - nagłówek powyższego



background-color - kolor tła
background-image: url(źródło grafiki) - obraz tła
color - kolor czcionki
font-family - czcionka
border - obramowanie
background-size - rozmiar grafiki na tle
background-repeat - powtarzanie się tła

Coś jeszcze Twoim zdaniem jest podstawowe i warte poznania? Pisz. ;-)





fancywatek.exe



★ Dobieranie koloru RGBA (pozwala na określenie przezroczystości) -hexcolortool.com

★ Rodzaje atrybutów do używania w CSS (kolory, czcionki, tła itp.) - w3schools.com

★ Grafiki układające się we wzory - freepik.com




Dernière modification le 1490479560000
Lisica
« Citoyen »
1490300880000
    • Lisica#5259
    • Profil
    • Derniers messages
    • Tribu
#2
  0
Bardzo ładnie wykonany wątek, sądzę, że kiedyś się mi na pewno przyda. Dzięki :D
Nani
« Citoyen »
1490300940000
    • Nani#1373
    • Profil
    • Derniers messages
    • Tribu
#3
  0
heh zrobiłaś tak jak mówiłaś na pw xD tylko ze ja już sam zrobiłem heh
Anthropophobia
« Consul »
1490300940000
    • Anthropophobia#0000
    • Profil
    • Derniers messages
    • Tribu
#4
  0
super temat na pewno skorzystam :)
Fadrosss
« Censeur »
1490301060000
    • Fadrosss#0000
    • Profil
    • Derniers messages
#5
  0
Dziękuję miłe mysie :)<3
Opaaal
« Sénateur »
1490301120000
    • Opaaal#0000
    • Profil
    • Derniers messages
    • Tribu
#6
  0
tajemnica klaudis ujawniona
Mortycja
« Archonte »
1490301360000
    • Mortycja#0000
    • Profil
    • Derniers messages
    • Tribu
#7
  0
przy edycji forum to by się chyba div.cadre.cadre-relief.cadre-message.ltr przydało
to jest, odnośnik to postów
i div.cadre.cadre-relief.cadre-sujet.ltr - do nazwy wątku
+ div.cadre.cadre-relief.cadre-repondre.ltr
czyli do tego tutaj do odpowiadania

also, gut wątek, ładny taki
Dziwnow
« Censeur »
1490302440000
    • Dziwnow#0000
    • Profil
    • Derniers messages
#8
  0
Na pewno skorzystam, bo ostatnio mnie to zaciekawiło. ^^
Snacxxx
« Censeur »
1490302740000
    • Snacxxx#0000
    • Profil
    • Derniers messages
    • Tribu
#9
  0
oo super, musze wyprobowac : )
Flarelia
« Censeur »
1490446320000
    • Flarelia#0000
    • Profil
    • Derniers messages
#10
  0
Jak wstawić obrazek w kodzie? Miałam już styczność wielokrotnie z kodem css, jednak w ''background-image: url(źródło grafiki)'' adres obrazka nie działa. Klasę mam dobrze napisaną, reszta edycji działa :v
Niezdecydowanie
« Consul »
1490446560000
    • Niezdecydowanie#0000
    • Profil
    • Derniers messages
#11
  0
Super poradnik :)
Fadrosss
« Censeur »
1490447160000
    • Fadrosss#0000
    • Profil
    • Derniers messages
#12
  0
Dziękuję miłe mysie :)<3 #2
+ Zaraz uzupełnię trzecią zakładkę, dziękuję Mortyś ^_^

Flarelia a dit :
Jak wstawić obrazek w kodzie? Miałam już styczność wielokrotnie z kodem css, jednak w ''background-image: url(źródło grafiki)'' adres obrazka nie działa. Klasę mam dobrze napisaną, reszta edycji działa :v

Pokażesz ten fragment kodu? Na czuja niezbyt powiem co poszło nie tak :(
Flarelia
« Censeur »
1490449440000
    • Flarelia#0000
    • Profil
    • Derniers messages
#13
  0
Klaudisss a dit :
Dziękuję miłe mysie :)<3 #2
+ Zaraz uzupełnię trzecią zakładkę, dziękuję Mortyś ^_^

Flarelia a dit :
Jak wstawić obrazek w kodzie? Miałam już styczność wielokrotnie z kodem css, jednak w ''background-image: url(źródło grafiki)'' adres obrazka nie działa. Klasę mam dobrze napisaną, reszta edycji działa :v

Pokażesz ten fragment kodu? Na czuja niezbyt powiem co poszło nie tak :(

1
2
.menu-secondaire {
background-image: url(''https://secure.static.tumblr.com/24d4dfbfa5b3fbd58479ab946c2b2dc7/dlnhnqs/0pcn57yzy/tumblr_static_tumblr_static_74h9asozl6gwgg0ookkc4gow4_640.jpg'')
Deliyerii
« Consul »
1490449740000
    • Deliyerii#7671
    • Profil
    • Derniers messages
    • Tribu
#14
  0
i tak nie rozumiem, ale ciekawe
szkoda, ze jak sie odswiezy i tak jest stare forum :v
Elsaxelsa
« Consul »
1490454360000
    • Elsaxelsa#0000
    • Profil
    • Derniers messages
    • Tribu
#15
  0
Miaukaaa a dit :
i tak nie rozumiem, ale ciekawe
szkoda, ze jak sie odswiezy i tak jest stare forum :v

bo to trzeba na stronie stylish zrobic, a nie w zbadaj element.
Fadrosss
« Censeur »
1490455140000
    • Fadrosss#0000
    • Profil
    • Derniers messages
#17
  0
Flarelia a dit :
Klaudisss a dit :
Dziękuję miłe mysie :)<3 #2
+ Zaraz uzupełnię trzecią zakładkę, dziękuję Mortyś ^_^

Flarelia a dit :
Jak wstawić obrazek w kodzie? Miałam już styczność wielokrotnie z kodem css, jednak w ''background-image: url(źródło grafiki)'' adres obrazka nie działa. Klasę mam dobrze napisaną, reszta edycji działa :v

Pokażesz ten fragment kodu? Na czuja niezbyt powiem co poszło nie tak :(

1
2
.menu-secondaire {
background-image: url(''https://secure.static.tumblr.com/24d4dfbfa5b3fbd58479ab946c2b2dc7/dlnhnqs/0pcn57yzy/tumblr_static_tumblr_static_74h9asozl6gwgg0ookkc4gow4_640.jpg'')

Źródło bez cudzysłowiu
Amfonia
« Censeur »
1490455440000
    • Amfonia#0000
    • Profil
    • Derniers messages
    • Tribu
#18
  0
oo bardzo przydatny poradnik!
z checia wyprobuje
Flarelia
« Censeur »
1490455800000
    • Flarelia#0000
    • Profil
    • Derniers messages
#19
  0
Tak czy siak nie działa, podkreśla jakikolwiek link na czerwono
na innej stronce wykorzystującej ten sam kod działa
  • Forums
  • /
  • Atelier 801
  • /
  • Discussions
  • /
  • Stylish - udekoruj swoje forum!
1 / 4 › »
© Atelier801 2018

Equipe Conditions Générales d'Utilisation Politique de Confidentialité Contact

Version 1.27