30 maja 2026

Tęczowy Rift 2026

Czerwiec już za pasem, a to oznacza powrót wyjątkowego eventu, jakim jest Tęczowy Rift! Aż się łezka w oku kręci, gdy przypominam sobie, w jakich okolicznościach ten event w ogóle powstał <3 Na zawsze pozostanie w mojej pamięci dowodem na to, że dla Rifta nie ma rzeczy niemożliwych i że jeśli zajdzie potrzeba, nic Was nie zatrzyma.
W tym roku postanowiłam, że dobrym pomysłem będzie lekka odmiana ;) Tym razem zamiast pisania opowiadań będziecie…
…tworzyć szablony!
Jak pewnie zauważyliście, szablon się zmienił, a w prawym dolnym rogu strony pojawiły się tajemnicze kuleczki. Co one robią? Otóż zmieniają szablon! Co więcej, za każdym razem, gdy odświeżycie stronę, wylosuje Wam się jeden z eventowych szablonów (magia kodu taka cool!). Szablony są na razie tylko cztery, ale w trakcie Tęczowego Rifta to Wy to zmienicie!
Za inspirację dziękuję Nowalijce i jej epickiemu pomysłowi na zmianę szablonu po kliknięicu, oraz Mik za podzielenie się świetnymi artami od Karoliny Walas promującymi krakowską Paradę Równości <3

Zasady eventu

  1. Celem eventu jest stworzenie szablonu na bloga, który to szablon będzie w jakiś sposób powiązany z Pride Month. Mam nadzieję, że dzięki Wam wszyscy poznamy nowych, fajnych artystów, a Rift będzie jeszcze bardziej tęczowy <3
  2. W evencie mogą brać udział autorzy, jak i wkrótce-autorzy bloga, bo tym razem do udziału w evencie nie trzeba mieć postaci.
  3. Was, artystów, co prawda znamy, ale możemy poznać lepiej Wasze prace <3 Śmiało możecie narysować coś na nagłówek, jeśli macie na to wenę. Nagłówek z Waszymi postaciami? A kto broni <3
  4. Przy wyborze nagłówka trzeba zachować kilka zasad:
    • Sprawdźcie, czy osoba, która stworzyła pracę, zezwala na użycie jej do celów niekomercyjnych. Szanujemy prawa autorskie i życzenia twórców.
    • Upewnijcie się, że obrazek nie został wygenerowany z pomocą AI. Jeśli nie jesteście w stanie tego ocenić – zapytajcie na Discordzie! Mamy wiele utalentowanych szafek, które profesjonalnym okiem ocenią, z czym mamy do czynienia!
    • Wraz z przesłanym szablonem podajcie imię/nick osoby, która stworzyła pracę oraz link do profilu (Instagram, Twitter/X, ArtStation lub inne).
  5. Gotowy kod szablonu prześlijcie do mnie na Discordzie.
  6. Event trwa do końca czerwca, ale jeśli nie będziecie się wyrabiać, to zostanie przedłużony.
  7. Jak zwykle, za udział w evencie przewidziana jest specjalna rola na Discordzie.

Instrukcja tworzenia szablonu

„Bardzo fajnie, Chaos, ale tu trzeba kodzić, a ja nie umiem w kod.”
Spoko, ja też nie! Ale od czego są instrukcje!
  • Zacznij od stworzenia nowego, pustego posta na blogu, nazwij go jak chcesz, a następnie przejdź do widoku HTML.
  • Następnie wstaw zawartość poniższej ramki w posta:
  • <style type="text/css">
    :root {
    --header: url(http://obrazek.jpg); /*link do nagłówka*/
    --color0: #F9F0E7; /*tło postów*/
    --color1: #BBC0D3; /*tło całego bloga*/
    --color2: #48455F; /*główny tekst, ramki linków w blokach "Kategorie"...*/
    --color3: #ECB4BF; /*tło linków w blokach "Kategorie"...*/
    --color4: #716B94; /*link po najechaniu*/
    --color5: #48455F; /*tytuły postów i tekst etykiet*/
    --color6: #ECB4BF; /*ramki podświetlonych etykiet i stron*/
    --color7: #eee; /*nie mam pojęcia, co ten kolor koloruje*/
    --color8: #1D4259; /*kolor tekstu podstron i etykiet postaci i AU*/
    --color9: #7DB3D5; /*tło stron*/
    --b_font: 'Roboto', Helvetica, Arial, sans-serif; /*główna czcionka bloga*/
    --h_font: 'Merriweather', serif; /*czcionka nagłówków etc.*/
    }
    .main-inner {z-index: 9999 !important;} /*zaklęcie, żeby był aktywny podgląd*/
    </style>

    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend risus magna. Duis laoreet odio quis massa viverra dapibus. Integer tincidunt turpis ut libero consectetur, eu accumsan dolor semper. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Duis quis diam ut arcu placerat rhoncus. Sed vulputate scelerisque facilisis. Aenean quis orci in sapien imperdiet venenatis vitae non tellus.</div>
  • No i teraz trzeba kodzić. Najwygodniej jest zacząć od wstawienia linku do obrazka na nagłówku (nagłówek ma wymiary 580 x 350 px). Następnie zaś podmieniać kolory konkretnych elementów bloga i na podglądzie patrzeć, czy taka wersja się podoba.
  • W całym przedsięwzięciu może pomóc coś takiego, jak Color Picker, który wyciągnie kolory z obrazka, poda ich kod HEX (ten, który jest potrzebny do wpisania w kod), no i pozwoli na edycję tych kolorów, jeśli taka jest fantazja.
  • Pro tip: jeśli opisy tego, za co odpowiada konkretny kolor są niejasne, możesz zamiast kodu HEX (czyli np. #F9F0E7) wstawić słowo-klucz koloru, czyli np. red (bez #) – wtedy dane elementy przyjmą wściekle czerwoną barwę i po prostu zobaczysz, o co konkretnie chodzi.
  • Zmiana czcionki? Nic prostszego. Wejdź na stronę Google Fonts i przejrzyj dostępne czcionki. Pamiętaj, żeby z lewej strony w filtrach wybrać, że potrzebujesz czcionki dla języka polskiego – wtedy masz pewność, że czcionka będzie zawierała polskie znaki. Kiedy znajdziesz coś, co Ci się podoba, kliknij na czcionkę.
  • Na stronie wybranej czcionki kliknij przycisk „Get font", a następnie „Get embed code". Kliknij guzik przy @import i skopiuj kod, który się pojawi. Będzie wyglądał jakoś tak:
  • Ten jeden wiersz wklej jako pierwszą linijkę w kodzie CSS swojego szablonu, czyli zaraz pod <style type="text/css">.
  • Podmień czcionkę w odpowiednim miejscu – kod do tego znajdziesz w ramce CSS Class, w linijce font-family.
  • I voila! Gotowe <3 Jak zwykle, jeśli będą problemy lub pytania, daj znać, a chętnie pomogę.

Brak komentarzy:

Prześlij komentarz