Как изменить размер шрифта в коде и сделать кнопку черной при наведении курсора?

[Natasha]

Сразу хочу предупредить что я не программист, но стараюсь во всем разобраться и получается у меня неплохо. Научилась добавлять ссылку на 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

[kirill568]

Можно посмотреть какой шрифт(свойство font-family) и размер шрифта(свойство font-size) заданы у соседних кнопок, а чтобы при наведении изменялся цвет можно задать такой стиль -

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

[mAgency]

Сразу хочу предупредить что я не программист, но стараюсь во всем разобраться и получается у меня неплохо.

Если делать хорошо, тогда так:
В файле /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;
}
....Результат в приложенном файле.

[Natasha]

Можно посмотреть какой шрифт(свойство font-family) и размер шрифта(свойство font-size) заданы у соседних кнопок, а чтобы при наведении изменялся цвет можно задать такой стиль -

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

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

[Natasha]

Сразу хочу предупредить что я не программист, но стараюсь во всем разобраться и получается у меня неплохо.

Если делать хорошо, тогда так:
В файле /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;
}
....Результат в приложенном файле.

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