Перейти к публикации

как сделать разный фон в коротких новостях?


Рекомендованные сообщения

liasport.ru

 

вообщем проблема в следующем. Сделал колонку последние новости через кустом из категории 1.... в центре  в content новости из категории 2.

 

в колонке "последние новости" у меня фон меняется каждую новость чередуется.. но если новость добавляется в категорию 2 что на главной, то цвет в последних новостях становится по два белых по два серых.. потому что id считается вместе , как мне сделать может кто знает?

 

вот этот код я добавил в custom.show

 

$bg = $row['id'];    // присваиваем значение Id новости к переменной
                if ($bg%2 > ) {     // определяем остаток от деления на два,  тем самым определяем парное или непарное это число.
                $bgid = 'bg1'; // если остаток есть, значит число непарное и его значение bg1.
                }
                else {
                $bgid = 'bg2'; // остатка нет, значит число парное и его значение bg2.
                }
                $tpl->set( '{bg-id}', $bgid );  // выводим переменную в наш шаблон.
	

далее в шаблоне вывода последних новостей добавляю к class="adsad- {bg-id}"  ну и стили конечно bg1 и bg2 есть.

 

может есть способ проще , что бы не зависеть от id новости?

Ссылка на сообщение
Поделиться на других сайтах
14 минуты назад, germanydletest сказал:

http://htmlbook.ru/css/nth-child

и не надо править php файлы CMS 

я уже пытался настроить но чет не получается, если можешь помоги пожалуйста настроить

 

<div class="leftcol3">

<div class="newsdata" style="font-size: 11px; margin-bottom: 3px; color: #004671;">{date}</div>

  <div class="custom-title"><a href="{full-link}" >{title} </a> <br /><div style="float: right;">({comments-num})</div> <span class="b-n-news-com"></span></div>

  </div>

Вот мой шаблон tpl последних новостей. Буду признателен если поможешь сделать

 

Ссылка на сообщение
Поделиться на других сайтах
  <div class="leftcol3">
    <div class="lastnewsblock">
    <div class="newsdata" style="font-size: 11px; margin-bottom: 3px; color: #004671;">{date}</div>

    <div class="custom-title"><a href="{full-link}" >{title} </a> <br /><div style="float: right;">({comments-num})</div> <span class="b-n-news-com"></span></div>
    </div>
  </div>
.lastnewsblock:nth-child(odd){
  background: url(../images/b-n-gray-bg.png) #e7e5e6 0 0 repeat-x;
  padding: 5px;
  width: 194px;
  margin:  auto;
  border-bottom: 1px solid #cecece;
  overflow: hidden;
}
.lastnewsblock:nth-child(even) {
    background: #f2f2f2;
    overflow: hidden;
    padding: 5px;
    width: 194px;
    margin:  auto;
}

как то так

Ссылка на сообщение
Поделиться на других сайтах
div.leftcol3{белый фон}
div.leftcol3:nth-child(even){серый фон}


 

Ссылка на сообщение
Поделиться на других сайтах

все серое , когда смотрю код то получается все новости  .lastnewsblock:nth-child(odd)

even нету

Изменено пользователем greenzell
Ссылка на сообщение
Поделиться на других сайтах
9 минут назад, germanydletest сказал:

Вы html заменили в своём tpl файле? и кеш после этого чистили?

да, вот оставил для вас,только что, вашего примера.. зайдите на сайт посмотрите !

Ссылка на сообщение
Поделиться на других сайтах
9 минут назад, germanydletest сказал:

странно, css на месте, а html нет, вы точно в тот файл вставляете?

вы только что посмотрели? оставлял минут на 20 и вот только щас на обратно поменял!!!

 

посмотрите прямо щас, я до вашего ответа оставлю!

Изменено пользователем greenzell
Ссылка на сообщение
Поделиться на других сайтах

попробуйте так

 <div class="lastnewsblock">
    <div class="leftcol3">
    <div class="newsdata" style="font-size: 11px; margin-bottom: 3px; color: #004671;">{date}</div>

    <div class="custom-title"><a href="{full-link}" >{title} </a> <br /><div style="float: right;">({comments-num})</div> <span class="b-n-news-com"></span></div>
    </div>
  </div>

 

Ссылка на сообщение
Поделиться на других сайтах
12 минуты назад, germanydletest сказал:

попробуйте так

 

попробывал теперь все съехало и все равно одного цвета даже если выровнять!

я сижу на сайте жду вашего ответа, все изменения сохраняю до вашего ответа

Изменено пользователем greenzell
Ссылка на сообщение
Поделиться на других сайтах
13 минуты назад, greenzell сказал:

попробывал теперь все съехало и все равно одного цвета даже если выровнять!

я сижу на сайте жду вашего ответа, все изменения сохраняю до вашего ответа

у вас в my.css строка 186 

.leftcol3 {
    background: url(../images/block-news.png)   repeat-y;
    padding: 3px;
    width: 206px;
}

background: url(../images/block-news.png) 0 0 repeat-y; закомментируйте 

Ссылка на сообщение
Поделиться на других сайтах
10 минут назад, germanydletest сказал:

у вас в my.css строка 186 


.leftcol3 {
    background: url(../images/block-news.png)   repeat-y;
    padding: 3px;
    width: 206px;
}

background: url(../images/block-news.png) 0 0 repeat-y; закомментируйте 

Вернул в исходное состояние шаблон tpl  теперь зайдите и уберите эту строку, она все скажет что делает она

Ссылка на сообщение
Поделиться на других сайтах
11 минуту назад, germanydletest сказал:

Верните снова последний вариант, что это строка делает я знаю

вернул последний вариант!

Ссылка на сообщение
Поделиться на других сайтах
<div class="leftcol3 lastnewsblock">
    <div class="newsdata" style="font-size: 11px; margin-bottom: 3px; color: #004671;">{date}</div>

    <div class="custom-title"><a href="{full-link}" >{title} </a> <br /><div style="float: right;">({comments-num})</div> <span class="b-n-news-com"></span></div>
</div>
.lastnewsblock:nth-child(odd){
  background: url(../images/b-n-gray-bg.png) #e7e5e6 0 0 repeat-x;

}
.lastnewsblock:nth-child(even) {
    background: #f2f2f2;

}

 

Ссылка на сообщение
Поделиться на других сайтах
14 минуты назад, germanydletest сказал:

<div class="leftcol3 lastnewsblock">
    <div class="newsdata" style="font-size: 11px; margin-bottom: 3px; color: #004671;">{date}</div>

    <div class="custom-title"><a href="{full-link}" >{title} </a> <br /><div style="float: right;">({comments-num})</div> <span class="b-n-news-com"></span></div>
</div>

.lastnewsblock:nth-child(odd){
  background: url(../images/b-n-gray-bg.png) #e7e5e6 0 0 repeat-x;

}
.lastnewsblock:nth-child(even) {
    background: #f2f2f2;

}

 

сделал , уже похоже. не хватает только как я понял  background: url(../images/block-news.png) 0 0 repeat-y; закомментируйте 

щас попробую новость удаль и посмотрю что получится

Изменено пользователем greenzell
Ссылка на сообщение
Поделиться на других сайтах
4 минуты назад, greenzell сказал:

сделал , уже похоже. не хватает только как я понял  background: url(../images/block-news.png) 0 0 repeat-y; закомментируйте 

нет

.lastnewsblock:nth-child(odd){
  background: url(../images/b-n-gray-bg.png) #e7e5e6 0 0 repeat-x;

}

замени на

.lastnewsblock:nth-child(odd){
  background: #fff;

}

 

Ссылка на сообщение
Поделиться на других сайтах

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

 

Щас денег нету, но я не последней раз обращаюсь, отблагодарю тебя как нибудь.... Спасибо еще раз!

 

Ссылка на сообщение
Поделиться на других сайтах
7 минут назад, greenzell сказал:

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

 

Щас денег нету, но я не последней раз обращаюсь, отблагодарю тебя как нибудь.... Спасибо еще раз!

 

это удалить не забудь

.lastnewsblock:nth-child(odd){
  background: url(../images/b-n-gray-bg.png) #e7e5e6 0 0 repeat-x;
  padding: 5px;
  width: 194px;
  margin:  auto;
  border-bottom: 1px solid #cecece;
  overflow: hidden;
}
.lastnewsblock:nth-child(even) {
    background: #f2f2f2;
    overflow: hidden;
    padding: 5px;
    width: 194px;
    margin:  auto;
}

 

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...