1 (2012-12-17 19:22:46 отредактировано webmaster)

Тема: Подключение CSS стилей в Monstra CMS

В данной теме предлагаю обсуждать всевозможные способы подключения CSS стилей в шаблонах оформления Monstra CMS. Также в данной теме можно обсуждать примеры адаптирования любых HTML шаблонов под CMS Monstra.

Поделиться

2

Re: Подключение CSS стилей в Monstra CMS

webmaster пишет:

В данной теме предлагаю обсуждать всевозможные способы подключения CSS стилей в шаблонах оформления Monstra CMS. Также в данной теме можно обсуждать примеры адаптирования любых HTML шаблонов под CMS Monstra.

Нечего обсуждать. Либо через минифайл, либо через отдельный css. Или комбинирую как нравится. Других вариантов нет.

Поделиться

3

Re: Подключение CSS стилей в Monstra CMS

newbie пишет:
webmaster пишет:

В данной теме предлагаю обсуждать всевозможные способы подключения CSS стилей в шаблонах оформления Monstra CMS. Также в данной теме можно обсуждать примеры адаптирования любых HTML шаблонов под CMS Monstra.

Нечего обсуждать. Либо через минифайл, либо через отдельный css. Или комбинирую как нравится. Других вариантов нет.

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

Поделиться

4

Re: Подключение CSS стилей в Monstra CMS

Тема перенесена из: "Монстра →   Темы оформления" в "Монстра →   Разработка"

з\ы пожалуйста будьте внимательны при выборе раздела для создания темы...

по теме:
объясните более подробно что вам не понятно? и демо линк разумеется

(c) RomanArt
Создание дизайнов любой сложности для Monstra cms

Поделиться

5 (2012-12-18 16:15:30 отредактировано webmaster)

Re: Подключение CSS стилей в Monstra CMS

RomanArt пишет:

Тема перенесена из: "Монстра →   Темы оформления" в "Монстра →   Разработка"

з\ы пожалуйста будьте внимательны при выборе раздела для создания темы...

по теме:
объясните более подробно что вам не понятно? и демо линк разумеется

В общем вот demo HTML шаблона который хочется адаптировать, мне он очень понравился.

Поделиться

6

Re: Подключение CSS стилей в Monstra CMS

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

самый простой вариант это распилить его по блокам чтобы было легко редактировать

з\ы вот пример сложного шаблона от меня
http://forum.monstra.org/ru/topic/201/monstra-tm-001ra/

(c) RomanArt
Создание дизайнов любой сложности для Monstra cms

Поделиться

7 (2012-12-17 20:03:28 отредактировано webmaster)

Re: Подключение CSS стилей в Monstra CMS

RomanArt пишет:

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

самый простой вариант это распилить его по блокам чтобы было легко редактировать

з\ы вот пример сложного шаблона от меня
http://forum.monstra.org/ru/topic/201/monstra-tm-001ra/

Вооот, я столкнулся с этой проблемой и подумал что многие могут столкнуться тоже..., потому и решил что логично как-то коллективно решить такие проблемы. smile smile smile

Поделиться

8

Re: Подключение CSS стилей в Monstra CMS

Я могу вам нарисовать примерно как его распилить по коду, это ОЧЕНЬ ПРОСТО, но на это нужно ВРЕМЯ которого как всегда нету sad

(c) RomanArt
Создание дизайнов любой сложности для Monstra cms

Поделиться

9 (2012-12-17 20:24:13 отредактировано webmaster)

Re: Подключение CSS стилей в Monstra CMS

RomanArt пишет:

Я могу вам нарисовать примерно как его распилить по коду, это ОЧЕНЬ ПРОСТО, но на это нужно ВРЕМЯ которого как всегда нету sad

Просто подскажите в каком направлении идти, я в принципе не новичёк, кое что понимаю, просто я монстру только начал осваивать...
P.S.
Вроде понял в чём фишка... По ходу весь шаблон нужно распилить на блоки и, объединить все стили в один, а не через

@import url("web-style.css");

для примера и уже на страницах подключать блоки какие нужны...

Поделиться

10

Re: Подключение CSS стилей в Monstra CMS

http://s59.radikal.ru/i163/1212/ea/e74c71060a7b.jpg

Создание блоков в админке:
Админка - Блоки - Создать блок

(c) RomanArt
Создание дизайнов любой сложности для Monstra cms

Поделиться

11

Re: Подключение CSS стилей в Monstra CMS

RomanArt пишет:

Создание блоков в админке:
Админка - Блоки - Создать блок

Спасибо RomanArt, вроде всё правильно понял, попробую адаптировать как время тоже появится, результат выложу в теме.

Поделиться

12

Re: Подключение CSS стилей в Monstra CMS

Вот все теги для работы с шаблонами, например получить ссылку сайта , получить название страницы, подключить ксс джс и т.д
http://monstra.org/documentation/theme-template-tags
(если 2по5 в английском то воспользуйтесь гугл переводчиком)

пи\си заместо этого в главной странице :

<link href="css/main.css" rel="stylesheet" type="text/css">

вот это пропишите >_>

<link href="css/fonts.css" rel="stylesheet" type="text/css">
<link href="css/web-style.css" rel="stylesheet" type="text/css">
<link href="css/twitter.css" rel="stylesheet" type="text/css">
<link href="css/transitions.css" rel="stylesheet" type="text/css">
<link href="css/media.css" rel="stylesheet" type="text/css">
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css">

а вот так это будет выглядить в header.chank.php

    <!-- Styles -->
    <?php Stylesheet::add('public/themes/НАЗВАНИЕ ВАШЕГО ШАБЛОНА/css/web-style.css', 'frontend', 1); ?>    
    <?php Stylesheet::add('public/themes/НАЗВАНИЕ ВАШЕГО ШАБЛОНА/css/fonts.css', 'frontend', 2); ?>
    <?php Stylesheet::add('public/themes/НАЗВАНИЕ ВАШЕГО ШАБЛОНА/css/twitter.css', 'frontend', 3); ?>
    <?php Stylesheet::add('public/themes/НАЗВАНИЕ ВАШЕГО ШАБЛОНА/css/transitions.css', 'frontend', 4); ?>
    <?php Stylesheet::add('public/themes/НАЗВАНИЕ ВАШЕГО ШАБЛОНА/css/media.css', 'frontend', 5); ?>
    <?php Stylesheet::add('public/themes/НАЗВАНИЕ ВАШЕГО ШАБЛОНА/css/prettyPhoto.css', 'frontend', 6); ?>
    <?php Stylesheet::load(); ?>

    <?php Action::run('theme_header'); ?>

пи\си, а вообще скачайте один их моих шаблонов или дефолтный и поковыряйтесь там все очень просто.. это не для вордпресса делать шаблон где черт голову сломит....

(c) RomanArt
Создание дизайнов любой сложности для Monstra cms

Поделиться

13

Re: Подключение CSS стилей в Monstra CMS

RomanArt пишет:

а вообще скачайте один их моих шаблонов или дефолтный и поковыряйтесь там все очень просто.. это не для вордпресса делать шаблон где черт голову сломит....

Вопрос ещё на засыпку: А обязательно добавлять к тем стилям что у меня в данном шаблоне ещё и те что в шаблоне по умолчанию( bootstrap.css и bootstrap-responsive.css ) или это вообще не нужно, а то мне казалось что они тоже нужны... Не ковырял ещё движёк как следует и не разбирался что к чему в стилях шаблона по умолчанию???...

Поделиться

14

Re: Подключение CSS стилей в Monstra CMS

так поковыряйте >_<
если в вашем дизайне не используется дизайн построенный на Boot strape то и ксс вам этот подключать ненужно.. но тогда придется каждый новый плагин подгонять под свой дизайн ибо они все автоматом берут стили от bootstrap.css

(c) RomanArt
Создание дизайнов любой сложности для Monstra cms

Поделиться

15

Re: Подключение CSS стилей в Monstra CMS

RomanArt пишет:

если в вашем дизайне не используется дизайн построенный на Boot strape то и ксс вам этот подключать ненужно.. но тогда придется каждый новый плагин подгонять под свой дизайн ибо они все автоматом берут стили от bootstrap.css

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

Поделиться

16

Re: Подключение CSS стилей в Monstra CMS

RomanArt пишет:

так поковыряйте >_<

В общем наковырял я и скажу следующее:
Этот дизайн достаточно без проблем я адаптировал к другим CMS а к Монстре ну нивкакую не хочет нормально работать... Подозреваю что нужно подключать CSS стили без сжатия а с полным путём типо:

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="utf-8">
<title><?php echo Site::title(); ?></title>
<meta name="keywords" content="<?php echo Site::keywords(); ?>">
<meta name="description" content="<?php echo Site::description(); ?>">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="grey">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<meta name="robots" content="<?php echo Page::robots(); ?>">
<link rel="stylesheet" href="public/themes/response/css/fonts.css">
<link rel="stylesheet" href="public/themes/response/css/style.css">
<link rel="stylesheet" href="public/themes/response/css/media.css">
<link rel="stylesheet" href="public/themes/response/css/prettyPhoto.css">
<link rel="stylesheet" href="public/themes/response/css/transitions.css">
<link rel="stylesheet" href="public/themes/response/css/twitter.css">
<link rel="icon" href="<?php echo Site::url(); ?>favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="<?php echo Site::url(); ?>favicon.ico" type="image/x-icon">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="public/themes/response/js/jquery.nivo.slider.js"></script>
<script src="public/themes/response/js/jquery.prettyPhoto.js"></script>
<script src="public/themes/response/js/custom.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php Action::run('theme_header'); ?>
</head>

На данный момент у меня такая шапка, которая не хочет работать нормально:

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="utf-8">
<title><?php echo Site::title(); ?></title>
<meta name="keywords" content="<?php echo Site::keywords(); ?>">
<meta name="description" content="<?php echo Site::description(); ?>">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="grey">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<meta name="robots" content="<?php echo Page::robots(); ?>">
<?php Stylesheet::add('public/themes/response/css/fonts.css', 'frontend', 1); ?>
<?php Stylesheet::add('public/themes/response/css/style.css', 'frontend', 2); ?>
<?php Stylesheet::add('public/themes/response/css/media.css', 'frontend', 3); ?>
<?php Stylesheet::add('public/themes/response/css/prettyPhoto.css', 'frontend', 4); ?>
<?php Stylesheet::add('public/themes/response/css/transitions.css', 'frontend', 5); ?>
<?php Stylesheet::add('public/themes/response/css/twitter.css', 'frontend', 6); ?>
<?php Stylesheet::load(); ?>
<link rel="icon" href="<?php echo Site::url(); ?>favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="<?php echo Site::url(); ?>favicon.ico" type="image/x-icon">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<?php Javascript::add('public/themes/response/js/jquery.nivo.slider.js', 'frontend', 1); ?>
<?php Javascript::add('public/themes/response/js/jquery.prettyPhoto.js', 'frontend', 2); ?>
<?php Javascript::add('public/themes/response/js/custom.js', 'frontend', 3); ?>
<?php Javascript::load(); ?>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php Action::run('theme_header'); ?>
</head>

Поделиться

17

Re: Подключение CSS стилей в Monstra CMS

Подозреваю что нужно подключать CSS стили без сжатия а с полным путём типо:

ну и ? подключение без сжатия, работает ? @import внутри нету ?

Сайт Awilum

Поделиться

18

Re: Подключение CSS стилей в Monstra CMS

Awilum пишет:

Подозреваю что нужно подключать CSS стили без сжатия а с полным путём типо:

ну и ? подключение без сжатия, работает ? @import внутри нету ?

Ещё не пробовал, @import уже нету я вынес для примера в коде выше...

Поделиться

19

Re: Подключение CSS стилей в Monstra CMS

P.S.
только что пробовал, отлично работает метод ниже, сейчас попробую  ещё и с @import
Вот рабочий метод на данный момент, CSS стили и JS файлы с полными путями и без сжатия...

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="utf-8">
<title><?php echo Site::title(); ?></title>
<meta name="keywords" content="<?php echo Site::keywords(); ?>">
<meta name="description" content="<?php echo Site::description(); ?>">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="grey">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<meta name="robots" content="<?php echo Page::robots(); ?>">
<link rel="stylesheet" href="public/themes/response/css/fonts.css">
<link rel="stylesheet" href="public/themes/response/css/style.css">
<link rel="stylesheet" href="public/themes/response/css/media.css">
<link rel="stylesheet" href="public/themes/response/css/prettyPhoto.css">
<link rel="stylesheet" href="public/themes/response/css/transitions.css">
<link rel="stylesheet" href="public/themes/response/css/twitter.css">
<link rel="icon" href="<?php echo Site::url(); ?>favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="<?php echo Site::url(); ?>favicon.ico" type="image/x-icon">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="public/themes/response/js/jquery.nivo.slider.js"></script>
<script src="public/themes/response/js/jquery.prettyPhoto.js"></script>
<script src="public/themes/response/js/custom.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php Action::run('theme_header'); ?>
</head>

Поделиться

20

Re: Подключение CSS стилей в Monstra CMS

может быть можно как-то сделать в будущем, чтобы в файлах стилей не приходилось вводить @theme_site_url, а то при натяжке чужих шаблонов приходится лазить по css файлам

Сайт olsv64

Поделиться

21

Re: Подключение CSS стилей в Monstra CMS

хахахах я делал дизайны для более чем 15ти цмс и поверьте мне, проще монстры не бывает smile

в css файлах нужно заменить пути до картинок:
было так

../images/slide1.png

переделать в:

@theme_site_url/images/slide1.png
(c) RomanArt
Создание дизайнов любой сложности для Monstra cms

Поделиться

22

Re: Подключение CSS стилей в Monstra CMS

Я же уже говорил что не нужно использовать @import !

Сайт Awilum

Поделиться

23

Re: Подключение CSS стилей в Monstra CMS

это смешно уже smile))
открываем ксс в любом хорошем редакторе открываем функцию найти и заменить, вводим это
../images
заменить на
@theme_site_url/images

done

(c) RomanArt
Создание дизайнов любой сложности для Monstra cms

Поделиться

24 (2012-12-20 13:44:24 отредактировано webmaster)

Re: Подключение CSS стилей в Monstra CMS

Метод с @import тоже работает, вод код:

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="utf-8">
<title><?php echo Site::title(); ?></title>
<meta name="keywords" content="<?php echo Site::keywords(); ?>">
<meta name="description" content="<?php echo Site::description(); ?>">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="grey">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<meta name="robots" content="<?php echo Page::robots(); ?>">
<link rel="stylesheet" href="public/themes/response/css/main.css">
<link rel="icon" href="<?php echo Site::url(); ?>favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="<?php echo Site::url(); ?>favicon.ico" type="image/x-icon">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="public/themes/response/js/jquery.nivo.slider.js"></script>
<script src="public/themes/response/js/jquery.prettyPhoto.js"></script>
<script src="public/themes/response/js/custom.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php Action::run('theme_header'); ?>
</head>

В main.css прописываем следующий код:

@charset "utf-8";
/* CSS Document */
/* Fonts Section */
@import url("fonts.css");
/* Main CSS Section */
@import url("style.css");
/* Twitter Footer Section */
@import url("twitter.css");
/* Transition Section */
@import url("transitions.css");
/* Media Section */
@import url("media.css");
/* PrettyPhoto Section */
@import url("prettyPhoto.css");

Поделиться

25 (2012-12-20 13:47:44 отредактировано webmaster)

Re: Подключение CSS стилей в Monstra CMS

RomanArt пишет:

@theme_site_url/images

Кто бы знал что и в КСС полные пути нужно прописывать относительно корня сайта, судя по @theme_site_url/images а про поиск и замену вкурсе...

Поделиться