Вопрос по поводу селектора стилей

автор Kito Июль 17th 2012, 13:39

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

Возможно ли через css задать каждой кнопке свою картинку? Если да, то может подскажите правильный код? smile

Движок: phpBB2

автор **Dana Domirani** Июль 17th 2012, 14:32

Можно попробовать.
Но, боюсь, будут проблемы с кнопкой "Новое ЛС".

автор Kito Июль 17th 2012, 15:19

Если только с ней - то что-нибудь придумаю, всетаки не самая заметная кнопка)

автор **Dana Domirani** Июль 17th 2012, 15:41

Тогда можно попробовать так:

1) В ПА > Оформление > Управление картинками - Продвинутый > Общие / Навигация:
- все кнопки, кроме "Новое ЛС" заменить на пустые — https://illiweb.com/fa/empty.gif
- кнопку "Новое ЛС" оставить (для примера — https://i.servimg.com/u/f63/15/93/74/44/novoe11.gif )
Сохранить.

2. В CSS добавить код:

Код:: .mainmenu { display:inline-block; height: 45px; overflow:hidden; vertical-align: top; /* для корректного отображения в старых браузерах */ display:-moz-inline-stack; zoom:1; *display:inline; _overflow:hidden; } /* кнопки меню*/ /* Портал */ a.mainmenu[href*='/portal']{ background: transparent url('http://i63.servimg.com/u/f63/15/93/74/44/free_020.gif') top center no-repeat !important; width: 84px; } /* Форум */ a.mainmenu[href*='/forum']{ background: transparent url("http://i63.servimg.com/u/f63/15/93/74/44/free_019.gif") top center no-repeat !important; width: 74px; } /* Календарь */ a.mainmenu[href*='/calendar']{ background: transparent url("http://i63.servimg.com/u/f63/15/93/74/44/free_022.gif") top center no-repeat !important; width: 103px; } /* Чаво */ a.mainmenu[href*='/faq']{ background: transparent url("http://i63.servimg.com/u/f63/15/93/74/44/free_023.gif") top center no-repeat !important; width: 74px; } /* Поиск */ a.mainmenu[href$='/search']{ background: transparent url("http://i63.servimg.com/u/f63/15/93/74/44/free_024.gif") top center no-repeat !important; width: 70px; } /* Пользователи */ a.mainmenu[href$='/memberlist']{ background: transparent url("http://i63.servimg.com/u/f63/15/93/74/44/free_025.gif") top center no-repeat !important; width: 142px; } /* Группы */ a.mainmenu[href*='/groups']{ background: transparent url("http://i63.servimg.com/u/f63/15/93/74/44/free_026.gif") top center no-repeat !important; width: 80px; } /* Профиль */ a.mainmenu[href*='/profile']{ background: transparent url("http://i63.servimg.com/u/f63/15/93/74/44/free_027.gif") top center no-repeat !important; width: 90px; } /* ЛС */ a.mainmenu[href*='/privmsg']{ background: transparent url("http://i44.servimg.com/u/f44/16/54/26/99/wqdi10.png") top center no-repeat !important; width: 108px; } /* Регистрация */ a.mainmenu[href*='/register']{ background: transparent url("http://i63.servimg.com/u/f63/15/93/74/44/free1_10.gif") top center no-repeat !important; width: 133px; } /* Вход */ a.mainmenu[href='/login']{ background: transparent url("http://i63.servimg.com/u/f63/15/93/74/44/free1_11.gif") top center no-repeat !important; width: 60px; } /* Выход */ a#logout { background: transparent url("http://i63.servimg.com/u/f63/15/93/74/44/free_114.gif") top center no-repeat !important; width: 65px; }

Сохранить.

У каждой кнопки заменить ссылку на изображение и значение ширины (width) на соответствующие.
Значение высоты (height) тоже необходимо заменить на высоту Ваших кнопок.

Кнопка "Новое ЛС" будет одинаковой для всех стилей.

автор Kito Июль 17th 2012, 15:52

Ясно, спасибо, а иконки тем/форумов и кнопки типа "цитата" таким же образом можно?)

автор **Dana Domirani** Июль 17th 2012, 16:41

Думаю, можно. Сейчас проверю.

автор **Dana Domirani** Июль 17th 2012, 17:02

1) Берем три пустых иконки размером 50*50 с разными адресами и ставим в ПА > Оформление > Управление картинками - Продвинутый > Иконки форума:

Категория | Форум :
https://i.servimg.com/u/f44/16/54/26/99/wqvj10.png

Категория - Новое | Форум - Новое :
https://i.servimg.com/u/f44/16/54/26/99/wqvj11.png

Категория - закрыто | Форум - Зарыто :
https://i.servimg.com/u/f44/16/54/26/99/wqvj12.png

Сохраняем.

2) В CSS ставим настройки:

Код:: /* иконка категория форум */ img[src="http://i44.servimg.com/u/f44/16/54/26/99/wqvj10.png"] { background: transparent url("http://i44.servimg.com/u/f44/16/54/26/99/diagra10.png") center no-repeat !important; } /* иконка категория форум новое */ img[src="http://i44.servimg.com/u/f44/16/54/26/99/wqvj11.png"] { background: transparent url("http://i44.servimg.com/u/f44/16/54/26/99/folder10.png") center no-repeat !important; } /* иконка категория форум закрыто */ img[src="http://i44.servimg.com/u/f44/16/54/26/99/wqvj12.png"] { background: transparent url("http://i44.servimg.com/u/f44/16/54/26/99/folder11.png") center no-repeat !important; }

Меняем ссылки в background на изображения новых иконок и сохраняем.

автор Kito Июль 17th 2012, 17:17

ага, значит все иконки тем/форумов должны быть одинакового размера, или меньше базового прозрачного тоже подойдет?

автор **Dana Domirani** Июль 17th 2012, 17:22

Можно меньше, но не больше yes

Большое фоновое изображение просто окажется урезанным по краям.

автор Kito Июль 17th 2012, 17:34

Кнопки "новая тема" и "новый ответ" таким же образом как и иконки форумов, своего класса у них нет?

автор **Dana Domirani** Июль 17th 2012, 17:35

Даже если нет класса — можно прицепиться к их src, как в предыдущем случае. Сейчас посмотрю.

Вопрос по поводу селектора стилей

Вопрос по поводу селектора стилей

Re: Вопрос по поводу селектора стилей

Re: Вопрос по поводу селектора стилей

Re: Вопрос по поводу селектора стилей

Re: Вопрос по поводу селектора стилей

Re: Вопрос по поводу селектора стилей

Re: Вопрос по поводу селектора стилей

Re: Вопрос по поводу селектора стилей

Re: Вопрос по поводу селектора стилей

Re: Вопрос по поводу селектора стилей

Re: Вопрос по поводу селектора стилей