В Теме Новогодняя Сдвинуть В Центр И Изменить Плашку С Кнопкой Каталог
#1
Отправлено 14 Июнь 2017 - 16:53
как мне сместить по центру рамку, текст и кнопку каталог, чтобы они уменьшились и уместились как на фото
Сейчас выглядит так
Спасибо
#2
Отправлено 15 Июнь 2017 - 21:03
#3
Отправлено 16 Июнь 2017 - 07:45
Зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<h2>Новогодние подарки</h2> <h3>Для детей и взрослых</h3>
замените на:
<h2>Подарочные иконы</h2> <h3>Для великих</br>священных событий</h3>
Далее зайдите в main.css - найдите:
#slideshow #slider h2, #slideshow #slider h3 {font-size: 58px;color: #000;letter-spacing: 2px;line-height: inherit;} #slideshow #slider h2 {margin-bottom: 15px;}
замените на:
#slideshow #slider h2, #slideshow #slider h3 {font-size: 28px;color: #000;letter-spacing: 2px;line-height: inherit;}
далее найдите:
.text-border {display: inline-block;position: relative;text-align: center;padding: 20px 45px 35px 45px;border-bottom: 5px solid #fce3bd;border-top: none;text-transform: uppercase;overflow: hidden;}
замените на:
.text-border {display: inline-block;position: relative;text-align: center;padding: 20px 45px 35px 45px;border-bottom: 5px solid #fce3bd;border-top: none;text-transform: uppercase;overflow: hidden;margin-right: -210px;right: 50%;}
#5
Отправлено 17 Июнь 2017 - 07:27
Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#slideshow #slider .item-html {position: absolute;top: 30%;left: 0;text-align: right;width: 100%;z-index: 9;}
замените на:
#slideshow #slider .item-html {position: absolute;top: 2%;left: 0;text-align: right;width: 100%;z-index: 9;}
далее найдите:
.text-border:before, .text-border:after {display: inline-block;position: absolute;top: 65px;right: 0;width: 5px;height: 100%;content: '';background: #fce3bd;}
замените на:
.text-border:before, .text-border:after {display: inline-block;position: absolute;top: 35px;right: 0;width: 5px;height: 100%;content: '';background: #fce3bd;}
далее найдите:
.text-border h2:before, .text-border h2:after {display: inline-block;position: absolute;top: 42px;right: 100%;width: 1000px;height: 5px;content: '';background: #fce3bd;}
замените на:
.text-border h2:before, .text-border h2:after {display: inline-block;position: absolute;top: 13px;right: 100%;width: 1000px;height: 5px;content: '';background: #fce3bd;}
#7
Отправлено 20 Июнь 2017 - 08:18
Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#slideshow .text-border {border-bottom: 0;padding: 0;}
замените на:
#slideshow .text-border {border-bottom: 0;padding: 0;right: 0;left: 0;margin: 0;} #slideshow .text-border .button.big{margin-top: 5px;}
#8
Отправлено 21 Июнь 2017 - 12:54
Vaccina (20 Июнь 2017 - 08:18) писал:
Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
#slideshow .text-border {border-bottom: 0;padding: 0;}
замените на:
#slideshow .text-border {border-bottom: 0;padding: 0;right: 0;left: 0;margin: 0;} #slideshow .text-border .button.big{margin-top: 5px;}
#9
Отправлено 21 Июнь 2017 - 16:11
ogonek7777 (21 Июнь 2017 - 12:54) писал:
2017-06-21_12-48-15.png
В шаблоне main.css удалил код:
#slideshow #slider h2, #slideshow #slider h3 {font-size: 48px;}
Код:
#slideshow #slider h2, #slideshow #slider h3 {font-size: 36px;}
А так же код:
#slideshow #slider h2 {font-size: 60px;}
Код:
.text-border {display: inline-block;position: relative;text-align: center;padding: 20px 45px 35px 45px;border-bottom: 5px solid #fce3bd;border-top: none;text-transform: uppercase;overflow: hidden;margin-right: -220px;right: 50%;}
Заменил на:
.text-border {display: inline-block;position: relative;text-align: center;padding: 20px 45px 35px 45px;border-bottom: 5px solid #fce3bd;border-top: none;text-transform: uppercase;overflow: hidden;right: 32%;}
И добавил код:
.text-border {right:0;}
Проверьте результат, пожалуйста.
#10
Отправлено 21 Июнь 2017 - 17:24
Firefly (21 Июнь 2017 - 16:11) писал:
#slideshow #slider h2, #slideshow #slider h3 {font-size: 48px;}
Код:
#slideshow #slider h2, #slideshow #slider h3 {font-size: 36px;}
А так же код:
#slideshow #slider h2 {font-size: 60px;}
Код:
.text-border {display: inline-block;position: relative;text-align: center;padding: 20px 45px 35px 45px;border-bottom: 5px solid #fce3bd;border-top: none;text-transform: uppercase;overflow: hidden;margin-right: -220px;right: 50%;}
Заменил на:
.text-border {display: inline-block;position: relative;text-align: center;padding: 20px 45px 35px 45px;border-bottom: 5px solid #fce3bd;border-top: none;text-transform: uppercase;overflow: hidden;right: 32%;}
И добавил код:
.text-border {right:0;}
Проверьте результат, пожалуйста.
#11
Отправлено 24 Июнь 2017 - 20:04
#12
Отправлено 25 Июнь 2017 - 11:41
ogonek7777 (21 Июнь 2017 - 17:24) писал:
В шаблоне main.css код:
#slideshow .text-border {padding-bottom: 30px;}
Заменил на:
#slideshow .text-border {border-bottom: 0;padding: 0;right: 0;left: 0;margin: 0;width: 220px;} #slideshow .text-border .button.big{margin-top: 5px;} #slideshow .text-border:before, #slideshow .text-border:after, #slideshow .text-border h2:before, #slideshow .text-border h2:after, #slideshow #slider h3 {display: none;}
А так же удалил код:
#slideshow .text-border {border-bottom: 0;padding: 0;right: 0;left: 0;margin: 0;} #slideshow .text-border .button.big{margin-top: 5px;} #slideshow .text-border:before, #slideshow .text-border:after, #slideshow .text-border h2:before, #slideshow .text-border h2:after, #slideshow #slider h3 {display: none;}
Проверьте, пожалуйста
#13
Отправлено 25 Июнь 2017 - 17:27
Firefly (25 Июнь 2017 - 11:41) писал:
#slideshow .text-border {padding-bottom: 30px;}
Заменил на:
#slideshow .text-border {border-bottom: 0;padding: 0;right: 0;left: 0;margin: 0;width: 220px;} #slideshow .text-border .button.big{margin-top: 5px;} #slideshow .text-border:before, #slideshow .text-border:after, #slideshow .text-border h2:before, #slideshow .text-border h2:after, #slideshow #slider h3 {display: none;}
А так же удалил код:
#slideshow .text-border {border-bottom: 0;padding: 0;right: 0;left: 0;margin: 0;} #slideshow .text-border .button.big{margin-top: 5px;} #slideshow .text-border:before, #slideshow .text-border:after, #slideshow .text-border h2:before, #slideshow .text-border h2:after, #slideshow #slider h3 {display: none;}
Проверьте, пожалуйста
#14
Отправлено 29 Июнь 2017 - 11:17
ogonek7777 (25 Июнь 2017 - 17:27) писал:
#slideshow .text-border {border-bottom: 0;padding: 0;right: 0;left: 0;margin: 0;} #slideshow .text-border .button.big{margin-top: 5px;} #slideshow .text-border:before, #slideshow .text-border:after, #slideshow .text-border h2:before, #slideshow .text-border h2:after, #slideshow #slider h3 {display: none;}удалите его. Далее найдите код
} @media all and (max-width: 641px) {и перед ним вставьте код
#slideshow .text-border {border-bottom: 0;padding: 0;right: 0;left: 0;margin: 0;} #slideshow .text-border .button.big{margin-top: 5px;} #slideshow .text-border:before, #slideshow .text-border:after, #slideshow .text-border h2:before, #slideshow .text-border h2:after, #slideshow #slider h3, #slideshow #slider h2 {display: none;}
#15
Отправлено 29 Июнь 2017 - 12:14
Stasya (29 Июнь 2017 - 11:17) писал:
#slideshow .text-border {border-bottom: 0;padding: 0;right: 0;left: 0;margin: 0;} #slideshow .text-border .button.big{margin-top: 5px;} #slideshow .text-border:before, #slideshow .text-border:after, #slideshow .text-border h2:before, #slideshow .text-border h2:after, #slideshow #slider h3 {display: none;}удалите его. Далее найдите код
} @media all and (max-width: 641px) {и перед ним вставьте код
#slideshow .text-border {border-bottom: 0;padding: 0;right: 0;left: 0;margin: 0;} #slideshow .text-border .button.big{margin-top: 5px;} #slideshow .text-border:before, #slideshow .text-border:after, #slideshow .text-border h2:before, #slideshow .text-border h2:after, #slideshow #slider h3, #slideshow #slider h2 {display: none;}
#16
Отправлено 29 Июнь 2017 - 14:16
ogonek7777 (29 Июнь 2017 - 12:14) писал:
Здравствуйте.
В шаблоне main.css найдите код:
} @media all and (min-width: 1600px) {
Добавьте перед ним код:
.text-border {border:none;} .text-border:before, .text-border:after, .text-border h2:before, .text-border h2:after {content:none;}
#17
Отправлено 29 Июнь 2017 - 15:11
Firefly (29 Июнь 2017 - 14:16) писал:
В шаблоне main.css найдите код:
} @media all and (min-width: 1600px) {
Добавьте перед ним код:
.text-border {border:none;} .text-border:before, .text-border:after, .text-border h2:before, .text-border h2:after {content:none;}
#18
Отправлено 29 Июнь 2017 - 15:39
ogonek7777 (29 Июнь 2017 - 15:11) писал:
Видимо я Вас неправильно понял. Сейчас добавил этот код чуть выше для разрешения до 1199px.
Проверьте, пожалуйста.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных