Masz pomysł na lepszy wygląd?

Masz pomysł na lepszy wygląd?
ePub czas dodania: 2013:03:05 01:07 komentarzy 0
Właśnie zrobiłem świetne narzędzie dla ludzi z wyobraźnią i wyczuciem smaku :)

No właśnie mogę się pochwalić nowym narzędziem, jakie zrobiłem w panelu (do tego są potrzebne uprawnienia, jak ktoś zna się na kolorystyce, to nadam mu takowe).

A wygląda to tak:

 

 

 

Jak to działa? Ano w ten sposób, że zaciąga oryginalne style ze strony do panelu i pozwala je edytować. Oczywiście nie będzie to miało wpływu na stronę, nie zmieni to oryginalnych stylów, ale umożliwi zapisanie i podgląd efektu tejże roboty. Jest to bezpieczne, można nawet usunąć je wszystkie, albo narobić poważne błędy i zapisać... Nic się nie stanie.

Po wciśnięciu przycisku "pokaż na stronie" pokaże efekt zmiany wyglądu. Będzie on widoczny pod specjalnym linkiem, który będzie można wkleić do komentarza, żeby wszyscy mogli zobaczyć jak to wygląda.

Ale co jest najfajniejsze? To narzędzie do edycji kolorów... Wystarczy tylko w tekście zaznaczyć myszką dowolny kolor (np. #123456), aby pokazał on się w tym kolorowym widgecie. Następnie na nim można ten kolor zmienić, a po wciśnięciu przycisku "użyj tego koloru" nowa wartość zostanie podmieniona... Tylko kliknąć przycisk "zapisz i kontynuuj edycję" a następnie przycisk "pokaż na stronie", aby obejrzeć efekt podmiany kolorów i innych stylów...

 

Więc jak ktoś ma koncepcję, zna się na kolorystyce, to zachęcam do zabawy i pokazania swojej wizji...  Jest to bezpieczne i nic się nie popsuje. Css jest prosty. Proszę się nie bać tych krzaczków - one tylko z pozoru wyglądają groźnie...

 

W html-u mamy tzw. tagi, a te tagi są z parametrami. Dla przykładu:

<div id="jakis_unikalny_identyfikator_elementu">

     <div class="jakas_klasa_elementu">

          jakiś tekst, który wyświetla się na stronie, a który jest zawartością tych elementów

    </div> <!-- zamknięcie div-a o klasie "jakas_klasa_elementu" -->

</div> <!-- zamknięcie div-a o identyfikatorze "jakis_unikalny_identyfikator_elementu" -->

 

I teraz jak to stylować...

div - jest to element html-a

atrybut "id" - tutaj jak chcemy, to możemy zdefiniować unikalny identyfikator elementu. W tym przykładzie ma on wartość "jakis_unikalny_identyfikator_elementu"

atrybut class = jest to klasa danego elementu. Nie jest ona unikalna i można ją powtarzać w wielu miejscach. W tym przykładzie mamy klasę "jakas_klasa_elementu"

I teraz jak chcemy to stylować w css-ie, to trzeba wiedzieć, że znaczek # odnosi się do id-u elementu. Czyli, jak chcemy ostylować div-a o identyfikatorze "jakis_unikalny_identyfikator_elementu", to robi się to bardzo prosto:

#jakis_unikalny_identyfikator_elementu {

background-color: #888888;

}

 

Znaczek kropki '.' odnosi się z kolei do klasy. Jak chcemy ostylować jakiś element o klasie jakas_klasa_elementu, to tę nazwę musimy poprzedzić kropką:

.jakas_klasa_elementu {

border: 1px solid #FF00FF;

}

Natomiast jak chcemy ostylować element html-owy bez względu na klasę, czy identyfikator, to należy użyć jego nazwy bez kropki i hasha:

div {

margin: 10px;

}

 

Trzeba pamiętać, że najpierw jest klasyfikator elementu (w ostatnim przykładzie to div), następnie klamra otwierająca, potem nazwa parametru, dwukropek, wartość i na końcu średnik. Cała definicja kończy się oczywiście zamykającą klamrą.

Jak ktoś jest zainteresowany, to potem przedstawię więcej szczegółów tej techniki stylowania, jak to zrobić szybko i bezboleśnie... Teraz idę spać. Jutro dam przykłady takiej zabawy...

 

 


 

Następna lekcja - jak pracować, żeby się nie namęczyć?

1. Zainstalować sobie dodatek do firefoxa "firebug" - działa to pod przeglądarką firefox - profesjonalne i zupełnie darmowe narzędzie do tego typu zadań. Jak ktoś używa innych przeglądarek, to powinien się przełamać i zainstalować sobie w końcu firefoxa. Nie trzeba ustawiać jej jako domyślnej przeglądarki, ale do pracy na html-u, kolorystyce nie ma lepszej! Link do pobrania dodatku do firefoxa:

https://addons.mozilla.org/pl/firefox/addon/firebug/

Po ściągnięciu i zainstalowaniu należy zamknąć i powtórnie uruchomić firefoxa, a następnie na przeglądarce znaleźć guziczek wyglądający jak to:

(tylko ten przycisk będzie czarno-biały - jak się wciśnie i aktywuje, to będzie wyglądał jako to :)

2. Ten obrazek pokazuje to w działaniu:



Oznaczyłem tam "Przycisk inspekcji". Jeśli go wciśniemy, po czym myszką najedziemy na dowolny element strony html i klikniemy w ten element, to z prawej strony tego dodatku firebug pokażą nam się style tego wciśniętego elementu. Można je edytować. Można wstawić nowy kolor i zobaczyć, jak to wygląda. W tym przykładzie najechałem myszką na tę brązową belkę z napisem "DODAJ KOMENTARZ" i firebug wyświetlił fragment tego html-a i odpowiadające mu style - czyli "h3.comment_head". Co widzimy w tych stylach? Ano to, że kolor tła jest to #7A6749 (backgroubd-color), kolor czcionki to biały (#FFFFFF - color), kursor to pointer (czyli jak najedziemy na tę belkę myszką, to myszka zamienia się na łapkę i wszyscy myślą, że to jest link), czcionka jest pogrubiona (font-weight ustawiony na bold), margines, czyli odległość tego elementu od innych elementów w html-u (zgodnie ze wskazowkami zegara od godziny 12 - czyli na górze mamy odstęp 20px, z prawej 0px, na dole 0px, a z lewej 2px,

padding to odległość tego napisu "DODAJ KOMENTARZ" od granic tego elementu - czyli 5px. Na koniec to text-tranform - czyli taki styl, który konwertuje napis w tym przypadku na wielkie litery.

 

Dzięki temu narzędziu można odnaleźć fragment w css w tym panelu, który odpowiada za jego wygląd i w łatwy sposób poprawić.

 

Firebug w działaniu:

 

W dalszej części powiem więcej na temat stylowania, jak samodzielnie ostylować dowolny fragment html-a, o tych selektorach css-a, bo to jest chyba tam najważniejsze.

Pozdrawiam

 

Tagi

licznik: 3394 + 1 / 0 - promuj
captcha
x

Zgłoszenie komentarza

dodaj komentarz

x
komentarzy: 0 kolejność: wg punktacji najstarsze najnowsze
  1|0
Proszę bardzo - tu jest przykład małej zmiany - zmieniłem kilka kolorów na jakieś od czapy, oraz zamieniłem wielkości tagów - te najważniejsze są najmniejsze, a najmniej znaczące są największe:

http://www.noweblogi.pl/?dynamic_css=1
2013-03-05 01:39
  1|0
a tak wygląda, jak całkowicie usuniemy css-a:

http://www.noweblogi.pl/?dynamic_css=2

Więcej przykładów jutro...
2013-03-05 01:41
Chętnie stanę w szranki :) 0|0
I wystawię swoje propozycje lauoytów do publicznej chłosty ;)

gdzie mam kliknąć, żeby przyłączyć się do zabawy i móc zaproponować inne kolory?
2013-03-05 08:29
Mam pomysła. (marketingowo komercyjnego) 0|0
Ale warunkiem jest istnienie atrakcyjnej graficznie (wpadającej przyjemnie w oko) strony tytułowej. Najlepiej w postaci plakietki, którą chętnie przykleilibyśmy do samochodu.
To określa format (kompatybilność z formatem)
Nazwa witryny - winna być roamieszczona "obwodowo - al epozostając wystarczająco wyeksponowaną, by reklamować portal.
Polem głównym powinno być miejsce na komunikat.
Np. reklama czegoś...
Plakietka winna zostać zarejestrowana - ale z tym PUSTYM POLEM.
Co się będzie pojawiało (pozarównież - reklamą), napiszę innym razem...
-:)
2013-03-05 12:53
Acha! 0|0
Bardziej, niż o stronę tytułową chodzi o nasze logo - w pewnym sensie - jako odrębny element tej strony głównej.
2013-03-05 12:57
# @Freedom 2013-03-05 08:29 0|0
Kiedy bedziesz sie bawił, to pokombinuj z kolorem zielonym, jako baza i z wszystkimi jego odcieniami. Zielony to "wiosna, narodziny i nadzeja; odpoczynek, relaks".
Do tego koloru w drobiazgach pasuje brązowy zołty, czerwony.

PS.prosze wybaczyc chwilowy brak polskiej czcionki.
2013-03-06 08:49
# @InaMina 2013-03-06 08:49 0|0
Rozbudowałem trochę ten opis, ale będę dążył do tego, aby to uprościć do granic możliwości. Mam jeszcze jeden pomysł w sprawie tego panelu do edycji wyglądu, żeby było jeszcze prościej, ale to może dopiero za kilka dni.
2013-03-06 11:59
  0|0
Muszę powiedzieć, że pozwoliłem sobie podejrzeć kolegę freedoma i widzę, że ma fajną koncepcję, pozwoliłem się tym zainspirować i coś wieczorem przedstawię - mam nadzieję że on pierwszy, żeby nie było, że to on ode mnie skopiował pomysł, a nie ja od niego.
2013-03-06 13:33
# @Obsługa techniczna 2013-03-06 13:33 1|0
Miło mi, że kogoś zainpirowały moje próby z kolorytyką ;)

Zatem przedstawiiam wersję obecną - bo już do wieczora nie będę miał kiedy usiąść, żeby doprawcować szczegóły:
http://www.noweblogi.pl/?dynamic_css=4

pozdrawiam, na razie tyle.
2013-03-06 18:20
# @Freedom 2013-03-06 18:20 0|0
Świetne, brawo! Strzał w 10-kę.

Ja za chwilę wrzucę produkcyjnie swoje, które zrobiłem w oparciu o Twój pomysł. Ta czerwona kropka i menu - to rewelacja!

Menu przekopiuję od Ciebie, bo tu nie ma nic do poprawy.
2013-03-06 19:17
# @Obsługa techniczna 2013-03-06 19:17 0|0
Dziękuję - ciesze się, że mogłem się przydać.

Mam jeszcze jeden projekt, podobny ale inna "temperatura" - wydaje mi się lepszy:

Styl LAGUNA :)
http://www.noweblogi.pl/?dynamic_css=9
2013-03-06 22:47
# @Obsługa techniczna 2013-03-06 19:17 0|0
Heya
Nosz kurde chyba mnie w końcu przekonałeś. Jak się ma siódmy krzyżyk na karku, to człowiek do uczenia raczej się już nie nadaje, ale co tam, mózg dziurawy, za to reszta sprawna. Dziś pada, siedzę w domu, no to się przyłożę i postudiuję. Znam firmę tworzącą kursy, kupiłem już od nich kurs PS i Pinnacle Studio, jak mi będzie szło bez problemów, to sobie ten kurs kupię. Po co wyważać drzwi do lasu...
2013-09-17 12:31
  0|0
Hello, już niedługo (za kilka dni) pokażę lepsze narzędzie personalizacji :)
2013-11-20 01:11
# @Obsługa techniczna 0|0
Hej Obsługo,:-)
Jak już coś zmieniasz, to popraw przy okazji wpis podtytułu zakładki "sprawy wewnętrzne", bo ostała się tam nazwa "nowe blogi", chyba, że historycznie dla serwisu ma tam zostać?

W trakcie mojej pracy zrobiłam zbliżenie na tę zakładkę - stąd zauważyłam ten "drobiazg" :-)
2013-11-20 10:00
# @InaMina 0|0
racja, dzięki, poprawiłem :) A to co ja planuję, to mechanizm, który spowoduje, że po jego włączeniu i najechaniem myszką na dany element on się podświetli. Po kliknięciu na niego będzie można edytować jego wygląd w sposób wizualny za pomocą suwaków, tego widgeta do kolorów, wybierając odpowiednie opcje wyboru i w ten sposób spersonalizować swojego bloga :) Czyli nie będzie potrzebna żadna wiedza z zakresu html i css...
2013-11-20 12:37
# @Obsługa techniczna 0|0
Dzięki :-)
Poprawię ujęcie, jednak utknęłam w jednym punkcie i nie umiem na razie znaleźć odpowiednich słów wiążących dwa obrazy.

Może jak się pogapię na rekonstrukcję w rządzie, to znajdę jakiś bon mot u "mistrza"? ;-))
2013-11-20 12:38
# @InaMina 0|0
Podobny drobiazg na prawo od pingwina :)
2013-11-20 21:00
# @leoparda 0|0
Faktycznie, wytnę mu to z mojego zdjęcia :-))))
2013-11-20 21:05