#34 - Edycja tekstu w bloku

Hej, dziś kolejny post z cyklu rozbierania szablonów na czynniki pierwsze. Ostatnio podrzuciłam wam kod jak stworzyć własny bloczek o wymarzonych przez was wymiarach. Dziś przechodzimy do edycji tekstu w takim bloczku.

Początek jest taki sam jak poprzednio:

.div{font-family: times new roman, font-size: 10px; color: #ffffff; letter-spacing: 2px;line-height:8px;}

font-family - czyli jaka czcionka ma się znajdować w bloku, tam gdzie wpisałam times new roman wpisujecie nazwę czcionki
font-size - czyli rozmiar czcionki, tam gdzie wpisałam 10px wpisujecie wielkość czcionki w pikselach
color - kolor czcionki, zamiast #ffffff wpisujecie dowolny kolor hex
letter-spacing - odstęp pomiędzy literami, tak samo jak w rozmiarze czcionki
line-height - odstęp pomiędzy wersami/linijkami tekstu, tak samo jak w rozmiarze czcionki wpisujemy  wielkość w pikselach ;)

Mam nadzieję, że wasze prezenty były udane, jedzenie świetne a w razie jakichkolwiek pytań, jeśli potrzebujecie pomocy lub po prostu chcecie pogadać to piszcie na moje prywatne konto na kreatywnych - thank u, next

{pamiętajcie, kody ze stylami dodajemy pomiędzy [style][/style]!}

#33 - Wesołych Świąt!

Ho,ho,ho!
No i przyszedł czas na święta, czas z rodziną i obżarstwo pierogami. Ja w związku z nimi podrzucam wam kolejny szablon, który udało  mi się skleić jak byłam chora. Zanim jednak przejdziemy do tego kodu chciałabym Was poinformować:

KOLEJNA NOTKA POJAWI SIĘ DOPIERO W SOBOTĘ (29.12)

Z jakiego powodu? Po prostu ja też jestem człowiekiem, potrzebuje zatem trochę czasu dla siebie zarówno w święta jak i po świętach. Poza tym dostaliście w tym miesiącu w sumie 3 szablony, co za dużo to niezdrowo ;p

Ważna jest kolejność dodawania kodów! Najpierw dodajecie kod w prawym bloczku, następnie w lewym. Nie muszę chyba wspominać o tym, że usuwacie wszystko co przedtem się w nim znajdowało. Z przydatnych informacji to jeszcze w sumie tyle, że to tło w choinki, które się znajduje za obrazkami postaci musi mieć szerokość minimum 500px, a same gify postaci które umieściłam w tym szablonie muszą mieć szerokość minimum 235px.

1)Lewy bloczek

[c][img]link do obrazka nr1[/img][div][p]imię i nazwisko postaci[/p][br][br]tekst1[br][br][br][c][msg][/c][br][br][c][i]tekst2[/i][/c][/div][img]link do obrazka nr2[/img][/c][style]#block2{display:none}[/style]

2)Prawy bloczek:

[style].block{display:block;margin:0 auto;float:none;} .menu,.menu:hover{font-family: times new roman;padding: 10px;font-size:11px;color:#ffffff;background-color:transparent;} .menu:hover{letter-spacing:5px;}#logo{display:none}#menu{width:650px;margin-left:280px;} #menu:hover{text-shadow: 0px 0px 10px white;}body{background-color: #000000;}#block1{width:500px;background-image:url(http://i66.tinypic.com/15dukqr.jpg);}section{background:transparent}.block,.h,header,footer{border:0;}.div,.span,#block1 a{background-color:white; width:215px;padding: 0px 10px 10px 10px; margin-top:-4px; color:#000000 !important;font-size:11px;font-family:times new roman;text-align:justify;}.img{width:235px;margin-bottom:-4px}.p{font-size:15px; letter spacing:2px;padding-top:10px; text-align:center;margin-bottom:-10px;} #poke{display:none}[/style]

Oczywiście jeśli chcecie kombinować dalej z kodami, żeby je edytować pod siebie to śmiało to róbcie  ;)

W razie jakichkolwiek pytań, jeśli potrzebujecie pomocy lub po prostu chcecie pogadać to piszcie na moje prywatne konto na kreatywnych - thank u, next

{pamiętajcie, kody ze stylami dodajemy pomiędzy [style][/style]!}

#32 - Czarno-biały szablon w stylu poszkole

Hej, jak tam wasze nastroje przedświąteczne? Prezenty spakowane?
Ja dziś przychodzę do was z jednym prezentem :D

Dziś podrzucam wam szablon w stylu starego poszkole :) Może są tu osoby, które lubiły tę estetykę. Jeśli macie jakieś sugestie co do tego jakie szablony powinnam robić to koniecznie piszcie na moje prywatne konto, które podlinkowałam wam na samym końcu tego posta.

Proszę zwróćcie uwagę, że obrazki, które wrzucicie w prawy bloczek muszą być kwadratami o wymiarach co najmniej 150x150 pikseli


Wygląda to mniej więcej tak :

Kody:
1) To wpisujecie w bloczku po lewej stronie:

[div][c][span][b]tu np. imię i nazwisko postaci[/b][br]podstawowe informacje[/span][/c][br]wasz tekst1 [br][br][c][msg][/c][/div][style]body{background-image:url(link do tła);background-attachment: fixed; background-color:#ffffff;background-repeat: no-repeat;background-position: top left;}.div{background-color:black; color:#ffffff ;font-family:lucida console;font-size: 10px;width:400px;margin-left: 80px;margin-top:175px; padding:30px;outline: 1px dashed #ffffff;outline-offset: -4px; text-align: justify;}.span{word-spacing: 5px;line-height:17px;letter-spacing:1px;}#block1 a{color:#ffffff!important;}#poke{display:none}[/style]

2) To wpisujecie w bloczku po prawej stronie:
[c][img]link do obrazka 1[/img] [img]link do obrazka 2[/img] [img]link do obrazka 3[/img][p]wasz test2 [br][br][b]wasz tekst3[b][style] footer,#logo{display:none}.block,.h,header,footer{border:0;} .menu,.menu:hover{font-size: 10px;background:transparent; font-family:lucida console; color: #000000; margin-left: 40px;}.menu:hover{letter-spacing: 2px;font-weight:bold;}.img{height:150px; outline: 1px dashed #0b0b0b;outline-offset: -4px;margin-top: 80px} section{background: transparent} .p{font-style: lucida console;color: #000000; background-color:#f6f6f6; font-size: 10px; letter-spacing:1px; width:346px; margin: 40px; padding: 20px;} [/style]

Polecam korzystać z tinypic.com w celu zmniejszenia długości linków obrazków ;)

W razie jakichkolwiek pytań, jeśli potrzebujecie pomocy lub po prostu chcecie pogadać to piszcie na moje prywatne konto na kreatywnych - thank u, next

{pamiętajcie, kody ze stylami dodajemy pomiędzy [style][/style]!}

#31 - Pogrubiane menu

Cześć i czołem, to znowu ja i dziś przychodzę do was z przedsmakiem tego co dla was przygotowałam na sobotę. :>

Dziś podrzucam krótki kod na pogrubienie czcionki w menu po najechaniu na nią kursorem :)

 .menu:hover{font-weight: bold;}

A podrzucam zdjęcie jak to wygląda na menu z szablonu, który niedługo się tu pojawi :)

Jeśli macie jakieś pytania, prośby, problemy to zapraszam was do kontaktu przez moje prywatne konto na kreatywnych - thank u, next

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#30 - Tworzenie własnego bloczku

Hej, dziś przychodzę do was z kodem na tworzenie własnego bloczku z tekstem. Zapewne wielu z was nie wie jak się za to zabrać, mimo że na kreatywnych macie wypisane wszystkie dostępne komendy ;p

Tak więc dziś zaczniemy od podstaw. Własny tekst należy umieścić pomiędzy [div]wasz tekst[/div]

np.

[div] Roslyn Jones [/div]

By zrobić w bloczku enter, czyli zacząć od nowej linijki, musicie wpisać w divie [br].

Dodajecie swój tekst pomiędzy diva i następnie przechodzimy do pierwszej części tworzenia bloczku, jeśli chodzi o style, które należy umieszczać pomiędzy [style][/style]

Tutaj podrzucam wam komendę, dzięki której będziecie mogli edytować wysokość i szerokość waszego diva, wraz z kolorem tła itp.

1) Jeśli chcecie żeby wasz bloczek był w jednolitym kolorze:

.div{background-color: #kolor; width: 250px; height: 300px;}

Na czerwono zaznaczyłam wam miejsce, gdzie wrzucacie kolor waszego bloczku; na żółto miejsce gdzie w pikselach wpisujecie wymiar na szerokość waszego bloczku; na zielono zmienną odpowiadającą za wysokość bloczku.

2) Jeśli chcecie, żeby wasz bloczek miał jako tło obrazek:

.div{background-image: url(link do obrazka); width 250px; height:300px;}

Na pomarańczowo zaznaczyłam wam miejsce gdzie dodaje się link do obrazka. Jeśli chcecie poznać więcej tipów na pozycjonowanie i powtarzalność tła to odsyłam was do postów #18 i #19

To chyba na tyle, może komuś się przyda takie uczenie się po kolei edycji bloczków i tekstów, żeby w końcu samemu stworzyć jakiś szablon. Tym czasem ja zmykam pisać kolejne notki.

W razie jakichkolwiek pytań, jeśli potrzebujecie pomocy lub po prostu chcecie pogadać to piszcie na moje prywatne konto na kreatywnych - thank u, next

{pamiętajcie, kody ze stylami dodajemy pomiędzy [style][/style]!}

#29 - Usunięcie zaczepek

Hej, wybaczcie że tak późno, ale choroba i praca wykańczają mnie na maksa, jednak nie próżnuję i od wczoraj pracuję nad pomysłem na nowy szablon, który pojawi się na blogu już niedługo ;p

W międzyczasie zauważyłam, że niektórzy mają w lewym dolnym rogu strony tekst 'zaczep' - od tej funkcji zaczepek. Pomyślałam więc, że podrzucę wam krótki kod na usunięcie ich ze strony ;)

#poke{display:none}

I po sprawie ;p

Jeśli macie jakieś pytania, prośby, problemy to zapraszam was do kontaktu przez moje prywatne konto na kreatywnych - thank u, next

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#28 - Cień za avatarem

Hejka,
Dziś przychodzę do was z kolejnym kodem, którego możecie użyć również  w szablonie, który ostatnio wam podrzuciłam. Kod na cień lub też poświatę za avatarem.

.avatar{box-shadow: 0px 0px 3px #000000;}

Na zielono zaznaczyłam wielkości, które możecie zmieniać wedle uznania; na czerwono zaznaczyłam miejsce na kolor ;)

Prezentuje się to tak:

Jeśli macie jakieś pytania, prośby, problemy to zapraszam was do kontaktu przez moje prywatne konto na kreatywnych - thank u, next

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#27 - Zmiana szerokości bloczków

Hej, jestem dziś taka zabiegana, więc bardzo krótka notka, mam nadzieję, że nie macie nic przeciwko ;p
Zauważyłam też na kreatywnych, że spodobała wam się niespodzianka Mikołajkowa, zastanawiam się czy oprócz basicowych kodów podrzucać wam też tutaj jakieś gotowe szablony, bloczki itp. Oczywiście nie z tą samą częstotliwością, co posty pojawiające się tu zawsze.
Notki zawsze pojawiają się we wtorki, czwartki i soboty. Może udałoby mi się zrobić raz na dwa/trzy/cztery tygodnie ;) 

Dziś natomiast kod na zmianę szerokości bloczków na stronie ;)

#block1 {width: 450px;} #block2 {width: 700px}

Możecie zmieniać te wartości zaznaczone na czerwono według własnego uznania ;)
#block1 - to bloczek 'o mnie'
#block2 - to bloczek 'komentarze'

Jeśli macie jakieś pytania, prośby, problemy to zapraszam was do kontaktu przez moje prywatne konto na kreatywnych - thank u, next

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#26 - Zaokrąglone bloczki

Cześć, wybaczcie, że dzisiaj tak późno dodaję notkę, ale miałam znowu małe urwanie głowy :)

Dziś przychodzę do was z  krótkim kodem na zaokrąglenie bloczków

Pierwszy sposób:
.block{background-color:rgba(255, 255, 255, 1); border-radius: 50px;}section{background-color: transparent}

Drugi sposób:
.block{background-color:transparent}section{background-color: rgba(255, 255, 255, 1); border-radius: 50px;}

W obydwu kodach zaznaczyłam na czerwono miejsca gdzie modyfikujecie stopień zaokrąglenia bloczków :>

Jeśli macie jakieś sugestie co do tego jakie rzeczy powinny się znajdować tutaj na blogu, co chcielibyście zmienić na swojej stronie to piszcie do mnie na moje konto - thank u, next

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#25 - Niespodzianka dla kreatywnych

Hej, buty wypastowane? Byliście grzeczni? Dostaliście coś na Mikołajki? ;p
Jeśli nie, bo jesteście albo za starzy lub nikt nie docenił waszych starań to ja mam coś dla Was :)
Dziś mała niespodzianka dla kreatywnych, którzy nie mają wykupionego premium ;p

UWAGA: WAŻNA JEST KOLEJNOŚĆ DODAWANIA KODÓW! Zwłaszcza ostatniego #block2

Wygląda to mniej więcej tak:

Zacznijmy od tego, że wchodzicie w edycję strony i w bloczku po prawej stronie umieszczacie ten kod:

footer{display:none;}.block,.h,header,footer{border:0;}section{background-color: transparent}body{background-image:url(link do obrazka na tło);background-attachment:absolute; background-color:#D3B4C3;}#logo,.menu{display:none;}.block{display:block;margin:0 auto;float:none;}

Następnie w bloczku po lewej stronie kasujecie wszystko i wklejacie ten kod:

[c][div][br][avatar][br][br][i][b]
Imię i nazwisko postaci[/i][/b][br][br]krótki tekst[br][br][msg][/div][/c]
[style].div, #block1 a{height: 450px; width: 300px; background-color: #fbfbfb;letter-spacing: 1px; color: #000000 !important; font-family: Times New Roman;} .avatar{border-radius: 150px; border: double 4px black;}[/style]

Teraz tutaj znajdziecie legendę dotyczącą kodów:
Kolor czerwony - ten wers kodu odpowiada za tło na całej stronie, jeśli chcecie pokombinować we własnym zakresie z tłem to odsyłam was do innych notek na blogu (#1, #18 )
Kolor pomarańczowy - ten tekst odpowiada za edycję tego pojedynczego bloczku a w nim kolejno kolory:

• Kolor zielony - wymiary bloczku, czyli wysokość i szerokość
• Kolor niebieski - kolor tła bloczku 
• Kolor różowy - edycja czcionki w bloku, jej wielkość, odstępy między wyrazami itp, itd (dowolnie możecie modyfikować)

Kolor żółty - styl avatara, czyli obramowanie, zaokrąglenie itp. Odsyłam was do pozostałych notek na blogu, jest ich naprawdę dużo, więc sami poszperajcie ;)

Dodatkowo powyżej wytłuściłam części, które odpowiadają za
[i] - pochylenie czcionki
[b] - pogrubienie ;)
Każda ta komenda musi być zamknięta w odpowiedni sposób tzn. [/b] lub [/i]

Na sam koniec gdy zadowala nas wygląd naszej stronki dodajemy do kodów w naszym widocznym bloczku jeszcze ten wers:

#block2 {display:none}

To chyba na tyle, miłych Mikołajek :)
W razie jakichkolwiek pytań, sugestii co do tego co powinno się znaleźć na blogu lub czegokolwiek wam tam się jeszcze zapragnie to zapraszam - thank u, next

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#24 Przerwy między literami

Cześć i czołem, mam nadzieję, że nie dajecie się mrozom i nie przytłaczają was tak obowiązki jak mnie ;p

Dziś przychodzę do was z kodem na odstępy między literami. Możecie tą formułkę wstawiać gdziekolwiek zechcecie, grunt żeby znalazła się w nawiasie { }, tak jak inne style (typu kolor czcionki itp. - polecam przejrzeć bloga, wtedy lepiej zrozumiecie o co mi chodzi).

Wstawiam wam tutaj poglądowy obrazek oraz kod 

letter-spacing: 3px;

Na niebiesko zaznaczyłam wam wartość, którą możecie zmieniać, w zależności jak dużą przerwę chcecie mieć między literami :)

W razie pytań lub jeśli macie jakieś sugestie do treści, które powinny się znaleźć na blogu to zapraszam do kontaktu - thank u, next 

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}

#23 Okrągłe avatary

Hej, dzisiejszy post piszę na szybko, ponieważ urwania głowy ciąg dalszy, ledwo starcza mi czasu na życie - naprawdę.
Jak w tytule posta, dziś podrzucam wam kody na zaokrąglone avatary.

Kod na zaokrąglenie avka w bloczku 'o mnie'
.avatar{border-radius: 100px;}

Kod na zaokrąglenie avków w 'ścianie'
.av{border-radius: 25px;}

Zaznaczone na czerwono cyferki możecie modyfikować, żeby ustawić stopień zaokrąglenia avatarów :)

W razie jakichkolwiek pytań/jakbyście potrzebowali pomocy to piszcie na mój prywatny profil - thank u,  next

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}