- Статті з категорії FAQ по шаблонах Joomla
- Як встановити новий шаблон?
- Як можна змінити шаблон?
- Як додати нову позицію в шаблон?
- Де взяти опис класів стилів Joomla 1.0?
- Як в index.php правильно поставити шлях до картинки?
- Як зробити привітання на сайті виду "Привіт Вася Пупкін"
- Кожному браузеру свій CSS
- На деяких сторінках шаблон "розвалюється". Чому і як це виправити?
- Про меню, що випадає в Joomla
- Як прибрати "Сторінка згенерована за ... ��екунд"?
Статті з категорії FAQ по шаблонах Joomla
Що таке шаблон?
Шаблон відповідає за виведення содережімого вашого сайту і його зовнішнє форматування. Під вмістом маються на увазі компоненти, модулі, статті / новини та інша статична інформація. Оформленням усього перерахованого вище займається css - стилі вашого шаблону (файл template_css.css).
За замовчуванням, Joomla! доступна до скачування з двома стандартними шаблонами. більше шаблонів ви можете знайти на сайтах, присвячених Joomla! Або, при наявності достатніх навичок, ви можете зробити свій власний шаблон.
Список встановлених шаблонів і доступні дії над ними можна побачити в "Менеджері шаблонів" (знаходиться в адмінцентрі).
Як встановити новий шаблон?
Є 2 способи установки шаблону: за допомогою інсталятора Joomla і вручну. 1. У адмінцентрі виберіть "Установка" - "Встановити варіанти дизайну" (або "Шаблони Адмінцентр, в залежності від типу встановлюваного шаблону). Далі виберіть архів з шаблоном на вашому жорсткому диску і натисніть кнопку" Встановити ".
Після установки прямуйте в "Сайт" - "Управління шаблонами" - "Шаблони сайту". Ви можете побачити назву щойно встановленого шаблону в списку інших шаблонів. Виберіть шаблон і натисніть "Зробити за замовчуванням".
2. Розпакуйте шаблон в папку на локальному комп'ютері і завантажте її по FTP на сайт в папку templates
Як можна змінити шаблон?
Шаблон - це папка, що знаходиться в папці templates вашого сайту, в якій зберігаються файли xml, php, css і зображення. Ви можете змінити ці файли через спеціальні програми або через інтерфейс Адмінцентр.
У адмінцентрі виберіть "Сайт" - "Управління шаблонами" - "Шаблони сайту". Далі виберіть шаблон, який збираєтеся змінити. Після чого натисніть кнопку "Змінити HTML" або "Змінити CSS".
CSS - це стилі вашого шаблону. За допомогою css можна зробити оформлення кожному елементу шаблону. HTML - це головний файл, в якому здійснюється виведення вмісту сайту. В папці цей файл називається index.php.
Як додати нову позицію в шаблон?
Перш за все для створення нової позиції в шаблоні, вам необхідно визначитися з назвою позиції. Існуючі позиції на сайті ви можете подивитися в "Адмінцентр" - "Управління шаблонами" - "Позиції".
Після того, як ви вибрали назву позиції, відкривайте index.php вашого шаблона і додайте рядок
<? Php mosLoadModules ( 'position_name'); ?>в потрібне місце, де "position_name" - це назва позиції.
Де взяти опис класів стилів Joomla 1.0?
Більшість необхідних класів і стилів описано в підручнику [Навчання CSS-стилів Mambo / Joomla за 5 хвилин] Плюс ви можете завантажити собі blank.css, в якому найбільш повно описані стилі. Від інших подібних відрізняє те, що всі параметри CSS вже прописані, але порожні. Залишається тільки заповнити їх.
Як в index.php правильно поставити шлях до картинки?
Як же правильно прописати шлях до картинки, що знаходиться в папці / images шаблону? Взагалі, шлях до картинки може бути заданий двома способами - відносним шляхом і абсолютним.
Абсолютний шлях:
<? Php echo $ mosConfig_live_site; ?> / Templates / <? Php echo $ cur_template; ?> /Images/spacer.gifВідносний (від кореня сайту):
templates / <? php echo $ cur_template; ?> /Images/spacer.gifПовний код:
<Img src = "templates / <? Php echo $ cur_template;?> / Images / spacer.gif" alt = "" width = "188" height = "1" />Пояснення по конструкціях php, використаним в вищенаведених прикладах:
<? Php echo $ mosConfig_live_site;?> - адреса вашого сайту. Має вигляд: __http: // localhost / або __http: //www.localhost/ <? Php echo $ cur_template; ?> - назва папки шаблону, який встановлений за замовчуванням для вашого сайту.Як зробити привітання на сайті виду "Привіт Вася Пупкін"
Якщо це необхідно жорстко зашити в шаблон, то допоможе така конструкція:
<? Php if ($ my -> id) {echo 'Привіт'. $ My -> name. '!' ; }?>Кожному браузеру свій CSS
Багато людей при створенні свого шаблону задаються питанням, чому при перегляді сайту в різних браузерах він виглядає по-різному. Це трапляється через те, що всі браузери написані не однаково і кожен браузер трактує css по-своєму. Останнім часом багато повідомлень на форумі про те, що в різних браузерах сайт відображається по-іншому. Тому я вирішив написати це повідомлення.
Зазвичай це вирішується функцією @import, але якщо вона не може бути використана, спробуйте це:
<? Php $ nav = (isset ($ _SERVER [ 'HTTP_USER_AGENT']))? strtolower ($ _SERVER [ 'HTTP_USER_AGENT']): ''; if (stristr ($ nav, "msie")) {echo "ie-css.css"; } Else {echo "templatecss.css"; }?>Вищенаведений код перевірить браузер і якщо він Internet Explorer, то підключить файл ie-css.css, якщо ж ні, то буде використаний templatecss.css. Для підтримки більшої кількості браузерів можна доопрацювати код, як це показано нижче:
<? Php $ nav = (isset ($ _SERVER [ 'HTTP_USER_AGENT']))? strtolower ($ _SERVER [ 'HTTP_USER_AGENT']): ''; // checks if browser is Internet Explorer if (stristr ($ nav, "msie")) {echo "ie-css.css"; } // checks if browser is Mozilla elseif (stristr ($ nav, "moz")) {echo "mozilla-cssfile.css"; } // checks if browser is Netscape elseif (stristr ($ nav, "ns")) {echo "netscape-css.css"; } // If browser is a different one else {echo "templatecss.css"; }?>Ось приклад, як би виглядав код в реальному сайті:
<? Php defined ( '_VALID_MOS') or die ( 'Direct Access to this location is not allowed.'); ?> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <? Php $ iso = split ( '=', _ISO); echo '<? xml version = "1.0" encoding = "'. $ iso [1]. '"?' . '>'; ?> <Html xmlns = "http://www.w3.org/1999/xhtml"> <head> <? Php mosShowHead (); ?> <Link rel = "stylesheet" type = "text / css" href = "<? Php echo $ mosConfig_live_site;?> / Templates / <? Php $ nav = (isset ($ _SERVER [ 'HTTP_USER_AGENT']))? strtolower ($ _SERVER [ 'HTTP_USER_AGENT']): ''; // checks if browser is Internet Explorer if (stristr ($ nav, "msie")) {echo "ie-css.css";} // checks if browser is Mozilla elseif (stristr ($ nav, "moz")) {echo "mozilla-cssfile.css";} // checks if browser is Netscape elseif (stristr ($ nav, "ns")) {echo "netscape-css .css ";} // If browser is a different one else {echo" templatecss.css ";}?> /> </ head> <body> <h1> The Body Text For Your Site </ h1> </ body > </ html>Є ще інший спосіб підключення певного стилю для браузера Internet Explorer:
<! - [if lte IE 6]> <link href = "templates / <? Php echo $ cur_template;?> / Css / ieonly.css" rel = "stylesheet" type = "text / css" /> <! [Endif] ->На деяких сторінках шаблон "розвалюється". Чому і як це виправити?
Причина Часто шаблони бувають зверстані на шарах (DIV) з використанням "плаваючих" елементів-блоків. Ширина цих елементів фіксована і, відповідно до стандарту, не повинна змінюватися ні в якому разі. Оскільки Internet Explorer "найрозумніший" браузер і йому закон не писаний, то він все ж розширює блоки, які, не входячи в відведені для них місця, переміщаються вниз. Простіше кажучи - вони просто виштовхуються сусідніми елементами. FF і Опера, коли вміст блоку не влазить в нього, просто накладають блоки один на одного. При цьому вміст блоків часто вилазить за їх межі. Дуже часто подібне проявляється на сторінках з таблицями і з різними фільтрами, вибором відображення і т.п. Цей "косяк" буде проявлятися на ВСІХ шаблонах, де використовуються шари (DIV) і ширина табличок занадто велика. Якби шаблон був зверстаний на таблицях, то його просто расперло б в ширину.
Як вирішити проблему? Зараз нескладно здогадатися, що треба зробити - треба зменшити ширину вмісту блоків. Необхідно відключити фільтри, поля сортування, зайві стовпці в таблиці зі списком статей. Йдемо наприклад в Меню - mainmenu - посилання на News - Latest і налаштовуємо сторінку, поки все не буде ok. Для розуміння сказаного дивимося пріаттаченний скріншот.
Помилка створення мініатюри: Немає запису
Скріншот з адміністратора Joomla Також блоки може розпирати контент, що містить нерозривні прогалини - & nbsp;Є кілька способів змінити footer сайту.
- Відредагувати файл includes / version.php. У цей файлі шукаємо рядки
Їх і треба замінювати на свій текст.
- Також можна видалити з файлу шаблону наступний код, якщо він там присутній:
- У потрібному вам місці шаблону вставити код
і створити модуль з потрібним вмістом і розташувати його в позиції footer
- Реклама знаходиться в файлі includes / footer.php.
Про меню, що випадає в Joomla
Багато людей при створенні свого власного шаблону Joomla задаються питанням: "Як краще організувати меню?". Деякі використовують Flash-меню, деякі вставляють JavaScript-меню. Я не люблю використовувати ці елементи в своїх роботах, мені подобається чистий код, не обтяжений зайвими файлами. Ймовірно, ви задасте питання: "Як же тоді зробити привабливе меню?".
Є багато способів створення привабливого меню, що випадає з допомогою CSS, в основі більшості яких лежить використання списків (li). Один з таких способів ми зараз і розглянемо нижче.
Існує меню під назвою "suckerfish" (не питайте мене, чому його так назвали) - маленький, чистий код, 12 рядків JavaScript і абсолютно безкоштовний!
Як воно виглядає, ви можете подивитися тут: http://www.htmldog.com/articles/suckerfish/dropdowns/example/
Ви могли помітити, що на стандартному модулі нормальне меню не зробити. Тому ми скористаємося додатковим модулем, який називається "Extended Menu". Знайти та завантажити його можна тут: http://extensions.joomla.org/extensions/163/details
Отже, скачайте модуль і встановіть його. Тепер його необхідно налаштувати відповідним чином. Перше, що необхідно зробити - це надати модулю "CSS-суфікс". Зазвичай, я використовую "mainnav". Після потрібно задати стиль меню - "Суцільним списком" і меню, що випадає - "Так".
Після того, як ви опублікуєте модуль в потрібній позиції, можна приступати до редагування CSS. Нижче використаний невеликий трюк, на який не знадобилося час, щоб розібратися в ньому. Але ви можете пропустити це, і та просто скопіювати весь код до себе в шаблон.
#twocols {/ * the columns that gets dropped down over yours might be different * / z-index: 20; } #Leftcol {/ * the columns that gets dropped down over yours might be different * / z-index: 10; } .Moduletablemainnav {/ * I have absolutely positioned the module, you might have a different scheme * / position: absolute; top: 187px; left: 20px; z-index: 100; font: 0 .9em Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; } #Mainlevelmainnav, # mainlevelmainnav ul {float: left; list-style: none; line-height: 1em; background: transparent; font-weight: 700; margin: 0; padding: 0; } #Mainlevelmainnav a {display: block; color: # f90; text-decoration: none; margin-right: 15px; padding: 0 .3em; } #Mainlevelmainnav li {float: left; padding: 0; } #Mainlevelmainnav li ul {position: absolute; left: - 999em; height: auto; width: 11em; font-weight: 400; background: # 36f; border: # 00C 1px solid; margin: 0; } #Mainlevelmainnav li li {width: 11em; } #Mainlevelmainnav li ul a {width: 11em; color: #fff; font-size: 0 .9em; line-height: 1em; font-weight: 400; } #Mainlevelmainnav li: hover ul ul, #mainlevelmainnav li: hover ul ul ul, #mainlevelmainnav li .sfhover ul ul, #mainlevelmainnav li .sfhover ul ul ul {left: - 999em; } #Mainlevelmainnav li: hover ul, #mainlevelmainnav li li: hover ul, #mainlevelmainnav li li li: hover ul, #mainlevelmainnav li .sfhover ul, #mainlevelmainnav li li .sfhover ul, #mainlevelmainnav li li li .sfhover ul {left : auto; z-index: 6000; } #Mainlevelmainnav li li: hover, # mainlevelmainnav li li .sfhover {background: # 039 url (../images/soccerball .gif) 98% 50% no-repeat; }Переконайтеся, що правильно встановили z-index - вони повинні обов'язково бути присутнім для упорядкування позиціонування списку. Ну, і останній штрих, потрібно додати JavaScript в ваш index.php шаблону для того, щоб всіма улюблений IE став розуміти в хаке елемент: hover для наших конструкцій.
<Script type = "text / javascript"> <! - sfHover = function () {var sfEls = document.getElementById ( "mainlevelmainnav") .getElementsByTagName ( "LI"); for (var i = 0; i <sfEls.length; i ++) {sfEls [i] .onmouseover = function () {this.className + = "sfhover"; } SfEls [i] .onmouseout = function () {this.className = this.className.replace (new RegExp ( "sfhover \\ b"), ""); }}} If (window.attachEvent) window.attachEvent ( "onload", sfHover); -> </ script>Як прибрати "Сторінка згенерована за ... ��екунд"?
У будь-якому шаблоні, де виводиться дана рядок, необхідно видалити такі рядки з index.php шаблону:
$ Tstart = mosProfiler :: getmicrotime ();на початку файлу і
<? Php echo '<div class = "small" style = "text-align: center;" > '; $ Tend = mosProfiler :: getmicrotime (); $ Totaltime = ($ tend - $ tstart); printf ( "Page generation of% f second", $ totaltime); echo '</ div>'; ?>в кінці.
Як можна змінити шаблон?Як додати нову позицію в шаблон?
Php правильно поставити шлях до картинки?
Чому і як це виправити?
?екунд"?
Як встановити новий шаблон?
Як додати нову позицію в шаблон?
Php mosLoadModules ( 'position_name'); ?
Php правильно поставити шлях до картинки?
Як же правильно прописати шлях до картинки, що знаходиться в папці / images шаблону?