Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

Blog na czarno - czy to legalne?

Witam wszystkich.
Jak wszyscy widzą kila dni temu Administracja raczyła nas z okazji 9 urodzin portalu (Wszystkiego dobrego ;)) "poczęstować" nowych wyglądem oraz funkcjonalnością bloga.

W mojej opinii jest teraz świetnie ;)

Ale jak wiadomo o gustach się nie dyskutuje.
Dla nocnych marków, którzy przeglądają Bloga głównie wieczorami, a którym przeszkadza jasny wygląd nowej odsłony bloga, mam coś na "lekarstwo".

Obecnie większość popularnych przeglądarek umożliwia użytkownikom instalowanie dodatkowych wtyczek|rozszerzeń|pluginów|addonów - zwał jak zwał, wszystkie z tych programików mają na celu poszerzyć w mniejszym lub większym stopniu funkcjonalność naszej przeglądarki.

W tym miejscu chciałbym zaznaczyć, że od lat jestem fanboyem Opery i dlatego opisywana tutaj wtyczka będzie przeznaczona właśnie dla tej przeglądarki. Dodam jednocześnie, że podobne wtyczki napewno są dostępne do innych przeglądarek (do Google Chrom na pewno jest).

Dobra to do dzieła

Easy User CSS - czyli lekarstwo na lęk przed światłością ;p. Tak ta prosta wtycza w diametralny sposób potrafi zmienić niemal każdą stronę internetową według własnego widzi mi się.

Całość polega na zainstalowaniu dodatku do przeglądarki. Po zakończeniu instalacji wtyczki ikonka pojawia nam się w prawym górnym rogu (miejsce domyślnie wyświetlające zainstalowane rozszerzenia). Po kliknięciu na ikonę rozwija nam się okienko do wpisywania stylu css, które będą modyfikować wygląd wybranej przez nas strony.

Po wejściu na stronę bloga czyli: http://www.dobreprogramy.pl/Blog.htmlKlikamy na ikonce pobranej wtyczki oraz wpisujemy poniższy styl css (Tutaj dodam, że robiłem to trochę na kolanie, a aby efekt zadowolił w 100% trzeba troszkę posiedzieć nad tym).

div.content.float-right { background-color: #000000; color: #ebebeb; } span { color: #ededed; } body { background-color: #000000; } a.color-heading span { color: #f2f2f2; } div.entry-content blockquote { color: #444; } h1, h2,h3,h5, h3.text-h65 a, .user-info h3, a.color-heading, div.entry-content h2, header h1 a{color:#fff}

Efekt końcowy wygląda stosunkowo dobrze na kila minut pracy.

Jeżeli ktoś stworzy własny ciekawy styl to na pewno nikt nie obrazi się jeżeli wrzuci go w komentach.

Pozdrawiam. 

internet

Komentarze

0 nowych
  #1 11.12.2011 01:56

E tam, nie ma nic lepszego niż piękna, śnieżnobiała strona wyskakująca w środku nocy niczym partyzanci zza krzaków ;>

Krogulec REDAKCJA  20 #2 11.12.2011 02:29

Nie obrazi się ;) Całkiem fajnie to wygląda, być może wprowadzimy więc możliwość zmiany kolorystyki bez uciekania się do takich kombinacji.

Niemniej jednak, chciałbym też zwrócić uwagę na program f.lux (http://www.dobreprogramy.pl/f.lux,Program,Windows,21432.html), o którym już pisałem w komentarzach pod którymś wpisem. Wymaga przyzwyczajenia, ale wiele osób bardzo go sobie chwali (- również u nas w redakcji.

underface   14 #3 11.12.2011 10:22

@Krogulec f.lux już na stałe zagościł u mnie na kompie. a ten wpis z czarnym tłem to tak z ciekawości raczej powstał ;p

Loreno   6 #4 11.12.2011 10:23

Na Firefoxa jest bodajże FireBug, który ma podobną zasadę działania. Na CHrome też coś było ,ale już nie pamiętam nazwy.

Saskatchewan   7 #5 11.12.2011 10:25

Można też użyć skrótu klawiaturowego Win+= i ustawić odwrócenie kolorów, ale wtedy strasznie wali po oczach jak się wejdzie na jakąś stronę z czarnym tłem. :-)

Banan   10 #6 11.12.2011 11:36

Macie problemy z białym wieczorem? To moja zieleń by was zabiła =P

Łukash   9 #7 11.12.2011 13:01

Pomógłby ktoś w uzyskaniu takiego efektu ? :)
http://wstaw.org/h/ac311a3ed78/

dragonn   10 #8 11.12.2011 13:13

Fajne, działa nieźle pod pod Fx, wystarczy to co podałeś wkleić do stylu Stylish a na początku dodać linię:
@-moz-document url-prefix("http://www.dobreprogramy.pl/"), url-prefix("http://www.dobreprogramy.pl/") {
i na końcu zakończyć nawias }

AndrzejG   9 #9 11.12.2011 13:28

W Operze: Strona==>Styl==> zaznaczyć Wysoki kontrast b-cz. Gotowe :) Ten styl zaczernia też niektóre grafiki należące do tła, ale przeważnie to nie przeszkadza.

Łukash   9 #10 11.12.2011 13:49

@AndrzejG
-Ten styl zaczernia też niektóre grafiki należące do tła, ale przeważnie to nie przeszkadza.-
:)
Przewiń sobie stronkę jak masz rozszerzenie Slim Scrollbar ;)

And_re2   5 #11 11.12.2011 14:35

Czarny #000 nie jest najlepszym rozwiązaniem na tło strony. Lepiej dać coś odrobinę jaśniejszego np. #222.
U mnie tak to wygląda na szybko:
http://img24.imageshack.us/img24/1322/dpblog.png
Opera, rozszerzenie Include CSS.

I z tego co patrzylem ten nowy kod html dla blogów, to nie jest najwyższej jakości: niepotrzebne niektóre znaczniki do stworzenia efektu, który można osiągnąć łatwiej i nazwy klas np. div class="border-verctical" oraz niepotrzebne lokalne style dla niektórych elementów.

Łukash   9 #12 11.12.2011 15:16

Dałem rade :)

div.content.float-right {
background-color: #000000;
color: #ebebeb;
}

body {
background-color: #000000;
}
.color-heading, h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a {
color:#eb5815!important
}
.content-info, .color-secondary {
color:#ffffff!important
}
a:hover {
color:#eb5815!important
}
a, .link-color { color:#eb5815!important
}
body, .color-content {
color:#ffffff!important

Łukash   9 #13 11.12.2011 15:23

tyle ,że zmieniło kolor czcionki na głównej :(

walker13150   4 #14 11.12.2011 16:33

jeszcze tylko jak usunąć kratownicę pod reklamami :D

greg.c88   3 #15 11.12.2011 17:01

kratownicy można by się pozbyć ustawiając takiego CSS'a:
.pattern { background-image: none !important; }

Banan   10 #16 11.12.2011 19:03

@And_re2

Uwielbiam ten zielony tylko ja bym zrobił to na odwrót zielony na tło czarny na napisy.

underface   14 #17 11.12.2011 19:12

ten zielony kolor to #8ed631

Banan   10 #18 11.12.2011 19:55

Ja wolę #A8E71E

Banan   10 #19 11.12.2011 19:58

Używam go na co dzień (UWAGA! Dla bardziej wrażliwych na kolory proszę tego nie otwierać) http://www.hapex.com.pl/zielono.png

walker13150   4 #20 11.12.2011 20:01

@greg brawo mistrzu, jeszcze stonować białe linie i jest perfekt

zoso71   8 #21 11.12.2011 20:07

@And_re2 - Ooooooo!!! Zbliżasz się do ideału ;-)

Zielone litery to niezły pomysł, może tylko ciut jaśniejsze tło....

Możesz się podzielić kodem? ;-)

lukasz7251   1 #22 11.12.2011 20:27

div.content.float-right {

background-color: #222 ;

color: #ebebeb;

}



body {

background-color: #222 ;

}

.color-heading, h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a {

color:#8ed631!important

}

.content-info, .color-secondary {

color:#ffffff!important

}

a:hover {

color:#fff!important

}

a, .link-color { color:#fff!important

}

body, .color-content {

color:#ffffff!important

PS: Trzeba poprawić linki (aktualnie są białe)

And_re2   5 #23 11.12.2011 21:10

To też zmienia tło na stronie głównej serwisu.

body {
background: #222;
}

.entry h1, .entry h1 a, .entry h2, .color-heading, .color {
color: #AD1;
}

a.color-heading:hover, a.color:hover {
color: #FFE !important;
}

h3:hover a {
color: #CF3 !important;
}

.section-title {
color: #FFF;
}

.entry {
color: #CCC;
}

div.border-verctical {
border-color: #444;
}

.item-content {
color: #CCC;
}

Łukash   9 #24 11.12.2011 21:26

Trochę stunowana wersja ;)

div.content.float-right {
background-color: #000000;
color: #ebebeb;
}
body {
background-color: #000000;
}
.color-heading, h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a {
color:#eb5815 !important;
}
.content-info, .color-secondary {
color:#ffffff !important;
font-size: 12px !important;
}
a:hover {
color:#eb5815 !important;
}
a, .link-color { color:#eb5815 !important;
}
body, .color-content {
color:#ffffff !important;
}
content .third .newsOptions a, #content .third .itemOptions a {
color:#838383 !important;
}
body, .toolItem .AlphabetNavigatorBox a, input.month, input.year, #content .third .pagination a, .pageNavigatorNormal, .block .text li, #content .block .text .title, #content

.third, .calendar th[scope="col"], .downloadKategorie .catTitle, .komentarze .informacje, .komentarze .informacje a, .komentarze .numer, .komentarze .formularz td:first-child,

.downloadKategorie .catTitle, .downloadItem, .toolItem .itemBox, .toolItem .mainCategory .categories .catTitle, .toolItem .mainCategory .categories .catTitle a, .profile ul a,

.mainCategory .categories .catItems, .buttonDescription, #content .block .text .title, .helperBlock strong, .komentarze .title, .toolNewPage .itemReviews .userinfo .nick a {
color:#626262 !important;
}
a, .toolItem a, #content .third .title a, #content .third.news h1.title, .modalTitle, #content .block .text .author, #content .third .newsInfo a, #content .third .newsContent a,

.downloadItem a, #content .third.page a, .komentarze h3, .third.toolItem.toolList .mainCategory.highlightlink .categories .catTitle, .third.toolItem.toolList

.mainCategory.highlightlink .categories .catTitle a, .profile .friendsGallery ul a, .search .serchItemTitle a, .profile .postsList .menuBlock a, .boxLimiterTrigger_selected, .calendar

.day, .calendar a, .downloadKategorie li a, .modalSignUp .bottom input, .komentarze .formularz .zasady, .downloadKategorie li a, #content .third .pagination a.active,

.pageNavigatorCurrent, .autocomplete strong, #content .third.content .mainBar .title {
color:#cc0f16 !important;
}
body, .toolItem .AlphabetNavigatorBox a, input.month, input.year, #content .third .pagination a, .pageNavigatorNormal, .block .text li, #content .block .text .title, #content

.third, .calendar th[scope="col"], .downloadKategorie .catTitle, .komentarze .informacje, .komentarze .informacje a, .komentarze .numer, .komentarze .formularz td:first-child,

.downloadKategorie .catTitle, .downloadItem, .toolItem .itemBox, .toolItem .mainCategory .categories .catTitle, .toolItem .mainCategory .categories .catTitle a, .profile ul a,

.mainCategory .categories .catItems, .buttonDescription, #content .block .text .title, .helperBlock strong, .komentarze .title, .toolNewPage .itemReviews .userinfo .nick a {
color:#626262 !important;
}
#content .toplevel, #content .toplevel a {
color:#ffffff !important;
}
.text-h8 {
color:#ffffff !important;
}
.pattern { background-image: none !important;
}
.btn:hover {
background-color:#302525 !important;
}
.btn, .serviceMenu > .active, .serviceMenu > :hover {
background-color:#302525 !important;
}
#pageFooter {
display: block;
height: 70px !important;
}
#brand {
padding-bottom: 1px !important;

:D

Na głównej intelowski link jest czerwony

Łukash   9 #25 11.12.2011 21:30

pasuje pod skórkę Opery

tfl   8 #26 12.12.2011 12:15

Co do tej kratownicy... mozna tez tak:

#brand .pattern {
visibility: hidden;
}

Kintoki   6 #27 12.12.2011 13:00

Na co instalować dodatkowe rozszerzenie, przecież opera ma wbudowaną możliwość dodawania własnego stylu.

underface   14 #28 12.12.2011 13:14

@Kintoki w takim razie czekam na odpowiedź jak to zrobić, bo udało mi się jedynie zmienić styl tylko w danym momencie, po odświeżeniu strony wracał domyślny

Łukash   9 #29 12.12.2011 18:41

@@underface nie wrzucasz stylu w preferencje ,tylko go wybierasz z menu ;) Jest taki magiczny przycisk ;)
http://wstaw.org/m/2011/12/12/Przechwytywanie.JPG
Można by było też znajstrować button(zamiast odświeżać/klinąć button) dla przełączania konkretnego stylu.

underface   14 #30 12.12.2011 19:01

@Łukash dalej nie wiem gdzie to jest;p chętnie poproszę instrukcję krok po kroku;p

Łukash   9 #31 12.12.2011 19:17

@underface przeciągnij jakiś przycisk ,byle jaki ,np na dolny pasek .
teraz skopiuj > wklei i przejdź : opera:about ,masz ścieżke do profilu ,skopiuj do uruchom > otwórz. Zamknij Opere.
Wejdź w folder "toolbar" ,otwórz notatnikiem standard_toolbar.ini
I teraz znajdź ten przycisk co przeciągałeś .Zostaw numer ,a za przecinkiem wklej :
"Style"="Show popup menu, "Style Menu""
Ma to wyglądać np tak :
Button7, "Style"="Show popup menu, "Style Menu""
Zapisz . Pierwsze "Style" to nazwa możesz ją zmienić.

Łukash   9 #32 12.12.2011 19:18

Jak Ci nie spasi to pomyślimy nad przyciskiem przełączającym styl.

Łukash   9 #33 12.12.2011 19:23

Jest też Operowy button "Tryb autorski" ale on jest głupi :P

Łukash   9 #34 12.12.2011 19:54

Dobra jest przycisk do przełączania :)
ważne aby styl miał ! jako pieerwszy znak np "!dpblog.css"
i przycisk :
Button24, "Zmień styl"=Select user CSS file, , , "Zmień styl" | Deselect user CSS file

Igloczek   7 #35 12.12.2011 23:02

Ja u siebie poprawiłem szerokość strony, teraz jest 1300px. Oczywiście kolorki, szary, zielony i niebieski. Kilka cieni, i strona wygląda całkiem przyjemnie. Szkoda że nie mogę oddzielić głównej strony DP od bloga :/


div.content.float-right {
background-color: #333333;
color: #ebebeb;
}

span {
color: #ededed;
}

body {
background-color: #333333;
}

a.color-heading span {
color: #009cdd;
}

div.entry-content blockquote {
color: #444444;
box-shadow: 1px 1px 10px 1px #ffffff;
}

h1, header h1 a {
color: #6ddd00;
}

h2,h3,h5, h3.text-h65 a, .user-info h3, a.color-heading, div.entry-content h2 a {
color: #a4a4a4;
}

a {
color: #009cdd;
}
a:hover {
color: #fff;
text-shadow: 0px 0px 15px #ffffff;
}
#content .content blockquote {
background-color: #a4a4a4;
}
.btn, .serviceMenu > .active, .serviceMenu > :hover {
background-color: #000;
box-shadow: 1px 1px 10px 1px #ffffff;
}
.wrapper {
width: 1300px;
}

#pageContent #content {
width: 950px;
}
#pageContent .content-list .content {
width: 800px;
}
.pattern {
background-image: none ;
}