PDA

Zobacz pełną wersję : JA PURITY III - brak jakichkolwiek efektów po edytowaniu pliku .css



MateuszAuto
06-08-2014, 18:25
Witam serdecznie,

Mam problem z dostosowaniem szablonu JA PURITY III w wersji "portfolio". Włączam firebuga, odszukuję element w danym pliku css, edytuję w firebugu, jeśli działa edytuję w zapleczu joomla!, odświeżam stronę, a firebug dalej pokazuje mi te same parametry co wcześniej. Układ elementów się nie zmienia. Kiedy wracam do zaplecza, lub otwieram w edytorze txt, widzę, że moje zmiany w kodzie są zachowane, jednak nie wiem czemu, cały czas nie działa to tak, jak powinno. Na początek, chciałem zmienić wysokość pola "musthead":

Zmienia w css/themes/orange/template.css
}
.page-masthead .jumbotron {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 0;
padding-right: 0;
}

Defaultowe paddingi, to 60px dla obu.

Dodatkowo, ustawiłem takie same parametry w każdym pliku tego szablonu, który nazywa się "template.css". Dalej nic.

Kotlet
06-08-2014, 19:30
Dawno nie miałem do czynienia z JA purity, ale z tego co się orientuje generuje ona CSS z plików LESS. Czyli pliki stylu co jakiś czas są generowane na nowo i nadpisują stare. Poza tym, edytowanie plików samego szablonu nie ma większego sensu, gdyż każda jego aktualizacja powoduje nadpisanie zedytowanych plików na domyślne.
Swoje zmiany najlepiej wprowadzać w pliku custom.css , jeśli takiego nie ma, możesz go utworzyć i wrzucić do folderu ze stylami szablonu. Będzie wczytany jako ostatni, czyli będzie stał "najwyżej" w hierarchi.

MateuszAuto
06-08-2014, 20:28
Dziękuję za błyskawiczną odpowiedź,

Zrobiłem tak, jak radziłeś:

.page-masthead .jumbotron {
height: 372px;
padding: 100px 0;
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 0;
padding-right: 0;
}

W pliku custom.css . Niestety nie dało efektu.
Zastanawiam się, czy nie powinienem tego jakoś zaincludować, żeby szablon mógł podczytać ten plik?

Kotlet
06-08-2014, 20:59
Musi działać :D
Nie trzeba nic includować, joomla powinna sama wczytać ten plik. Plik custom.css wrzucasz bezpośrednio do katalogu css w templatce.
Poza tym... ten twój kod jest trochę bez sensu :) . Najpierw deklarujesz padding w skróconej formie (padding: 100px 0) co oznacza tyle co
padding-top: 100px;
padding-bottom: 100px;
padding-left: 0;
padding-right: 0;
a następnie w szczegółowej formie, ponownie je deklarujesz. Już z innymi wartościami :)

MateuszAuto
07-08-2014, 19:32
Faktycznie non-sens. Przeprasza za niechlujstwo, oczywiście, tego pierwszego padding miało nie być.
Co do odpowiedzi na moje pytanie: trzeba - w katalogu LESS - utworzyć plik custom.less, po czym skompilować w zapleczu joomla! "Less to Css" i działa.
Dziękuję, temat zamknięty.

zwiastun
08-08-2014, 11:52
NIe trzeba tworzyć pliku custom.less. Trzeba stworzyć plik custom.css. Na czas prac nad szablonem kompilację LESS do CSS należy wyłączyć

MateuszAuto
08-08-2014, 12:14
Dziwne, bo próbowałem wcześniej tak, jak pisze zwiastun, co nie przyniosło skutku. Dopiero patent z custom.less przyniósł efekt.
Nie wiem, może coś źle robię. Jaka jest różnica, pomiędzy tworzeniem custom.css, a custom.less i kompilacji LESS to CSS? I po co w takim razie jest ten przycisk kompilacji?

mjmartino
08-08-2014, 12:19
Generalnie jak coś zmieniasz musisz sobie włączyć developer mode , dopiero potem jak wprowadzisz zmiany itd. wyłączasz ten tryb i kompilujesz ;)

zwiastun
08-08-2014, 12:24
Przycisk kompilacji jest po to, po co jest: by skompilować pliki LESS do CSS. Nie mam akurat pod ręką JA-Purity III, ale testowałęm tydzień temu i na pewno działa. Nie przejmuj się zadzaiłała Twoja procedura - nie ma problemu.

Łysawy
20-11-2014, 14:09
To może ja się tutaj podłączę.

Trochę znam CSS ale nie za bardzo się orientuję w Bootstrap i T3. Mam Purity III i styl corporate. Chcę pozmieniać kolory, czcionki itp wiadomo po swojemu :-) Plik custom.css działa tak jak wyżej opisaliście. Na kompie wygląda w miarę dobrze. Jednak zmiany te trochę rozwalają układ na komórce. Zmieniam kolory, czcionki i odstępy typu margin-* i padding-*. Pytanie takie czy te zmiany trzeba przepisywać kilka razy żeby do każdej rozdzielczości je dopasować? Coby strona była responsywna. Czyli czy trzeba wpisywać np. @media (min-width: 768px) {formatowanie} potem @media (min-width: 991px) {formatowanie} i tak dalej, tak jak jest to w pliku template.css

Przykłądowo w custom.css modyfikuję wielkość i grubość czionki:


.jumbotron-primary h1 {
color: #FFFFFF;
font-size: 48px;
font-weight: 600;
}


Kolejno, pytanie dodatkowe też ważne: czy nie lepiej zamiast dłubać w rzeczach typu div.custom to może wpisać we właściwościach danego elementu własną klasę .moja-klasa (Wzbogacone -> Przyrostek klas CSS modułu) i w niej formatować a nie dłubać w tym co przyszło żeby nie rozwalić całego Purity?