Небольшая коррекция css

[Red Drag 18]

Считаю нужным немного подправить файл engine/skins/chosen/chosen.css. А именно. При верстке шаблона, основного на css фреймворке, столкнулся с проблемой отображения поля выбора категории:

Код в фремворке который искажает отображение:

*,

*:before,

*:after {

  -webkit-box-sizing: border-box;

	 -moz-box-sizing: border-box;

		  box-sizing: border-box;

}

Решил проблему путем правки файла chosen.css. Добавил три строчки:

.chzn-container-multi .chzn-choices .search-field input {

  color: #666;

  background: transparent !important;

  border: 0 !important;

  font-family: sans-serif;

  font-size: 100%;

  height: 15px;

  padding: 5px;

  margin: 1px 0;

  outline: 0;

  -webkit-box-shadow: none;

  -moz-box-shadow   : none;

  -o-box-shadow	 : none;

  box-shadow		: none;


  -webkit-box-sizing: content-box;

  -moz-box-sizing: content-box;

  box-sizing: content-box;

}

*последние три строки

Не знаю насколько это решение правильно, но проблему оно решило. Просьба пофиксить это в следующем релизе.

Сайт на локалке, версия 10.0

[celsoft 6 072]

Red Drag,

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

[Red Drag 18]

При верстке за основу брал дефолтный файл addnews, на первых строчках которого:

<link rel="stylesheet" type="text/css" href="engine/skins/chosen/chosen.css"/>

<script type="text/javascript" src="engine/skins/chosen/chosen.js"></script>

<script type="text/javascript">

$(function(){

$('#category').chosen({allow_single_deselect:true, no_results_text: 'Ничего не найдено'});

});

</script>

Насколько я понял этот код заменяет стандартную формы выбора категории, на форму из админпанели. Манипуляции в css файлах шаблона никаких действий не произвели. Так как в главном файле стилей прописан код:

*,

*:before,

*:after {

  -webkit-box-sizing: border-box;

		 -moz-box-sizing: border-box;

				  box-sizing: border-box;

}

мешает нормальному отображению именно "*". Мешает она кстати, как оказалось ещё и выводу на странице добавления новости ещё и обоим wysiwyg редакторам. А без этого когда шаблон фреймворк отказывается нормально отображать страницы

[celsoft 6 072]

Red Drag,

Ну так стандартный шаблон, это лишь демо. И ключевая строка в нем:

<link rel="stylesheet" type="text/css" href="engine/skins/chosen/chosen.css"/>

[/CODE]

которую вы можете и должны заменить на свою, а за образец CSS взять код из engine/skins/chosen/chosen.css. Демо шаблон, на то и демо чтобы демонстировать как можно делать то или иное действие.

[Red Drag 18]

Red Drag,

Ну так стандартный шаблон, это лишь демо. И ключевая строка в нем:

<link rel="stylesheet" type="text/css" href="engine/skins/chosen/chosen.css"/>

которую вы можете и должны заменить на свою, а за образец CSS взять код из engine/skins/chosen/chosen.css. Демо шаблон, на то и демо чтобы демонстировать как можно делать то или иное действие.

Хорошо. А проблему с редакторами так решить уже не получится?

[celsoft 6 072]

Red Drag,

Не нужно просто применять стили ко всему как вы это делаете в строчках

*,

*:before,

*:after {

  -webkit-box-sizing: border-box;

                 -moz-box-sizing: border-box;

                                  box-sizing: border-box;

}

[/CODE]

если вам нужны эти свойтва определенным элементам, то к ним их и нужно применять.

[Red Drag 18]

Это слишком тяжело. Я лишь практикуюсь в верстке и поэтому за основу взял бустрап фреймворк css. И там эти стили применяются к 3 файлам.

[SaD 16]

Решил проблему путем правки файла chosen.css. Добавил три строчки:

.chzn-container-multi .chzn-choices .search-field input {

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

}

Эти строчки, не обязательно вставлять в engine/skins/chosen/chosen.css. Их можно вставить и в любой CSS файл своего шаблона. Если правило не захочет перезаписываться, то всегда можно сделать так:

box-sizing: content-box !important;[/CODE]

[Red Drag 18]

Решил проблему путем правки файла chosen.css. Добавил три строчки:

.chzn-container-multi .chzn-choices .search-field input {

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

}

Эти строчки, не обязательно вставлять в engine/skins/chosen/chosen.css. Их можно вставить и в любой CSS файл своего шаблона. Если правило не захочет перезаписываться, то всегда можно сделать так:

box-sizing: content-box !important;[/CODE]

Спасибо, но правило прописывается. Проблема лишь в том, что, для выбора категории можно прописать эти стили с легкостью в своем css файле. А вот проблема с wysiwyg редакторами решить довольно тяжело:

Я считаю что bootstrap довольно распространен и считаю что DLE должен быть совместим с ним

Изменено 21 октября 2013 пользователем Red Drag

[celsoft 6 072]

А вот проблема с wysiwyg редакторами решить довольно тяжело

На самом деле не тяжело, вы же редактор размещаете в шаблоне, в определенном каком то блоке, этому блоку вы можете задать какой либо класс со свойством:

box-sizing: content-box !important;

свойства CSS наследуются и соответственно редактор который будет в данном блоке унаследует ваше нужное вам свойство.

[Red Drag 18]

А вот проблема с wysiwyg редакторами решить довольно тяжело

На самом деле не тяжело, вы же редактор размещаете в шаблоне, в определенном каком то блоке, этому блоку вы можете задать какой либо класс со свойством:

box-sizing: content-box !important;

свойства CSS наследуются и соответственно редактор который будет в данном блоке унаследует ваше нужное вам свойство.

Если бы было так легко) Пофиксить этом можно только применяя напрямую к классам:

.chzn-container .chzn-drop,

.chzn-container-single .chzn-single,

.chzn-container-single .chzn-search input, 

.chzn-container-multi .chzn-choices .search-field input {

    -webkit-box-sizing: content-box;

       -moz-box-sizing: content-box;

            box-sizing: content-box;

}

Ваш способ не сработал ;(

[SaD 16]

.redactor * {

-webkit-box-sizing: content-box;

	   -moz-box-sizing: content-box;

			box-sizing: content-box;


}

Думаю суть ясна

Изменено 22 октября 2013 пользователем SaD