Модератор форума: Yuri_G  
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Каталоги: настройка дизайна
Каталоги: настройка дизайна
Модератор форума
Сообщение # 1 | 15:36:35
Настройка вида материалов в каталогах (работаем стилями)
Новый стандартный шаблон вида материалов имеет вид:
Code
<div class="eBlock" style="padding:3px;">
<?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?>
<div class="eTitle"><a href="$ENTRY_URL$">$TITLE$</a></div>
<?if($MESSAGE$)?><div class="eMessage" style="clear:both;padding-top:2px;padding-bottom:2px;">$MESSAGE$</div><?endif?>
<?if($ATTACHMENTS$)?><div class="eAttach">Прикрепления: $ATTACHMENTS$</div><?endif?>
<div class="eDetails" style="clear:both;">
<?if($CATEGORY_NAME$)?>Категория: <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a> |<?endif?>
Просмотров: $READS$ |
<?if($USERNAME$)?>Добавил: <a href="$PROFILE_URL$">$USERNAME$</a> |<?endif?>
Дата: $DATE$
<?if($RATING$)?>| Рейтинг: $RATING$/$RATED$<?endif?>
<?if($COMMENTS_URL$)?>| <a href="$COMMENTS_URL$">Комментарии ($COMMENTS_NUM$)</a><?endif?>
</div>
</div>



Появились новые классы:

.eBlock - отвечает за общий вид контейнера с материалом.
.eTitle - отвечает за заголовок материала.
.eMessage - отвечает за вид самого материала.
.eAttach - отвечает за вид приложений к материалу (прикрепления).
.eDetails - отвечает за дополнения к материалу (категория, просмотры, кто добавил и т.д.)

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

Простенький пример оформления стилей вида материалов.

/* EntryModule Style */
.eBlock {}
.eTitle {font-family:Verdana,Arial,Sans-Serif;font-size:13px;font-weight:bold;color:#A67F48; padding: 2px 0 0 25px; background: url('https://src.ucoz.ru/t/151/14.gif') no-repeat top left; height: 25px;}
.eMessage {border:1px dashed #A67F48;text-align:justify;padding-bottom:5px;}
.eAttach {margin: 16px 0 0 0; padding: 0 0 0 15px; background: url('https://src.ucoz.ru/t/151/15.gif') no-repeat 0px 0px;}
.eDetails {border:1px dashed #A67F48;font-family:Tahoma,Arial,Sans-Serif;color:#1A1A1A;padding:10px;text-align:left;font-size:8pt;}

.eTitle a:link {text-decoration:underline; color:#A67F48;}
.eTitle a:visited {text-decoration:underline; color:#A67F48;}
.eTitle a:hover {text-decoration:underline; color:#000000;}
.eTitle a:active {text-decoration:underline; color:#000000;}
/* ------------------ */



CSS-конструктор для настройки вида материала: Перейти »
Сообщение отредактировал Selena - Понедельник, 24 Сен 2007, 23:43:10
olga2008
Сообщений: 10
Репутация: 0

Сообщение # 151 | 09:58:05
Цитата (Head-Mad)
olga2008, для начала: надо чуть внимательнее читать:
вот что у меня в шаблоне информера

Код
<table border="0" cellpadding="2" cellspacing="1" width="100%" class="infTable"><tr><td width="50%" style="font:7pt">[$DATE$]</td><td nowrap align="right" style="font:7pt"><?if($CATEGORY_NAME$)?>[<a href="$CATEGORY_URL$">$CATEGORY_NAME$</a>]<?endif?></td></tr><tr><td class="infTitle" colspan="2"><a href="$ENTRY_URL$">$TITLE$</a> <span title="Comments">(<a href="$COMMENTS_URL$"><b>$COMMENTS_NUM$</b></a>)</span></td></tr></table>

<script>  
$(document).ready(function(){  
$('#infMessage').load('$ENTRY_URL$ .eText');  
};)  
</script>

в самом информере стоит Список ID категорий: 14

а вот это то куда пихать id="infMessage", понять не могу.

Добавлено (24 Июл 2013, 09:58:05)
---------------------------------------------
что не так делаю подскажите плиз

syperbambuk
Сообщений: 3
Репутация: 0

Сообщение # 152 | 17:15:20
можно ли для каталога статей задать определенные параметры картинки в css. в какой блок нужно прописать параметры тега img. Сейчас для увеличения картинки использую конструкцию <a href="ссылка на картинку " title="Кликните для увеличения" class="ulightbox" data-fancybox-group="ultbx"> <img src="ссылка на картинку" style="width:150px;height:150px"></a>. Можно ли это все задать в таблице стилей?
Ljubasha
Сообщений: 834
Репутация: 157

Сообщение # 153 | 18:39:58
syperbambuk, Только тег img, присвойте ему свой класс(можно и без класса, но тогда "зацепятся" все теги img ) и стили можно будет прописывать в ксс.
Kotofei1194
Сообщений: 20
Репутация: 0

Сообщение # 154 | 13:09:05
Друзья, помогите, пожалуйста. На обычных мониторах сайт отображается корректно, на маленьких (типа смартфона) основной текст (который по середине) сползает вниз. А на широкоформатном мониторе: левый столбец+основной блок расположены слева и занимают ровно половину экрана, а вторую половину экрана занимает растянутый до безобразия правый столбец. Как сделать, чтобы на любом экране весь сайт отображался посередине?
Сайт http://stranstviakota.ucoz.ru/

Мой персональный сайт о путешествиях
http://stranstviakota.ucoz.ru/
Selena
Сообщений: 15657
Репутация: 1100

Сообщение # 155 | 18:08:40
Kotofei1194, это вам переделывать весь дизайн. Чтоб и на смартфоне и на широкоформатном мониторе смотрелось одинаково. Одними советами тут не отделаться. Обратитесь на http://partner.ucoz.ru/

Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
Kotofei1194
Сообщений: 20
Репутация: 0

Сообщение # 156 | 20:27:58
Selena, спасибо за совет!
Но почему надо весь дизайн переделывать? Мне кажется я где-то накосячила с размерами столбцов (пробую что-то менять, ничего толкового не выходит.
Вот мы с Вами сейчас на форуме пишем - блок посередине экрана находится, на любой сайт захожу - он по середине. Почему мой слева???
Тут на какой-то странице видела похожую проблему, так человеку подсказали что делать.

Мой персональный сайт о путешествиях
http://stranstviakota.ucoz.ru/
Selena
Сообщений: 15657
Репутация: 1100

Сообщение # 157 | 20:37:07
Kotofei1194, такой разброс размеров экрана как вы написали требует динамично эластичного типа вёрстки. А это не просто замена фиксированных размеров на проценты, это ещё и скрипты. Если умерите свои требования, то можно обойтись пересмотром стилей, но это тоже работа не на 5 минут.

Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
Ljubasha
Сообщений: 834
Репутация: 157

Сообщение # 158 | 21:46:15
Kotofei1194, Нужно перевести всё на проценты, левый сайдбар например 20%, правый тоже 20%, центр 60%,.... но это только начало, далее нужно менять все дочерние элементы... подумайте, с наскока это сделать?
Selena
Сообщений: 15657
Репутация: 1100

Сообщение # 159 | 22:52:41
Как раз сайдбарам лучше задать фиксированный размер. Насколько я поняла именно правый сильно меняет ширину на разных экранах.

Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
Ljubasha
Сообщений: 834
Репутация: 157

Сообщение # 160 | 23:39:20
Selena, Я привела "резину" начинающую, дальше..., это дальше.... блоки не стоит фиксировать.
Kotofei1194
Сообщений: 20
Репутация: 0

Сообщение # 161 | 11:30:25
Цитата Ljubasha ()
левый сайдбар например 20%, правый тоже 20%, центр 60%,
Я как раз вчера об этом подумала (есть подозрение, что шапка всё растягивает), попробую легонечко, если что верну всё назад.
Selena, Ljubasha, спасибо за советы!

Мой персональный сайт о путешествиях
http://stranstviakota.ucoz.ru/
sergej259
Сообщений: 113
Репутация: 31

Сообщение # 162 | 16:19:16
Добрый вечер всем! Помогите пожалуйста с настройкой заголовка в модуле каталога статей.

Вот код .eTitle 
Код
.eTitle a {[*]font: 14px 'Tahoma';
[*]font-weight: bold;
[*]color: #B22222;
[*]text-transform: uppercase;
[*]line-height: 25px;
}

Текст заголовка установлен с верхним регистром букв, а как сделать чтобы буквы были обычные и было видно заглавную букву?

Адрес сайта, если нужно


Ljubasha
Сообщений: 834
Репутация: 157

Сообщение # 163 | 18:26:39
sergej259, Удалить красное.

.eTitle {
color: #000000;
font: 700 14px/25px "Tahoma";
text-transform: uppercase;
}

.eTitle a {
color: #B22222;
font: 700 14px/25px "Tahoma";
text-transform: uppercase;
}
sergej259
Сообщений: 113
Репутация: 31

Сообщение # 164 | 18:43:24
Ljubasha, Удалил коды как указали, но изменений нет?
Ljubasha
Сообщений: 834
Репутация: 157

Сообщение # 165 | 19:25:55
sergej259, Не удалено...

.eTitle {
color: #000000;
font: 700 14px/25px "Tahoma";
text-transform: uppercase;
}
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Каталоги: настройка дизайна
Поиск: