O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

FAQ - zastępowanie tytułu bloga obrazkiem

Maile szablonoweTo pytanie jest bardzo częste w mailach. Gdybym miała sporządzić listę TOP pytań to zapewne zajęło by ono miejsce pierwsze (no, ewentualnie drugie). To poniżej jest nieco enigmatyczne i może w nim chodzić o wiele różnych rozwiązań ale wychodząc z założenia, że odpowiedzi najprostsze są najbardziej oczekiwane zinterpretowałam je jako prośbę o pomoc w zastąpieniu tytułu tekstowego graficznym.

Używam jednego z twoich szablonów. Chciałbym zapytać czy możesz pomóc zmienić nazwę bloga na logo?
Pozdrawiam.

Taka zmiana jest bardzo prosta. Owszem wymaga znajomości CSS ale nie są to jakieś skomplikowane, magiczne tajemnice. Najtrudniejsze w takiej zmianie będzie mnogość rozwiązań. Ile blogów tyle różnych wielkości tytułu i to nie CSS stanowi problem ale właśnie możliwe rozmiary i odstępy. Spróbuję jednak na początek tak bardzo prosto i ogólnie.

1. Logo, tytuł w postaci graficznej etc. ładujemy do zasobów bloga: wchodzimy do edycji bloga, klikamy zakładkę PLIKI i tam dodajemy nasz nowy plik.

2. Przechodzimy do edycji arkusza CSS (WYGLĄD -> EDYCJA CSS) i odnajdujemy fragment poświęcony części tytułowej. Będą to selektory:

  • #BlogTytulBox
    • #BlogTytulText
      • #BlogTytulText h1
        • #BlogTytulText a
        • #BlogTytulText a:hover
    • #BlogTytulOpis

Mogą być w szablonie opisane wszystkie albo tylko ich część, mogą mieć nieco inną formę (szczególnie jeżeli chodzi o kombinatory) ale w zasadzie powyższe w ponad dziewięćdziesięciu procentach przypadków będą więcej niż wystarczające.

Będą one miały własne opisy związane z wyglądem szablonu i trudno mi zgadywać jakie. Trzeba połączyć oba opisy tytułu. Te już istniejące w szablonie i te zaproponowane tutaj do przeprowadzenia zmiany.

Aby zastąpić tytuł tekstowy tytułem obrazowym proponuję podjąć takie działania w arkuszu:

#BlogTytulText {
 background: url(/resource/nazwa_pliku.jpg) left top no-repeat;
/* w nawiasie wpisuje się adres pliku z ilustracją */

}
#BlogTytulText a {
display:block; /* zmienia link w element blokowy, konieczne */
width:100%;    /* szerokość linku */
height:100px;  /* wysokość linku */
text-indent:-9999px; /* gigantyczne ujemne wcięcie tekstu sprawia, że słowa skrywają się poza krawędzią ekranu */
}

Jeżeli masz problem z połączeniem kodu, który już istnieje w Twoim szablonie z tym tutaj zaproponowanym to najprościej będzie jeżeli ten powyższy wkleisz w arkuszu poniżej tego, który już tam jest.

czwartek, 05 stycznia 2012, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
avo_lusion
2012/01/05 22:18:20
Ciekawy post, tym bardziej, że w przyszłości mam zamiar takie logo sobie sprawić, ale na to jest jeszcze czas;)
-
kate_mac
2012/01/06 12:29:28
@avo_lusion
Ten post nie dotyczy tak naprawdę loga. Autor maila miał na myśli po prostu zastąpienie tekstu tytułu ilustracją. Wiem, że to trochę nie wynika z tego maila ale tak właśnie było ;) Nie pamiętam czy musiałam się dopytywać o co dokładnie chodzi czy sama zgadłam ale u tej osoby robiłam coś podobnego jak u Ciebie z zastąpieniem normalnego tekstu tą postarzoną czcionką. O to mniej więcej chodziło i tego dotyczy kod w notce (image replacement)
P.S. Właśnie zabieram się za maila do Ciebie więc wieczorem sprawdź pocztę (lecz raczej nie szybciej niż po 17 ;p piszę raczej z przerwami więc to potrwa)
-
2012/01/06 22:02:41
Witaj, kilka lat temu pisałam bloga Ciasteczkolandia, teraz ja reaktywuję i chce też zmienić szablon, bo dotychczasowy jest totalnie nie kulinarny (choć ma taką ciepłą aure , że się sprawdził) Kiedys pomagała mi Irytek, teraz niestety nie może i poleca Ciebie :) jak już doczytałam, że to Ty tworzysz szablony Dorotce z Moje wypieki ( zawsze świetne) to już ,,zachorowałam" na Ciebie. Moich oczu ( z gatunku kot w butach w Shreku) tak jak piszesz, nie zobaczysz, dozgonna wdzięcznośc to też mało, więc zapytam wprost ile kosztuje stworzenie prostego, przejrzystego, nieskąplikowanego bloga (wizje mam tylko technicznie leżę) pozdrawiam ciepło
-
2012/01/07 12:02:38
nie bloga tylko szablonu miało być oczywiście ;)
-
kate_mac
2012/01/07 19:46:02
@vanilia81
Na początek mały disclaimer: owszem kiedyś robiłam szablony dla mojewypieki.blox.pl i do tej pory ogólny układ strony i rozwiązania do których doszłyśmy zdają się odpowiadać Dorocie. Jednak jej nowszych szablonów nie robię ja. Za ich stronę wizualną odpowiada zapewne sama Dorota bo z tego co zdążyłam poznać jej gust są idealnie pasujące dla jej bloga.

Jeżeli chodzi o Twój blog to oczywiście możemy się dogadać. Możliwości jest bardzo dużo, począwszy od bardzo skomplikowanych wizualnie rozwiązań po te prostsze i szybsze, bazujące na istniejących już projektach. Napisz do mnie maila na adres szablonykatemac@gmail.com to omówimy szczegóły i ustalimy w jakim zakresie moja pomoc jest Ci rzeczywiście potrzebna.

Piszesz, że masz wizję, im bardziej bliska gotowego projektu tym lepiej więc jeżeli istnieje ona w już skonkretyzowanej wersji to mi ją również prześlij. Może okaże się, że znam idealnie proste rozwiązanie :D
-
2012/01/17 12:48:16
A więc trochę już się poznałyśmy na forum na temat powyżej i na forum już napisałam o tym. Czy może poprzez e-mail pomogłabyś mi zrobić szablon?
-
kate_mac
2012/01/17 22:07:32
@smak.czekolady
Na forum w dalszym ciągu staram się Ci pomóc. Niezmiennie uważam, że błąd leży w braku jakiegoś znaku ale o tym na forum bo tam zadałaś pytanie. Oczywiście jeżeli chcesz abym pomogła Ci zrobić szablon to chętnie służę swoją wiedzą. Jednakże najpierw musisz przebrnąć przez ten wybój na drodze bo na razie trudno nam się dogadać co do tego co stanowi problem. Ale zapraszam do dalszego zadawania pytań. Także drogą mailową. W końcu nam się uda :D
-
kate_mac
2012/10/27 12:56:40
Pod inną notką mojeslodkie zapytała się o zastępowanie tytułu bloga obrazkiem w szablonach na nowym kodzie.
Robi się to miej więcej tak samo. Wszystko zależy od istniejących już w szablonie opisów więc bez znajomości 'pacjenta' nie mogę podać precyzyjnego przepisu ale na podstawie powyższej notki i pamiętając, że klasy i identyfikatory w nowym kodzie maja inne nazwy da się to zrobić bez większego bólu.

'#BlogTytulBox' to #naglowek
'#BlogTytulText' i 'h1' to to samo na nowym kodzie więc trzeba to zapisać tak 'h1#nazwa-bloga' albo po prostu tak '#nazwa-bloga'
'#BlogTytulText a' to oczywiście '#nazwa-bloga a'
-
gosijka
2013/05/10 14:41:39
Witam! Zrobiłam sobie właśnie obrazek na górze. W "oryginalnym szablonie" mogłam zmienić obrazek, ale już nie samą nazwę (nawet nie mogłam zmienić czcionki). Dlatego postanowiłam wkleić sam obrazek (z napisami) i w css-ie wpisałam, żeby nie wyświetlało nazwy bloga. I tym samym, mój obrazek nie przekierowuje na stronę główną bloga. Jeśli wejdę na podstronę, to aby wrócić na główną stronę muszę ponownie wpisać adres strony albo po prostu cofnąć. Czy znasz jakieś magiczne sztuczki, które będę mogła zastosować, aby móc kliknąć w obrazek u góry i wrócić na stronę główną? Pozdrawiam :)
-
kate_mac
2013/05/12 14:04:36
@gosijka
W odniesieniu do szablonów na starym kodzie zadziała to co jest napisane w powyższym wpisie. Próbowałaś? Z czym masz problem? Jak opiszesz co Ci nie wychodzi to może będę mogła pomóc.
-
7andzia7
2013/06/01 17:46:47
Ciekawy wpis ;-) ciekawe czy zadziała i u mnie z miłą chęcią wypróbuję
-
bookfa
2013/06/22 17:47:11
Zastanawiam się czy podane przez Ciebie wartości liczbowe, np. -9999 są tylko przykładowe i trzeba je dopasować do swojego szablonu, czy mają być takie jak podałaś?
Pytam, bo wreszcie dojrzałam do lekkiej zmiany ;)
-
kate_mac
2013/06/26 18:03:47
@bookfa
wysokość i szerokość należałoby dopasować;
- szerokość 100% sprawdzi się tylko jeżeli w tym samym miejscu nie ma wpisanych żadnych dopełnień i marginesów
- wysokość 100px jest już zupełnie przykładowa - mniej więcej na napis tytułowy wystarcza ale jeżeli ta przestrzeń linkująca ma być większa (np. obejmować cały baner) to trzeba wpisać wielkość własnego tytułu

- co do 9999 to jest liczba pojawiająca się przy wcięciu akapitowym - dodaję ujemny po to aby "prawdziwy" napis tytułowy zniknął daleko za lewą krawędzią ekranu; można zamiast wcięcia akapitowego zmniejszyć rozmiar czcionki i zmienić jej kolor na identyczny z tłem; jeżeli zaś chodzi o sama wartość -9999 to jest ona przesadzona oczywiście i nawet mniejsza liczba wystarczy ale ta akurat mi pasuje :D
odnośnie wcięcia akapitowego użytego do ukrycia tytułu pamiętaj, że skoro ukrywamy za lewą krawędzią to i wyrównanie tytułu musi być do lewej krawędzi (co z tego że "pociągniesz" akapit za lewą krawędź ekranu skoro tekst i tak wyrównujesz to prawej)
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...