tutoriale, szablony, web design

Pytania - Jeśli macie jakieś pytania lub uwagi, to zapraszam na nasz profil ask.fm. Postaramy odpowiedzieć na wszystkie pytania dotyczące szablonów, zamówień, jak również zaradzić conieco w sytuacji, gdzie szablon nie chce współpracować. Propozycje - Jeśli masz pomysł na ciekawą instrukcje, która mogłaby pomóc lub zainspirować wielu blogerów, daj nam znać! Z chęcią pomożemy! Propozycje możesz zostawić tutaj: Propozycje Pomoc - Gdyby ktoś desperacko szukał pomocy i wszystkie instrukcje go zawiodły, to jest e-mail tyler (bizarre1309@gmail.com ) i tam można pisać, mardzić na bloggera i resztę świata, no i ogólnie to też szukać pomocy. #idontjudge

czwartek, 26 września 2013

Modyfikacje - Post-header & Post-footer


Powyżej: Przykładowy efekt

 Niech Was tytuł nie myli, bo modyfikacje przeprowadzimy jakby nie patrzeć w calutkim poście. ( Anatomia była dosyć uboga w modyfikacje, dlatego czas to uzupełnić ). Jak dobrze pójdzie to nawet nie zajrzymy do kodu HTML, tylko całość odbędzie się w dostosowywaniu w zaawansowanych projektanta. 
Ostatnio mieliśmy efekt dla komentarzy i będziemy się teraz jeszcze bardziej w te modyfikacje zgłębiać. Tak czy inaczej dzisiaj część pierwsza ( prawdopodobnie, coś jeszcze na pewno wymyślę, w związku z czym mam cichą nadzieję, że kolejny post o podobnych rzeczach uda się opublikować ), dlatego aż tak się nie nakombinujemy, a przeprowadzimy skromne zmiany, w postaci wstawienia gdzieniegdzie dodatkowych znaków i tym podobnych rzeczy. 

ETYKIETY W POŚCIE:
<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> 
b:loop wiemy, że działa jako wyliczenie, podobnie jak w archiwum bloga. Tutaj jednak nie wyliczamy miesięcy, a etykiety jakich użyliśmy w danym poście.  <data:postLabelsLabel/> to nazwa przed wyliczeniem np. Etykiety:, Labels: i co nam przyjdzie do głowy. Zmiana jest możliwa w zwyczajnej edycji postu, także nie ma się co nad tym rozczulać.
Nie wiem czy przyuważyliście przecinek, ale to ostatnio moja ulubiona zmiana. Nie lubię przecinka więc zamieniam go + lub -, albo po prostu to usuwam.

POST-HEADER & POST-FOOTER
Instrukcja jest dla post-headera, ale można jej używać zarówno w post-headerze jak i w post-footerze, a także w każdej innej klasie z elementami bloggera. 
Ah, lubię modyfikacje z tym cholerstwem. Najnowszą widzicie na blogu. Taka skromna zmiana, ale wbrew pozorom dosyć ciężko się ją robiło, bo span nie chciał działać, ale na końcu zadziałał. Ale od początku.
Każda część, czy to data, czy to komentarz, etykiety, cokolwiek w większości jest podana jako span. Przykład wyżej kod etykiet zaczyna się właśnie od tego. Dlatego szukając efektu dla pojedynczej części, ale powtarzającej się dla każdej opcji użyjemy kodu: .post-header span. Logiczne, nie?
Oczywiście używając tego możemy także dodać kod dla post-headera np. padding, który bądź co bądź jest tutaj konieczny. Dlatego lecimy z przykładem, czyli piszemy kod ( ja go zerżnę ze swojego kodu ):
.post-header span{text-align:center;padding:2px;margin-right:3px;font: normal 7pt arial; color: #666666; letter-spacing: 1px; text-transform:uppercase; background:#fbfbfb; margin-bottom: 10px; }.post-header { padding-left:8px;}
Od razu dodam, że efekt jest wręcz fatalny dla autora. Tutaj mamy dwa spany i oba się modyfikują, dlatego najlepiej dać właśnie np. datę i komentarze na górę i dopiero używać kodu.  
Tutaj nie potrzeba żadnych zmian w kodzie HTML, działamy samym CSS'em. Oczywiście możemy to zrobić również po kolei czyli:
.post-timestamp, .post-comment-link, post-author{text-align:center;padding:2px;margin-right:3px;font: normal 7pt arial; color: #666666; letter-spacing: 1px; text-transform:uppercase; background:#fbfbfb; margin-bottom: 10px; }
Efekt ten sam. Tylko tutaj można dodać spokojnie autora, ponieważ działamy na całości, a nie na spanach, dlatego obejdzie się bez niespodziewanych efektów.
Możemy też przemieszczać powyższe elementy, ale skutki tego niekiedy mogę być tragiczne. Mimo tego spróbujmy, mamy parę linków i chcemy, aby: raz - były w prawej części postu, dwa - były jedno pod drugim, trzy - nie psuły całej reszty tj. nie wchodziły na tytuł. No to dobra, patrząc na to logicznie i na prosty rozum będziemy musieli użyć:

  • display:block, aby elementy ustawiły się jedno pod drugim;
  • width:100px; pozwoli nam ustalić długość;
  • margin-left:415px; przesunie nam elementy na prawo ( wartość zależy od postu );
Ważnym etapem będzie także zmiana margin-bottom i dodanie margin-top, ale to za chwilkę, póki co nasz kod wygląda tak:

.post-timestamp, .post-comment-link, .post-author{text-align:center;padding:2px;margin-right:3px;font: normal 7pt arial; color: #666666; letter-spacing: 1px; text-transform:uppercase; background:#ddd;display:block;width:100px; margin-left:415px;}
.post-header { padding-left:8px;}
Elementy powinny się stykać jedno z drugim. Dodajmy jeszcze margin-bottom:1px, aby wszystko było elegancko od siebie oddzielone:
.post-timestamp, .post-comment-link, .post-author{text-align:center;padding:2px;margin-right:3px;font: normal 7pt arial; color: #666666; letter-spacing: 1px; text-transform:uppercase; background:#ddd;display:block;width:100px; margin-left:415px;margin-bottom:1px;}
.post-header { padding-left:8px;} 
Dobra, mamy całość już po prawej stronie, ale jeszcze chcemy by było u góry postu, dlatego teraz nie dodajemy kolejnego margin-top dla pojedynczych elementów, ale działamy na całym post-headerze.
.post-timestamp, .post-comment-link, .post-author{text-align:center;padding:2px;margin-right:3px;font: normal 7pt arial; color: #666666; letter-spacing: 1px; text-transform:uppercase; background:#ddd;display:block;width:100px; margin-left:415px;margin-bottom:1px;}
.post-header { padding-left:8px;margin-top:-60px;}
Wszystko powinno być w porządku. No chyba, że mamy za długi tytuł posta. W takim wypadku należy zmniejszyć długość tego tytułu, a to już rzecz łatwa.
Na koniec  dodam jeszcze, że jak piszecie dłuższe posty, czyli na dwie linijki to margin-top dla post-header będzie większy ( ok. 45-50px; zależy też od szerokości panelu posta ), a jak krótkie albo takie, które nie przekraczają jednej linijki margin-top będzie mniejszy ( 30-35px;)
Dodam jeszcze, że efekt robiony za pomocą szablon > dostosuj, dlatego łatwo się przyswaja. :)

Jak widać szybko nowy post, bo jutro mam masę zastępstw w szkole, a lekcji mało i większość na poniedziałek, dlatego poświęciłam godzinkę i post się napisał. ;) Oby więcej takich dni! :)


7 komentarzy:

  1. Ja nie wiem co źle robię, ale nigdy mi się nie udało przenieść tego cholernego linku do komentarzy, autora i godziny dodania posta do post headera. Ustawiam to w układzie w poście i nadal się pokazuje w stopce. Szlag by to trafił... Co chwilę próbuję i nic, dodatkowo w CSS nie działa mi to... Oh... Co źle robię? :( Pomożecie jakoś? :)

    OdpowiedzUsuń
    Odpowiedzi
    1. Spróbuj:

      .post-footer {
      position: absolute;
      padding: 1px 6px !important;
      width: 100% !important;
      top: 40px;
      text-align: center;}

      stopka powinna być wtedy pod tytułem. Ofc, jeśli masz większą czcionkę tytułu, to zwiększ piksele. Jeśli mniejszą, zmniejsz. I daj znać, czy się udało :) Pozostałe modyfikacje wg uznania.

      Usuń
    2. Dziękuję bardzo, działa! :) Dziś zrobię szablon, w którym będę się z tym bawić i jeśli będę miała jeszcze jakieś komplikacje to napiszę ;) Dziękuję jeszcze raz! :*

      Usuń
  2. Nie słuchają mnie te polecenia. Chciałam tak zrobić, żeby tylko komentarze przenieść, nazwę autora i godzinę i zaczęłam bawić się z każdym osobno (bo stopkę chciałam zostawić, razem z etykietami, na dole), ale jak jeden kod mnie słuchał, tak np. nazwa autora nie chciała się zmieniać. Chyba znalazłam swoją piętę achillesową jeśli chodzi o robienie szablonów xD

    OdpowiedzUsuń
    Odpowiedzi
    1. nie przejmuj się (: jeśli chodzi o stopkę, to ona zawsze jest kapryśna. W tej chwili nie mogę Ci za bardzo pomóc, bo zaraz zaczynam pracę, ale potem się postaram :P

      Usuń
    2. Jasne, to czekam :)
      A może to przez to, że na tym blogu testowym już tyle razy kręciłam coś w szablonach, że się stopka zmęczyła. Może powinnam usunąć tego bloga i założyć nowego i wtedy może mi to pójdzie? No nie wiem. Za każdym razem mam zamiar ambitnie modyfikować stopkę, a jak mi nie wychodzi, to rezygnuję i zostawiam tak jak jest xD

      Usuń