Как да си направим модул за instantcms всеки модул като цяло - zuhernitsa - личен уеб сайт DJ Zuher

Това е, което ние ще направим:

За да се даде един стил на всички блокове на вашия сайт предлага да се възползвате от контейнера

Сега ние определяме структурата. ние имаме един блок, който съдържа заглавието и тялото на самата единица, тоест, текстови изображения и всички други неща. И като резултат имаме тази структура:

От това можем изгради блок схема.

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

Виж какво имаме:

На следващо място, ние трябва да CSS. Свържете го като отделен файл или да пишете код директно в тялото, мисля, че това ще бъде без проблеми))) Във всеки случай, аз даде линк как да се свържете на CSS към документа.

На първо място, ние се справят със самия блок, okantuem нашата рамка единица, това е направено с помощта на граничен екип. и определете блок с размери екипи ширина и височина

граница: 1px твърдо # 000; / * Твърд граница от 1 пиксел дебел черен цвят * /

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

Височина: 400 пиксела; / * Височина на контейнера 400 пиксела * /

Виж какво имаме:

Сега ние трябва да се определи заглавния блок, ние трябва да се боя, че синьо, тире 1 пиксел граница да се направи по-светъл цвят, боя буквите в жълтия цвят, промяна на размера на шрифта и добавите малко птица. За да направите това, напишете друга част от кода.

.титли
цвят: # FFFF00; / * Сложете жълт цвят на шрифта * /
фон: URL (galka.png) никой не се повтори # 3333CC; / * Подплънки синьо контейнер с картина на основата на място без повторение * /
марж: 2px; / * Padding около контейнера 2 пиксела в кръг * /
граница: 1px твърдо # 0099FF; / * Рамка около контейнер 1 пиксел дебел твърд син цвят * /
шрифта: 18 пкс; / * Размер на шрифта на 18 пиксела * /
шрифт тегло: удебелен шрифт; / * Получерен шрифт * /
височина: 35px; / * Височина на контейнера 35 пиксела * /
>
.заглавия р
уплътнение ляв: 27px; / * Header ляв отстъп 27 пиксела * /
Онлайн-височина: 0px; / * Височина на текст линия 0 пиксела * /
>

Виж какво имаме:

Ами, по принцип, както и всички остава само да се определи текстовия блок, мисля, че е необходимо да се направи по-дребен шрифт и добавяне на подложка от двете страни на пикселите по този начин, пет от всяка страна. За да направите това, добавете още едно парче код.

Не забравяйте, че чрез намаляване на шрифта, ние също така да намали височината на блока, така че не забравяйте да промените височината, въпреки че на практика то обикновено не е уточнено височината на модула, ако блокирате една и съща за всички елементи на сайта, в този случай е по-добре да се добави долното поле долна граница: 15px ; за БЛОК клас

Виж какво имаме:

Сега погледнете какво може да се случи, ако премахнете ширината и височината на блока, но ги поставя в това, което е трудно мрежа, шаблона на сайта, или повече в някои боклук. Аз използвам това за редовен маса. Спомням си в CSS премахване на височината и ширината на блока и добавяне на долното поле, напишете кода, няма да се dopetril))) мисля, че се има предвид, подробен текст vysheiduschy))))

Ето един primerchik:

Ширината на 250rh на колона

Ширината на 350rh на колона

Висока точност производство на дървени трупи калибрирани дървен материал може да бъде избегната, характерни за конвенционален трупи редуване

Wide средата на блок Б

Висока точност производство на дървени трупи калибрирани дървен материал може да бъде избегната, характерни за конвенционалните трупи cheredovaniyaVysokoy

Wide блок в средата

Нека поговорим за InstntCMS модули са абсолютно не се различава от това, което ние сега направихме дръжките, като единствената разлика е, че те не трябва да попълните съдържание, прави всичко, двигател. Всички правила в стила лист. Файл, който е в папката с вашия модел по пътя шаблони / шаблон / CSS / styles.css

Търсим има такъв запис:

#left .module, #right .module граница: 1px твърдо # 9DB0BC;
подложка: 0px;
марж-отдолу: 2px;
>

#left .moduletitles, #right .moduletitles шрифта: 14px;
шрифт тегло: удебелен шрифт;
текст-приравни: център;
марж-отдолу: 6px;
фон: URL (/templates/_default_/images/modtitles.jpg) повторете-х # 9DB0BC;
подложка: 0px;
височина: 34 пкс;
Онлайн-височина: 34 пкс;
гранично-отдолу: твърда 1px # 9DB0BC;
>
#left .modulebody, #right .modulebody подложка: 10px;
фон-цвят: #FFFFFF;
>

#center .moduletitles шрифта: 18 пкс;
текст-трансформация: главни букви;
гранично-отдолу: твърда 1px # 7192A6;
цвят: # 7192A6;
>
#center .modulebody подложка: 10px;
фон-цвят: #FFFFFF;
>

Ето какво ни модули в instantcms обръщат внимание #left идентификатори, #right, #center. Ако сайтът наляво, надясно и централни модули няма да бъдат визуално различни, а след това е достатъчно да се направи един комплект от тези записи. Между другото.

Във всеки случай, аз ви кажа как да се организира позициите в модела instantcms

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