29.12.2012

014. everything about you is so easy to love ~ tekstury, szablony



{bazy od Carllton, reszta moja}
MUSE - 'BLISS' kocham!

Cześć kochani! To, co się działo tutaj ostatnio, przeszło moje najśmielsze oczekiwania. Jeszcze nigdy chyba nie zostałam zasypana pytaniami w takim tempie! Oczywiście dalej można pytać jeśli chcecie:) Jak widać blog coraz bardziej się rozbudowuje, cały czas nad nim pracuję, staram się wszystko szybko ogarnąć... I jednocześnie nie odciąć Was od świeżej dostawy dodatków i niespodzianek. Uzupełniłam regulamin (także regulamin zamawiania, wszystko jest w zakładce "regulamin" w menu) i są HASŁA. Bardzo proszę o ich podawanie jeśli coś zamawiacie/pobieracie i informujecie w komentarzach. W przeciwnym razie mogą Was spotkać nieprzyjemności :3

Nie mogę się już doczekać sylwestra! Od kilku dni chodzę w moich mega szpilkach, żeby się w poniedziałek nie okazało, że nogi mnie bolą :p Ale raczej nie będzie z tym problemu, bo ja noszę obcasy codziennie (mam takie śniegowe z kożuchem też). Sukienka jest, błyskotki są, no praktycznie wszystko jest. Trzeba tylko zadbać o siebie, bo impreza będzie MEGA! Chyba na nic tak nie czekałam jak na tego sylwestra! Nawet na studniówkę czy połowinki... Będzie 70 osób, cudowna muzyka, wielka sala... Jestem nastawiona na imprezę życia!

W ostatnim czasie pracowałam dużo z CSS'em i szablonami. Tak, mam dla Was kilka szablonów:) Szablony nr 2, 3 i 4 są zrobione z moich starych nagłówków, ale myślę, że całkiem ładnie wyszły. A Wy co myślicie? Poza tym, mam dla Was jeszcze tekstury, no i te cztery ikony tam powyżej ^^, które możecie 'kraść' na swoje blogi do postów oczywiście z creditem <3 p="p">
PROSZĘ O CZYTANIE REGULAMINU PRZED POBRANIEM CZEGOKOLWIEK.


   

Coś się zepsuło jeśli chodzi o podglądy te mniejsze na mojej galerii szablonów. Klikajcie w ten nieco "przygaszony" podgląd a otworzy Wam się pełny:)


PAMIĘTAJCIE O REGULAMINIE.

Zamówienia:
- limit : 2 szablony

Pozdrawiam!;*
Pytania składajcie śmiało:)




30 grudnia 2012. EDIT:

Na przyszły post oczywiście wykonam złożone zamówienia. Dam też jakieś kody css na różne efekty w stronach (kartach). Macie jeszcze jakieś propozycje? Może znowu tekstury byście chcieli? Czy nie wiecie, jak ich używać? 
Będzie też na pewno prosty tutorial na nagłówek w Photoshopie z tekstem o pewnym efekcie. Stworzyłam tą pracę dziś na szybko, bo wiem, że później nie będę mieć na to czasu. Jeśli nie wiecie jak zrobić taki tekst jak na tym nagłówku - pisać, a będzie na to tutorial w kolejnym poście (tym po tutorialu).





26.12.2012

013. Jak szybko zrobić własny szablon na bloga?



Wiele osób się zastanawia, jak ja zrobiłam taki a taki szablon i większość z nich mówi "CSS to dla mnie czarna magia". W ostatnim czasie jest Was za dużo, by policzyć na palcach jednej ręki, więc postanowiłam przedstawić kilka sztuczek, jakie stosuję i zobaczycie, że to wcale nie jest trudne. I że wcale nie jestem geniuszem:) Mój pierwszy szablon stworzyłam bez dodawania w „zaawansowanych”  arkuszy CSS. Z dwóch powodów – nie wiedziałam, do czego miałoby to służyć, a co dopiero jak ten arkusz napisać. Przekształciłam kod HTML. Odnalezienie tego, czego w nim szukam i co chcę zmienić, zajęło mi kilka dni. Ale wiedziałam, że jest szybszy sposób i że do czegoś te arkusze muszą służyć. Poduczyłam się z kilku kursów css’a w necie (zajęło to kolejne dwa dni) specjalnych kodów i spróbowałam z arkuszem. Zadziałało. Wyjaśnię, jak zamontować szybko i sprawnie własny szablon  na blogu, bez znajomości CSS’a. Od razu mówię – nie jestem zawcą całego blogspota, jestem tutaj tylko 3 tygodnie, ale metody, jakie stosuję, są proste i skuteczne. Z nimi każdy onetowicz da sobie radę;]


1.  O d   c z e g o   z a c z ą ć

Na początku musisz więc zapamiętać trzy zasady:
I. unikaj edytowania kodu HTML tak często, jak tylko jest to możliwe
II. zmieniaj szablon tylko i wyłącznie w „Projektancie szablonów”, czyli kolory czcionek itd. oraz przede wszystkim pisząc dodatkowy arkusz CSS
III. w wybranym przez Ciebie szablonie (obojętnie, czy to jest Prosty, Okno obrazu czy jakiś inny) wszystkie elementy, które chcesz edytować, mają swoje nazwy, zapisane w specjalny sposób. To selektory. Edytując kod HTML możesz je podejrzeć już na początku, w tych wszystkich linijkach zaczynających się od:
Group description="Tabs Text" selector=".tabs-inner .widget li a"
Dlatego dla kart mamy tutaj selektor:  .tabs-inner .widget li a, bo taki został wprowadzony w group description. Poza tym możemy je podpatrzeć w Układzie. Najeżdżamy myszką na hasło Edytuj dla danej ramki i pokazuje nam się w lewym dolnym rogu przeglądarki adres linku. Interesuje nas ten fragment linku: "widgetId=Blog1", a konkretnej to, co stoi za znakiem równa się (czyli Blog1). Dopisujemy do tego # i mamy selektor bloga: #Blog1.
Jak wygląda edycja prostego, pojedynczego parametru? Schemat jest taki:

Selektor {  właściwość : wartość ; }


2.  P r o b l e m y    z    w s t a w i e n i e m    n a g ł ó w k a

Samo załadowanie obrazu w oknie edycji „nagłówka” (edytować możemy wszystkie ramki, gdy wejdziemy w „Układ”). Wszystko jest fajnie, jeśli nagłówek nie zostanie nigdzie przycięty. Jeśli zostanie przycięty, dodajemy arkusz CSS, np. w moim szablonie nr 2 było tak:

#Header1{
margin: -20px -178px 0 0;
}

Właściwość „margin” oznacza marginesy. Pierwsza cyfra odpowiada marginesowi górnemu, druga – z prawej strony, trzecia – dolnemu, czwarta – z lewej strony. Marginesy te są odległością (w pikselach) danej krawędzi ramki od brzegu strony (tudzież brzegu wyświetlacza monitora, tak to trzeba interpretować).  Przykład: dla marginesu górnego dodatnia wartość będzie oddalała brzeg nagłówka od góry monitora, ujemna – będzie ją przybliżać w stronę krawędzi górnej monitora itd. Wartości wpisujcie tak długo, aż w podglądzie poniżej będzie wyglądać idealnie.


3. R ó ż n e   e f e k t y    t ł a – p o d    p o s t a m i ,  k o l u m n a m i

Co można zrobić z tłem? Lista selektorów i opcji, jakie tutaj mamy:

background-color: #000000;      (tłem będzie kolor #000000)
background-image: url(‘adres zalinkowanego obrazka’);     (tłem będzie obrazek)
border-width: 1px;      (grubość obramowania - wpisujemy wartość jaką chcemy w pikselach)
border-color: #000000;      (kolor obramowania)
border-style: dotted;       (styl obramowania: dotted – kropeczki, dashed – kreseczki, double – podwójna linia)
border-radius: 20px;       (zaokrąglone rogi tła, jedna wartość zaokrągli wszystkie cztery rogi, wprowadzając cztery różne wartości możesz zaokrąglić każdy z czterech rogów w inny sposób np.:
border-radius: 20px 0 20px 0;     )

Selektory możemy łączyć, czyli możesz dodać jednocześnie jako tło obrazek, który będzie obramowany danym kolorem w dany sposób. Ustawiając tło pod postem wpisujemy np.:

#Blog1 {
background-color: #000000; 
border-width: 1px;  
border-color: #ffffff;
border-style: dotted; 
}

Uzyskane tło będzie czarne z obramowaniem w postaci białych kropeczek, o grubości 1 piksela.
Takie samo tło dla kolumny będzie się różniło tylko selektorem, który należy wpisać zamiast ”#Blog1”:

Kolumna prawa:     .column-right-inner
Kolumna lewa:     .column-left-inner


4. T ł o   p o d   c a ł y m   b l o g i e m  -  j a k   o s z u k a ć    l i m i t    r o z m i a r u ?

Można je załadować w projektancie szablonów (Szablon > Dostosuj > Tło). Jest jednak limit rozmiaru. Chcąc załadować większe tło trzeba załadować małe, zapisać i przejść do edycji kodu HTML. Zapamiętaj nazwę małego tła! Przykładowo u mnie jest to jasddas.png, więc będąc w edycji kodu wciskam Ctrl + f i wklejam nazwę. W ten sposób znalazłam w kodzie html moje tło i teraz mogę zalinkować gdzieś duże tło i wkleić adres obrazka w odszukane w kodzie miejsce.


5. C o   z r o b i ć ,  b y   r a m k i   n a c h o d z i ł y   n a   n a g ł ó w e k ?

Do tego służy nam pozycjonowanie.  Najmniej inwazyjne jest relatywne (absolutne może wpłynąć na inne elementy szablonu). Jeżeli chcemy, żeby np. kolumna lewa nachodziła na nagłówek (który łączy nam się z tłem bloga) i żeby była wyżej od postów używamy właśnie tego. Wpisujemy

.column-left-inner {
position: relative;
top:  -125px;
left: 275px;
}
Tutaj musimy pokombinować znowu z ustawieniem odpowiednich wartości, ale podgląd wyświetla się od razu, więc nie ma z tym problemu. W ten sposób możesz ustawić w dowolnym miejscu gdzie chcesz daną kolumnę czy tylko jedną ramkę (#Blog1 – całe okno z postami, #PageList – strony czyli menu w kartach, itd.), nawet na nagłówku.


6. M a m y   r a m k i ,  a l e   t e k s t    w    n i c h    n i e    j e s t    r ó w n o ?

No tak. Wszystko fajnie, ale marginesu górnego prawie nie ma, lewy jest ok, ale prawy jest dużo mniejszy. Co teraz? Bawimy się właściwością margin tak jak to opisałam wcześniej. Często jednak margin nie załatwia sprawy, bo działa on na elementy z zewnątrz. Wtedy zamiast margin stosujemy padding. Tak samo jak dla margin ustawiamy cztery wartości w pikselach, gdy z danej strony nie chcemy dopasowania zmieniać dajemy na 0 i po kłopocie.


7. Z a k o ń c z e n i e

Przykładowy CSS, który tu napisałam, wygląda tak:

#Header1 {
margin: -20px -178px 0 0;
}
#Blog1 {
background-color: #000000; 
border-width: 1px;  
border-color: #ffffff;
border-style: dotted; 
}
.column-left-inner {
position: relative;
top:  -125px;
left: 275px;
}
Tak wprowadzony arkusz CSS zapisujemy i zostanie on automatycznie dopisany do naszego kodu HTML szablonu. Oczywiście możecie dopisywać więcej ustawień, dla każdej ramki inne, co Wam się tylko podoba.
Gotowe! Szablon mamy wstawiony.  Teraz tylko edycja czcionek itd.


Macie z czymś jeszcze kłopoty?

Piszcie, postaram się Wam wszystkim pomóc!:)




Już wkrótce dodam nowe szablony:)

24.12.2012

012. too close to love you...


 
{klik! w sygnaturkę}

Cześć Wam. Na początek wszystkim życzę wesołych świąt i wszystkiego, co najlepsze!:) Jak Wam mija ten świąteczny czas? Ja, poza tym, że jest to dla mnie jedyny czas w roku (poza wakacjami, przerwą wielkanocną i tą w maju), który spędzam w domu z rodziną, czas ten spędziłam w sumie na jakichś tam przygotowaniach, w sumie na... No właśnie.

Niestety, jak widzicie, nie mam dla Was zbyt wielu prezentów. Niespodzianka nie wypaliła do końca tak, jakbym chciała. Tzn... Wszystko w swoim czasie. Przeceniłam nieco swoje możliwości (nie, nie graficzne), zresztą nie pierwszy i nie ostatni raz:p Ale poczyniłam ogromne kroki w tym kierunku, w którym miałam iść tworząc prezenty. Klikając w sygnaturkę powyżej możecie zobaczyć to, nad czym tyle ostatnio pracowałam. Dodam, że to tylko jeden z wielu. Będzie więcej. Właśnie nad tym pracowałam i idzie mi... Całkiem nieźle:)

Na dzisiaj tylko teksturki do ikon (70 sztuk) i dwie paczki stocków tematycznych z weheartit. Czytajcie regulamin i wyczekujcie niespodzianek, może na sylwestra zdążę, przynajmniej taki jest plan:)

 
 
 
 



20.12.2012

011. make me wanna die


Czy pomyślałabym kiedykolwiek, że będę słuchać jakieś piosenki Taylor Momsen? W życiu! A jednak... Czuję się z tym faktem niezbyt zręcznie, no ale ta piosnka nie może mi wyjść z głowy. Za dużo Plotkary... xoxo;* Jak widać wszystko z Inconditionally powstawiałam ;D Istnieje jednak niewielkie, ale jednak, prawdopodobieństwo, że coś działać nie będzie, tudzież jakieś linki wygasły, więc piszcie, informujcie, o wszystkim, co Wam się nie podoba. Za wszelkie pochwały, tudzież gratulacje, będę dozgonnie wdzięczna, tym bardziej, że poświęciłam na to pół dnia. Dla Was;* Nie mogłabym pozwolić na to, żeby jakiś pajacowaty blog.pl zniszczył mi galerię. Mój cały dorobek był nieprzejrzysty. Never.
Macie może ochotę na coś w rodzaju imprezki i niespodzianek na święta? Szykuję coś, czego tutaj ani na Inconditionally nie było. Nigdy tego nie robiłam, ale zawsze przecież kiedyś musi nastąpić ten pierwszy raz ;> Postaram się Was pozytywnie zaskoczyć i żebyście mogli pod moją choinką blogową znaleźć mnóstwo prezentów;* Jakieś propozycje? Sugestie? Postaram się zrobić, co tylko chcecie. Jednak priorytetem będzie moja główna niespodzianka. xoxo;*




19.12.2012

010. tekstury do ikon (100x100)

Zbiór większość moich setów tekstur do ikon. Wszystkie robiłam sama.

ZASADY KORZYSTANIA
~ poinformuj mnie w komentarzu o pobraniu, podając adres bloga
~ pamiętaj o credicie: (c) terriblecrash ! Zawsze!






009. tutoriale i pliki psd



W A  Ż N E ! ! !
Pliki psd służą do nauki. Możecie dzięki nim zobaczyć, jak tworzę niektóre rzeczy. Zabraniam jednak wykonywania z nich własnych dodatków czy prac.


ZASADY KORZYSTANIA
~ poinformuj mnie w komentarzu o pobraniu, podając adres bloga
~ pamiętaj o credicie: (c) terriblecrash ! Zawsze!
ABY POBRAĆ - KLIKAJ NA PODGLĄDY LUB PRZYPISY POD NIMI.

H E A D E R S    T U T O R I A L S 

  



S I G N A T U R E S    T U T O R I A L S


{kliknij na sygnaturkę, aby przejść do tutoriala}

I C O N S    T U T O R I A L S

efekt:
(kliknij TUTAJ aby przejść do tutoriala}

efekt: 

(kliknij TUTAJ, aby przejść do tutoriala}

efekt:

(kliknij TUTAJ, aby przejść do tutoriala}


H E A D E R S    P S D    F I L E S 







S I G N AT U R  E S    P S D    F I L E S
 
 
 
 


I C O N S    P S D    F I L E S

 
 
 
   
 
 

Obserwatorzy