Jak zrobić strony/menu z ikonkami i wyszukiwarką na górze bloga

piątek, 9 listopada 2018


Przejrzałam wszystkie dostępne instrukcje na blogu i zobaczyłam, że jest wpis o wielokolorowym menu, o wysuwanym menu, o menu na górze bloga i jeszcze parę instrukcji na temat menu pewnie by się znalazło, ale... zobaczyłam, że nie było nigdy wpisu na temat menu, które składa się z menu + ikonki społecznościowe + wyszukiwarka.

Dlatego też, postanowiłam zrobić dla Was instrukcję na menu z ikonkami i wyszukiwarką, które będzie znajdować się na górze bloga.

Zapamiętaj!
Żeby ikonki wyświetlały Wam się prawidłowo to nad < head > musimy dodać nasz font awesome do bloga. Odpowiednią sekcję do wklejenia znajdziecie tutaj: https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css Pamiętaj, żeby za ostatnim " a przed > wstawić /. Końcówka kodu powinna wyglądać tak "/>

1. Przechodzimy do motyw - edytuj kod HTML
2. Klikamy obojętnie jakie miejsce w kodzie i wybieramy ctrl + f
3. W okienku wyszukiwania, które nam się pojawi wpisujemy </head> i POD tym elementem wklejamy kod:



Analiza:

# - miejsce na link, usuwamy # i wrzucamy nasz link
NAZWA STRONY - tutaj wpisujemy nazwę dla naszej strony
nazwa - to co pojawi nam się po najechaniu na stronę (małe szare okienko)

Zapamiętaj!
Jeśli chcecie usunąć lub dodać ikonki to (w przypadku usunięcia) usuwamy fragment od < li > do < /li > W przypadku dodania kolejnej ikonki, kopiujemy wiersz od < li > do < li > odpowiednio zmieniając dane. Fragment z nową ikonką, wklejamy za ostatnim < /li > ale przed < /ul >

Fragment dla nowej ikonki:




4. Zapisujemy
5. Przechodzimy do motyw - dostosuj i wklejamy kod:



Analiza:

.nav-primary {background: #000; padding: 10px 0px;} - tło menu oraz marginesy wewnętrzne
.nav-primary .wrap {padding: 0 10px;} - marginesy wewnętrzne obejmujące tekst
#menutop a{display:block; padding: 0 15px; font: 700 11px Open Sans, sans-serif; color: #fff; text-transform: uppercase; text-decoration: none; letter-spacing: 0px;} - marginesy tekstu (możemy ustawić odstęp między stronami), ustawienia fontu: grubość, wielkość, font, kolor fontu, styl dla tekstu (tutaj ustawione na wielkie litery), odstęp między literami
#menutop ul li:hover a{color: #ea9999; font-weight: 700;} - kolor linku po najechaniu kursorem, grubość fontu po najechaniu kursorem
.nav-primary ul .check {padding-left: 5px !important;} - margines wewnętrzny lewy (możemy ustawić dzięki niemu pozycję wyszukiwarki) 
#menutop ul.menux li a{color: #fff; border: 0px; text-decoration: none; font-size: 12px;} - kolor fontu dla rozwijanej części menu, wielkość fontu
#menutop ul.menux{
visibility: hidden;
opacity: 0;
height: auto;
overflow: hidden;
background: #000;
width: 165px;
opacity: 0.9;
z-index: 999;
} - tło dla rozwijanej części menu, szerokość rozwijanej części menu
#menutop ul li ul li a:hover{color: #ea9999;} - kolor po najechaniu kursorem na tekst w części rozwijanej
#menutop #searchBox {
text-transform: uppercase;
border: none;
color: #fff; font:700 13px Open Sans, sans-serif;
outline: none;
text-decoration: none;
letter-spacing: 2px;
padding-left: 10px;
padding-right: 20px;
background-color: transparent;
width: 80px;
-webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;
-webkit-transition:border-color 1s ease; -moz-transition:border-color 1s ease; -o-transition:border-color 1s ease; transition:border-color 1s ease;
} - sekcja odpowiadająca za wyszukiwarkę w menu, styl dla tekstu, kolor fontu, ustawienia fontu: grubość, rodzaj fontu, odstęp między literami, margines wewnętrzny lewy, margines wewnętrzny prawy, szerokość 
#menutop #searchBox:focus {
width: 80px;
border-bottom: 1px solid #fff;
} - szerokość, po kliknięciu w wyszukiwarkę (efekt rozsuwania, jeśli chcemy mieć statyczną wyszukiwarkę, szerokość musimy ustawić taką samą jak szerokość przed kliknięciem w nią (sekcja wyżej), dolne obramowanie - linia, która pojawia się po kliknięciu możemy ustawić grubość, rodzaj i kolor
#menutop li.socialicon {float: right; } - ułożenie ikonek społecznościowych (tutaj ustawione na prawą stronę)
#menutop li.socialicon a {padding: 0 10px; font-size: 13px !important;} - marginesy wewnętrzne ikonek, wielkość ikonek

Efekt: 



Udostępnij ten wpis:
Czytaj dalej »

Moodboard blogowy - po co on jest i w jakim programie go zrobić

sobota, 3 listopada 2018


Podejrzewam, że jest tu spora część osób, która wie co to są moodboardy, więc Ci co już wiedzą, wybaczą mi ten krótki wstęp z wytłumaczeniem i wykażą się zrozumieniem dla tych, co pierwszy raz o tym słyszą 😊

Moodboard


Nie starajcie się tego tłumaczyć na polski - serio, zaufajcie mi, nie róbcie tego, bo jest to po prostu złe. Można to natomiast określić jako "tablica inspiracji" lub "zbiór inspiracji", aczkolwiek, najbardziej trafnym określeniem będzie jednak "tablica inspiracji".

Na naszej tablicy inspiracji, możemy "zbierać" wszystko, co nam będzie potrzebne do naszego projektu - zdjęcia, cytaty, grafiki, tekstry, patterny, palety kolorów etc.

Moodboard blogowy - po co on jest


Odpowiedź jest bardzo prosta, moodboard blogowy jest po to, aby pomóc nam w tworzeniu naszej marki.

Jest to plansza, na której umieszczamy paletę kolorów, jakie ma zawierać nasza marka (blog/strona) , logo (może być w różnych wersjach kolorystycznych), dobór fontów, główne grafiki (tytułowe) do naszego wpisu czy nawet patterny, których chcemy użyć.

Możemy te elementy układać, przestawiać, zamieniać aż w końcu nasza tablica, będzie złożona tak, jak być powinna.

Skoro już ją złożyliśmy w elementy, które na pewno wykorzystamy, to możemy teraz odpowiedzieć sobie bardziej dokładnie na pytanie - po co ten moodboard blogowy jest?

Jest on po to, aby bez żadnych komplikacji i na spokojnie wdrążyć najważniejsze elementy naszego bloga/strony. Mamy rozpiskę kolorów - więc już nie musimy szukać różnych palet kolorystycznych na internecie do użycia na naszej stronie, bo odpowiednio dobraliśmy je na naszej tablicy.

To samo z fontami - siadamy i instalujemy na naszą stronę.

Z całą resztą umieszczonych elementów w naszej tablicy jest tak samo, dzięki temu, praca idzie nam znacznie sprawniej i szybciej.

Dla przykładu, pokażę Wam moodboard dla mojego bloga (jest to najprostszy moodboard jaki może być):



Moodboardy, mogą wyglądać różnie. Mogą być bardziej lub mniej złożone, wszystko zależy od tego, czego tak naprawdę będziemy potrzebować. Nie ma konkretnych wytycznych, że elementy muszą być ułożone tak i tak i musi znajdować się to i to. Nie, moodboard dostosowujemy pod siebie.

W jakim programie stworzyć moodboard?


W programie graficznym, który umożliwi nam stworzenie siatki, na której rozmieścimy odpowiednio elementy. Takim programem (darmowym) jest GIMP, ale jeśli mam być z Wami szczera - najlepiej zrobić to w Canvie (która również jest darmowa).

Canva to fajne darmowe narzędzie, w szczególności jeśli chodzi o moodboardy (i inne grafiki, ale nie o tym teraz mowa) - są tam narzędzia, które bardzo ułatwią nam stworzenie takiej siatki na moodboard, dzięki czemu każdy sobie z tym poradzi.

Canva ma jeszcze jeden plus w przeciwieństwie do GIMPa - jest ona online, także jeśli ktoś nie czuje potrzeby pobierania GIMPa, to jest dla Was alternatywa 😉


Korzystaliście kiedyś z Moodboardów? Chcecie wpis o tym jak wykonać taką tablice w Canvie? Dajcie znać w komentarzu! 😊
Udostępnij ten wpis:
Czytaj dalej »

Jesienne tapety na pulpit do pobrania za darmo

czwartek, 25 października 2018


Jesień nie należy do moich ulubionych pór roku, ale uwielbiam kolory jakie jej towarzyszą, a właściwie, kolory, które towarzyszą mi - nie tylko w ubiorze. 

Uwielbiam odcienie granatu, burgundu, ciepłej szarości i złota w tę porę roku. Dosłownie szaleje na widok złotych dodatków do domu, a poszukiwania granatowych, szarych i burgundowych swetrów oraz dodatków rozpoczynam z wielką energią! 

Wiem, że trochę się spóźniłam (?) z tymi tapetami, ale postanowiłam, że te tapety będą z motywem dyni, a jak dynie to i od razu nasuwa się skojarzenie z Halloween, więc postanowiłam je opublikować chwilę przed tym wydarzeniem. Dla tych co nie przepadają za motywem dyni, zrobiłam jeden wyjątek - tapeta ze złotymi liśćmi ;) 

W sumie do pobrania udostępniłam Wam 5 tapet na pulpit za darmo! :) 



Pobierz


Pobierz


Pobierz


Pobierz


Pobierz

Udostępnij ten wpis:
Czytaj dalej »

Planer studenta do pobrania za darmo

niedziela, 14 października 2018


Tak wiem, rok akademicki już trwa jakiś czas, ale nie będę ukrywać, że rozplanowanie tego planeru zajęło mi trochę czasu - prawdopodobnie dlatego, że pierwszy raz robię planer dla studentów i w tym wypadku, nie da się zrobić jednej karty, tak jak przy planach lekcji :)

Dużo osób mi pisało, po każdej publikacji planów lekcji, czy i kiedy będą planery dla studentów, bo z chęcią byście z nich skorzystali. Któregoś dnia, siadłam i zaczęłam planować, rozpisywać i układać wszystko po kolei, aż w końcu wzięłam się za projektowanie i oto są - darmowe planery dla studentów :)

Przygotowałam dla Was 5 zestawów (5 różnych kolorów) każdy po 8 kart. Planer jest w formacie A5, dzięki temu zajmie mniej miejsca i jest bardziej poręczny i jednocześnie ma odpowiednią ilość miejsca na notatki.


Karty planeru zostały przygotowane tak, aby jak najlepiej zorganizować swoje zajęcia, projekty oraz pracę licencjacką/magisterską.

Informacje techniczne:

  • Utrzymany w minimalistycznej formie
  • Poręczny format A5
  • 5 motywów do wyboru 
  • 8 kart 
  • Gotowe do druku
  • Przygotowane w formacie PDF (wszystkie karty w jednym pliku) 
  • Pojedyncze karty w formacie PNG

Informacje o planerze:

  • Karta - plan studenta
  • Checklista 
  • Karta projektu
  • Plan zajęć - studia dzienne
  • Plan zajęć - studia zaoczne 
  • Tabela do zapisywania ważnych dat 
  • Tabela do zapisywania egzaminów 
  • Tabela do zapisywania ocen końcowych 

Na koniec, chce uprzedzić Wasze pytania o to, dlaczego planery nie zawierają żadnych ozdobników w postaci np. kwiatów etc. 

Tak jak wspomniałam, jest to pierwsza odsłona planeru dla studentów, dlatego postanowiłam, że jak na początek, najlepszym wyjściem będzie opcja, w której to kolor pełni akcent dekoracyjny, jednocześnie jest to forma sprawdzenia, jak taka opcja projektu przypadnie Wam do gustu. 



Jednocześnie jestem otwarta na wszelkiego rodzaju propozycje z Waszej strony. Jeśli macie jakieś uwagi dotyczące kart (jakie jeszcze by Wam się przydały), tabelek, układu, kolorów czy wszelkiego rodzaju ozdobników - piszcie śmiało Wasze uwagi w komentarzach lub na maila, przy następnej edycji, na pewno wezmę je pod uwagę :)

Zasady pobierania

  • Planery pobierasz tylko i wyłącznie na użytek własny
  • Nie można plików udostępniać dalej w formie oryginalnej lub zmienionej (tyczy się to również zamiaru sprzedaży pobranych plików)
  • Jeśli chcesz się podzielić z kimś planerami - udostępnij ten wpis :) 

Pobierz planer różowy Pobierz planer niebieski Pobierz planer żółty Pobierz planer zielony Pobierz planer szary

Udostępnij ten wpis:
Czytaj dalej »

Copyright © Szablon wykonany przez My pastel life