[drupal] style.css i edycja tematu

[sector]

Juz raz mi pomogliscie, wiec mam nadzieje, ze i Tym razem sie uda.

 

Wczoraj siedzialem nad tym chyba z 6h i nie wymyslilem praktycznie nic. Oto jak wyglada sprawa.

 

Jest sobie strona CRM, ERP, BPM - Berberis | Linia produktów firmy BMS Creative i na tej stronie w menu po lewej sa jakby grupy. Wszystko pieknie ladnie, tylko jest jedna sprawa. Trzeba wrzucic grafike w miejsce inne (kwadrat + ten "slimak" co jest w kazdej innej grupie.

 

 

I oto jak sie wszystko prezentuje. Strone robil jakis inny koles, ktory gdzie jest nie mam pojecia, dlatego sam probuje moich sil, a ze webmasterem nigdy nie bylem to mam spory roblem.

 

Zainstalowalem firebug'a. Znalazlem miejsce gdzie niby siedza owe kwadraty. Jest sobie jakas tam klasa i teoretycznie wysarczy sobieprzeniesc jedna linijke (w firebugu) do mojej klasy i TEORETYCZNIE mam wszystko czego potrzebuje.

 

Praktycznie wyglada to o wiele gorzej poniewaz, firebug pokazuje mi, ze owe kwadraty sa w pliku style.css. Jednak ich tam nie ma. Znajduje sie tam blok/klasa zaeklarowana jako

 

.kwadraty {

position:relative;

...

...

}

 

nie ma tam zadnych szczegolow, gdzie one sa zdefiniowane. Wiec zdefiniowane sa w innym miejscu i tam tez jest zapisane, ze powtarzaja sie np. 4 razy a nie 5 i dlatego nie 'dojezdzaja' do tego mojego miejsca inne.

 

WYlaczylem plik style.css (zmienilem nazwe) i wtedy firebug pokazywal mi, ze info znajduje sie w /modules/system/default.css jednak tego tam tez nie ma.

 

Przegladnalem wszystkie pliki w folderze z tematem i NIC! Nie ma nigdzie nic zdefiniowanego jako /images/kwadraty.png :|

 

Pomyslalem sobie, ze sprobuje to obejsc i w pliku css dodam sobie poprostu jako background kwadrat i ustawie go w miejscu w ktorym chce, jednak nie dzialo to.

Wpisze np. background:url(images/kwadraty.png) no-repeat top left; i wyswietla sie dobrze. Jesli jednak zamiast top/left wpisze np. 10px, klapa i obrazek znika. Nie moge go woogle przesunac.

 

Czy ktos ma jakis pomysl? Dziekuje z gory, nawet za probe przeczytanie wypocin.

Edytowane 25 Maja 2010 przez sector

[ULLISSES]

Po pierwsze, to kwadraty są obrazkiem:

<img alt="" src="/sites/all/themes/bms/images/kwadraty.png" class="kwadraty" id="kwadraty-oprogramowanie">

Style:

.kwadraty {float:left;left:-20px;position:relative;}

Po drugie, to czemu nie skopiujesz całego boxa?

<div class="block block-block" id="block-block-6">  <div class="content">    <div class="bms-block-menu" id="bms-block-menu-oprogramowanie"><img alt="" src="/sites/all/themes/bms/images/kwadraty.png" class="kwadraty" id="kwadraty-oprogramowanie"><div class="expanded last oprogramowanie kreski-cienie10b shadow"><a href="/oprogramowanie">oprogramowanie</a></div><ul class="block-menu menu"><li class="leaf first bmsli lioprogramowanie"><a href="/oprogramowanie/crm_berberis">System Berberis</a></li><li class="leaf bmsli"><a href="/oprogramowanie/n-expert">N-Expert</a></li><li class="leaf last bmsli"><a href="/oprogramowanie/porsenna_dss">Porsenna</a></li><li class="leaf more bmsli"><a href="/oprogramowanie">więcej</a></li></ul><div class="kreski-cienie12"></div></div>  </div></div>

Za całe style odpowiadają klasy - ID jest tylko w celu identyfikacji boxa. Zbędne elementy w boxie można wywalić. Pamiętać trzeba jednak, że niektóre odpowiadają za jego wygląd. W tym wypadku:

<img alt="" src="/sites/all/themes/bms/images/kwadraty.png" class="kwadraty" id="kwadraty-oprogramowanie"><div class="expanded last oprogramowanie kreski-cienie10b shadow"></div><ul class="block-menu menu"></ul><div class="kreski-cienie12"></div>

Daje odpowiednio:

- kwadraty po lewej

- kreski pomiędzy którymi jest nagłówek

- kreski boczne bloku

- dolną (zamykającą) kreskę bloku

[sector]

ULLISSES, zebys Ty widzial czego to ja juz nie probowalem ;)

 

Tak jak mowie. Probowalem wstawiac w rozne miejsca sam kwadrat i ustawiac pozycje x-y. Wyglada na to, ze strona jest podzielona na bloki i przypisujac element (powiedzmy obrazek kwadrat) pod ktorys blok, nie moge go ruszyc. Jesli zrobie cos w stylu:

 

background:url(images/kwadraty.png) no-repeat center left;

left: 20px;

..

 

to on nie rusza sie ani o px. Nawet jesli zdefiniuje background ... no-repeat 100 200; to nawet sie nie wyswietla.

 

Zalaczam w linku plik style.css. Masz moze jakis pomysl? Wielkie dzieki za pomoc (kolejny raz juz z reszta! :oops: )

Wklejka #339694 | Wklej.org

[ULLISSES]

Owszem, Drupal ma zdefiniowane bloki - elementy w nich umieszczone ciężko wypchać poza wyznaczone ramy. Nie jest to jednak niemożliwe. ;]

 

Aby nie bawić się w kotka i myszkę, to może powiedz raczej, gdzie chcesz umieścić te elementy, w jakim celu i co ma być wewnątrz nich.

 

Najprościej będzie dodać nowy blok tutaj: http://www.bms.krakow.pl/admin/build/block/addbuild

Jego pozycję na stronie ustalamy tutaj: http://www.bms.krakow.pl/admin/build/block

Jego wygląd zdefiniowany jest w pliku /sites/all/themes/block.tpl.php

 

Na szczęście można to zmienić używając identyfikatora bloku.

Domyślne ustawienia można nadpisać używając identyfikatora bloku oraz dyrektywy '!important'.

 

Przykładowo napis 'oprogramowanie' ma ustalony kolor na biały. Gdy skopiujesz całego "boxa" (jak w kodzie powyżej), to napis nadal będzie miał kolor biały. Aby go zmienić, wystarczy zmodyfikować zapis na:

<a href="/oprogramowanie" id="inny">oprogramowanie</a>

A w stylach wymusić zmianę koloru (tutaj na niebieski):

#inny {color: blue !important;}

[sector]

Zaraz bede kombinowal, jednak poniewaz niedlugo sie zbieram do domu moge sie nie wyrobic z moja odpowiedzia. Jednak... widze, ze faktycznei dobrze kombinowalem i to nie ja robilem blad, tylko drupal jest taki toporny (swoja droga mam juz do niego wstret :) ).

 

Chce zrobic tak, aby ten kwadracik co jest obok kazdej grupy wyswietlal sie obok grupy "Inne" i dodatkowo do grupy inne dodac takiego "slimaka" w ktorym jest caly tekst podgrupy.

[ULLISSES]

W takim razie prosta sprawa.

 

Zanim odwalisz druciarstwo, to zobacz jak zrobione są boxy wyżej. Albo wklepane są w menu, albo to oddzielne bloki. Nowy element ("inne") dodaj w ten sam sposób jak tamte.

[sector]

ULISSES, uwierz mi gdyby to bylo takie proste to bym to zrobil wlasnie w taki sposob. W firebugu wszystko elegancko sobie ustawiam, zmieniam wartosci jak chce, dodaje elementy blokow i "Inne" wyglada idealnie. Jednak gdzie to skopiowac zeby dzialalo pozostaje dla mnie zagadka. Uwierz mi, ze przeswietlilem wszystkie pliki w temacie i nic.

 

Gdy zmieniam plik style.css na style.css.bak wtedy pokazuje mi, ze styl, ktorego uzywa jest w /modules/system/detaulf.css (kwadraty nadal wyswietlane). W momencie gdy zmienie i jego nazwe kwadraty sa nadal wyswietlane a style css wg firebuga to html.css.

 

TO jest tak zagmatwane, ze ja juz jestem zrezygnowany. Tak jak mowie, tyle nad tym wczoraj siedzialem, ze rece mi opadaja. O ile z Joomla mialem stycznosci i latwiej mi cokolwiek z nia zrobic o tyle drupal przyprawia mnie o koszmary nocne hehe.

 

Szczerze ULISSES nie interesuje mnie juz jak to zrobic poprawnie i bez 'druciarstwa'. Obecnie jedynie chodzi mi o to jak to zrobic by dzialalo.

 

Co do tego co pisales wyzej. W linku http://bms.krakow.pl/admin/build/block/addbuild oczywiscie sa bloki dodane. Znajduje sie tez tam blok INNE jednak, w konfiguracji jest pusty.

 

Znajduje sie tam pare pozycji (nazw blokow) ktore sa wyswietlane, jednak w konfiguracji bloku znajduje sie takie cos

 

<?phpprint phptemplate_dowiedz_sie_wiecej();

I to wszystko.

 

Nic nie dziala. Przeklejalem, kopiowalem, wklejalem, zmienialem. Jesli tutaj nie znajde pomocy to chyba uznam to za niewykonalne.

[ULLISSES]

Rzuciłem okiem jeszcze raz do kodu.

Wszystkie bloki po lewej to zwykłe bloki (utworzone ręcznie) dostępne w tym panelu.

Twój blok to natomiast "block-menu-secondary-links" czyli blok "secondary menu" (standardowo dostępny w Drupalu).

 

Robisz teraz tak:

1. Znajdujesz na liście bloków te, które wyświetlane są z lewej strony.

2. Wchodzisz w konfigurację dowolnego i kopiujesz zawartość.

3. Dodajesz nowy blok TUTAJ (link w poprzednim poście coś się popsuł)

4. Wlepiasz skopiowany kod + ustawienia z tego, z którego kopiowałeś.

5. Modyfikujesz jego zawartość - zapewne linijki:

(..)<a href="/oprogramowanie">oprogramowanie</a>(..)<li class="leaf first bmsli lioprogramowanie"><a href="/oprogramowanie/crm_berberis">System Berberis</a></li><li class="leaf bmsli"><a href="/oprogramowanie/n-expert">N-Expert</a></li><li class="leaf last bmsli"><a href="/oprogramowanie/porsenna_dss">Porsenna</a></li><li class="leaf more bmsli"><a href="/oprogramowanie">więcej</a></li>(..)

Kwadraty nie znikną po wywaleniu stylów, bo jak pisałem wcześniej, są obrazkiem w kodzie, a nie tłem obiektu w stylach:

<img alt="" src="/sites/all/themes/bms/images/kwadraty.png" class="kwadraty" id="kwadraty-oprogramowanie">

[sector]

Wielki dzieki ULISSES za poswiecenie mi czasu. Jutro z samego rana sie za to zabiore! i dam znac z postepu pracy!

[sector]

Wielkie dzieki ULISSES. Po raz kolejny mi juz pomogles.

Stworzylem nowy blok i ustawilem tam kodowanie HTML. W firebugu pozmienialem sobie co i jak. W prawdzie nie stworzylem nowych klas a wykozystalem juz istniejace i wkleilem swoj kod. I dziala! \o/

 

Nie moglem tego zrobic wczesniej bo ten blok, ktory byl dodany jako 'inne' byl jakis inny i nie bylo mozliwosci wyboru kodowania.

 

Tak czy inaczej dziekuje bardzo! Masz u mnie duze piwo! :) :banana:

Edytowane 26 Maja 2010 przez sector

[ULLISSES]

Jeśli mogę coś zasugerować, to wywaliłbym ten kwadracik, który jest w lewym dolnym rogu strony. Znajdziesz go w kodzie skórki na samym dole, po skryptach Google.

 

I jeszcze zmienił kolor przycisku przy wyszukiwarce na taki, jak kolor linków w menu lub tło strony po prawej.

 

Na koniec przeniósł wyszukiwarkę pod bloki menu i przerzucił link do RSS w bardziej widoczne miejsce.

[sector]

Juz wywalilem kwadrat. Faktycznie jakos podczas moich nieudolnych prob musial mi sie jakos wkrasc blad i nie skasowalem tego. Takze to juz jest fixed.

 

Co do reszty. Jak ktos bedzie mnie cisnal znowu zeby to zrobic, to nie bede mial wyjscia a na chwile obecna wole nie ruszac bo bedize tak jak w przypadku kwadratow :) Niestety webmaster ze mnie marny i znacznie bardziej wole pisac programy/skrypty anizeli pisac www itp. a juz zwlaszcza w drupalu :)

 

Co do rss to dla mnie ta ikonka moglaby wogole zniknac bo w FF i tak wyswietla sie obok paska adresu i ja zawsze z tego miejsca kozystam.

 

Reasumujac, chcieli zebym zmienil to zminilem. Jak im sie podoba to mi rowniez :)

Dzieki jeszcze raz za wyczajenie bledu i pomoc! c[_]