. Как сделать модуль для InstantCMS и любой модуль вообще - Зухерница - личный сайт диджея Зухера

 

 

Кто онлайн?
Пользователей: 0
Гостей: 20

Как сделать модуль для InstantCMS и любой модуль вообще

Эту статью я хочу посвятить оформлению каких либо блоков на любом сайте. Все сайты, в основном состоят из набора готовых блоков, которые разложены на рабочей поверхности страницы. И не важно формирует ли их движок или ты втыкаешь их ручками, разницы нету абсолютно никакой. Чтобы в дальнейшем твой сайт можно было быстро изменить или переиначить, или даже просто что то добавить, советую тебе соблюдать простейшие правила. Придумай для себя конструкцию блока. Я сейчас для примера беру простейшую конструкцию самого что ни на есть типового блока. Пусть это будет маленький рекламный блок.

Вот что мы будем делать:

 

Для придания единого стиля всем блокам твоего сайта предлагаю воспользоваться контейнером <div>

Теперь определимся со структурой : у нас есть блок в котором находится заголовок и само тело блока, то есть текст картинки и всякая прочая гадость. И в итоге у нас получается такая структура:

<div id="block"> <!--открываем контейнер блока-->

<div class="titles"></div> <!--контейнер с заголовком-->

<div class="bodyblock"></div> <!--контейнер с телом блока-->

</div> <!-- закрывем контейнер блока -->

Исходя из этой схемы строим блок.

<div id="block">

<div class="titles">Рекламный блок</div>

<div class="bodyblock"><p>Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередования в обязательной последовательности комель к вершине и их кропотливой подгонки друг к другу. Благодаря высокому качеству обработки поверхностей и одинаковому диаметру, бревенчатые дома не требуют отделки.</p><p align="center"><img src="probka.jpg" width="78" height="80" /></p>

</div>

</div>

 

Смотрим что у нас получилось :

Рекламный блок

Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередования в обязательной последовательности комель к вершине и их кропотливой подгонки друг к другу. Благодаря высокому качеству обработки поверхностей и одинаковому диаметру, бревенчатые дома не требуют отделки.

*-*-*-*-*-*

Дальше нам потребуется CSS. Подключаем его отдельным файлом или пишем прямо в теле кода, думаю в этом проблем не будет ))) На всякий случай дам ссылку как подключить CSS к документу.

В первую очередь обработаем сам блок, окантуем наш блок рамкой, делается это с помощью команды border, и зададим размеры блока командами width и height

/*создаем класс */

#block

{

border:solid 1px #000; /*сплошной бордюр толщиной в 1 пиксел черного цвета*/

width:250px; /*Ширина контейнера 250 пикселов*/

height:400px;/*Высота контейнера 400 пикселов*/

}

 

Смотрим что у нас получилось :

Рекламный блок

 

Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередования в обязательной последовательности комель к вершине и их кропотливой подгонки друг к другу. Благодаря высокому качеству обработки поверхностей и одинаковому диаметру, бревенчатые дома не требуют отделки.

*-*-*-*-*-*

Теперь нам нужно привести в порядок заголовок блока, нам нужно закрасить его в синий цвет, сделать отступы в 1 пиксел, сделать рамку более светлого цвета, окрасить буквы в жёлтый цвет, поменять размер шрифта и добавить птичку. Для этого пишем ещё один кусок кода.

.titles
{
color:#FFFF00;
/* ставим желтый цвет шрифта*/
background:url(galka.png) no-repeat #3333CC;
/* подложка контейнера синего цвета с рисунком из корня сайта без повтора*/
margin:2px;
/* отступы вокруг контейнера 2 пиксела по кругу*/
border:solid 1px #0099FF;
/* рамка вокруг контейнера сплошная толщиной 1 пиксел голубого цвета*/
font-size:18px;
/* размер шрифта 18 пикселов*/
font-weight:bold;
/*шрифт жирный*/
height:35px;
/*высота контейнера 35 пикселов*/
}
.titles p
{
padding-left:27px;
/* отступ заголовка слева 27 пиксел*/
line-height:0px;
/*высота линии текста 0 пикселов*/
}

 

 

Смотрим что у нас получилось :

Рекламный блок

Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередования в обязательной последовательности комель к вершине и их кропотливой подгонки друг к другу. Благодаря высокому качеству обработки поверхностей и одинаковому диаметру, бревенчатые дома не требуют отделки.

*-*-*-*-*-*

Ну вот впринципе и все, осталось только привести в порядок текст блока, думаю надо сделать поменьше шрифт и добавить отступы по бокам пикселей этак по пять с каждой стороны. Для этого добавляем ещё один кусок кода.

.bodyblock
{
padding-left:5px;
padding-right:5px;
font-size:9px;
color:#333333;
}

 

Не забываем, что уменьшив шрифт, мы так же уменьшаем высоту блока поэтому не забудьте поменять высоту, хотя на практике обычно высота модуля не указывается, если у вас блок одинаковый для всех элементов сайта, в этом случае лучше добавить нижний отступ margin-bottom:15px; для класса #block

 

Смотрим что у нас получилось :

Рекламный блок

Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередования в обязательной последовательности комель к вершине и их кропотливой подгонки друг к другу. Благодаря высокому качеству обработки поверхностей и одинаковому диаметру, бревенчатые дома не требуют отделки.

*-*-*-*-*-*

Теперь смотрите что может получиться если убрать ширину и высоту у блоков но разложить их в какую то жёсткую сетку, шаблон сайта или ещё в какую херню. Я использую для этого обычную таблицу.... Напоминаю в CSS убираем высоту и ширину блока и добавляем нижний отступ, писать код не буду думаю сами допетрите ))) Учитывая подробный вышеидущий текст ))))

Вот такой примерчик:

Ширина столбика 250рх
Ширина столбика 350рх
Ширина 100рх

Рекламный блок

Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередования в обязательной последовательности комель к вершине и их кропотливой подгонки друг к другу. Благодаря высокому качеству обработки поверхностей и одинаковому диаметру, бревенчатые дома не требуют отделки.

Ещё один

Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередования

Широкий Блок В середине

Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередованияВысокой

Широкий блок в середине

Высокой точностью изготовления оцилиндрованного калиброванного бревна можно избежать характерного для обычного бревна чередованияВысокой

Узенький

текст текст текст текст текст текст текст текст текст текст текст текст

Узенький

текст текст текст текст текст текст текст текст текст текст текст текст

А теперь поговорим про модули InstntCMSони абсолютно ничем не отличаются от того, что мы сейчас сделали ручками, разница только в том, что контентом их наполнять не надо, всё делает движок. Всё правим в таблице стилей. Файл который находится в папке с твоим шаблоном по пути templates/шаблон/css/styles.css

Ищем там такую запись :

#left .module, #right .module {
border: 1px solid #9DB0BC;
padding: 0px;
margin-bottom:2px;
}

#left .moduletitles, #right .moduletitles{
font-size: 14px;
font-weight:bold;
text-align:center;
margin-bottom: 6px;
background:url(/templates/_default_/images/modtitles.jpg) repeat-x #9DB0BC;
padding: 0px;
height: 34px;
line-height:34px;
border-bottom:solid 1px #9DB0BC;
}
#left .modulebody, #right .modulebody {
padding: 10px;
background-color:#FFFFFF;
}

#center .module{
padding: 10px;
margin-bottom:2px;
}

#center .moduletitles{
font-size:18px;
text-transform:uppercase;
border-bottom:solid 1px #7192A6;
color:#7192A6;
}
#center .modulebody {
padding: 10px;
background-color:#FFFFFF;
}

Вот так выглядят наши модули в instantcms обрати внимание на идентификаторы #left, #right, #center . Если на сайте левые, правые и центральные модули отличаться не будут визуально, тогда достаточно сделать один комплект этих записей. Кстати...

На всякий случай расскажу как расставить позиции в шаблоне instantcms

Позиция модуля в шаблоне выглядит так :

<div id="здесь как раз вставляем тот самый идентификатор"><?php cmsModule("left"); ?></div>

Ну вот вроде и все по поводу модулей в инстанте и вообще всяческих блоков на сайте. Надеюсь кому то это поможет, а такие найдутся обязательно. Все эмоции и пожелания высказываем в комментах ))))

Рейтинг: +2 Голосов: 2 16999 просмотров
Зухер # 5 марта 2011 в 23:25 0
Движок пожрал половину тегов ))) Мля !!! Сейчас буду что то думать. Думаю смысл статьи понятен ну а то что модули выглядят не так как положено ))) Поверьте не слово - они правильные ))) Скоро решу проблему с отображением своих &quot;потуг&quot;
Зухер # 18 марта 2011 в 12:46 0
Ну вроде выправил )))
Вован # 9 мая 2011 в 20:22 0
Подскажите как добавить позицию для модуля в определенное место (на примере дефолтного по центру над горизонтальным меню) для вывода какого нить информера.В html и css я не разбираюсь (комп меньше года назад купил) а по instantcms инфы мало, на оф сайте инвайты нужны чтоб зарегиться. Помогите чем сможете
Зухер # 10 мая 2011 в 10:15 0
В последней врезке кодинг как раз написано как это сделать )))
Например нам нужна позиция "reklama"
Открываем файл position.txt и дописываем туда в новую строчку "reklama" конечно же без кавычек. Потом открываем файл самого шаблона и в том месте, где должен выводится модуль ставим такое дело "<div id="reklama"><?php cmsModule("reklama"); ?></div>" Всё готово позиция появилась в шаблоне и в админке.
Теперь в файле style.css добавляем класс .reklama{} и приводим внешний вид в порядок, если в этом модуле будут только баннеры, то можно css не задействовать, а отредактировать методами HTML прямо в шаблоне
Алена # 28 ноября 2011 в 21:29 0
Прикольный у Вас сайт :))) Очень необычный дизайн. Не могу сказать, что мне, как женщине он понравился, но очень такой живой. И мышка у вас настоящая прямо, и мурашки или тараканчики - не знаю, но тоже прям настоящие. И вообще флэш - супер!
Елена # 29 июля 2012 в 01:51 0
Здравствуйте! Подскажите, почему на сайте http://vkusno-gotovit.ru/ все правые модули немного съехали? А поиск вообще пропал? Заранее благодарна.
Зухер # 29 июля 2012 в 11:25 0
Смотрите стили CSS.
сразу же что я смог увидеть.
Картинка для заголовков модуля меньше чем ширина модуля.
Отступы внутри модулей больше чем нужно(поиск поэтому и пропал)
Советую обратить внимание на строчку верхнего меню. Попасть в раскрывающееся меню практически невозможно.
У вас в основном беда с CSS - используйте firebug надстройку для firefox - очень удобная штука
Катя # 9 ноября 2012 в 00:55 0
Добрый вечер!Извини может не по теме но все таки, создала новый модуль для вывода новостей,новости выводит все ок,но сам модуль и то что он выводит вижу только когда на сайте под админом,в чем может быть проблема?
Зухер # 9 ноября 2012 в 09:57 0
В настройках есть такой пунктик "Доступ"


Второй вариант позиция модуля показывается только админам (смотрите шаблон)

Извините, но телепатия сегодня не мой профиль )))) Как вариант могу конечно посмотреть, но мне нужны для этого 1. доступ к хостингу 2.доступ в админку
Shahin # 23 ноября 2012 в 05:08 0
Здравствуйте, а не знаете как музыку на сайт загружать и прослушивать?
DJ Zuher # 23 ноября 2012 в 09:44 0
Знаю, честное слово ))) Но об этом другая грустная история )))
Shahin # 23 ноября 2012 в 15:30 +1
здравствуйте. Попробывал сделать как тут описано, но не получилось. Хочу сделать так чтобы колонии sidibar были с лева и другая с права. По вашему описанию для примера сделал так: в position прописал r_sidibar и в template.php добавил: и ничего не получилось
Зухер # 24 ноября 2012 в 22:09 0
SHAHIN:
в position прописал r_sidibar и в template.php добавил: <?php if ($mod_count['sidebar']) { ?> <div class="grid_4" id="r_sidebar"><?php $inPage->printModules('r_sidebar'); ?></div> и ничего не получилось

И не должно было получиться ))) Правильно позиция вставляется так:
<div><?php cmsModule("r_sidebar"); ?></div>
Зухер # 10 декабря 2012 в 11:59 0

Каюсь, погорячился...
Оказывается тут идёт разговор о версии 1.10, сейчас как раз делаю новый шаблон под 1.10, отпишусь по сией теме достаточно скоро, не совсем гладко прошла миграция, так что ещё разбираюсь, что к чему

--

11-02-13

1. в файл positions.txt добавляем название позиции : myposition

2. в шаблоне размещаем саму позицию для 1-10 <?php $inPage->printModules('myposition'); ?> для 1-9 <?php cmsModule('myposition'); ?>

3. в админке размещаем модуль в эту позицию, сохраняем

влад # 11 февраля 2013 в 15:54 0
так я и не понял, есть стандартный модуль mod_auth.tpl и я записываю в template.php но я его не вижу на странице
Зухер # 11 февраля 2013 в 19:12 0
Код в студию, ничего не понятно из написанного
влад # 11 февраля 2013 в 22:47 0
ну код чего всего файла template.php или код mod_auth.tpl . Возможно я не правильно высказался, вот есть стандартное окошко модуль, и по шаблону оно может быть слева либо с права, мне же нужно его в шапку в хедерк верхнему правому углу, в style.css я пытался прописать мол #right_top{ display:block; float:right; margin-top:25px; width:230px; padding-top:20px; padding-right:10px; background-color:transparent; } но в админке передав модулю новое положение right_top тот просто пропал, тут я и подумал что в template.php через absolut position в диве я смогу разместить модуль где вздумается на странице если я ему задаю положение header он верху но строго по центру и сразу улитает лого из хедера
Зухер # 12 февраля 2013 в 01:32 0

mod_auth - это шаблон модуля, насколько я понял, соответственно, что то сделано не так.
1. В позиции можно отобразить любой модуль
2. Позиция должна быть описана в файле positions.txt Вашего шаблона
3. Модуль надо направить в позицию из админки

мне же нужно его в шапку в хедерк верхнему правому углу

это делается через админку при условии что модуль обозначен в файле template.php и в файле positions.txt Вашего шаблона

Если люди недопонимают друг друга - проще прикладывать скриншот или давать ссылку на проблемное место сайта с описанием проблемы ))))

Вот тут описана иерархия шаблонов в instantcms : http://www.zuhernica.ru/zuheropotugi-html-php-css/ierarhija-shablonov-v-instantcms-dlja-teh-kto-putaetsja.html

Ольга # 26 февраля 2014 в 18:42 0
Очень хороший сайт! Что искала про InstntCMS,практически на все вопросы нашла ответы на вашем сайте. Все написано подробно и простым языком. Спасибо автору!
 
 

Сайт Захара Гулина © 2007-2017

 

Rambler's Top100           Яндекс.Метрика