Как сделать смену стилей для повторяющегося дива?

Question

[Леонид]

Доброго времени суток! Столкнулся с проблемой: Новостной сайт (DLE) Для каждой новости прописывается цвет в доп. поле. По умолчанию белый (style.css). Как можно сделать, чтобы цвет указанный в доп поле изменялся только для данной новости? То есть, получается свойства CSS одинаковые (их 3), а значения для каждой новости должно быть разное, на одной странице....

Сложно объяснить на словах постараюсь показать.

Comments

[tyzberd]

Вас интересует как это сделать в админке, или куда вывести этот цвет?

[profesor08]

Нет не понятно написал.

[Леонид]

tyzberd, profesor08, в админке нет. В админке просто создаю доп поле и к каждой новости прикрепляю цвет. А как реализовать в коде, не получается.
Добавил подробное описание с кодом

Answer 1

[Виталий Першин]

В шаблоне короткой новости добавляем в нужном месте:

[xfgiven_имяДопПоля]
style="background: [xfvalue_имяДопПоля];
[/xfgiven_имяДопПоля]

В дополнительное поле к каждой новости соответственно прописываем, только значение к свойству background

Должно получиться что-то вроде этого:

<div class="new" [xfgiven_имяДопПоля]style="background: [xfvalue_имяДопПоля];[/xfgiven_имяДопПоля]><a href="#"></a></div>

В случае если поле не заполнено, то ничего выводиться не будет

Но правильнее будет задавать стили через классы, аналогичным образом.

Comments

[Леонид]

Увы, так меняется весь фон дива, а нужно, чтобы менялся цвет у a:before , a:after
Может быть как то задать условие JS через HasClass(), пробую, но не получается. Я с js мало знаком

[Виталий Першин]

Fouks, Вам походу не подсказка нужна, а обучение основам. Если хотите менять :before то таким же самым способом необходимо вывести класс вместо цвета и через классы задавать любые дополнительные стили тем новостям к которым вы добавите эти дополнительные классы.

[Виталий Першин]

Fouks, При помощи таких конструкций вы можете менять состояние шаблона новости как угодно

[Леонид]

Виталий, Тогда это будет ограниченный цветовой диапазон, только тот который я пропишу в стилях.
А мне нужно изменить только цвет. Если были бы новости идентичны, то ради бога проблем бы никаких не было. Но это не так. И если я пропишу так, как вы написали выше, то для данного элемента это сработает, но при этом изменит другие элементы.
Допустим у 1-го элемента нужно изменить боковой градиент, меняю цвет. Он поменяется, но при этом поменяется и нижний градиент. Поэтому этот стиль заденет не эту новость, а ту у которой стоит такой градиент.

[Виталий Першин]

Fouks, Вы просто не понимаете, что вы можете сделать при помощи шаблона и доп полей любый модификацию, просто необходимо включить логику. Я не знаю сколько у вас вариантов цвета, поэтому предложил самый логичный и правильный вариант в таких ситуациях, но если у вас вариантов неограниченное количество, то замените свой псевдоэлемент before на div и стилизуйте его как хотите, тем способом который я написал в самом начале, только подключите стиль не к блоку, а к этому новому div. Или вы хотите чтобы за вас все написали и телепатически достали всю информацию, которую нужно учитывать? Вы же видите по комментариям, что кроме вас, ваш вопрос никто не понимает.

[Леонид]

Виталий, Сделал по вашему. Создал div, растянул и добавил градиент. структура:
Контент /* plus вставляется рандомно и не в каждую новость */
1-ая новость(доп класс .plus)
.new div{
to left, rgba(255, 255, 255, 0) 35%, #fff 62% ) /* полностью писать не буду, не обращайте внимание */
}
2-ая новость(без доп класса) с градиентом
.new.plus div{
to bottom, rgba(255, 255, 255, 0) 40%, #fff 67%)
}
В shortstory так:
Контент

Как мне вписать сюда доп поле чтобы если есть свойство плюс, то выводился нужный градиент с написанным в доп поле цветом.
А если плюса нет, то соответственно другой градиент с написанным в доп поле цветом?

[Виталий Першин]

Fouks, Я немного не понял, как у вас в одном дополнительном поле может быть 2 цвета?
Создайте 2 поля с разными цветами и в зависимости от класс манипулируйте цветами. Например 1 поле div-1 втрое поле div-2 если плюс есть, то div-2 не показываем, если нет, то не показываем div-1 или как-то так. Вообще сложно понять ваше тз.

[Леонид]

Виталий, Не два цвета на поле, одно, как и для всей новости. Только так как свойство plus появляется для новости рандомно, поэтому для него должен быть прописан и градиент который у свойства plus.
То есть за каждой новостью прикрепляется цвет. И смотря, есть ли у него свойство plus или нет, выводить нужный градиент с цветом.

[Виталий Першин]

Леонид, Так а в чем проблема то? Если у плюс другой градиент то переопределяйте его при помощи !important

[Леонид]

Виталий, В прошлом сообщении редактор съел код html.
Может я очень туплю, будьте добры напишите рабочую строчку сюда. Допустим доп поле с цветом [xfvalue_x]. И они повторяются

<div class="new  (plus)"><div  style="  ...  "></div>Контент</div>
<div class="new  (plus)"><div  style=""></div>Контент</div>  
<div class="new  (plus)"><div  style=""></div>Контент</div>  
<div class="new  (plus)"><div  style=""></div>Контент</div>

Пустой блок дива это градиент. Обозначил plus в скобках, то есть появляется рандомно.

[Виталий Першин]

Предположим [xfvalue_имяДопПоля] = to left, rgba(255, 255, 255, 0) 35%, #fff 62% ) или любое другое значение заданное через дополнительное поле

Отдельно в css файле прописываем стиль для новости с класcом plus. Стиль со свойством !important будет перекрывать то что мы задали через дополнительное поле:

.new.plus .new__decor{
to bottom, rgba(255, 255, 255, 0) 40%, #fff 67%) !important
}

На выходе мы получим что-то вроде этого:

<div class="new"><div class="new__decor"  [xfgiven_имяДопПоля]style="background: [xfvalue_имяДопПоля];[/xfgiven_имяДопПоля]></div>Контент</div>
<div class="new"><div class="new__decor"  [xfgiven_имяДопПоля]style="background: [xfvalue_имяДопПоля];[/xfgiven_имяДопПоля]></div>Контент</div>
<div class="new  plus"><div class="new__decor"  [xfgiven_имяДопПоля]style="background: [xfvalue_имяДопПоля];[/xfgiven_имяДопПоля]></div>Контент</div>
<div class="new"><div class="new__decor"  [xfgiven_имяДопПоля]style="background: [xfvalue_имяДопПоля];[/xfgiven_имяДопПоля]></div>Контент</div>

В итоге, все стили класс .new__decor будут задаваться через дополнительное поле, но если у какого-то из блоков появиться класс .plus, то он будет перекрыт стилем из css файла

[Леонид]

Виталий, Очень хорошая идея засунуть в доп поле всё значение. Я почему то об этом не подумал.
Но если у нас будет plus, то он будет всегда белый, а нужно, чтобы цвет сохранялся.
Что бы новость с красным боковым градиентом при появлении plus была с этим же красный, но уже с нижним градиентом.

[Леонид]

Уже пол дня сижу думаю, надежду на html и css потерял, пробую через js, но так как знания поверхностные, не выходит

[Виталий Першин]

Леонид, Я вас вообще не понимаю. Я уже за вас все написал. Если вам нужно дополнить стили у плюса, а не заменить, то берите и дополняйте таким же способом через ксс файл, например для другого блока назовите его plus__decor и стилизуйте

[Леонид]

Виталий, Хорошо, вы не совсем допоняли, но дали правильный ход мыслей! Спасибо за потраченное время

Answer 2

[Stalker_RED]

Оно?

Comments

[Леонид]

Немного не то, постарался написать подробно с кодом.