PDA

Zobacz pełną wersję : zmiana wyglądu "czytaj więcej.."


jkotjkot
29-03-2018, 17:20
Witam
Chciałem sobie zmienić wygląd "czytaj więcej..." wg mnie ramka jest za duża więc,
Wszedłem sobie na templete.9.css , odnalazłem
a.btn{margin: 10px 0 0;font-size: 20px;line-height: 26px;padding: 13px 50px}
i zmieniłem na
a.btn{margin: 10px 0 0;font-size: 12px;line-height: 26px;padding: 3px 10px}

niestety po zapisaniu nic się nie zmieniło

Co źle zrobiłem?
Pozdrawiam
Bazyl
29-03-2018, 20:10
Cześć,

edytujesz właściwy plik / kod?
Link do strony?
jkotjkot
29-03-2018, 21:20
dzięki za zainteresowanie
a oto link
http://www1.gops.krzeszowice.pl/index.php
zwiastun
29-03-2018, 21:27
1. W szablonach opartych na EF4 nie dokonuje się zmian w pliakch css, tylko w plikach less, najlepiej specjalnym pliku custom.less (wpisując nowe wartości)
2. zmienić należy ustwienia dla .readmore > a.btn {} i odświeżyć pamięć podręczną przeglądarki
jkotjkot
29-03-2018, 21:34
Dzięki za odpowiedź
Czytałem, że z tymi plikami .less to nie taka łatwa sprawa ale trzeba jakoś spróbować.
taki plik custom.less mam sobie sam stworzyć? Bo nie widzę go w moich plikach.
Nie da się po prostu wejść w jkaiś tam plik .less i zmienić ot tak te wartości ?

.................................................. ......................................


Znalazłem!!!
W joomla.less znalazłem :
//readmore
.readmore {
margin: 0;
text-align: right;
> a.btn {
margin: 10px 0 0;
font-size: @JMreadmoreFontSize;
line-height: @JMreadmoreLineHeight;
padding: 13px 50px;
.icon-chevron-right {
display: none;
}

Czy wystarczy ,że tam zmienię wartość padding ?


.................................................. ...................................

Zmieniłem wartości.

Niestety przy próbie kompilacji wyskakuje błąd:

9328
zwiastun
29-03-2018, 21:46
Podejrzyj sobie kod css w narzędziach programisty (Zbadaj kod). Masz tam cztery wiersze z takim właśnie selektorem: .readmore > a.btn.


.readmore > a.btn {
margin: 10px 0 0;
font-size: 20px;
line-height: 26px;
padding: 6px 20px;
}

Poćwicz z ustawieniami, ustal jakie Ci najlepiej odpowiadają, a następnie wstaw ten kod na koniec pliku custom.less
jkotjkot
30-03-2018, 10:30
Dzięki za pomoc.
Dałem jakoś rady , ale zrobiłem to bezpośrednio w pliku joomla.less
Mam takie pytanie co do tego custom.less
Normalnie otworzyc notatnik - wkleić powyższy kod -i nazwać go custom.less i wrzucić go tam gdzie wszystkie .lessy ?
zwiastun
30-03-2018, 11:43
A nie masz pliku custom.less albo customplus.less?
jkotjkot
30-03-2018, 12:34
Oto wsyzstkie pliki .less
9329
jaceko007
30-03-2018, 14:02
jaki szablo, jaki framework?
jkotjkot
30-03-2018, 16:05
EF4 , Joomla-Monster
jaceko007
30-03-2018, 17:12
No to nie grzeb w samym szablonie, bo w razie upgradu zaorze Ci zmiany.
Jak piszą, utwórz dodatkowy arkusz css:
/templates/[template-name]/less/custom.less
https://www.joomla-monster.com/documentation/template-tutorials/how-to-add-your-own-css-styles-to-joomla-template-based-on-ef4-framework
Będzie czytany na końcu, więc tam sobie ostyluj wygląd.

[EDIT]
Widzę, że Ci już podpowiedzieli, ale może link się przyda.
Ściągnij sobie Notepad++ - taki podrasowany notatnik
jkotjkot
31-03-2018, 13:14
Dzięki za pomoc.
Mam jeszcze taki problem.
Chciałem wrócić do poprzednich ustawień wpisując pierwotne wartości Padding : 13px , 50px
Po kompilacji i zapisie pliku joomla.less ustawienia pozostały niezmienione.
Dlaczego?

--------------------------------------------------------------------------

Poprawka
W IE wygląd readmore wrócił do poprzedniej wersji, natomiast w Chrome pozostał niezmieniony.

Teraz pora na custom.less i zobaczymy co sie będzie działo
------------------------------------------------------------------------------

Uffff....Udało się
Bez bólu. Stworzyłem plik custom.less wrzuciłem tam gdzie trzeba i skompilowałem.
Działa elegancko
Dzięki za pomoc

Jest jeszcze taki problem, że w IE strona wygląda inaczej niż w chrome
Dlaczego?
jawor1104
31-03-2018, 18:37
Jaka wersja IE? czyściłeś cache przeglądarki? U mnie zarówno na chrome, FF i IE strona wygląda identycznie
jkotjkot
31-03-2018, 23:10
Dzięki za odpowiedź ale poprawiłem wielkość obrazka po prawej i wszystko sie wyrównało , natomiast jak rozmiar obrazka był większy to w IE wyświetlony był w zdefiniowanych rozmiarach a w chrome był mniejszy.

Mam jeszcze taki problem, chciałem moduł "szukaj" mieć w mniejszym rozmiarze. Dałem zbadaj element i odnalazłem wiersz odpowiedzialny za wygląd tego modułu.
Zmieniłem padding-bottom: 0px

wpisałem następujący kod do custom.less

element.style{
padding-bottom:0px;
}
Niestety nic to nie dało
Gdzie jest błąd?