Баннеры В Шапке
#1
Отправлено 31 Май 2015 - 10:53
#2
Отправлено 31 Май 2015 - 11:11
alpha-me (31 Май 2015 - 10:53) писал:
Подскажите пожалуйста как разместить баннеры в шапке (4 баннера 250X150px) вставить баннеры.jpg
Пожалуйста уточните, Вы хотите сделать 8 банеров по 4 в ряд отменив инструкцию из этой темы, или реализовать их появление при определенном условии?
#3
Отправлено 31 Май 2015 - 11:31
alpha-me (31 Май 2015 - 10:53) писал:
Подскажите пожалуйста как разместить баннеры в шапке (4 баннера 250X150px) вставить баннеры.jpg
Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
<!-- Вывод главного меню -->
Замените на:
<div class="banners"> <img src="{ASSETS_IMAGES_PATH}banner1.jpg"> <img src="{ASSETS_IMAGES_PATH}banner2.jpg"> <img src="{ASSETS_IMAGES_PATH}banner3.jpg"> <img src="{ASSETS_IMAGES_PATH}banner4.jpg"> </div> <!-- Вывод главного меню -->
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, добавьте в конец шаблона код:
.banners img { width: 25%; height:auto; float: left; }
После этого добавьте 4 изображения с названиями banner1.jpg, banner2.jpg, banner3.jpg, banner4.jpg соответственно через кнопку "Добавить файл".
Баннеры будут выглядеть так, как на вашей картинке, в случае выполнения инструкции.
#4
Отправлено 31 Май 2015 - 12:33
Firefly (31 Май 2015 - 11:31) писал:
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
<!-- Вывод главного меню -->
Замените на:
<div class="banners"> <img src="{ASSETS_IMAGES_PATH}banner1.jpg"> <img src="{ASSETS_IMAGES_PATH}banner2.jpg"> <img src="{ASSETS_IMAGES_PATH}banner3.jpg"> <img src="{ASSETS_IMAGES_PATH}banner4.jpg"> </div> <!-- Вывод главного меню -->
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, добавьте в конец шаблона код:
.banners img { width: 25%; height:auto; float: left; }
После этого добавьте 4 изображения с названиями banner1.jpg, banner2.jpg, banner3.jpg, banner4.jpg соответственно через кнопку "Добавить файл".
Баннеры будут выглядеть так, как на вашей картинке, в случае выполнения инструкции.
Спасибо! Работает!
Подскажите еще как сделать, чтобы они менялись при наведении?
#7
Отправлено 31 Май 2015 - 13:40
alpha-me (31 Май 2015 - 13:14) писал:
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
<!-- баннеры --> <div class="banners"> <img src="{ASSETS_IMAGES_PATH}komp.png"> <img src="{ASSETS_IMAGES_PATH}nout.png"> <img src="{ASSETS_IMAGES_PATH}plansh.png"> <img src="{ASSETS_IMAGES_PATH}smart.png"> </div>
Замените на:
<!-- баннеры --> <div class="banners"> <a class="change1" href="#"><img src="{ASSETS_IMAGES_PATH}komp.png" alt=""></a> <a class="change2" href="#"><img src="{ASSETS_IMAGES_PATH}nout.png" alt=""></a> <a class="change3" href="#"><img src="{ASSETS_IMAGES_PATH}plansh.png" alt=""></a> <a class="change4" href="#"><img src="{ASSETS_IMAGES_PATH}smart.png" alt=""></a> </div>
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, в конце добавьте код:
/* Изображения для баннеров при наведении */ .change1:hover { background: url('{ASSETS_IMAGES_PATH}banner1.png') no-repeat center center; } .change2:hover { background: url('{ASSETS_IMAGES_PATH}banner2.png') no-repeat center center; } .change3:hover { background: url('{ASSETS_IMAGES_PATH}banner3.png') no-repeat center center; } .change4:hover { background: url('{ASSETS_IMAGES_PATH}banner4.png') no-repeat center center; }
Вместо banner1, banner2, banner3, banner4 укажите свои изображения, которые будут появляться при наведении.
#8
Отправлено 31 Май 2015 - 14:03
Firefly (31 Май 2015 - 13:40) писал:
<!-- баннеры --> <div class="banners"> <img src="{ASSETS_IMAGES_PATH}komp.png"> <img src="{ASSETS_IMAGES_PATH}nout.png"> <img src="{ASSETS_IMAGES_PATH}plansh.png"> <img src="{ASSETS_IMAGES_PATH}smart.png"> </div>
Замените на:
<!-- баннеры --> <div class="banners"> <a class="change1" href="#"><img src="{ASSETS_IMAGES_PATH}komp.png" alt=""></a> <a class="change2" href="#"><img src="{ASSETS_IMAGES_PATH}nout.png" alt=""></a> <a class="change3" href="#"><img src="{ASSETS_IMAGES_PATH}plansh.png" alt=""></a> <a class="change4" href="#"><img src="{ASSETS_IMAGES_PATH}smart.png" alt=""></a> </div>
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, в конце добавьте код:
/* Изображения для баннеров при наведении */ .change1:hover { background: url('{ASSETS_IMAGES_PATH}banner1.png') no-repeat center center; } .change2:hover { background: url('{ASSETS_IMAGES_PATH}banner2.png') no-repeat center center; } .change3:hover { background: url('{ASSETS_IMAGES_PATH}banner3.png') no-repeat center center; } .change4:hover { background: url('{ASSETS_IMAGES_PATH}banner4.png') no-repeat center center; }
Вместо banner1, banner2, banner3, banner4 укажите свои изображения, которые будут появляться при наведении.
Спасибо!
Сделал как написано, но картинки не меняются...
Подскажите как исправить???
#9
Отправлено 31 Май 2015 - 15:34
alpha-me (31 Май 2015 - 14:03) писал:
Сделал как написано, но картинки не меняются...
Подскажите как исправить???
Пойдем иным путем.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
.banners img { width: 25%; height:auto; float: left; } /* Изображения для баннеров при наведении */ .change1:hover { background: url('{ASSETS_IMAGES_PATH}komp2.png') no-repeat center center; } .change2:hover { background: url('{ASSETS_IMAGES_PATH}nout2.png') no-repeat center center; } .change3:hover { background: url('{ASSETS_IMAGES_PATH}plansh2.png') no-repeat center center; } .change4:hover { background: url('{ASSETS_IMAGES_PATH}smart2.png') no-repeat center center; }
Замените на:
/* Баннеры */ .banners img { width: 25%; height:auto; float: left; } /* Изображения для баннеров*/ a.change1 img, a.change2 img, a.change3 img, a.change4 img { visibility:hidden; width:100%; } a.change1:hover, a.change2:hover, a.change3:hover, a.change4:hover { background:none; } a.change1:hover img, a.change2:hover img, a.change3:hover img, a.change4:hover img { visibility:visible; border:0; } a.change1 { display:block; width:250px; height:150px; float: left; background: url('{ASSETS_IMAGES_PATH}komp.png') no-repeat; } a.change2 { display:block; width:250px; height:150px; float: left; background: url('{ASSETS_IMAGES_PATH}nout.png') no-repeat; } .change3 { display:block; width:250px; height:150px; float: left; background: url('{ASSETS_IMAGES_PATH}plansh.png') no-repeat; } .change4 { display:block; width:250px; height:150px; float: left; background: url('{ASSETS_IMAGES_PATH}smart.png') no-repeat; }
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
<!--Блок Баннера--> <div class="banners"> <a class="change1" href="#"><img src="{ASSETS_IMAGES_PATH}komp.png" alt=""></a> <a class="change2" href="#"><img src="{ASSETS_IMAGES_PATH}nout.png" alt=""></a> <a class="change3" href="#"><img src="{ASSETS_IMAGES_PATH}plansh.png" alt=""></a> <a class="change4" href="#"><img src="{ASSETS_IMAGES_PATH}smart.png" alt=""></a> </div>
Замените на:
<!--Блок Баннеров--> <div class="banners"> <a class="change1" href="#"><img src="{ASSETS_IMAGES_PATH}komp2.png" alt=""></a> <a class="change2" href="#"><img src="{ASSETS_IMAGES_PATH}nout2.png" alt=""></a> <a class="change3" href="#"><img src="{ASSETS_IMAGES_PATH}plansh2.png" alt=""></a> <a class="change4" href="#"><img src="{ASSETS_IMAGES_PATH}smart2.png" alt=""></a> </div>
#10
Отправлено 31 Май 2015 - 15:45
Firefly (31 Май 2015 - 15:34) писал:
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
.banners img { width: 25%; height:auto; float: left; } /* Изображения для баннеров при наведении */ .change1:hover { background: url('{ASSETS_IMAGES_PATH}komp2.png') no-repeat center center; } .change2:hover { background: url('{ASSETS_IMAGES_PATH}nout2.png') no-repeat center center; } .change3:hover { background: url('{ASSETS_IMAGES_PATH}plansh2.png') no-repeat center center; } .change4:hover { background: url('{ASSETS_IMAGES_PATH}smart2.png') no-repeat center center; }
Замените на:
/* Баннеры */ .banners img { width: 25%; height:auto; float: left; } /* Изображения для баннеров*/ a.change1 img, a.change2 img, a.change3 img, a.change4 img { visibility:hidden; width:100%; } a.change1:hover, a.change2:hover, a.change3:hover, a.change4:hover { background:none; } a.change1:hover img, a.change2:hover img, a.change3:hover img, a.change4:hover img { visibility:visible; border:0; } a.change1 { display:block; width:250px; height:150px; float: left; background: url('{ASSETS_IMAGES_PATH}komp.png') no-repeat; } a.change2 { display:block; width:250px; height:150px; float: left; background: url('{ASSETS_IMAGES_PATH}nout.png') no-repeat; } .change3 { display:block; width:250px; height:150px; float: left; background: url('{ASSETS_IMAGES_PATH}plansh.png') no-repeat; } .change4 { display:block; width:250px; height:150px; float: left; background: url('{ASSETS_IMAGES_PATH}smart.png') no-repeat; }
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
<!--Блок Баннера--> <div class="banners"> <a class="change1" href="#"><img src="{ASSETS_IMAGES_PATH}komp.png" alt=""></a> <a class="change2" href="#"><img src="{ASSETS_IMAGES_PATH}nout.png" alt=""></a> <a class="change3" href="#"><img src="{ASSETS_IMAGES_PATH}plansh.png" alt=""></a> <a class="change4" href="#"><img src="{ASSETS_IMAGES_PATH}smart.png" alt=""></a> </div>
Замените на:
<!--Блок Баннеров--> <div class="banners"> <a class="change1" href="#"><img src="{ASSETS_IMAGES_PATH}komp2.png" alt=""></a> <a class="change2" href="#"><img src="{ASSETS_IMAGES_PATH}nout2.png" alt=""></a> <a class="change3" href="#"><img src="{ASSETS_IMAGES_PATH}plansh2.png" alt=""></a> <a class="change4" href="#"><img src="{ASSETS_IMAGES_PATH}smart2.png" alt=""></a> </div>
))) Круто! Работает!
Подскажите еще как иконки отделить от меню?
#11
Отправлено 31 Май 2015 - 16:01
alpha-me (31 Май 2015 - 15:45) писал:
Здравствуйте, зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css найдите код:
#container{ width: 100%; overflow-x: hidden; position: relative; padding: 0; background: url('{ASSETS_IMAGES_PATH}leftcolum-bg.jpg?design=joy') #fff left top repeat-y; -moz-border-radius: 0em 0em 10px 10px; -webkit-border-radius: 0em 0em 10px 10px; border-radius: 0em 0em 10px 10px;}
Замените его на:
#container{ top: 10px; width: 100%; overflow-x: hidden; position: relative; padding: 0; background: url('{ASSETS_IMAGES_PATH}leftcolum-bg.jpg?design=joy') #fff left top repeat-y; -moz-border-radius: 0em 0em 10px 10px; -webkit-border-radius: 0em 0em 10px 10px; border-radius: 0em 0em 10px 10px; }
Меняя значение "10px" Вы можете подобрать оптимальный размер отступа.
#12
Отправлено 31 Май 2015 - 16:12
Cupuyc (31 Май 2015 - 16:01) писал:
#container{ width: 100%; overflow-x: hidden; position: relative; padding: 0; background: url('{ASSETS_IMAGES_PATH}leftcolum-bg.jpg?design=joy') #fff left top repeat-y; -moz-border-radius: 0em 0em 10px 10px; -webkit-border-radius: 0em 0em 10px 10px; border-radius: 0em 0em 10px 10px;}
Замените его на:
#container{ top: 10px; width: 100%; overflow-x: hidden; position: relative; padding: 0; background: url('{ASSETS_IMAGES_PATH}leftcolum-bg.jpg?design=joy') #fff left top repeat-y; -moz-border-radius: 0em 0em 10px 10px; -webkit-border-radius: 0em 0em 10px 10px; border-radius: 0em 0em 10px 10px; }
Меняя значение "10px" Вы можете подобрать оптимальный размер отступа.
Спасибо всем кто помогал!!! Все работает! Мне нравится!
#14
Отправлено 31 Май 2015 - 18:00
alpha-me (31 Май 2015 - 17:19) писал:
1) Убрать рыжий оттенок у текста в верхнем меню
2) Убрать вход и регистрация в верхнем меню
3) убрать рыжую полосу в верхнем меню.
сделать.jpg
1. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#bar .links a { padding: 0.9em 0.7em 0.7em 0.7em; height: auto; display:block; color:#FFF; text-shadow: 1px 1px 1px rgba(204, 143, 0, 1); text-transform:uppercase; }
Замените на:
#bar .links a { padding: 0.9em 0.7em 0.7em 0.7em; height: auto; display:block; color:#FFF; /* text-shadow: 1px 1px 1px rgba(204, 143, 0, 1); */ text-transform:uppercase; }
2. Найдите код:
#bar .button { height: 100%; padding: 14px 14px 0 0; width: 16%;}
Замените на:
#bar .button { height: 100%; padding: 14px 14px 0 0; width: 16%; display: none;}
3. Найдите код:
#bar { background: url('{ASSETS_IMAGES_PATH}bar-bg.jpg?design=joy') center top repeat-x #E09814; height: auto; width: 100%; z-index:22; -moz-border-radius: 0 0 1em 1em; -webkit-border-radius: 0 0 1em 1em; border-radius: 0 0 1em 1em; }
Замените на:
#bar { background: url('{ASSETS_IMAGES_PATH}bar-bg.jpg?design=joy') center top repeat-x; height: auto; width: 100%; z-index:22; -moz-border-radius: 0 0 1em 1em; -webkit-border-radius: 0 0 1em 1em; border-radius: 0 0 1em 1em; }
#15
Отправлено 31 Май 2015 - 18:45
Firefly (31 Май 2015 - 18:00) писал:
#bar .links a { padding: 0.9em 0.7em 0.7em 0.7em; height: auto; display:block; color:#FFF; text-shadow: 1px 1px 1px rgba(204, 143, 0, 1); text-transform:uppercase; }
Замените на:
#bar .links a { padding: 0.9em 0.7em 0.7em 0.7em; height: auto; display:block; color:#FFF; /* text-shadow: 1px 1px 1px rgba(204, 143, 0, 1); */ text-transform:uppercase; }
2. Найдите код:
#bar .button { height: 100%; padding: 14px 14px 0 0; width: 16%;}
Замените на:
#bar .button { height: 100%; padding: 14px 14px 0 0; width: 16%; display: none;}
3. Найдите код:
#bar { background: url('{ASSETS_IMAGES_PATH}bar-bg.jpg?design=joy') center top repeat-x #E09814; height: auto; width: 100%; z-index:22; -moz-border-radius: 0 0 1em 1em; -webkit-border-radius: 0 0 1em 1em; border-radius: 0 0 1em 1em; }
Замените на:
#bar { background: url('{ASSETS_IMAGES_PATH}bar-bg.jpg?design=joy') center top repeat-x; height: auto; width: 100%; z-index:22; -moz-border-radius: 0 0 1em 1em; -webkit-border-radius: 0 0 1em 1em; border-radius: 0 0 1em 1em; }
Спасибо! Получилось.
Можно теперь как-то сделать, чтобы не было так обрубленно
#16
Отправлено 31 Май 2015 - 18:59
alpha-me (31 Май 2015 - 18:45) писал:
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#bar { background: url('{ASSETS_IMAGES_PATH}bar-bg.jpg?design=joy') center top repeat-x; height: auto; width: 100%; z-index:22; -moz-border-radius: 0 0 1em 1em; -webkit-border-radius: 0 0 1em 1em; border-radius: 0 0 1em 1em; }
Замените на:
#bar { background: url('{ASSETS_IMAGES_PATH}bar-bg.jpg?design=joy') center top repeat-x #00CD26; height: auto; width: 100%; z-index:22; -moz-border-radius: 0 0 1em 1em; -webkit-border-radius: 0 0 1em 1em; border-radius: 0 0 1em 1em; }
#17
Отправлено 31 Май 2015 - 19:06
Firefly (31 Май 2015 - 18:59) писал:
#bar { background: url('{ASSETS_IMAGES_PATH}bar-bg.jpg?design=joy') center top repeat-x; height: auto; width: 100%; z-index:22; -moz-border-radius: 0 0 1em 1em; -webkit-border-radius: 0 0 1em 1em; border-radius: 0 0 1em 1em; }
Замените на:
#bar { background: url('{ASSETS_IMAGES_PATH}bar-bg.jpg?design=joy') center top repeat-x #00CD26; height: auto; width: 100%; z-index:22; -moz-border-radius: 0 0 1em 1em; -webkit-border-radius: 0 0 1em 1em; border-radius: 0 0 1em 1em; }
Спасибо! Так лучше)
#19
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных