Данная информация будет основана на дизайны, которые делаются через стиль.
Как корректно вставить изображения для своих иконок через стиль, чтобы они не заезжали на текст и вообще выглядело все именно так, как больше всего хочется?
Этот вопрос задают многие, которые только начинают осваивать просторы CSS и НТМL при создании собственного дизайна. Хочу вам в этом помочь. Поэтому постараюсь как можно подробней расписать эти моменты.
При создании дизайна индивидуальные иконки играют свою роль. От чего может зависеть закончен дизайн или напротив его ещё надо доделать. Так вот для начала вам надо зайти в Администрация --- Стиль, там сначала ориентироваться на первое окошко (Структура style.css).
В: Что нужно там найти?
О: Найти нужно C2 Table layout, дальше находим С2.14. На форумах, где дизайн в стиле делается первый раз прописаны С2.14, С2.15 и С2.16. Для того, чтобы иконки корректно отображались на форуме, вам надо удалить С2.16 и забыть о нем, пока не начнете делать дизайн на форуме, где это ещё не делалось. Дальше вы заменяете С2.14 и С2.15 на вот это:
/* C2.14 */
.punbb td div.tclcon {
margin-left:20px;
}
/* C2.15 */
.punbb div.icon {
float: left;
display: block;
width: 50px;
height: 50px;
margin-left: 15px;}
С2.14 отвечает за текст, который обтекает нашу иконку. С2.15 - отвечает за сами иконки.
В: Что за что отвечает?
О: margin-left:20px; - за расстояние между границей поля и текстом с левой стороны форума, чем больше число, тем больше расстояние от границы до текста, но при этом становится больше расстояние между иконкой и текстом. Если меняет расположение иконки, то left заменяем на right.
float: left; - с какой стороны будут располагаться иконки: слева или справа. На многих форумах иконки расположены около центра, значит у них прописано float: right.
width: 50px; - ширина иконки
height: 50px; - высота иконки
margin-left: 15px; - расстояние между иконкой и границей. Меняете расположение иконки, меняете left на right
В: Куда вставляем изображения для иконок?
О: В Цвета style_cs.css. Там находим CS4 Post status icons и заменяем все то, что там стоит на вот это:
/* CS4 Post status icons
-------------------------------------------------------------*/
#pun-main table Div.icon {padding-left: 35px; padding-top: 15px; padding-bottom: 20px;}
Div.icon {
background-image : url(ваша картинка);
background-repeat: no-repeat;
}
TR.inew Div.icon {
background-image : url(ваша картинка);
background-repeat: no-repeat;
}
TR.iclosed Div.icon {
background-image : url(ваша картинка);
background-repeat: no-repeat;
}
TR.isticky Div.icon {
background-image : url(ваша картинка);
background-repeat: no-repeat;
}
Div.icon - старые сообщения
TR.inew Div.icon - новые сообщения
TR.iclosed Div.icon - закрытые сообщения
TR.isticky Div.icon - важные сообщения
Теперь нажимаем на кнопку сохранить и смотрим результат.
by Suo
