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


Шапка Сайта, Контакты И Лого!


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

#1 Art

Art

    Продвинутый пользователь

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

Отправлено 10 Ноябрь 2021 - 16:16

помогите пожалуйста:
1) как сделать крупней логотип, так что бы ничего не съезжало (он с прозрачным фоном)
2) Как сделать крупней и по центру контакты (телефон и почту)?
3) "весь каталог" как сделать что бы было ровно с другими пунктами меню  или просто симметрично хотя бы? (фото во вложении)
4) как можно поставить фон на всю шапку?

заранее спасибо Вам!

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

  • укау.JPG


#2 Vaccina

Vaccina

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

  • Модераторы
  • 24 070 сообщений

Отправлено 11 Ноябрь 2021 - 05:46

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
/** Каталог **/
.catalog__icon {font-size: 22px;font-weight: bold;display: center;align-items: center;justify-content: flex-start;font-family: 'Source Serif Pro', sans-serif;}

замените на:
/** Каталог **/
.catalog__icon {font-size: 22px;font-weight: bold;display: flex;align-items: center;justify-content: flex-start;font-family: 'Source Serif Pro', sans-serif;}

далее найдите:
/** Логотип **/
header .logo {width: 200px;order: 1;}
/** Контакты **/
header .contacts {order: 2;flex-grow: 1;width: calc(100% - 200px - 310px);}

замените на:
/** Логотип **/
header .logo {width: 250px;order: 1;margin-bottom: -40px;margin-top: -40px;}
/** Контакты **/
header .contacts {order: 2;flex-grow: 1;width: calc(100% - 250px - 310px);text-align: center;}

далее найдите:
/*** Шапка ***/
header {position: relative;padding: 1rem 0 0;}

замените на:
/*** Шапка ***/
header {position: relative;padding: 1rem 0 1rem;background: #bdbdbd;}

и замените цвет на необходимый.

#3 Art

Art

    Продвинутый пользователь

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

Отправлено 15 Ноябрь 2021 - 15:18

Просмотр сообщенияVaccina (11 Ноябрь 2021 - 05:46) писал:

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.css - найдите:
/** Каталог **/
.catalog__icon {font-size: 22px;font-weight: bold;display: center;align-items: center;justify-content: flex-start;font-family: 'Source Serif Pro', sans-serif;}

замените на:
/** Каталог **/
.catalog__icon {font-size: 22px;font-weight: bold;display: flex;align-items: center;justify-content: flex-start;font-family: 'Source Serif Pro', sans-serif;}

далее найдите:
/** Логотип **/
header .logo {width: 200px;order: 1;}
/** Контакты **/
header .contacts {order: 2;flex-grow: 1;width: calc(100% - 200px - 310px);}

замените на:
/** Логотип **/
header .logo {width: 250px;order: 1;margin-bottom: -40px;margin-top: -40px;}
/** Контакты **/
header .contacts {order: 2;flex-grow: 1;width: calc(100% - 250px - 310px);text-align: center;}

далее найдите:
/*** Шапка ***/
header {position: relative;padding: 1rem 0 0;}

замените на:
/*** Шапка ***/
header {position: relative;padding: 1rem 0 1rem;background: #bdbdbd;}

и замените цвет на необходимый.


Спасибо большое!
А если в фон ставить не цвет а картинку то что нужно сделать?

#4 Vaccina

Vaccina

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

  • Модераторы
  • 24 070 сообщений

Отправлено 16 Ноябрь 2021 - 06:55

Здравствуйте.

В данном коде:
/*** Шапка ***/
header {position: relative;padding: 1rem 0 1rem;background: #bdbdbd;

необходимо:
background: #bdbdbd;

заменить на:
background: url('123');

вместо 123 укажите ссылку на изображение.




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

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