Półprzezroczyste tło
Wystarczy wejść w układ - > dostosuj - > zaawansowane - > arkusz CSS i wpisać właściwą formuły. Może najpierw przedstawię sposób na półprzezroczyste tło. Formuła wyjściowa:
selektor {background:
rgba(nasz kolor, wartość przezroczystości)}
Selektorem jest nazwa gadżetu, którego chcemy zmienić tło. W przypadku tła notek kod wygląda tak:
.post-outer
Skoro mamy już selektor, to pora na wybranie koloru, tutaj macie tabele, skąd możecie pobrać odpowiednie własności. Można robić to również ręcznie, na wyczucie, ale chyba posługiwanie się tabelą jest łatwiejsze.
Okey, ja wybrałam sobie jeden z odcieni szarości. Kod w tabeli wyglądał tak: LightGray RGB:
211 211 211. Kopiuję tylko liczby.
.post-outer {background: rgba (211, 211, 211,0.48)}
Musicie pamiętać o wstawieniu przecinków między liczby. Jeśli tego nie zrobicie, to kod nie będzie działać!
Nie wiem, czy zauważyliście, ale pojawiła nam się jedna nieznana liczba - mianowicie 0.48 - jest to liczba, która określa przezroczystość. Im jest większa, tym wyraźniejszy jest kolor, im mniejsza, tym kolor bardziej zanika. Najlepiej pobawcie się nią trochę i wybierzcie wartość, która najbardziej Wam odpowiada.
Tło obrazkowe
Tym razem krócej, bo wystarczy znać odpowiedni selektor. Nasz kod wygląda tak:
selektor {background: transparent url(bezpośredni link do
obrazka)}
Wiemy już, jak wygląda selektor postu, więc zamieniamy:
.post-outer {background: transparent url(bezpośredni link do
obrazka)}
Druga instrukcja jest bardzo, bardzo prosta, dlatego wyszła taka krótka. Co do selektora postów, to jeśli nie działa .post-outer to możecie wypróbować body
.main-inner .Blog, jednak przeważnie ten pierwszy działa bezbłędnie.
To już koniec. Proste, prawda? Jeżeli coś jest nie jasne, to piszcie.
Cześć, a ja mam w sumie takie pytanie. Razem z koleżanką zastanawiamy się, jak zrobiłaś tą ramkę, która widnieje na blogu. Znaczy, z ramką już sobie poradziłyśmy, tylko powstaje pytanie, jak i gdzie wkleiłaś spód ramki, to jej zakończenie na dole. Czy mogłabyś nam wytłumaczyć? Bo męczymy się już troszkę i chyba nie kumamy tego ;) Pozdrawiam!
OdpowiedzUsuńUch, makabra, w końcu kupili mi kompa...
UsuńO ile dobrze pamiętam (a stara jestem i lecytyna nie wystarcza), to walnęłam ją bezczelnie w stopkę. Tj: miałam całą ramkę w kształcie prostokąta, ucięłam dolną część i wcisnęłam ją we fragment kodu następujący:
/* Footer
----------------------------------------------- */
.footer-outer {
margin-left: 166px;
margin-bottom: -1px;
margin-top: 0px;
padding-bottom: 60px;
color: $(footer.text.color);
background: url(TUTAJ ADRES OBRAZKA) no-repeat;}
.footer-fauxborder-left {
border-top: 1px solid $(widget.border.color);
background: $(footer.background.color) $(footer.background.gradient) repeat scroll 0 0;
margin: 0 -$(shadow.spread);
}
Ok, najlepiej na sam początek wrzuć w linku ten obrazeczek końcówkowy. Dopiero później zastosuj marginesy, paddingi itp (nie kieruj się moimi parametrami, bo możesz potrzebować innych). Chodzi mi dokładniej o te:
.footer-outer {
margin-left: 166px;
margin-bottom: -1px;
margin-top: 0px;
padding-bottom: 60px;
color: $(footer.text.color);
Wpisuj wartości najlepiej metodami prób i błędów :) podglądaj sobie po kawałeczku czy idzie Ci w dobrą stronę, czy nie. Aha - i najważniejsze. Ta metoda jest marna i stopka lata na wszystkie strony - zależnie od monitora. Teraz (mam nowego lapka, tamten się... spalił chyba) mam wszystko krzywo, chociaż na laptopie mojego brata jest ok -.-
A, i sorry za późną odpowiedź =o= Po prostu nie miałam dostępu do kompa przez cały ten czas ><'''
hej chce ustawić to pół przeźroczyste tło i wpisuje twój przykład i próbuję sama i nic mi nie wychodzi, nie wiesz może co może być tego przyczyną
OdpowiedzUsuńNie ja pisałam notę, ale może pomogę. Najlepiej, żebyś na początku podała adres do swojego bloga (tego, nad którym pracujesz). :)
Usuńm-szablony.blogspot.com/
OdpowiedzUsuńZrobimy tak: mojego maila masz podanego na zaczarowane-szablony. Wyślij mi na maila swój spakowany szablon, podaj mi jaki chcesz kolor tego tła. Ja pokombinuję, a jak mi się uda, to napiszę Ci, jak to zrobiłam.
UsuńMam problem. To mój blog, ale nie potrafię wgl. zrobić jakiegos tła posta. Chodzi o to, żeby tło posta nie było niewidoczne. A niestety po wpisywaniu w arkusz CSS nic mi nie wychodzi.http://wondervouge.blogspot.com/
OdpowiedzUsuńHej. Bez wglądu do szablonu mi ciężko, ale spróbujmy.
OdpowiedzUsuńZapisz sobie szablon w Szablon -> utwórz kopię zapasową.
Wejdź do HTMLA szablonu.
Wciśnij ctrl + F
W pole wyszukiwania wpisz:
Main Background
Widzę, że u Ciebie jest:
Variable name="main.background" description="Main Background" type="background"
default="transparent url(//www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left"/
Ten link:
www.blogblog.com/1kt/transparent/white80.png
to właśnie to białe, lekko przezroczyste tło. Skasuj link. Kod będzie wyglądał tak:
Variable name="main.background" description="Main Background" type="background"
default="transparent url(//) repeat scroll top left"/
Daj Podgląd. Czy widzisz jakieś zmiany? ._.
Hej, wiesz może co zrobić, żeby tło się nie powtarzało? Bawię się z tym już trochę czasu i cierpliwość powoli mi się kończy...
OdpowiedzUsuńHej, Anonimie :) Piszesz o tle w poście, tle w kolumnie, tle całego bloga? :) Jeśli jest to zalinkowany obrazek, to zaraz po linku, a przed nawiasem zamykającym komendę, wpisujesz no-repeat czyli na przykład:
Usuńbackground: url(link_obrazka) top left no-repeat}
Obrazek nie powtórzy się, będzie przylegał do lewej strony i do góry.
Było to tło w poście, ale w każdym razie działa. Jestem taka wdzięczna ;u;
UsuńI jeszcze takie małe, głupie pytanie (a jakże inaczej...). Albowiem obrazkowe tło ustawiłam sobie również w widgetach. Zrobiłam wszystko tak samo jak na instrukcji, ale .post-outer zamieniłam na .widget. Problem tkwi w tym, iż pod nagłówkiem mam strony i pod nimi te tło także się pojawia, a że brzydko to wygląda, to natychmiast chcę je zlikwidować. Jest taka możliwość, aby konkretnie z tego jedynego miejsca usunąć tło obrazkowe?
Dodam, że nie są to strony, które domyślnie można postawić na blogu gdzieś-tam daleko w ustawieniach. Zrobiłam je na zasadzie "obrazko-linków", postawionych obok siebie.
Liczę na "małą" pomoc, bo takie stworzenia jak ja w życiu sobie z tym nie poradzi ,_,
~~Zapomniałam się wcześniej zalogować .-.,
Spoczko ^^
UsuńPróbuję sobie to wyobrazić, ale, kurde, trudno jakoś mi to idzie(niedziela wieczorem...).
Informacja o tym, że nie są to zwykłe strony, jest bardzo istotna. Myślę, iż będzie się to dało pousuwać - tylko jeszcze nie jestem pewna metody, bo nigdy tego nie robiłam.
Wejdź w układ, najedź kursorem myszy na edytuj, wyświetli Ci się na dole strony długaśny adres i będzie pisało w środku widgetID=#Image1 (lub coś podobnego). Zapamiętaj to specyficzne widget ID (każdy gadżet ma inne, Ty bierzesz tylko tych gadżetów, w których są zalinkowane obrazki)
(nie wiem czy mam pisać o funkcjach podstawowych, czy już cośtam wiesz :D)
Wchodzisz do Dostosuj -> CSS, wklepujesz
#Image1 (przykładowo) {background: none}
Powinno załatwić sprawę. Jeśli nie, pokombinuję jeszcze.
Nie wiem czy coś zrozumiałaś, bo piszę jak wariot.
Mogę umrzyć, bo działa. Jestem taka wdzięczna! QuQ
UsuńNawet ogarnęłam gdzie te ID sprawdzać, bo męczyło mnie to od dłuższego czasu.
Tak bardzo dziękuję, znowu~~ >u<
Hah, nie ma sprawy :)
UsuńID były opisane w pierwszej nocie bardzo szczegółowo, a nawet tak szczagółowo, że aż nudząco XD
Mam pytanie: jak się robi coś takiego?
OdpowiedzUsuńhttp://tinypic.com/r/eu29ht/6
Ten Url prowadzi do zdjęcia z Zaczarowanych Szablonów. Jest na nim pokazany spis (do notek).
Nie mam pojęcia jak się za to zabrać. (Jestem polonistką i tylko czytam na komputerze, na serio nic więcej). Ostatnio mnie wzięło. Bo skoro nawet szesnastolatki potrafią napisać coś obrego, to czemu nie ja.
Spróbowałam - chcę to opublikować... ale chcę też, aby wszystko było należyte, albowiem chcę ułatwić posługiwanie się i wyszukiwanie różnych rzeczy moim czytelnikom.
I jeszcze coś... jak się najezie na lin ko napisy się zrozsuwają. O tak (nie umiałam inaczej tego przedstawić) z tego "Spis Treści" na to "S p i s T r e ś c i".
Liczę na jakąkolwiek pomoc.
Och, zapraszam do postu numer 03., wszystko jest tam wyjaśnione :)jak się najedzie na linki to te literki się odsuwają od siebie, tak? Powinno działać to w CSS:
Usuńa:hover {letter-spacing: 1px;}
Jeśli nie działa to daj znać, poszukam jeszcze raz.
Aaa! No i ta komenda nie będzie działała w tej rameczce, której screena zrobiłaś. Nawet nie jestem pewna czy da się tak zrobić. Chyba zbyt wysoka szkoła jazdy jak dla mnie :)
Też jestem polonistką, ale jakoś trzymam się okrętu w blogspotowo-HTMLowym sztormie. ^^
Ten komentarz został usunięty przez autora.
OdpowiedzUsuńKurcze no, wpisałem kod tak jak podałaś i nie działa. Nie mam pojęcia dlaczego, kombinowałem, kombinowałem i nic :/
OdpowiedzUsuńTo nota Jill :) Zamierzam wkrótce zrobić drugi sposób na półprzezroczyste tlo.
UsuńTeż wpisałam ten kod i nie działa mi ta opcja. Z tym, że ja mam już ustawione półprzezroczyste tło, jedynie jest problem z czytelnością liter. Udało mi się wymyślić (nie wiem czy właściwie), żeby zrobić ciemniejsze tło pod notkami (tj. zmniejszyć przezroczystośc i zmienić kolor na ciemniejszy) i dać jasne napisy ...
OdpowiedzUsuńJesteś w stanie mi pomóc? Ewentualnie doradzić inne rozwiązanie? :)
Link do bloga masz na profilu moim ;)
Zerknij do notki nr 9 ;D
UsuńWłaśnie zerknęłam i dałam radę :) Dzięki wielkie. Jeszcze taki dodatek do pytania - czy do elementu/gadżetu też można w podobny sposób dodać przezroczystość? Bo chciałabym na dole strony dodać obrazek/link, ale wrzuca się on w stopkę, więc przyjmuje jej tło ... Da się zrobić przezroczyste? :>
OdpowiedzUsuńMożna, można. Tylko rób malutkie kwadraciki ^^
UsuńTylko to wtedy jak? Dodać CSS, tak jak w przypadku tła notek, tylko inny selektor dodać? Tylko jaki --- taki jaki mi się wyświetli po zbadaniu? :> I zapisać to wtedy w ten sam sposób co te tło notek? :>
OdpowiedzUsuńBadanie to bardzo dobry trik na zbadanie selektora. Robisz dokładnie to samo, tylko wstawiasz inny selektor. Np. Jak chcesz zmienić tło pod statystyką to wpisujesz
Usuń#Stat1
Podstawowe selektory osobnych gadżetów wyjaśniłam trochę w perwszej nocie ^^
Mam pytanie. Powiedzmy, że ustawię tło jakie chcę, ale gdy dodam "czytaj dalej", to dane tło mi się przytnie czy nie pokaże?
OdpowiedzUsuńChyba się przytnie.
UsuńTen komentarz został usunięty przez administratora bloga.
OdpowiedzUsuńA ja mam pytanie dziwne dość :) Mam obrazek, który posiada przezroczyste tło. Umieszczając go w poście lub w bocznych kolumnach tło nie robi się przeźroczyste, jakie powinno być, tylko białe. Jak tą biel usunąć ? :)
OdpowiedzUsuńA zaglądałaś w Ustawienia > Posty i komentarze > wyświetlaj obrazy w widoku lightbox? (ma być na nie)
UsuńHej.Czy można rozciągnąć tło, ponieważ nie chcę by się powielało, bądź jakie rozmiary w pikselach powinno mieć tło? :)
OdpowiedzUsuńjak wklepiesz komendę
Usuńbackground-repeat: no-repeat;
do tego tła, to nie będzie się powielać :)
Jeżeli dasz jeszcze komendę:
background-size: cover;
Obrazek dostosuje się do Twojego ekranu. Tzn, jak będzie za duży to się zmniejszy, a jak za mały, to się naciągnie.
nie moge znalesc "zapisz"
OdpowiedzUsuńU góry po prawej (o ile to nie prowokacja)
Usuńudało się udało się!!!!
OdpowiedzUsuńsiedzę na blogspot od 5 rano a mamy 12.17!!!
zdanie było trudne ale realne do wykonania!!!
użyłam jedynie części tego kodu a właściwe polecenia:
rgba(nasz kolor, wartość przezroczystości)-(rgba (211, 211, 211,0.48)
żeby uzyskać taki efekt http://4-udlaciebie.blogspot.com/
trzeba w ustawieniach zaawansowane: background:
wybrać przezroczyste w każdej opcji tła.
zastosować do bloga a następnie edytować kod HTML
i wyszukać ten oto fragment:
/* Flexible Background
----------------------------------------------- */
.content-fauxcolumn-outer .fauxborder-left {
width: 100%;
padding-left: $(body.background.imageBorder.position.left);
margin-left: -$(body.background.imageBorder.position.left);
background-color: transparent;
background-image: $(body.background.imageBorder);
background-repeat: no-repeat;
background-position: left top;
}
.content-fauxcolumn-outer .fauxborder-right {
margin-right: -$(body.background.imageBorder.position.right);
width: $(body.background.imageBorder.position.right);
background-color: transparent;
background-image: $(body.background.imageBorder);
background-repeat: no-repeat;
background-position: right top;
}
słowo TRANSPARENT!!!! ( background-color:transparent) zastepujemy poleceniem:
rgba(191,239,255,0.5)
odpowiednio przerobionym do naszych potrzeb wg wskazówek w Jill
jest jeszcze kwestia szerokości ale to jest do regulacji w opcjach szablonu suwakiem chyba w dostosuj szerokości ;)
Pani Jill wiem,że to chaotycznie napisane ale pani to zrozumie i z całą pewnością napisze prostą notką z pogrubionymi lub podkreślonymi fragmentami kodu :)
pozdrawiam
Hej, zauważyłam, że na niektórych szablonach każdy gadżet jest w oddzielnej ramce i bardzo bym chciała uzyskać podobny efekt. Stosowałam kod .sidebar {border-radius: 20px 30px 40px 50px;} aby zaokrąlić rogi wszystkich gadzetów albo sidebar-right-2-1 {border-radius: ...} aby zaokrąglić rogi tylko jednego gadzetu, ale zaden z nich nie działa :< Proszę o pomoc.
OdpowiedzUsuńI całe szczęście, że istnieją tacy ludzie, którzy zechcieli pomóc z tymi kochanymi kodami CSS :) Wieeelkie dzięki !
Daj adres swojego bloga :)
UsuńDaj adres bloga, który tak ma, ewentualnie screenshota ^-^
Teraz taka moda na te osobne gadżety, pytają o to wszyscy (odpowiadałam komuś w zakładce "Zapytaj" i mailowo kilka razy Xd).
Zaradzimy, jakoś to zrobimy :D
http://funkyimg.com/u2/4309/859/402715prvmine.png
Usuńtaki efekt jak tutaj :)
http://szablon111111.blogspot.com/ - a to moj adres, bloga załozyłam zeby pobawić sie w CSSie :)
A dodaj tam jakiś gadżet, żebym widziała jakie ma tło, albo coś.
UsuńU mnie kiedyś działał taki:
.column-right-inner .widget {blahblah}
zamiast right można dać left. W miejsce blahblah kod, który chcesz zastosować.
dzień dobry!
OdpowiedzUsuńzastosowałam się do instrukcji, wpisując do arkuszu następujący kod:
.post {background-image: url(http://img22.otofotki.pl/obrazki/td277_tlo_posta.png);}
i działa, ale podczas przewijania postu co jakiś czas pojawiają się takie fioletowe cienkie paski. jak się ich pobyć?
mój blog: http://zbyt-trudne.blogspot.com/
Zaraz ogarnę ;D
UsuńHm, zrobiłam tak:
Usuńkliknęłam sobie prawym na twoje tło i je pobrałam, otwieram na komputerze, a ono takie duuże...
Co można by zrobić:
Metodę opisałam w poście 09. Streszczenie i lekka modyfikacja dla Ciebie:
1. Weź to tło i obetnij w jakimś programie graficznym. Ja mam zwykły Microsoft Office Picture Manager. Możesz też obciąć w Photoshopie lub Gimpie, zależy czego używasz. Obrazek tła powinien być wielkości Twojego paznokcia. Nikt się nie obrazi, jeśli będzie wielkości ziarenka maku. W tym wypadku im mniejszy kwadracik, tym lepszy.
Dlaczego?
Małe obrazki szybciej się ładują. Najszybciej ładują się obrazki, które swój direct link mają w w blogspocie (wtedy, kiedy wgrywamy je od razu z komputera na blogspot).
Dlaczego taki mały obrazek, skoro moje tło pod postami jest o wiele większe?
Tym się nie martwmy. CSS pozwoli nam powielić ten kwadracik w miarę potrzeb.
2. Zalinkuj jakoś ten kwadracik, żeby mieć direct link.
3. Komenda do CSS wygląda tak:
.post {background: url(url_obrazka) repeat}
Musi być repeat, bo to oznacza, że pozwalamy temu kwadracikowi powielać się w nieskończoność w obrębie postu.
bardzo dziękuję za pomoc, zastosuję się do Twojej rady i zobaczę, co z tego wyjdzie. :) w razie czego napiszę jeszcze raz, zatruwając ci głowę :)
Usuń(PS. czemu ci się łezka zakręciła? czyżbyś miała aż taki sentyment do Krzyśka? :D
przepraszam, ale nie mogłam się powstrzymać, bo zauważyłam twój komentarz pod Bohaterami :) )
+ wszystko działa tak jak trzeba;
Usuńdziękuję Ci bardzo :* :* :* :*
Chodziło mi bardziej o to, że bohaterowie to zazwyczaj Amerykanie, ewentualnie Polacy z amerykańskimi imionami ;D
Usuńaha, u mnie to najwyżej będzie jeden Amerykanin ( tak epizodycznie), ale to zawodnik Sovii. :)
Usuńjeszcze raz dziękuję za pomoc :*
hej, coś się stało z tym linkiem?
OdpowiedzUsuńchodzi mi o ten fragment: "Skoro mamy już selektor, to pora na wybranie koloru, tutaj macie tabele, skąd możecie pobrać(...)"
bo mi nie chce działać, nie wiem czemu
hej mam problem dopiero założyłam bloga i nie za bardzo ogarniam jak dać to tło mój blog to http://breathecarolina-thebestband4ever.blogspot.com/ chcę żeby tło postów było lekko przeźroczyste tak żeby było widać zdjęcie na tle strony. W arkuszu CSS mam zapisane tak:
OdpowiedzUsuńbody {
font: normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #CCC;
background: #114170url(http://lh5.googleusercontent.com/-iacsh-fU7TI/Us2a7t7x3iI/AAAAAAAAACE/O7u_E4SmV_s/h000/bctlo.jpg) no-repeat fixed top center;
background-size: cover;
}
Co i gdzie mam dodać żeby tak się zrobiło ?
aha i jeszcze żeby tło gadżetów też było takie jak tło postów
UsuńCzy ktoś Wie jak usunąć stopkę bloga aby nie było tej przerywanej linii na samym dole przy autorach o tej ------------------------------------------------------------------- prosze o pomoc bardzo mi na tym zależy z góry dziękuję i pozdrawiam :)
OdpowiedzUsuńTrochę ("trochę") z opóźnieniem, ale może jeszcze komuś się przyda. Otóż ja wiem. Trzeba wejść w edycję kodu html i wyszukać (ctrl+F) w przypadku kropek "dotted", w przypadku kresek "dashed", a następnie albo zamienić przy tym kolor na "transparent" albo usunąć linijkę z kodu.
Usuń