Иконка ресурса

Инструкция [SVG] Красивые объявления с фоновым изображением. 2015-09-23

Нет прав для скачивания
Красивые объявления с фоновым изображением.

SOUL

АдминкА
Администратор
Сообщения
7.664
Симпатии
10.831
Баллы
266
#1
Пользователь SOUL разместил новый ресурс:

[SVG] Красивые объявления с фоновым изображением. - Красивые объявления с фоновым изображением.

Посмотреть вложение 2425

Сейчас я расскажу, как сделать такую красоту, то есть несколько объявлений с фоновым изображением и красивым оформлением.

Уже неоднократно поступали вопросы, как сделать что-то подобное, поэтому решила не тянуть и выложить здесь мануал-подарок нашему форуму от Skaiman'a.

Нам потребуется 2 png изображения 600x140px одно с именем xft_fon, другое xft_fon_2, которые будут выступать в роли наших фоновых изображений для первого и второго...
Узнать больше об этом ресурсе...
 

Skaiman

[SVG]ADD-ONS ™
Разработчик
Сообщения
6.200
Симпатии
6.020
Баллы
266
#2
Надо еще отметить, что классы .notice_2 и .notice_3, могут отличаться, это id объявлений и их надо смотреть в исходном коде или в адресной строке.
Добавлю, что это не мной придумано, статьи про объявления уже давно есть, но самое главное, не клонируйте тупо, там всего лишь сочетание html и css, будте индивидуальны :)
 
Последнее редактирование:

Dark levels

Забаненный
Сообщения
109
Симпатии
23
Баллы
18
#3
Помогите! куда картинки вставлять?;)
 

SOUL

АдминкА
Администратор
Сообщения
7.664
Симпатии
10.831
Баллы
266
#4
Вот часть мануала, отвечающая на вопрос:
Далее открываем шаблон EXTRA.css и добавляем следующий код:
Код:
/* Первое объявление */
.Responsive .notice_2 .notice_xft {
    line-height: 1;
    background: url(img/xft_fon.png) no-repeat right;
    padding-left: 10px;
}
.Responsive .notice_2 .notice_xft h3 {
    color: rgb(0, 96, 153);
}
.Responsive .notice_2 .notice_xft h4 {
    color: rgb(136, 46, 46);
}
.Responsive .notice_2 .notice_xft ul {
    padding-left: 30px;
}
.Responsive .notice_2 .notice_xft p,
.Responsive .notice_2 .notice_xft li {
    font-size: 13px;
}
.Responsive .notice_2 .notice_xft h3,
.Responsive .notice_2 .notice_xft h4,
.Responsive .notice_2 .notice_xft p,
.Responsive .notice_2 .notice_xft ul {
    margin: 3px 0;
}

/* Второе объявление */
.Responsive .notice_3 .notice_xft_2 {
    line-height: 1;
    background: url(img/xft_fon_2.png) no-repeat right;
    padding-left: 10px;
}
.Responsive .notice_3 .notice_xft_2 h3 {
    color: rgb(0, 96, 153);
}
.Responsive .notice_3 .notice_xft_2 h4 {
    color: rgb(136, 46, 46);
}
.Responsive .notice_3 .notice_xft_2 p {
    font-size: 13px;
}
.Responsive .notice_3 .notice_xft_2 a {
    margin-top: 10px;
}
.Responsive .notice_3 .notice_xft_2 h3,
.Responsive .notice_3 .notice_xft_2 h4,
.Responsive .notice_3 .notice_xft_2 p {
    margin: 5px 0;
}
.Responsive .notice_3 .notice_xft_2 h4 span {
    font-size: 14px;
    font-style: italic;
}
/* Конец стилей объявлений */
А если точнее, то background: url(img/xft_fon.png) no-repeat right; и background: url(img/xft_fon_2.png) no-repeat right;

То есть изображения с именами xft_fon.png и xft_fon_2.png необходимо загрузить в папку img, которая должна находиться в корне форума.
 

Dark levels

Забаненный
Сообщения
109
Симпатии
23
Баллы
18
#5
У меня такой папки нет. Создал сам, тоже ничего.
 

SOUL

АдминкА
Администратор
Сообщения
7.664
Симпатии
10.831
Баллы
266
#6
Верно, либо папку надо создать самому, либо прописать другой путь в коде.0
Значит, надо ещё более внимательно сначала перепроверить то, что сделал и найти своё упущение, если не найдёшь, попробовать всё сделать заново. :)
 

Dark levels

Забаненный
Сообщения
109
Симпатии
23
Баллы
18
#7
попробовать всё сделать заново.
Все сделал 4 раза. Последовательно создавал объявления и добавлял
Код:
/* Первое объявление */
.Responsive .notice_2 .notice_xft {
    line-height: 1;
    background: url(img/xft_fon.png) no-repeat right;
    padding-left: 10px;
}
.Responsive .notice_2 .notice_xft h3 {
    color: rgb(0, 96, 153);
}
.Responsive .notice_2 .notice_xft h4 {
    color: rgb(136, 46, 46);
}
.Responsive .notice_2 .notice_xft ul {
    padding-left: 30px;
}
.Responsive .notice_2 .notice_xft p,
.Responsive .notice_2 .notice_xft li {
    font-size: 13px;
}
.Responsive .notice_2 .notice_xft h3,
.Responsive .notice_2 .notice_xft h4,
.Responsive .notice_2 .notice_xft p,
.Responsive .notice_2 .notice_xft ul {
    margin: 3px 0;
}

/* Второе объявление */
.Responsive .notice_3 .notice_xft_2 {
    line-height: 1;
    background: url(img/xft_fon_2.png) no-repeat right;
    padding-left: 10px;
}
.Responsive .notice_3 .notice_xft_2 h3 {
    color: rgb(0, 96, 153);
}
.Responsive .notice_3 .notice_xft_2 h4 {
    color: rgb(136, 46, 46);
}
.Responsive .notice_3 .notice_xft_2 p {
    font-size: 13px;
}
.Responsive .notice_3 .notice_xft_2 a {
    margin-top: 10px;
}
.Responsive .notice_3 .notice_xft_2 h3,
.Responsive .notice_3 .notice_xft_2 h4,
.Responsive .notice_3 .notice_xft_2 p {
    margin: 5px 0;
}
.Responsive .notice_3 .notice_xft_2 h4 span {
    font-size: 14px;
    font-style: italic;
}
/* Конец стилей объявлений */
в EXTRA.css ниже вот этой строки

Код:
<xen:include template="casual_css.css" />

но к сожалению ничего. Так все работает, только без фона, без картинки!
 

Dark levels

Забаненный
Сообщения
109
Симпатии
23
Баллы
18
#9
Screenshot_3.png

Screenshot_4.png
 
Последнее редактирование модератором:

SOUL

АдминкА
Администратор
Сообщения
7.664
Симпатии
10.831
Баллы
266
#10
А зачем название папки img с большой буквы написал? Исправь на img. :)
 

SOUL

АдминкА
Администратор
Сообщения
7.664
Симпатии
10.831
Баллы
266
#14
Вверх Снизу