Автор Тема: Как изменить размер шрифта в коде и сделать кнопку черной при наведении курсора?  (Прочитано 377 раз)

18 Март 2020, 02:41:05
  • Фрилансер
  • *
  • Сообщений: 133
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Сразу хочу предупредить что я не программист, но стараюсь во всем разобраться и получается у меня неплохо. Научилась добавлять ссылку на CMS страницу в  displayNav, но размер шрифта в тексте ссылки меньше, чем на др кнопках в этой панели. Поэтому, если кто может подскажите, как в этом коде изменить размер шрифта и что нужно сделать, чтобы при наведении курсора на кнопку "Обо мне" она становилась черной?
Вот такой код я использовала чтобы вставить ссылку "Обо мне"

<a href="../content/4-about-me" style="display: inline-block; float: right; color: white; font-weight: bold; padding: 8px 10px 11px 10px; text-shadow: 1px 1px rgba(0, 0, 0, 0.2); cursor: pointer; line-height: 18px;">Обо мне</a>

Вот ссылка на внешний вид того что получилось https://prnt.sc/ri2s39
18 Март 2020, 06:59:47
Ответ #1
  • Новичок
  • *
  • Сообщений: 12
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Можно посмотреть какой шрифт(свойство font-family) и размер шрифта(свойство font-size) заданы у соседних кнопок, а чтобы при наведении изменялся цвет можно задать такой стиль -

класс или id кнопки:hover {
background-color: black;
}
18 Март 2020, 11:44:52
Ответ #2
  • Партнер
  • Ветеран
  • ****
  • Сообщений: 22816
  • Репутация: +17143/-1
  • Разработка веб-сайтов и веб-программирование
    • Просмотр профиля
Цитировать
Сразу хочу предупредить что я не программист, но стараюсь во всем разобраться и получается у меня неплохо.
Если делать хорошо, тогда так:
В файле /themes/default-bootstrap/modules/blockcontact/nav.tpl добавляем в самом конце
<div id="about-link">
<a href="{$link->getPageLink('about', true)|escape:'html':'UTF-8'}" title="{l s='Обо мне' mod='blockcontact'}">{l s='Обо мне' mod='blockcontact'}</a>
</div>
В файле /themes/default-bootstrap/css/modules/blockcontact/blockcontact.css добавляем стили. Можно взять все стили для ссылки Свяжитесь с нами и заменить на id добавленого элемента
#about-link { float: right;border-left: 1px solid #515151; }
#about-link a {
    display: block;
    color: #fff;
    font-weight: bold;
    padding: 8px 10px 11px 10px;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    line-height: 18px;
}
....
Результат в приложенном файле.
Интернет-магазин под ключ.
Какой выбрать движок для интернет магазина ?
Какой движок лучше ?
Magento или Prestashop ?
Решение всех Ваших вопросов в создании Интернет-магазина.
20 Март 2020, 00:31:51
Ответ #3
  • Фрилансер
  • *
  • Сообщений: 133
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Можно посмотреть какой шрифт(свойство font-family) и размер шрифта(свойство font-size) заданы у соседних кнопок, а чтобы при наведении изменялся цвет можно задать такой стиль -

класс или id кнопки:hover {
background-color: black;
}

Спасибо, но как для не программиста мало информации для того чтобы это реализовать, хотя суть понимаю, но это еще нужно знать где и как сделать.

20 Март 2020, 00:32:52
Ответ #4
  • Фрилансер
  • *
  • Сообщений: 133
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Цитировать
Сразу хочу предупредить что я не программист, но стараюсь во всем разобраться и получается у меня неплохо.
Если делать хорошо, тогда так:
В файле /themes/default-bootstrap/modules/blockcontact/nav.tpl добавляем в самом конце
<div id="about-link">
<a href="{$link->getPageLink('about', true)|escape:'html':'UTF-8'}" title="{l s='Обо мне' mod='blockcontact'}">{l s='Обо мне' mod='blockcontact'}</a>
</div>
В файле /themes/default-bootstrap/css/modules/blockcontact/blockcontact.css добавляем стили. Можно взять все стили для ссылки Свяжитесь с нами и заменить на id добавленого элемента
#about-link { float: right;border-left: 1px solid #515151; }
#about-link a {
    display: block;
    color: #fff;
    font-weight: bold;
    padding: 8px 10px 11px 10px;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    line-height: 18px;
}
....
Результат в приложенном файле.

Спасибо большое! Попробую сделать.