CHATBOX

CSS i FAQ

Instrukcje CSS, jakich używam do tworzenia szablonów, pochodzą ze stron:
Instrukcje:

♦ Jak wstawić szablon na bloga?
♦ Jak dostosować pobrany szablon?

Wszelkie pytania zadawać możecie również pod tym postem.

155 komentarzy:

  1. Ja mam pytanie...
    Strony na Twoim blogu są świetne - chodzi mi o ten efekt przekręcania się.
    Jest na to kod CSS czy ustawiłaś to jakoś inaczej?
    Jeżeli jest, to czy zdradziłabyś ten kod? :)

    Pozdrawiam!

    OdpowiedzUsuń
    Odpowiedzi
    1. Tak, jest to jeden z kodów CSS. Robiąc to menu wzorowałam się na instrukcji z bloga http://graphical-thoughts.blogspot.com/ , ale przyznaję, że musiałam się nieźle nagłowić, żeby uzyskać taki efekt. Żeby ułatwić ci zadanie, zdradzę ci kod moich kart, ponieważ samo ustawienie ich tak, żeby były okrągłe było trudne.

      #PageList1 li a:link, #PageList1 li a:visited {
      width: 73px;
      height: 60px;
      border-radius: 360px;
      padding-top: 45px;
      padding-bottom: 0px;
      margin-left: 8px;
      margin-bottom: 9px;
      background: #ffffff;
      text-align: center;
      display: block;
      text-decoration: none;
      color: 000000;
      font: 11px Verdana;
      transform:rotate(0deg);
      -webkit-transform:rotate(0deg);
      -moz-transform:rotate(0deg);
      -o-transform:rotate(0deg);
      transition:all 1s;
      -moz-transition:all 1s;
      -webkit-transition:all 1s;
      -o-transition:all 1s;
      margin-top: 11px;}

      #PageList1 li a:hover {
      width: 73px;
      letter-spacing: 0px !important;
      height: 60px;
      border-radius: 360px;
      padding-top: 45px;
      padding-bottom: 0px;
      margin-left: 8px;
      margin-bottom: 9px;
      background: #000000;
      text-align: center;
      display: block;
      text-decoration: none;
      color: #ffffff;
      font: 11px Verdana;
      transform:rotate(360deg);
      -webkit-transform:rotate(360deg);
      -moz-transform:rotate(360deg);
      -o-transform:rotate(360deg);
      transition:all 1s;
      -moz-transition:all 1s;
      -webkit-transition:all 1s;
      -o-transition:all 1s;
      margin-top: 11px;}

      Większość wartości liczbowych i kolorów możesz zmieniać. Teraz karty będą czarno-białe, ale ich kolor oczywiście możesz zmienić :D
      Jeśli uda ci się uzyskać takie karty, z chęcią zobaczę twój efekt, możesz dać mi adres swojego bloga ^^

      Usuń
    2. Dzięki! ^^
      Pędzę pobawić się kodami, mam nadzieje, że coś mi z tego wyjdzie :P

      Usuń
    3. http://nie-badz-taka-hermiono.blogspot.com/ <---- na razie wyszło mi tak, trochę dziwnie.
      Nie są okrągłe, tylko owalne, ale takie też mogą być :)
      Jeszcze raz dzięki ^^

      Usuń
  2. Zapraszam na mój nowy graficzny blog:
    http://lovinginlive.blogspot.com/

    Może Ci się spodoba :)

    OdpowiedzUsuń
  3. Jak zrobiłaś ten efekt, że komentarze masz obok tytuła postu? Jest na to jakiś kod? Bo bardzo mi się to podoba :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Akurat to jest wbrew pozorom bardzo proste. Wystarczy wejść w Projekt -> Układ i kliknąć "Edytuj" w prawym, dolnym roku ramki "Posty w blogu". Pokaże ci się nowe okienko, a na samym jego dole pojawi się ramka, w której będziesz mogła dowolnie zmieniać położenie niektórych elementów posta. Nie wszystkich, ale niektórych tak. Od razu ostrzegam, że to nie zawsze działa i jeszcze nie odkryłam, co na to wpływa, ale sposób, żeby uzyskać ten efekt, jest właśnie taki, jak opisałam. :D

      Usuń
  4. A jeszcze jedno. Wiesz jak zrobić taki szablon: http://funkyimg.com/u2/4844/585/808352podgl__d.png ? Tzn. to tło co jest pod nagłówkiem? Są na to jakieś kody?

    OdpowiedzUsuń
    Odpowiedzi
    1. Oczywiście, ale byłoby to za dużo tłumaczenia, jak na jeden komentarz. Jeśli chcesz się dowiedzieć więcej na ten temat, polecam ci obejrzeć poradnik odnośnie pisania kodów szablonu, który możesz znaleźć na moi kanale: http://www.youtube.com/playlist?list=PLfs_EqGJrqM8KWDX5wDDxt3o9ZKyDT44Z&feature=mh_lolz (na tej playliście znajdziesz kilka tutoriali, ale tobie chodzi o te o nazwie "CSS").

      Usuń
  5. Mam małe pytanko...
    Jak zrobić takie menu, co jest w tym blogu? Tzn. jak najeżdżasz np. na wrzesień to wysuwa się taki różowy pasek...
    Mogłabyś mi podać kod css ?

    OdpowiedzUsuń
    Odpowiedzi
    1. Instrukcja na ten efekt znajduje się tutaj (dwie części):
      1. http://graphical-thoughts.blogspot.com/2013/04/box-shadow-dla-kart-cz1.html
      2. http://graphical-thoughts.blogspot.com/2013/05/box-shadow-dla-kart-cz2.html

      Usuń
  6. Dziękuję uprzejmie :3

    OdpowiedzUsuń
  7. Hej, Lizz, jak można zrobić takie wolne podświetlanie linków?

    OdpowiedzUsuń
  8. Wystarczy wkleić poniższy kod do CSS'a:

    a:link {
    transition:all 1s;
    -moz-transition:all 1s;
    -webkit-transition:all 1s;
    -o-transition:all 1s;}

    a:hover {
    transition:all 1s;
    -moz-transition:all 1s;
    -webkit-transition:all 1s;
    -o-transition:all 1s;}

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję, jesteś serio wielka!

      Usuń
  9. Hy! Sorry for writing in English, and hope you can jelp me out! I'd like to ask you how to make a toggle text-box like you have here called: "obserwatorzy", "sondy" and "historia" etc. These are really good, but couldn't figure out how they made. Thank you so much! You've got such a nice blog btw :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Ok, I understand :D
      So... Some time ago I've made a video tutorial for this effect, but it is in Polish too. You can see it here: http://www.youtube.com/watch?v=HpsbTO6ofF4&feature=c4-overview&list=UUL3j1XwIcjoNBH2XMAfmoHA , but you won't probably understand it. So... to make a widget like my "obserwatorzy" etc. you have to write a CSS for widget called "Followers", for example:

      #Followers1 {
      text-align: justify;
      border-left: 23px solid #C1525A;;
      border-top: 1px solid #C1525A;;
      border-right: 1px solid #C1525A;;
      border-bottom: 1px solid #C1525A;;
      background-color: #434343;
      width: 250px;
      padding: 5px;
      position: fixed;
      right: 19px;
      z-index: 1;
      top: 40px;
      }

      Then you have to copy this text, paste it and add a word ":hover" like this: " #Followers1:hover "

      After that you have to change value of "right". Then you have to add: "transtion: all 0.8s;
      -moz-transition: all 0.8s;
      -webkit-transition: all 0.8s;
      -o-transition: all 0.8s; " for each blocks of text for
      fluency. It should works. You can compare it with my video tutorial and I hope you will understand something :D Sorry for my english, I know it isn't perfect...

      Usuń
    2. omg, so fast! thank you soooo~ much for your help, and don't worry about your english ;) I did understand it and even your vid was helpful (however I don't speak polish, not a word unfortunatelly). so now I'm playing with these boxes, and again, thank you! I'll give you full credit of course! :)

      Usuń
    3. oh, almost forgot; how do I add text to the side? on the border? I have the widget's name inside the box and only visible when you open it.

      Usuń
    4. Oh, it's complicated... so... At first you have to add a background to a widget's title. If you want to edit widget's title, you have to add word "h2" after widget's name, for example:

      #Followers1 h2

      So, you have to add background like this:

      #Followers1 h2 {background-color: black;}

      In this moment there should be a background under the widget's title. If you want your widget's title be next to the box, you have to change width, margins and postition, for example:

      #Followers1 h2 {
      margin-left: -5px;
      width: 14px;
      position: relative;
      left: -23px;
      top: -6px;
      margin-bottom: -216px
      }

      Then you should to add padding and text-align like this:

      #Followers1 h2 {
      color: #F2DBDE;
      margin-left: -5px;
      width: 14px;
      position: relative;
      left: -23px;
      padding: 2px 4px;
      text-align: center;
      top: -6px;
      margin-bottom: -216px
      }

      I hope it will work :D

      Usuń
    5. oh, God, I totally forgot to thank you!!!so sorry! I owe you a huge hug because of your help, thank you so much! :) <3

      Usuń
    6. oh, ja przy okazji też podziękuję za instrukcję, zamierzałam o to zapytać :) angielski jest na prawdę przydatny xD

      HardCandy thanks for asking this question, answer helped me too :D

      Usuń
    7. A proszę, you're welcome itp :D

      Usuń
  10. Lizz, mogłabyś mi pomóc? Jak zrobić, aby po najechaniu na zdjęcie ono się ściemniało w poście? Tak jak u Ciebie. Możesz mi podać bezpośrednio kod?
    Dziękuję i pozdrawiam.

    OdpowiedzUsuń
    Odpowiedzi
    1. Pewnie, to jest ten kod:

      .post-body img:hover {
      box-shadow: none !important;
      opacity: 0.7;
      transtion: all 0.8s;
      -moz-transition: all 0.8s;
      -webkit-transition: all 0.8s;
      -o-transition: all 0.8s;
      }

      .post-body img {
      box-shadow: none !important;
      transtion: all 0.8s;
      -moz-transition: all 0.8s;
      -webkit-transition: all 0.8s;
      -o-transition: all 0.8s;
      }

      Usuń
    2. Tak, tylko że obrazek robi się szary, a ja chcę, żeby ściemniał się tak na czarno...

      Usuń
    3. Bo on tak naprawdę nie ściemnia się sam w sobie, tylko robi się przezroczysty, a u mnie to wygląda jak ściemnianie, bo mam ciemnie tło.

      Usuń
    4. Aha ;) Dzięki .

      A mam jeszcze takie pytanko... bo popatrz.. tytuł posta wygląda dobrze, ale tytuł strony... no zobacz:
      http://in-life-things-can-change.blogspot.com/p/autorka.html

      Usuń
    5. To dlatego, że w podstronach nie ma daty na górze. Musisz tak pokombinować, żeby blog wyglądał dobrze i na stronie głównej, i na podstronach.

      Usuń
  11. A jaki będzie selektor na przeniesienie pola ' Autor: ... ' ? Bo jak stosuję
    .post-author
    albo
    .post-author span
    to nie działa :/
    nie da rady przesunąć w żadną stronę tego pola :/

    OdpowiedzUsuń
  12. U mnie to jest ".post-author" i zawsze działa. Zwykle przesuwam to pole w ten sposób:

    .post-author {
    position: absolute;
    left: 30px;
    top: 30px;
    }

    OdpowiedzUsuń
  13. Cześć, Lizz. Czy mogłabyś mi pomóc? Nie wiem, jak dostosować menu, by znajdowało się ono na górze.

    OdpowiedzUsuń
  14. Możesz skorzystać z instrukcji autorstwa Caudire (http://maudlaisy.blogspot.com/2013/11/022-effects-of-your-own-creative-power.html), tylko słowo "bottom" zamień na "top". Jeśli coś będzie nie tak, oczywiście pisz, a pomogę ci dostosować :D

    OdpowiedzUsuń
    Odpowiedzi
    1. Dziękuję Ci bardzo. ^^

      Usuń
    2. Mam jeszcze jedno drobne pytanie.. A jak zrobić stałe tło pod linkami w np. gadżetach czy do innych takich, żeby nie były tylko po najechaniu. Np. podobnie, jak masz w komentarzach?

      Usuń
    3. Chodzi ci o coś takiego, co będą miały komentarze w poście po wklejeniu tego kodu?

      .post-body a:link, a:visited {
      background-color: red;
      padding: 2px 5px;
      border-radius: 10px;
      }

      .post-body a:hover {
      background-color: blue;
      padding: 2px 5px;
      border-radius: 10px;
      }

      Jeśli tak, to wytłumaczę ci to dokładniej ;D

      Usuń
  15. Tak, właśnie to mam na myśli i w etykietach też, znaczy tak z boku, jak masz. Bo ja wiem tylko, jak to zrobić po najechaniu, ale żeby były w tle na stałe, to nie. Planuję dopracować bloga tak, żeby wyglądał jakoś ciekawiej, choć przyznam, że to odrobinę trudne. Dzięki, że mi pomagasz. :D

    OdpowiedzUsuń
    Odpowiedzi
    1. I tak w ogóle, to ten kod dość dziwnie mi się przyjął na blogu, więc narazie go usunęłam, bo chyba coś robię nie tak, ale zmiany są... inne.

      Usuń
    2. Ogólnie do różnych rzeczy są różne selektory, i różne selektory można różnie łączyć. Np. są takie trzy:

      * a:link - oznacza pojedynczy link w stanie przed najechaniem
      * a:visited - oznacza pojedynczy link, który był już odwiedzony
      * a:hover - oznacza pojedynczy link w momencie, gdy najeżdżamy na niego myszką

      Te trzy selektory możemy dodawać nie tylko do popularnego "#PageList1" i tworzyć "#PageList1 a:link", "#PageList1 a:hover" i tym podobne, ale np. ".post-body a:link", które będzie odpowiadać za wszystkie linki w poście przed najechaniem, lub np. #Label1 a:link, które będzie odpowiadać za link w liście etykiet. Użycie tych trzech selektorów będzie odpowiadało za wszystkie linki na blogu.

      Mam nadzieję, że jasno to wytłumaczyłam, jakby nie, to pisz. Bo rozumiem, że tło umiesz dodać, tylko potrzebujesz selektorów :D

      Usuń
    3. To rozumiem, że jeżeli wkleję pierwszą część kodu, który mi podałaś, będzie on odpowiadał za wygląd linków przed najechaniem na nie myszką, tak? Bo jeśli, to z jakichś powodów nic właściwie się nie zmienia. Linki są takie, jakie były. Jeżeli dopiszę !important, to sytuacja jest dziwna, bo, jeżeli mam np. menu boczne i ma ono powiedzmy zielony kolor przycisków, to pierwszy i ostatni przybiera taki kolor, jaki powinny mieć wszystkie linki na blogu, a to przecież nie o to chodzi, ponieważ w arkuszach css jest już do tego kod, odrębny. Gmatwam trochę, ale zastanawiam się nad tym problemem. :)

      Usuń
    4. Hm... trochę to skomplikowane, to prawda :D Może podam ci to selektory w trochę inny sposób:

      * #PageList1 a:link, #PageList1 a:visited - selektor odpowiadający za linki w menu przed najechaniem i odwiedzone, zwykle definiuje się je razem
      * #PageList1 a:hover - selektor odpowiadający za linki w menu po najechaniu myszką

      I analogicznie w ten sposób można też utworzyć inne selektory:

      * #Label1 a:link, #Label1 a:visited - etykiety przed najechaniem
      * #Label1 a:hover - etykiety po najechaniu

      * #LinkList1 a:link, #LinkList1 a:visited - lista linków przed najechaniem
      * #LinkList1 a:hover - lista linków po najechaniu

      * a:link, a:visited - wszystkie linki na blogu przed najechaniem
      * a:hover - wszystkie linki na blogu po najechaniu

      W ten sposób można tworzyć różne selektory. I jest jeszcze coś. Sam selektor " #PageList1 " odpowiadać będzie za całą ramkę z listą stron, więc zdefiniowanie dla niego tła będzie odpowiadało za tło całej ramki, a nie pojedynczego linki, natomiast " #PageList1 a " odpowiadać będzie za wszystkie linki w menu, bez względu na to, czy przed, czy po najechaniu.

      Usuń
    5. Okej, postaram się jakoś to ogarnąć, żeby coś tam stworzyć, dziękuję Ci bardzo. Jeszcze tylko jedno, maleńkie pytanie, ale to już inna sprawa. Bo zauważyłam, że na moim blogu brzydko wygląda "#nikumu Brak komentarzy" bezpośrednio pod tytułem posta, a u Ciebie to się znajduje bodajże na ramce górnej, jaki to efekt? Tak, wiem, męczę z tym CSS, ale jestem taką cholerną perfekcjonistką. Jak mi się uda osiągnąć efekt z selektorami i linkami, to Ci się pochwalę, czy jednak szare komórki działają.:D

      Usuń
    6. * .post-author - selektor odpowiadający za autora postu
      * .comment-link - selektor odpowiadający za liczbę komentarzy

      Tych selektorów możesz użyć do przeniesienia i zmodyfikowania tego "#nikumu Brak komentarzy" . Polecam do obydwu dopisać {position: absolute} i dopiero wtedy zmieniać miejsce, gdyż dzięki temu nie będzie się ono zmieniać bez względu na długość posta i jego tytułu. Działa to jednel tylko w momencie, kiedy napis ten ma być na samej górze - w innych wypadkach pojawia się sporo problemów.

      Usuń
    7. Dziękuję Ci bardzo za pomoc, mam nadzieję, że Cię nie wkurzałam tymi pytaniami. Co do etykiet, to się udało, gorzej z komentarzami w postach, ale już trudno. ^^

      Usuń
    8. Spokojnie, nie wkurzałaś mnie :D

      Usuń
  16. Hej. Piszę w sprawie statystyk. Od dawna szukałam sposobu by po najechaniu myszy zmieniał się wygląd. Mogła byś mi to wytłumaczyć?
    Pozdrawiam

    OdpowiedzUsuń
    Odpowiedzi
    1. No pewnie :D
      Za statystykę przed najechaniem odpowiada selektor: #Stats1 , i do niego dobierasz takie wartości, jakie ma mieć statystyka przed najechaniem. Natomiast drugi selektor: #Stats1:hover odpowiada właśnie za statystykę po najechaniu, i do niego dobierasz tylko te wartości, które mają się zmienić, czyli np. kolor czcionki i tła, ale to już kwestia twojej kreatywności, co miałoby się zmieniać :D A jeśli chciałabyś wyłączyć tytuł statystyki, jak to jest u mnie, użyj kodu: #Stats1 h2 {display: none !important}
      Pozdrawiam :D

      Usuń
  17. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  18. Hej Lizz.
    Jak zrobić tak, że jak przewijamy stronę w dół, żeby przewijał się cały blog razem z np. menu ? Tak jak jest np. na zaczarowane-szablony.blogspot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. Żeby tak zrobić, do ramki w której jest menu, np. .column-right-outer należy dopisać: "position: fixed" i odpowiednio "left: 30px" i "top: 30px" (wartości można zmienić). Wówczas ramka nie będzie zmieniała swojego położenia względem krawędzi ekranu.

      Usuń
  19. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  20. Mam pytanie.. Jakiego selektora użyć na napis 'xx komentarzy' będący linkiem? Od niedawna się zastanawiam, bo przydałoby mi się tło do niego :) Z góry dziękuję :)

    OdpowiedzUsuń
  21. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  22. Lizz, tworzę właśnie bloga na podstawie twoich instrukcji o wysuwanych ramkach. Mam tylko problem... tekst nie chce się wysunąć!
    Proszę, pomóż!
    http://shandie3probny.blogspot.com/

    OdpowiedzUsuń
    Odpowiedzi
    1. Hmm... pewnie chodzi o to, że coś przezroczystego nachodzi na ramkę i przez to nie chce się wysunąć. Ciężko jest mi jednak stwierdzić, co to takiego i jakim kodem mogłabyś to naprawić...

      Usuń
    2. A mogę CI jakoś ułatwić stwierdzenie tego?

      Usuń
    3. Hm... umiałabym stwierdzić, gdybym robiła tego bloga od podstaw, ale tak teraz, to chyba nie...

      Usuń
  23. Hej :)
    Mam jedno pytanie... W jaki sposób można oddzielić datę od tła posta? Żeby między nim a nią było tło zewnętrzne? Byłabym wdzięczna za odpowiedź :)

    OdpowiedzUsuń
  24. Wystarczy przesunąć datę w górę, np. za pomocą tego kodu:

    h2.date-header span {
    position: absolute;
    top: -40px;}

    OdpowiedzUsuń
  25. Hej :)
    Przybyłam tu z pytaniem, a mianowicie. Strasznie podobają mi się Twoje szablony, a tymczasowo zamówień nie przyjmujesz. Ja sama trochę bawię się z grafiką, ale CCS to kompletnie nie moja bajka.
    Byłaby taka możliwość abym pobrała Twój szablon (oczywiście zgodnie z regulaminem), a na blogu umieśniła button Twojej szabloniarnii, ale zmieniłabym nagłówek szablonu na swój, tak aby tematyka pasowała do opowiadania?
    Byłabym wdzięczna za odpowiedź.
    Pozdrawiam.

    OdpowiedzUsuń
  26. Lizz!
    Wykonałam nagłówek i chcę go wysłać na imageshack'a czy tinypic aby uzyskać do niego linka.. Nie mogę go przesłać, bo wyskakuje informacja, że plik jest zbyt duży. Co mam zrobić? Nie dzieje się tak z jednym nagłówkiem, ale z wszystkimi! Proszę, o pomoc.

    OdpowiedzUsuń
    Odpowiedzi
    1. To chyba oczywiste, że jak plik jest zbyt duży, to trzeba przesłać mniejszy. Można albo go pomniejszyć, albo zmienić jego format. Jeśli zapisujesz w PNG, zmień na JPEG (z zaznaczoną pełną jakością), wtedy powinno dać się przesłać.

      Usuń
  27. Witam!
    Mam taką małą prośbę o podanie kodu.
    Chodzi mi o wysuwających się z lewej strony obserwujących, coś takiego jak ty masz chatbox. Mogłabyś mi pomóc? Byłabym wdzięczna za podanie tego kodu i lekkie wytłumaczenie. :)
    Pozdrawiam i życzę szczęśliwego nowego roku.

    OdpowiedzUsuń
    Odpowiedzi
    1. Jeszcze takie jedno pytanko:
      jak zrobić tak, aby linki, tak jak np. u Ciebie w komentarzach (odpowiedz, usuń) były w jakiś kolorach, a potem zmieniły się na inny? Chodzi mi dokładniej o to, że same w sobie (nie po najechaniu na nie myszką) są prostokątne i mają kolor.
      Przepraszam, jeśli się nie połapiesz. :)

      Usuń
    2. Hm, no to tak. Instrukcja na wysuwane ramki: https://www.youtube.com/watch?v=HpsbTO6ofF4&feature=c4-overview&list=UUL3j1XwIcjoNBH2XMAfmoHA (przy czym selektor na ramkę a Chatem to #HTML1 lub #HTML2 lub #HTML3, w zależności od tego ile takich gadżetów masz na blogu)
      Instrukcja na linki przy komentarzach: http://graphical-thoughts.blogspot.com/2013/08/modyfikacje-i-anatomia-komentarzy.html

      Usuń
  28. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  29. Hej ;3 Mam mały problem. Ostatnio zrobiłam nagłówek do szablonu i chciałam by pasek z kartami znajdował się na górze i przesuwał wraz z blogiem. Podobnie jak tu http://funkyimg.com/i/DVoB.png. Chcę wykorzystać selektor ".tabs-inner ul li" , ale za każdym razem pasek karty mi gdzieś znika :/ Możesz mi pomóc?

    OdpowiedzUsuń
    Odpowiedzi
    1. Raczej nie mogę ci pomóc, bo strony na górze to moja pięta Achillesowa, zwyczajnie nie umiem ich robić. A na pewno nie przy użyciu tego selektora, zawsze mam z nimi ogromne problemy.

      Usuń
  30. Skąd pobrałaś Color Picker?

    OdpowiedzUsuń
    Odpowiedzi
    1. http://chomikuj.pl/TacssoComa/Narz*c4*99dzia+pomocnicze+dla+webmaster*c3*b3w/ColorPicker+1.7+PL

      Usuń
  31. Lizz, jak zrobiłaś ramkę wokół nagłówka w tym najnowszym poradniku? :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Zwyczajnie, za pomocą selektora: #Header1, wyglądało to mniej więcej tak:

      #Header1 {
      border: 10px solid #ffffff;
      width: 500px;}

      "10px" to grubość ramki, "solid" radzę nie ruszać, "#ffffff" to kolor ramki, a "500px" to szerokość nagłówka. Jeśli jej nie podasz, ramka będzie na całej szerokości miejsca przeznaczonego na nagłówek, nawet, jeżeli sam obrazek będzie węższy.

      Usuń
  32. Hej Lizz!
    Mogłabyś mi podać kod, jaki użyłaś np. w "Menu graficznym"? Chodzi mi o zmienianie koloru z białego na ciemny fiolet? Wiem, że zapewne to proste, ale nie mam dobrej głowy do kodów. Byłabym wdzięczna, gdybyś napisała mi ten kod i wytłumaczyła do czego służy każdy z selektorów; chodzi mi o to, gdzie zmienia się wielkość, szerokość itp. :)
    Na prawdę wielkie dzięki, jeśli użyczysz mi pomocy! ;D
    ~Karolaxxx3

    OdpowiedzUsuń
    Odpowiedzi
    1. Na twoje szczęście kilka dni temu nakręciłyśmy razem z Kaeru poradnik właśnie w tym temacie, który powinien ci pomóc: https://www.youtube.com/watch?v=9r67OXLWOPw
      Pytanie tylko, do czego chcesz użyć tego efektu - jeżeli do stron, to możesz postępować zgodnie z poradnikiem, a jeżeli do czegoś innego - napisz, a ja podam ci odpowiedni selektor. Możesz pisać bezpośrednio na youtube, tam pewnie szybciej odpiszę :D

      Usuń
  33. Świetny blog, a tutoriale jeszcze lepsze ;) Bardzo mi pomogły.
    Zapraszam do mnie ;) może ci się spodoba :D
    http://laoragraphic.blogspot.com/

    OdpowiedzUsuń
  34. Dzięki Waszym, Twoim i Kaeru, tutorialom zrobiłam sobie taki oto szablonik :D http://under-my-skin-nol.blogspot.com

    OdpowiedzUsuń
  35. Siemka :3

    U Ciebie statystyka nie ma tytułu. Czy to jakiś kod, czy po prostu nie napisałaś nic w tytule? Jeśli jest kod, to zdradziłabyś? :D

    OdpowiedzUsuń
  36. Hej, ja w jeszcze jednej sprawie, dotyczącą DA D:
    Od jakiegoś czasu, nie mogę wgrywać szablonów. Wyskakuje mi błąd:
    "Error uploading file. Unable to create or update stash item."/
    Pierwszy szablon wgrał się, a reszta ani rusz. Wiesz może o co tu chodzi, albo jak to naprawić? :c

    Z góry dzięki :c

    OdpowiedzUsuń
    Odpowiedzi
    1. Przykro mi, ale nie miałam takiego problemu, więc raczej nie będę w stanie ci pomóc.

      Usuń
    2. No cóż, szczęście, że Ty nie miałaś :c

      Usuń
  37. Gdy pobieram koloryzację (z innego bloga) jako plik ."psd" to jak mam go wsadzić do gimpa? Pokazuje się jako folder. Co mam zrobić?

    OdpowiedzUsuń
    Odpowiedzi
    1. Nie da się koloryzacji w formacie .PSD wrzucić do Gimpa.

      Usuń
    2. Szkoda :( A jest może jakiś gimpowy odpowiednik, coś podobnego?

      Usuń
  38. część, mam takie małe pytanko.
    Od jakiegoś czasu zastanawiam się jaki jest kod css na przesunięcie CAŁEGO bloga w lewą lub prawą stronę.
    Mam kod na przesunięcie nagłówka, lub lewej/prawej strony ale całego bloga razem z postami nie znam, wiesz może jak to zrobić?
    Byłabym wdzięczna gdybyś napisała, nigdzie, po prostu nigdzie nie mogę tego znaleźć

    OdpowiedzUsuń
  39. Wiesz może jak zrobić aby komentarze lub autor znalazł się tuż pod tytułem posta?
    Próbowałam zmienić w układzie ale mi się nie udaje :/
    wiesz może jaki jest na to kod?

    OdpowiedzUsuń
  40. Lizz...
    Gdzie mogę znaleźć zdjęcia takie jak w tym szablonie?
    http://img833.imageshack.us/img833/4909/s8u2.png
    Chodzi mi głównie o tą dziewczynę i chłopaka... No i ogólnie na jakich stronach znajdują się tego typu zdjęcia.
    Bo na deviantART jak wpiszę ' wojowniczka ' to mi jakieś rysunki wyskakują...
    Pozdrawiam.

    OdpowiedzUsuń
    Odpowiedzi
    1. Skąd mogę wiedzieć, to nie jest mój szablon.
      Polecam ci jednak wpisać na deviantARTcie "Mirai Nikki cosplay" albo "Gasai Yuno cosplay" albo "Amano Yukiteru cosplay", wtedy na pewno znajdziesz te osoby, ale niekoniecznie te zdjęcia.

      Usuń
  41. Hej Lizz :)
    Jak mogę zrobić, aby gadżety były w jednej kolumnie. Chodzi mi o to, żeby nie było przerw. Proszę o pomoc.
    Pozdrawiam.

    OdpowiedzUsuń
    Odpowiedzi
    1. Radzę użyć do ich pisania selektora #sidebar-left-1 lub #sidebar-right-1

      Usuń
  42. Hej Lizz.
    Mogłabyś mi podać link skąd pobrałaś tą koloryzację, którą zastosowałaś w tym nagłówku? :
    http://2.bp.blogspot.com/-eXXkDarosTg/UtVhJpvSuwI/AAAAAAAADak/erstgoQDzD4/s1600/lizz5.png

    OdpowiedzUsuń
    Odpowiedzi
    1. Hm... to jest mieszanka kilku koloryzacji i raczej nie pamiętam, których konkretnie.

      Usuń
  43. Chciałam się zapytać jak zrobić taki układ:
    http://imageshack.com/a/img20/8472/t8fd.png
    Byłabym wdzięczna za odpowiedz.

    OdpowiedzUsuń
    Odpowiedzi
    1. To chyba najprostszy z możliwych układów, więc jeśli napiszesz mi, czego KONKRETNIE nie jesteś w stanie zrobić z tego układu, to z chęcią pomogę :D

      Usuń
  44. Chodzi głównie o to, żeby kolumny były pod nagłówkiem. I o ramkę. Dobrze to nazwałam? Zawsze zapominam jak to się po Polsku nazywa...

    OdpowiedzUsuń
  45. Hej Lizz.
    Wiesz może, jak mogę ustawić automatyczne rasteryzowanie w Photoshopie cs6 ?

    OdpowiedzUsuń
    Odpowiedzi
    1. Ten komentarz został usunięty przez autora.

      Usuń
  46. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  47. Jakie są selektory do pogrubionej czcionki, kursywy, przekreślenia i podkreślenia?

    OdpowiedzUsuń
    Odpowiedzi
    1. Tu jest instrukcja: http://katalog-graficzny.blogspot.com/2013/07/1-jak-to-jest-zrobione-pogrubienie.html

      Usuń
  48. Lizz, zdradzisz jaki jest kod na archiwum bloga, które znajduje się w Twoim obecnym szablonie?
    Pozdrawiam.

    OdpowiedzUsuń
  49. Lizz, wiesz może, jak całkowicie pozbyć się szablonu z szabloniarni? Bo został mi sam nagłówek i nie potrafię go usunąć. Pewnie chodzi o kody w htmlu, ale wolę się w to sama nie bawić, a nie mogę znaleźć informacji o tym.

    OdpowiedzUsuń
    Odpowiedzi
    1. No tak, trzeba go w takim razie usunąć z HTML'a, ale nie umiem wytłumaczyć, jak to zrobić.

      Usuń
    2. No nic i tak dziękuję ; )
      Przy okazji powiem, że to z twoich i Kaeru instrukcji z youtube'a zrobiłam sobie nowy szablon ;)

      Usuń
  50. Hej! Mam problem... robiłam efekt kart z instrukcji twojej i Kaeru (ten, co widnieje aktualnie na tym blogu). Wydaje mi się, że wszystko wpisuję poprawnie, ale i tak nic się nie dzieje. Pomożesz? :c Bo jestem jak na razie nowa w CSS :c

    OdpowiedzUsuń
    Odpowiedzi
    1. Pewnie, to podaj mi adres swojego bloga, a ja wejdę i zobaczę, to jest nie tak.

      Usuń
  51. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  52. Jak zrobić by płynne przejście płynnie wracało na swoje miejsce? U mnie zawsze jak odjadę myszką to urywa się nagle, a chciałaby by płynnie wracało na miejsce.

    OdpowiedzUsuń
    Odpowiedzi
    1. Zapewne dodajesz kod na "transition" tylko do selektora odpowiadającego za stan np. kart po najechaniu. Jeżeli chcesz, żeby karta również płynnie wracała, musisz dodać "transition" również do kodu odpowiadającego za jej wygląd przed najechaniem.

      Usuń
    2. Dzięki :)

      Usuń
  53. Po co są icony i jak się je robi?

    OdpowiedzUsuń
    Odpowiedzi
    1. Ogólnie rzecz biorąc ikon powinno się używać jako avatarów, np. na bloggerze lub innych stronach, gdzie potrzebny jest taki mały obrazek. A robi się je dokładnie tak samo, jak każdą inną grafikę, z tym że głównie na warstwie o wymiarach 100x100px.

      Usuń
  54. Lizz czy mogę pobrać jeden z Twoich nagłówków i wymazać jego krawędzie? Oczywiście Twój podpis nie zostanie tknięty ;)

    OdpowiedzUsuń
    Odpowiedzi
    1. Jeżeli chcesz tego nagłówka użyć do własnego szablonu na własnego bloga - tak, oczywiście. Jeśli jednak chcesz pobrać nagłówek, aby zrobić z niego szablon z możliwością pobrania przez inne osoby, wtedy nie.
      Więc jeśli chodzi o pierwszą opcję, to możesz pobrać, tylko nie zapomnij o podaniu adresu bloga, na którym będzie widniał ten nagłówek.

      Usuń
  55. Hej Lizz! Od dawna, dawna na moim blogu widnieje szablon zrobiony przez Ciebie. Wchodzę, chcąc wstawić kolejny post, a tam brak nagłówka i tekstur pod gadżetami i tła w stronach. Wgrywałam szablon jeszcze raz, ale nadal to samo. Sądzę, że po prostu coś się stało z zalinkowanymi obrazkami. Czy można by to jakoś naprawić? Mój blog to: http://at-your-command.blogspot.com a widnieje na nim szablon wolny numer 4, ze Zmierzchu. Byłabym wdzięczna za pomoc!

    OdpowiedzUsuń
    Odpowiedzi
    1. Jak napisałam w najnowszym poście - z powodu hostingu takie sytuacje mogą się wydarzyć. Niestety nie mam już na komputerze twojego nagłówka - jeśli chcesz, mogę oczywiście zrobić ci nowy szablon :D

      Usuń
    2. Okay, trudno się mówi :) No to zgodnie z regulaminem złożę zamówienie :D

      Usuń
  56. Hej Lizz, mam takie pytanie. Wstawiłam na bloga nagłówek ale ten pasek na górze (tam gdzie znajdują się linki nowy post, wyloguj itp) zasłania mi ważną część. Znasz jakiś kod CSS, który pomógłby mi obniżyć nagłówek? Bardzo proszę o pomoc. :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Ojej, przepraszam, że tak późno odpisuję... Nagłówek możesz obniżyć takim kodem:

      #Header1 {
      margin-top: 30px !important;
      }

      Usuń
  57. Mam pytanie, ale nie wiem czy wiesz jak to zrobić. Chodzi o obramowanie obrazków na blogu i dodanie jakby takiego efektu przejścia jak tutaj: http://natsulucy-deathandlovestory.blogspot.com/p/spis-tresci.html
    Wiesz może jak to zrobić, albo jaki jest kod? :)
    Za każdą pomoc, dziękuję :*

    OdpowiedzUsuń
    Odpowiedzi
    1. Możesz osiągnąć ten efekt mniej więcej takim kodem:

      .post-body img {
      border: 5px solid #ffffff;
      padding: 3px;
      border-radius: 100px;
      opacity: 0.7;
      transition: 1s
      }

      .post-body img:hover {
      border-radius: 0px !important;
      opacity: 1 !important;
      transition: 1s
      }

      Usuń
  58. Do czego służą palety kolorów, takie jak ta: http://3.bp.blogspot.com/-Ekn_MEQq1Pc/U53bOR_qHBI/AAAAAAAAL7I/nQ6ZzD2of24/s1600/kolory.jpg ?

    OdpowiedzUsuń
    Odpowiedzi
    1. Myślę, że jako przykład pasujących do siebie kolorów, które można wykorzystać np. przy tworzeniu CSS'a, z tymże wówczas ciężko byłoby dopasować nagłówek dokładnie do takiej palety.

      Usuń
  59. Jak mogę uzyskać efekt lekko przezroczystego tła jak zrobiłaś to tu - http://imagizer.imageshack.us/a/img197/1452/wolny2podglad.png ?

    OdpowiedzUsuń
    Odpowiedzi
    1. Akurat tutaj jest to dokładnie opisane :D
      http://graficzny-gwiazdozbior.blogspot.com/2014/07/css-definiowanie-koloru.html

      Usuń
  60. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  61. Lizz,mam pytanie :) Jak zrobić efekt linków w poście mniej więcej jak tutaj ? Nie mogę do tego dojść ;/ http://terriblecrash.blogspot.com/p/instrukcje-css_1.html Pozdrawiam :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Żeby zrobić coś takiego, musiałabyś pobawić się trochę HTML'em. Myślę, że edytując post, w górnym menu powinnaś kliknąć "HTML" i tam "divy", które będą pojedynczymi linkami. Do divów powinnaś przyporządkować odpowiednią klasę, której użyjesz jako selektora i dopiszesz dowolny CSS, tak, aby uzyskać taki efekt, jaki chcesz.

      Usuń
  62. Ok,spróbuję.Dziękuję bardzo <3

    OdpowiedzUsuń
  63. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  64. Dzięki twojemu i Kaeru tutorialowi na YT zrobiłam sobie taki szablon http://that-was-summer-love.blogspot.com/ :D
    xx

    OdpowiedzUsuń
    Odpowiedzi
    1. Cieszę się bardzo, że nasze poradniki się przydały ^^ Szablon wyszedł naprawdę ciekawie, jak na pierwszy raz, tylko osobiście radziłabym nałożyć jeszcze jakąś koloryzację :D
      Pozdrawiam ^^

      Usuń
    2. Dziękuję za miłe słowa ^^ I postaram się jeszcze popracować nad koloryzacjami :)
      xx

      Usuń
  65. Hej Lizz! Mam pytanko:
    Co to są sygnatury i do czego służą?

    OdpowiedzUsuń
    Odpowiedzi
    1. Sygnatury to takie małe obrazki (np. 200x600px, ale bywają bardzo różne rozmiary), których pierwotnym przeznaczeniem było umieszczanie w opisach na forach teraz wstawia się je np. na początek posta, ale można je wstawić gdzie się chce.

      Usuń
    2. ooooooo .... ok, dziękuję za odpowiedź! :D

      Usuń
  66. A ja tym razem z zapytaniem przychodzę :D
    Jak zrobić takie fajne krawędzie jakie są tutaj http://i.imgur.com/lVjcNW8.jpg?
    Czy takie coś można osiągnąć przy pomocy Photoshop'a czy CSS'a?
    xx

    OdpowiedzUsuń
    Odpowiedzi
    1. Tu jest instrukcja, która znajduje się na blogu Misao: http://funkyimg.com/i/DMnX.png
      A z tego posta pobierzesz potrzebną paczkę tekstur: http://natt-liv.blogspot.com/2013/10/040-shes-gone.html

      Usuń
    2. Bardzo dziękuję za pomoc :*

      Usuń
  67. Hello!
    I need your help! :)
    I tried the css, I can made it, but this (http://kepfeltoltes.hu/150819/cats_www.kepfeltoltes.hu_.jpg) post body interesting me :)
    Can you give me this CSS code? :)

    And I made this, when I see your video: http://processosablon.blogspot.hu/
    I really thank you! :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Ok, only difference is that your "border radius" should looks like this:

      border-radius: 30px 0px 30px 0px;

      Each of the values is one of four corners of your frame.

      I hope it'll help you :)

      Usuń
    2. Oh, you are perfect :)
      I really thank you, and one more, sorry :/
      How I can make shadows for the body?
      thanks and you are fantadtic ;)

      Usuń
    3. Do you mean shadows under the post's and sidebar's background like on my blog? Try with this code:

      .main-inner {
      background-color: #fff;
      box-shadow: 0px 0px 10px #000;
      }

      Now I'll try to explain what does it means.

      "0px 0px" - position of the shadow
      "10px" - blur
      "#000" - color of the shadow

      Of course you can change values.

      Usuń
  68. And, how I can make to the widget's name and the date's background are in the border.

    OdpowiedzUsuń
    Odpowiedzi
    1. And the body background and the widget background in one?

      Usuń
    2. Widget's header:

      #WidgetID h2 {
      background-color: #cfcfcf;
      border: 1px solid #f1f1f1;
      }

      for example:

      #PageList1 h2 {
      background-color: #cfcfcf;
      border: 1px solid #f1f1f1;
      }

      Everytime you want do have background or border over your widget's name, you have to add "h2" to the widget's selector in you CSS code.

      Date:
      h2.date-header span {
      background-color: #cfcfcf !important;
      border: 1px solid #f1f1f1 !important;
      }

      Body background and the widget background in one - you should use ".main-inner" selector like in my previous comment.

      Usuń
  69. Hello Lizz, i need your help :)

    i want to make a design, and i want to paste a picture in header, but i wnt to give it a boder...so i don't know how :/

    i really thanks our help :)

    bye: Mistyx N.

    OdpowiedzUsuń
  70. Dear Lizz, can you give me a code for chat?
    I want a chat looks like your, but in the floor...so can you help how or where I find it?

    Thanks, Lucia

    OdpowiedzUsuń
  71. Hej, wiesz może dlaczego Zaczarowany ogród jest otwarty tylko dla zaproszonych czytelników ? :( Właśnie po mega długiej przerwie wróciłam do szablonów a mój ulubiony blog zamknięty... :(

    OdpowiedzUsuń