Наскоро получих писмо, което подчертава моята гледна точка:
В този пост ще напиша, как се работи с CSS в Joomla. В следващия пост [5] аз ще ви покажа как да добавите позиция модул за шаблон.
Това е, което (Cascading Style Sheet, Cascading Style Sheets) Wikipedia казва CSS:
Cascading Style Sheets (CSS) е един от езиците на маса / списъка от стилове, използвани за описание семантиката на презентация (тоест, на външния вид и форматирането) на документ, написан на език за маркиране (по отношение на XML или HTML). Най-честата употреба на CSS - уеб страници стил, написани на HTML и XHTML, но на езика може да се използва за всякакъв тип XML документ, включително SVG и XUL.
CSS е предназначен предимно за отделяне на семантичното съдържание на документа (написан на HTML или подобен език за маркиране) от появата на оригинала. включително елементи като оформлението, цветовете и шрифтовете.
Текстът в удебелен шрифт в този цитат от Уикипедия - най-важното нещо, което трябва да знаете за CSS, по мое мнение: разделянето на съдържанието (HTML) и визуалното представяне (CSS). Чрез използването на CSS, ние може да се използва само един, разположен в центъра на файл, който описва всички стилове. Стил е отделно от нашите Joomla статии. Този метод може да бъде доста лесно да се промени целия облик на целия сайт. Сега си представете какво би станало, ако стила, който се изисква отделно за всяка статия. Това би било кошмар, ако това би било необходимо да се направи промяна на стила - в случай на промяна на дизайна или шаблон.
Аз винаги съм много изненадан, когато прочетох туит, който казва нещо като "Joomla не поддържа IE!". Или 'Джумла не е оптимизиран за търсачките. " Разбира се, това е! Въпреки това, моделът може да не е така. Всичко зависи от това как шаблона е построен в HTML и CSS като внедряване на кода.
В повечето случаи, CSS шаблонни файлове са в папка / шаблони / TEMPLATENAME / CSS / на.
Някои шаблони използват само един CSS файл (често се нарича като template.css), а други имат множество CSS файлове. За оптимална работа на сървъра, при показване на страницата, трябва да се намали броят на CSS файлове. Това ще намали броя на исканията за сървъри, необходими за да се покаже на страницата.
Понякога можете да видите, че шаблона използва CSS главен файл, който е вносител на всички други файлове с следния синтаксис (пример):
@import URL ( "reset.css ');
@import URL ( "joomla.css ');
@import URL ( "typography.css ');
@import URL ( "modules.css ');
@import URL ( "custom.css ');
[най-добри практики с CSS]
Въпреки това, има по-добър начин. Когато искате да възстановите CSS в шаблона, използвайте отделен лист със стилове. YOOtheme действително изпълнява тази структура в шаблоните. Те закачен празен CSS файл, който има име custom.css. и който се зарежда след като всички други CSS файлове. В последния custom.css файл можете да вмъкнете цялата ми промяна на стила.
Ако искам да обновите вашия шаблон, просто можете да копирате custom.css на файла, да актуализирам шаблон за най-новата версия и след това отново се качва на сайта на стария custom.css. И това е всичко необходимо, за да промените стила!
[Не се повтаря стиловете, ако това не се изисква]
При проектирането на елементите на стила чрез CSS важно да бъдем последователни. И за да запази минималния размер на стилове на масата. Искам да кажа, че не е нужно да се повтаря стиловете, ако искате да промените елемент стил. Да предположим, че имате следните настройки за тага H1 в основния CSS (template.css или подобен) файла:
Обикновено H етикети, които са показани с удебелен шрифт (удебелен). Вие може да искате да добавите, за да направите заглавието маркер, за да се използва конвенционален, не смели, не смел стил. И в същото време не искате да се отдадоха (главни букви в) H1. Разбира се, можете да направите това, като добавите следния код, за да custom.css:
Този метод работи, но това няма да е добър код. Ти си повтаря всички стилове, дори когато само необходимостта от промяна на един стил, както и да добавите друг. Ето един по-добър начин:
В този случай, можете просто да добавите стиловете, които са различни от оригинала. Други стилове остават непокътнати.
[За да проверите CSS, използвайте Firebug]
Сега можете да започнете играта! Експериментирайте с CSS директно в прозореца на Firebug. Искате да промените поле / запълване елемент? Цветът на фона? Премахване на рамката? Всяка настройка на стила, който би искал да се опита, веднага ще бъде показана в браузъра, когато промените съответния елемент. Разбира се, ако сте опреснете страницата и след това на стила ще се рестартира и промените Ви ще бъдат загубени. Така че, когато стане доволни от направените промени, копирайте CSS във вашия custom.css файл и да го качите на сървъра.
Вижте. Също и "8 безплатни Firefox разширения, които трябва да имат всеки Joomla потребител". [3]
[Свалете от малко време живот CSS]
Аз вярвам, че всеки потребител Joomla / WEB-дизайнер трябва да бъде запознат с CSS и HTML да се знае наизуст. Това значително опростява промяната на шаблона и да я направи лесно да се постигне резултат, който искате (или нужда от клиента).
Това не е като обучение PHP. За PHP Знам много малко. Въпреки това, HTML и CSS направи втората си природа. Тогава взех времето и усилията, вложени в обучението и практиката на тези умения. Това е особено вярно за CSS.
[CSS и Joomla: защо най-лесният начин да започнете? ]
Първо трябва да се опитате да промените заглавието тагове. Искате ли да H2 с глава беше по-малка? Няма проблем :). Сега можете да промени цялата работа сайта, където се среща с H2 тагове. Други маркери могат да се променят, че маркерът се връзки (линк) етикет р (например за регулиране на разстоянието между редовете) и UL и LI маркери (списък куршум списък куршум).
Joomla: форматиране ул / списък ли с помощта на CSS стилове
Списък стил ул / ли е даден от съответния раздел на файлове шаблони \ шаблон име \ CSS \ template_css.css на. Следваща ще бъде обсъдено съдържанието template_css.css, засягащи списъците ул / Ли вид.
Миниатюра arrow.gif определя външния вид в началото на списъка. Ако по пътя към картината не е наред, или тя не съществува, вместо на изображението ще бъдат изготвени смели точка.
2. Можете да зададете отделни стилове (различен външен вид) за отделните модули на сайта. Ето, например, как да се създаде специален вид за mostread модул (Този модул показва списък с най-популярните статии на сайта), трябва само да добавите този код до края на template_css.css файл:
[Препоръчителна четене на CSS]
Друг добър източник на знания - A List Apart [4]. Това е сайт, посветен на WEB-дизайн, и го описва някои от техниките за използване на CSS. "A List Apart Magazine изследва проектирането, разработването и значението на уеб-съдържание, с особен акцент върху уеб стандарти и най-добри практики". Наистина страхотно!
Свързани статии