Forum.Legalne.info: [Quick.Cms] Zmiana wyglądu - Forum.Legalne.info

Skocz do zawartości

Otwarty

Ikona Shoutbox

    Rozszerz pole shoutboxa

Ikona Zaloguj się na forum

    • Login:
    • Hasło:


    Zapamiętaj mnie
Strona 1 z 1
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

[Quick.Cms] Zmiana wyglądu Kilka porad dot. zmiany designu Cms'a

#1 Użytkownik jest niedostępny   Makaron 

  • Nowicjusz
  • Grupa: Użytkownicy
  • Postów: 3
  • Dołączył: 13-June 08
  • GG: 5353140

Napisany 13 June 2008 - 02:40 PM

Witam serdecznie,

Miałem okazję pracować z narzędziem Quick.Cms. Zrobiłem kilka serwisów opartych na tym CMSie i chciałem polecić go użytkownikom tego forum z kilku prostych przyczyn: jest bardzo prosty w obsłudze (nie wymaga nawet bazy danych MySQL, a wszystkie informacje są zawarte w plikach), stosunkowo łatwo dostosować jego wygląd do naszych potrzeb (co za chwile postaram się pokazać w kilku przykładach), a w razie problemów zawsze można skorzystać z forum na opensolution.org, a na pewno uzyskamy szybką i satysfakcjonującą odpowiedź (kilka razy zdarzało mi się korzystać i naprawdę odpowiedzi autorów skryptu są błyskawiczne).

Do rzeczy.. Po zainstalowaniu narzędzia Quick.Cms (opis instalacji znaleźć można tutaj) i uruchomieniu go w przeglądarce efekt otrzymamy taki:
Dodaj obrazek
Dodaj obrazek

Skorzystam z darmowego szablonu http://www.opendesigns.org/preview/?template=1377, bo przecież nie chodzi o to, żeby robić cały design od podstaw, a tylko, żeby pokazać zasadę działania pewnych elementów. Tak więc najpierw podmieniamy oryginalny plik z Quick.Carta templates/img/header.jpg na ten z szablonu: http://www.opendesig...mages/img02.jpg

Teraz przyszła kolej na kilka zmian w css'ie, który znajdziemy w templates/default.css.
-
body{padding:20px 0;background:#fff url('img/bg.jpg');text-align:center;}
zmieniamy wartość padding na "padding:0;" - usuwa górny i dolny odstęp.

- #container, #main, * html #main - dla tych 3ech linijek zmieniamy atrybut width na "width:100%;" - strona będzie wtedy miała szerokość absolutną okna (tak jak jest w szablonie), dodatkowo w #main usuwamy wpis
border:6px solid #332;
obramowanie nie będzie nam potrzebne...

- blok #head2 tutaj zmieniamy wpis
background:#332 url('img/header.jpg') no-repeat;
na
background:#671700 url('img/header.jpg') top center no-repeat;
oraz wartość height:180px; (wysokość taka jak naszego obrazka header.jpg)

- przyszedł czas na zmiane logo. Tutaj będziemy musieli edytować plik templates/container.tpl i zmieniamy linijke:
<h1><a href="?" tabindex="1"><img src="$config[dir_templates]img/logo.jpg" alt="$config[title]" /></a></h1>

na:
<h1><a href="?" tabindex="1">$config[title]</a></h1>

I w panelu administracyjnym zmieniamy sobie tytuł strony (Page title) i slogan.

Następnie dodajemy 2 wpisy w stylu css, a jeden edytujemy efekt końcowy powinien wyglądać tak:
#logo h1 a{font-family: Arial, Helvetica, sans-serif;color:#fff;font-size:0.8em;text-decoration:none;font-weight:normal;}
	   #logo h1 a:hover{text-decoration:underline;}
	   #logo h2{clear:left;padding:5px 8px;background:inherit;color:#fff;font:normal 0.917em Arial;}

Nastąpiła tu głównie zmiana krojów czcionek i kolorów - nic co trzeba by dodatkowo tłumaczyć.

- Z bloku #logo h1 usuwamy wpis
border:1px solid #1c1c13;background:#4b4b3a;


Kolejnym krokiem jest zmiana menu pod headerem. Przed przystąpieniem do zmiany styli musimy przygotować sobie plik tła tegoż menu. U mnie wygląda on tak:
Dodaj obrazek

Zapisujemy go jako templates/img/nav.gif. Teraz kilka zmian w stylu css.. Końcowy efekt bloków dotyczących menu2 (tak oznaczone jest menu pod headerem) wygląda tak:
/* HEADER WITH TOP MENU UNDER LOGO */
 #head3{float:left;width:100%;border-top:1px solid #996;background:#ded9d0 url('img/nav.gif');}
 
 /* MENU TOP BELOW LOGO */
 #menu2{font-family:tahoma;font-size:1.08em;list-style:none;}
 #menu2 li{float:left;}
 #menu2 a{display:block;float:left;height:49px;padding:0 14px;border-right:1px solid #fff;background:url('img/nav.gif');color:#D8D8D8;font-weight:bold;text-decoration:none;text-transform:uppercase;font:bold 0.9em Tahoma;line-height:49px;}
 #menu2 a:hover{background:url('img/nav.gif');color:#fff;}
 #menu2 .selected{background:url('img/nav.gif');color:#fff;text-decoration:underline;}

Nie było tutaj drastycznych zmian, a tylko zmiana wysokości (na wysokość pliku nav.gif) zmiana background (nie używamy tutaj opcji hover, czyli zmiany tła po najechaniu myszką na obiekt, więc zawsze bierzemy domyślną pozycję background - top left) oraz zmiana kroju i kolorów czcionek.

Czas na stopkę .. Plik graficzny który posłuży nam jako tło znajduje się tutaj: http://www.opendesig...mages/img07.gif Zapisujemy go w naszym narzędziu pod adresem templates/img/bottom.gif i zmieniamy w pliku default.css wpis
#foot{clear:both;float:left;width:100%;padding:19px 0 0;background:#332 url('img/bottom.gif') no-repeat;color:#fff;font-size:1.08em;}

na
#foot{clear:both;float:left;width:100%;padding:50px 0 50px;background:#fff url('img/bottom.gif') repeat-x;color:#fff;font-size:1.08em;}


I na koniec zmieniamy jeszcze linijkę:
#container{width:100%;margin:0 auto;padding:0 0 6px 0;background:url('img/wrapper.gif') left bottom;}

na
#container{width:100%;margin:0 auto;padding:0;}

i
body{padding:0;background:#fff url('img/bg.jpg');text-align:center;}

na
body{padding:0;margin:0;background:#fff;text-align:center;}

Nie było tu żadnych zmian wymagających komentarza, ale jakby były jakieś niejasności to czekam na pytania ..

To koniec pierwszej części kursu dostosowywania grafiki do narzędzia Quick.Cms, w następnej pokażę jak zmieniać content stron (czyt. dopasowywać go graficznie do szablonu).

Oto efekt końcowy, który powinniście uzyskać jeśli zrobiliście wszystko, tak jak opisałem krok po kroku:
Dodaj obrazek
Dodaj obrazek
0

#2 Użytkownik jest niedostępny   Spanner 

  • Gaduła
  • Grupa: Użytkownicy
  • Postów: 146
  • Dołączył: 05-December 07
  • GG: 5571624
  • MiejscowośćKrK

Napisany 13 June 2008 - 08:36 PM

trochę się nie zgodze z Tobą, wcale nie jest to dobry system dość kiepski nawet bym powiedział, ale fakt skiny do niego się robi bardzo prościutko, nawet wykonałem kilka płatnych :)
0

Prześlij ten temat:


Strona 1 z 1
  • Nie możesz rozpocząć nowego tematu
  • Nie możesz odpowiadać w tym temacie

1 Użytkowników czyta ten temat
0 użytkowników, 1 gości, 0 anonimowych użytkowników


               
           
       
Nasza strona internetowa wykorzystuje cookies (pol.: ciasteczka)

Na naszej stronie wykorzystujemy ciasteczka (ang. cookies), dzięki którym nasz serwis może działać lepiej - więcej o tym w Naszej polityce prywatności. W każdej chwili możesz wyłączyć ten mechanizm w ustawieniach swojej przeglądarki. Korzystanie z naszego serwisu bez zmiany ustawień dotyczących cookies, umieszcza je w pamięci Twojego urządzenia.

Akceptuję   Zmiana ustawień