|
Blogerzy wszystkich platform, łączcie się! Dyskusje Blogerów, Fotoblogerów i Vlogerów, fora blogowe, graficzne, ogólnotematyczne
rozmowy o blogach, porady, instrukcje, ciekawostki z internetu
|
| Autor |
Wiadomość |
 Temat: [Szablon Lefty] Dopasowanie szerokości i tła w pasku bocznym |
Lukem
Odpowiedzi: 2
Wyświetleń: 4990
|
 Forum: pomoc WordPress Wysłany: 2014-01-14, 12:04 Temat: [Szablon Lefty] Dopasowanie szerokości i tła w pasku bocznym |
Trochę będzie trudno bez podglądu bloga na żywo, ale przynajmniej pokażę, gdzie czego szukać.
Responsywność w tym szablonie jest skoncentrowana wokół kilku progów szerokości ekranu i fragmenty CSS odpowiadające za zachowanie w tych prograch można odnaleźć w style.css szukając tzw. media queries (zaczynających się od @media i zawierających zazwyczaj jakiś graniczny punkt - najpewniej szerokość w pikselach - do którego dane reguły obowiązują):
- dla szerokości ekranu poniżej 767px:
Kod @media only screen and (max-width: 767px) { //... }
- od 768px do 959px:
Kod @media only screen and (min-width: 768px) and (max-width: 959px) { //... }
- od 960px w górę - w zasadzie cała reszta arkusza nie objęta powyższymi warunkami.
ultraman23 napisał/a: Szablon jest responsywny, ale chciałbym, żeby jego wielkość nie była mniejsza niż X px, bo obrazki i szerokość tekstu są za małe.
Dużo zależy od szerokości, jaką chcesz zostawić, ale możliwe że można byłoby pozbyć się jednego progu responsywności i dopasować szerokości elementów (w szczególności .container-left i .container-right, bo to one najbardziej reagują na zmiany wymiarów) na jeden z poniższych sposobów:
- nadając im sztywne wymiary w pikselach na najniższym progu responsywności, jaki zostanie - dla paska bocznego (aka "to coś po boku") można byłoby tak zrobić,
- nadając im płynne wymiary za pomocą atrybutów min-width i max-width.
Metodą prób i błędów powinieneś dojść do zamierzonego efektu.
Zmieniając minimalny próg wielkości szablonu weź pod uwagę fakt, jak szablon zachowa się na urządzeniach mobilnych, bo cały koncept responsywności jest przemyślany głównie pod ich kątem. Ale to na marginesie.
Polecam używanie Chrome i zmienianie CSS za pomocą jego narzędzi deweloperskich (dostępne pod klawiszem F12). Następnie klikasz na ikonę lupki na samym dole, wybierasz na stronie element, który chcesz dopasować i w okienku po prawej w zakładce Elements masz wypisane wszystkie reguły CSS opisujące dany element, łącznie z media queries. Zwracaj uwagę na wartości liczbowe i zmieniając je sprawdzaj efekt na bieżąco. Jeśli "zabangla", to zapisz zmianę w stylu CSS. Niebawem wrzucę tu tutorial, jak robić takie rzeczy.
Cytat Aha, trochę za daleko od tej ramki po lewej zaczyna się tekst.
Dostosuj sobie padding na elemencie .site-main:
Kod .site-main { float: left; width: 90%; max-width: 1000px; padding: 80px; }
Obecny padding:80px oznacza, że na wszystkich brzegach jest po 80 pikseli odstępu. Sposób zmiany dla poszczególnych brzegów jest opisany chociażby tutaj, ale można teżopisywać wielkości osobno (np. padding-top:10px; padding-bottom:10px; padding-left:10px; itd.).
Cytat Co do tego cosia to w Demie jest pokazane, że ciągnie się to przez całą długość strony, podczas gdy u mnie ucina się niedaleko po kategoriach i dalej jest już tylko białe tło. Chciałbym to zmienić na takie, jakie jest w Demie.
Tu już musiałbyś pokazać szablon po zmianach - w demie działa to poprawnie i ciężko mi diagnozować przyczynę. |
| Temat: [ocena] Blog filmowy wasze opinie i sugestie |
Lukem
Odpowiedzi: 9
Wyświetleń: 3175
|
Forum: Porady blogowe Wysłany: 2014-01-08, 13:32 Temat: [ocena] Blog filmowy wasze opinie i sugestie |
Poprzyczepiałbym się kilku drobiazgów estetycznych:
1. Wyróżniony tekst w treści wpisów oznaczasz na zielono. W tym samym kolorze masz też linki (np. pod nagłówkami tekstów i w pasku bocznym), więc moją instynktowną reakcją było najechanie myszą na wyróżnione teksty i szukanie odnośnika. A tu gucio, nie ma. 
2. Reklama Adsense pod nagłówkiem bloga - nie dałoby rady dopasować jej szerokości do szerokości szablonu i pozbyć się tego kilkupikselowego marginesu między nią a treścią?
3. Pole "O autorze" pod treściami rozpaczliwie prosi się o uzupełnienie.
4. Tekst "Valid W3C (X)HTML5 Website" w stopce (wraz z grafiką) jest do wyrzucenia. Raz, że link do walidatora sprawdza zupełnie nie tą stronę, co trzeba i nie służy niczemu sensownemu, dwa - czasy chwalenia się poprawnością (X)HTMLa i linkowaniem do walidatora trwały krótko i minęły bezpowrotnie.
W każdym razie całkiem ładnie i czytelnie, przyjemna kolorystyka. Jestem na tak.  |
| Temat: [Blogspot, posty] Łamanie linii i tekst otaczający zdjęcia |
Lukem
Odpowiedzi: 6
Wyświetleń: 4099
|
Forum: Forum Blogger Wysłany: 2014-01-06, 14:00 Temat: [Blogspot, posty] Łamanie linii i tekst otaczający zdjęcia |
Można to poprawić w trybie HTML. Wywal <br>-y, a przed akapitem, który ma zjechać pod obrazek wklej
Kod <br style="clear:both">
Oczywiście, jeśli tekst pozostający obok obrazka będzie krótszy niż wysokość tego obrazka, to między dwoma akapitami zostanie pusta przestrzeń. |
| Temat: [CSS] formatowanie tabelki |
Lukem
Odpowiedzi: 4
Wyświetleń: 3403
|
Forum: Webmastering Wysłany: 2014-01-06, 13:45 Temat: [CSS] formatowanie tabelki |
Wróciłem po bardzo długim urlopie i teraz dopiero przeczytałem.
Po kolei:
1. Zapisując stronę z rozszerzeniem .xhtml zmuszasz przeglądarkę do tego, aby traktowała Twoją stronę z maksymalną surowością i każdy najmniejszy błąd w kodzie XHTML może spowodować niewyświetlenie dokumentu. Zapisuj dokumenty jako .html (ewentualnie .htm) i wtedy przeglądarki zaczną przymykać oko na poprawność kodu (tzn. spróbują go wyświetlić tak, jak jest, zamiast krzyczeć o błędach składniowych). Nie rozwiązuje to oczywiście problemu błędów w kodzie, ale o tym w następnym punkcie.
XHTML to taka zaszłość historyczna, która poza bardzo specyficznymi zastosowaniami niespecjalnie ma rację bytu. Jakkolwiek, jeśli chcesz przy nim pozostać, to polecam kurs w BrowseHappy oraz krytyczny artykuł na temat używania XHTML.
W innym przypadku zapisuj strony z rozszerzeniem .html (lub .htm) i udawaj, że XHTML nie istnieje.
2. Natomiast przyczyną wyświetlonego błędu jest to, że kod, który wkleiłeś, nie jest poprawnym dokumentem HTML (ani XHTML). Zacznij od przykładowego dokumentu HTML5 i wklej swój kod w ramy dokumentu.
Blok
Kod <style type="text/css">
#osom {
border: 1px solid black;
}
// i tak dalej aż do zamknięcia znacznika style
</style>
wklej do sekcji <head> (czyli np. linijkę wyżej podnad tagiem zamykającym </head>), zaś resztę (kod tabelki) do sekcji <body> (analogicznie). W ten sposób strona stanie się poprawnym dokumentem HTML.
Poprawność składniową stron HTML możesz sprawdzać walidatorem W3C.
Eisen napisał/a: Ponadto chciałbym, żeby po najechaniu na dany wiersz, tło podświetlało się w całym wierszu, a nie tylko w drugiej kolumnie?
Zmień nastepujący fragment stylu:
Kod #osom tbody tr:hover {
background: #0b232c;
color: #fff;
}
na
Kod #osom tbody tr:hover td {
background: #0b232c;
color: #fff;
}
Przyczyną takiego zachowania tabelki jest ta deklaracja:
Kod #osom tbody td:first-child {
background: #f3f3f3;;
font-weight: bold;
width: 24%;
}
która z racji specyficzności CSS jest ważniejsza od
Cytat #osom tbody tr:hover {
background: #0b232c;
color: #fff;
}
i powoduje, że tło dla pierwszej komórki wewnątrz <tr> ma pierwszeństwo nad tłem ustawionym przy najechaniu myszą.
Kod z Twoją tabelką i powyższą poprawką wrzuciłem na jsfiddle, gdzie możesz podejrzeć efekt. |
| Temat: Logo przylegające do góry strony... |
Lukem
Odpowiedzi: 4
Wyświetleń: 2665
|
Forum: pomoc Blogspot Wysłany: 2014-01-05, 22:22 Temat: Logo przylegające do góry strony... |
Wygląda na to, że wystarczy drobna poprawka w stylach szablonu.
Odszukaj w edytorze szablonu taką linijkę:
Kod
.content-inner {
padding: 10px 40px;
}
i zmień wartość górnego paddingu na 0 - w taki sposób:
Kod
.content-inner {
padding: 0 40px 10px;
}
|
| Temat: Znacie jakieś strony z grami na komórkę? |
Lukem
Odpowiedzi: 3
Wyświetleń: 5167
|
Forum: Telefonia Wysłany: 2013-12-27, 00:52 Temat: Znacie jakieś strony z grami na komórkę? |
Na jaki telefon/smartfon/system operacyjny?
W czasach Javy ściągałem sporo z getjar.com, poza tym chyba nadal istnieje Wapster.pl. Dla iPhone'ów jest oficjalny App Store, dla Androida również oficjalny Google Play i nie ma sensu szukać nigdzie indziej (ewentualnie na Amazon App Store albo Appbrain.com, ale moim zdaniem szkoda zachodu, bo w Google Play jest to samo, tylko więcej). Swoje oficjalne markety ma też Microsoft w Windows Phone, Nokia, Firefox OS i prawdopodobnie każdy inny system operacyjny, który miał swoją premierę w ciągu ostatnich 3-4 lat. |
| Temat: [wordpress] Ikony wpisu - inny serwer |
Lukem
Odpowiedzi: 10
Wyświetleń: 4738
|
Forum: pomoc WordPress Wysłany: 2013-10-08, 07:23 Temat: [wordpress] Ikony wpisu - inny serwer |
Tak, jest darmowa.
Jeśli interesuje Cię tylko i wyłącznie opcja CDN, to wystarczy że zainstalujesz wtyczkę u siebie (Wtyczki -> Dodaj nową -> wpisz w wyszukiwarkę "w3 total cache").
W panelu pojawi się nowa zakładka - "Performance". Wchodzisz najpierw do ustawień (General settings) i przechodzisz do okienka "CDN" (zjeżdżając na dół albo klikając link z poziomego menu na górze), by włączyć funkcjonalność ("Enable").
Potem, w pasku bocznym i zakładce "Performance" wybierasz opcję "CDN". W okienku "Configuration" podajesz dane do serwera, który będzie przechowywał grafiki (nazwa hosta, użytkownik FTP, hasło i ścieżka do katalogu głównego na serwerze - tą ostatnią możesz sprawdzić za pomocą klienta FTP, np. Filezilla, gdy zalogujesz się tymi danymi na swój serwer). Kliknij "Test FTP server" - jeśli wypełniłeś formularz poprawnie, powinieneś dostać komunikat o sukcesie.
W tym samym oknie, w zakładce "General" możesz zaznaczyć, co ma być trzymane na zewnętrznym serwerze - na pewno musisz zaznaczyć "Host attachments". Potem pozostaje już tylko skopiować pliki z wp-content/uploads na zewnętrzny serwer - możesz to zrobić narzędziem wbudowanym we wtyczkę (pokaże Ci się w ramce po pomyślnej konfiguracji FTP), albo ręcznie, aby mieć pewność, że wszystko zostało skopiowane poprawnie.
Gdyby coś było niejasne albo wyszedł jakiś problem w trakcie konfiguracji - pisz na forum, będziemy myśleć co dalej. |
| Temat: [blogger, facebook] ramka Like/Wyślij ukryta pod wpisami |
Lukem
Odpowiedzi: 2
Wyświetleń: 1675
|
Forum: pomoc Blogspot Wysłany: 2013-07-03, 17:53 Temat: Szablon "Responsive Templates" |
W stylach dla diva #sidebar-wrapper zmień:
na
Tylko sprawdź na wszelki wypadek stronę w IE, czy układ się nie sypnął po tej zmianie. |
| Temat: Problem z pewną bloggerką. |
Lukem
Odpowiedzi: 9
Wyświetleń: 2767
|
Forum: Sex, Miłość i przyjaźń Wysłany: 2013-07-01, 16:16 Temat: Problem z pewną bloggerką. |
Chwal publicznie – krytykuj w cztery oczy.
Takie przysłowie starsze od internetu. |
| Temat: Jak zrobić menu z przesuwającymi się linkami po najechaniu? |
Lukem
Odpowiedzi: 1
Wyświetleń: 3796
|
Forum: pomoc Blogspot Wysłany: 2013-03-29, 21:46 Temat: Jak zrobić menu z przesuwającymi się linkami po najechaniu? |
Daj mi chwilę czasu, zbuduję taką.
[ Dodano: 30-03-2013, 00:07 ]
Zbudowałem tak samo działające menu w samym HTML i CSS - różni się tylko tym, że używa wyłącznie możliwości przeglądarek, bez użycia JavaScriptu - a więc nie zadziała w Internet Explorerze poniżej wersji 10 oraz bardzo starych wersjach innych przeglądarek.
http://jsfiddle.net/lwojcik/pPPup/20/
Nie mam Bloggera i nie za bardzo jestem w stanie doradzić, jak wdrożyć to w istniejącym blogu, ale wyjaśnię krótko co się dzieje.
Po lewej kod HTML - czyli nasze menu. Zwykła nienumerowana lista zamknięta w tagu .menu.
Po prawej CSS. Tu jest kilka ciekawych rzeczy.
Reset to proste przywrócenie domyślnego wyglądu elementów na stronie - usunięcie marginesów, wypunktowań na liście, podkreślenia linków oraz tła i fontu - ustawiłem biały tekst na czarnym tle.
W .menu w menu ustawiłem tylko marginesy i szerokość elementów, więc w sumie też tylko dekoracja.
.menu a to styl pojedynczego elementu menu (linku). Wymuszamy traktowanie go jako elementu blokowego (display:block - dzięki temu można m.in. łatwo regulować marginesy i odstępy od tekstu), ustawiamy rozmiar i kolor (font-size na 12 pikseli; kolor biały, czyli #fff), estetyczne odstępy (2 piksele) oraz obramowanie po lewej stronie. Dajemy na 0 pikseli - za moment wyjaśnię dlaczego.
.menu a:hover to wygląd linka po wskazaniu na niego myszą. Co się zmieniło w stosunku do wyglądu pierwotnego?
Ustawiliśmy border-left (obramowanie po lewej) na 18px (jest ono widoczne jako ten czarny kwadrat po lewej), zmieniliśmy kolor tekstu i jego tło.
No i ostatnia kwestia - tzw. przejścia CSS. To są te powtarzające się linijki:
Kod transition:all 0.3s;
-webkit-transition:all 0.3s;
-moz-transition: all 0.3s;
Przejścia w CSS odpowiadają za to, że w momencie najechania na link widzimy płynną zmianę kolorów i rozmiaru obramowania. Trzeba zrozumieć, co w tym momencie się dzieje - zmienia się szerokość obramowania (z 0px do 18px), kolor tła (z czarnego na białe) i kolor tekstu (z białego na czarny). Przeglądarka dostaje prikaz, że ma te kolory zmienić w płynny sposób w określonym czasie (u nas wynosi on 0,3 sekundy).
Przejścia zawsze operują na wartościach liczbowych - można nimi objąć tylko to, co da się wyrazić cyframi (wszelkie wielkości w pikselach - rozmiary, wysokości, szerokości, wielkości tekstu, oraz definicje kolorów - u nas obramowanie zmienia się z białego na czarne). Dlatego najpierw ustawiliśmy obramowanie na 0px, a potem znów na 18px - inaczej przeglądarka uznałaby, że w link tak naprawdę nie ma obramowania i nie miałaby z czego robić przejścia.
Ta sama definicja przejścia jest powtórzona dwa razy (w .menu a i .menu a:hover - po to, by było ono widoczne zarówno przy najechaniu myszą na link, jak i po "odjechaniu" z niego.
Chrome i Firefox wciąż traktują przejścia CSS jako funkcję eksperymentalną, dlatego należy dodawać tę samą linijkę trzykrotnie w różnych wersjach. -webkit-transition to definicja przejścia dla Chrome'a, Safari i innych przeglądarek opartych o silnik Webkit, -moz-transition jest dla Firefoksa i innych opartych o silnik Gecko. Możemy ewentualnie dodać to sam dla starszych wersji Opery (-o-transition), ale Opera od dość dawna "łyka" normalną definicję przejścia (transition).
Pozostaje tylko przekopiować CSS (zawartość z prawej ramki na górze) i zmienić selektory na te odpowiadające naszemu menu (czyli wstawić coś innego zamiast .menu, jeśli w naszym szablonie jest użyta inna klasa CSS) oraz ewentualnie zmienić kolory i wielkości elementów.
Natomiast wsparcie dla Internet Explorera można dobudować w JavaScripcie, choćby za pomocą jQuery i jego funkcji .animate(). |
| Temat: [wordpress] Problem z wyświetlaniem filmików youtube |
Lukem
Odpowiedzi: 4
Wyświetleń: 5575
|
Forum: pomoc WordPress Wysłany: 2013-02-16, 00:31 Temat: [wordpress] Problem z wyświetlaniem filmików youtube |
Po długiej wymianie PW znaleźliśmy przyczynę problemu.
Otóż jeżeli w szablonie treść wpisu jest wyświetlana za pomocą
Kod <?php the_excerpt(); ?>
to wszelkie "dziwne" wstawki (łącznie z tzw. shortcode'ami, typu [youtuber 123456]) i chyba także HTML są "połykane" przez WP jako czysty tekst. the_excerpt() wyświetla skrót wpisu, a przy okazji kastruje go ze wszelkich elementów, które mogłyby popsuć szablon (czyli wyświetla je tak, jak są, zamiast poprawnie zinterpretować).
Częściowym rozwiązaniem jest zastąpienie powyższej wstawki przez
Kod <?php the_content(); ?>
Wtedy wyświetlana jest cała treść wpisu, ale HTML i shortcode'y są poprawnie interpretowane na stronie.
Oczywiście jest to pewien problem, jeśli wrzucimy np. film z YT i trochę treści pod nim, a chcemy wyświetlić sam film. Wówczas przed treścią wstawiamy
i wtedy widoczny jest tylko wstęp (to, co umieściliśmy nad tagiem "more"), reszta dopiero po kliknięciu na rozwinięcie wpisu. |
| Temat: Wordpress a Android, iOS oraz WP8 |
Lukem
Odpowiedzi: 7
Wyświetleń: 2968
|
Forum: Forum WordPress Wysłany: 2013-01-28, 22:18 Temat: Wordpress a Android, iOS oraz WP8 |
OK, rozumiem zamysł, więc pogadajmy o konkretach. 
Otworzyłem powiedziałem.pl w IE na Windows Phone 7.5. Przy włączonym 3G/HSPA ładuje się szybko i nie zauważyłem jakichś większych przestojów. Zatem zbiorę do kupy wszystko, co mi przychodzi do głowy.
(zaznaczam, iż są to tylko sugestie. Nie daję gwarancji, że każda z nich przyniesie realny i widoczny zysk - musisz popróbować, co faktycznie warto robić, a na co szkoda czasu)
- tak jak wspomniał Htsz, wtyczki keszujące (W3 Total Cache, WP-SuperCache, itd. itp.). Wtedy treści nie są każdorazowo generowane, tylko ładują się jak statyczne pliki HTML.
- kompresja obrazków - wyciskaj co się da z każdego obrazka, póki nie zobaczysz strat na jakości, szczególnie przy JPGach. Z kolei jeśli przyjdzie Ci wrzucać cokolwiek w PNG , to potraktuj go jakimś narzędziem typu PNGOut. Niektóre programy - zwłaszcza Photoshop! - zapisują w PNGkach nieco zbędnego balastu, który nie wpływa znacząco na jakość, a stanowi czasem 10-20% objętości grafik.
- z pomysłów bardziej kreatywnych, choć niekoniecznie praktycznych - dla przeglądarek mobilnych, które operują na mniejszych rozdzielczościach, mógłbyś spróbować serwować mniejsze wersje obrazków, niż dla wersji "pełnowymiarowej". Tutaj nie podpowiem żadnego konkretnego rozwiązania, trzeba byłoby rozejrzeć się albo napisać własne rozwiązanie.
- poszukaj wtyczki, która połączy Ci wszystkie arkusze styli oraz skrypty JS do pojedynczych plików i przy okazji potraktuje je jakimś mechanizmem typu "minify" (wytnie spacje, entery, zbędne powtórzenia, itp.) - przyoszczędzisz w ten sposób dużo zbędnych żądań HTTP do serwera, a ładowane pliki będą mniejsze.
- pozostając w kwestii CSSów i JSów - z punktu widzenia szybkości ładowania strony opłaca się je serwować z innego adresu niż blog. O ile pamiętam, w W3 Total Cache jest opcja postawienia własnego CDN i serwowania plików statycznych z innej subdomeny (np. cdn.powiedzialem.pl).
- możesz pobawić się Cloudflare.com - jego rolą jest głównie przyspieszanie komunikacji między przeglądarką a serwerem DNS (balansowanie ruchu, serwowanie statycznych treści w trakcie awarii - przydatne szczególnie przy dużych przeciążeniach) oraz dodatkowe funkcje bezpieczeństwa (blokowanie albo serwowanie captcha spod podejrzanych adresów IP).
- można się pobawić w wycinanie zbędnych elementów z samego motywu graficznego (nadmiarowe klasy CSS w szablonach, optymalizowanie styli, porzucanie wsparcia dla starszych przeglądarek), ale to już dość czasochłonne.
- widzę, że motyw używa jQuery - zamiast serwować je ze swojego serwera mógłbyś korzystać z wersji udostępnionej przez Google - raz, że oszczędzasz swój serwer, dwa że jQuery z Google jest używane w wielu miejscach w internecie i jest realna szansa, że Twój czytelnik ma już zapisaną kopię biblioteki w pamięci podręcznej przeglądarki -> a to kolejny zysk dla Ciebie.
- kanały RSS możesz serwować FeedBurnerem - korzyści podobne do tych, które przynoszą wtyczki keszujące stronę, do tego dostajesz fajne statystyki Twojego kanału.
Problem pozostaje jedynie ze wszystkimi dodatkami z zewnątrz (komentarze facebookowe, like box, itd.), bo de facto nie masz na nie zbyt wielkiego wpływu. Podobnie z osadzaniem fontów na stronie (ten w nagłówkach jest serwowany za pomocą font-face) - nie doradzam Ci rezygnacji z nich, ale one też swoje robią.
Masz pingi na poziomie 10-15ms, czyli hosting leży w Polsce i nie ma tu nic więcej do poprawiania. Dalej już tylko zostają zmiany po stronie konfiguracji samego serwera, ale to raczej tylko przy VPSie albo dedyku.
Ogólnie dużo pomysłów i dużo możliwości zabawy, ale to już zależy, ile chcesz poświęcić czasu. |
| |
↑ skocz na górę ↑ | shoutbox | |
|
|
 |
|
|
FAQ
Szukaj
Użytkownicy
Blogger Polska!
Rejestracja
Zaloguj
