Перейти к содержимому


В Теме Новогодняя Сдвинуть В Центр И Изменить Плашку С Кнопкой Каталог


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 25

#1 ogonek7777

ogonek7777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 14 Июнь 2017 - 16:53

Здравствуйте,
как мне сместить по центру рамку, текст и кнопку каталог, чтобы они уменьшились и уместились как на фото
f_92559411c7350969.jpg

Сейчас выглядит так
1.jpg
Спасибо

#2 ogonek7777

ogonek7777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 15 Июнь 2017 - 21:03

ау

#3 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 887 сообщений

Отправлено 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%;}


#4 ogonek7777

ogonek7777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 16 Июнь 2017 - 14:12

Огромное спасибо!
Помогите, пожалуйста, поднять блок повыше на пустое поле.
2017-06-16_14-06-21.png

И чтобы рамка упиралась не в среднюю строчку,а в верхнюю. Спасибо.

#5 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 887 сообщений

Отправлено 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;}


#6 ogonek7777

ogonek7777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 19 Июнь 2017 - 10:07

Огромное спасибо!
А как выровнять по центру кнопку каталог в мобильной версии и планшете:
Screenshot_20170619-100342.png
2017-06-19_10-43-47.png
Заранее спасибо!

#7 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 887 сообщений

Отправлено 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 ogonek7777

ogonek7777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 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;}
Спасибо, на смартфоне теперь отлично, но, к сожалению, на планшете ситуация таже
2017-06-21_12-48-15.png

#9 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 788 сообщений

Отправлено 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 ogonek7777

ogonek7777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 21 Июнь 2017 - 17:24

Просмотр сообщенияFirefly (21 Июнь 2017 - 16:11) писал:

В шаблоне 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;}

Проверьте результат, пожалуйста.
Огромное спасибо! А  нельзя ли на планшете убрать совсем или уменьшить текст, рамку убрать, а кнопку подтянуть вверх на пустое пространство?

#11 ogonek7777

ogonek7777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 24 Июнь 2017 - 20:04

ау

#12 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 788 сообщений

Отправлено 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 ogonek7777

ogonek7777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 25 Июнь 2017 - 17:27

Просмотр сообщенияFirefly (25 Июнь 2017 - 11:41) писал:

В шаблоне 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;}

Проверьте, пожалуйста
Здравствуйте, указанные коды практически идентичны, за исключением одного параметра. Изменений не произошло.

#14 Stasya

Stasya

    Активный участник

  • Модератоpы
  • 4 007 сообщений

Отправлено 29 Июнь 2017 - 11:17

Просмотр сообщенияogonek7777 (25 Июнь 2017 - 17:27) писал:

Здравствуйте, указанные коды практически идентичны, за исключением одного параметра. Изменений не произошло.
Здравствуйте. Найдите в файле main.css блок
#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 ogonek7777

ogonek7777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 29 Июнь 2017 - 12:14

Просмотр сообщенияStasya (29 Июнь 2017 - 11:17) писал:

Здравствуйте. Найдите в файле main.css блок
#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 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 788 сообщений

Отправлено 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 ogonek7777

ogonek7777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 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 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 788 сообщений

Отправлено 29 Июнь 2017 - 15:39

Просмотр сообщенияogonek7777 (29 Июнь 2017 - 15:11) писал:

Спасибо за ответ. К сожалению, Этот код работает наоборот - на большом мониторе показывает без рамки, на среднем с рамкой, на планшете только с кнопкой)))

Видимо я Вас неправильно понял. Сейчас добавил этот код чуть выше для разрешения до 1199px.
Проверьте, пожалуйста.

#19 ogonek7777

ogonek7777

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 109 сообщений
  • ГородМосква

Отправлено 29 Июнь 2017 - 15:45

Просмотр сообщенияFirefly (29 Июнь 2017 - 15:39) писал:

Видимо я Вас неправильно понял. Сейчас добавил этот код чуть выше для разрешения до 1199px.
Проверьте, пожалуйста.
Огромное спасибо! Все супер!

#20 Diana

Diana

    Новичок

  • Пользователи
  • Pip
  • 5 сообщений

Отправлено 18 Январь 2018 - 18:56

Добрый день! Пожалуйста, подскажите как сдвинуть кнопку "каталог" в центр? Аккаунт SL-420564, шаблон Новогодний.
Спасибо

Прикрепленные изображения

  • Кнопка каталог.jpg





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных