Создать ссылку в шапке

Главные вкладки

Аватар пользователя baldman88 baldman88 21 ноября 2016 в 21:21

Добрый день. Подскажите, пожалуйста, как можно создать ссылку в шапке?
Как есть:
[img]https://s18.postimg.org/69mo7x1jt/image.png[/img]
Что нужно:
[img]https://s21.postimg.org/nj64oa3qf/image.png[/img]
Нашел в папке с темами page.tpl.php, а в нем строку вида:
<?php print render($page['header']); ?>
А вот что дальше -- без малейшего понятия.
Заранее спасибо за помощь и советы.

Лучший ответ

Аватар пользователя baldman88 baldman88 24 ноября 2016 в 23:51

В общем решил все весьма топорно (а может так и нужно на самом деле?). Пытался через админку и блоки, но получалась фигня. В итоге полез в page*.tpl.php. Посмотрел, а там элементы шапки заданы как table-cell. В нужном месте вставил ссылку (тоже как table-cell) и задал стиль для нее. Теперь хоть на всех разрешениях мониторов она на своем месте (правда на больших разрешениях шрифт мелковат, ну да ладно). Вот что вышло:
[img]https://s22.postimg.org/i4tdpmqtt/2016_11_24_22_33_41.png[/img]Главное жена довольна Smile
Спасибо всем!

Комментарии

Аватар пользователя baldman88 baldman88 21 ноября 2016 в 22:59

Попытался добавить через блоки. Оно добавилось, но вырвиглазно:
[img]https://s14.postimg.org/ellouwg75/2016_11_21_21_44_49.png[/img]
Вот код:
<a href="/appointments" title="Запись">Запись</a>
Можно ли как-то сделать так, чтобы эта ссылка была не выше контактов, а на против них по центру (по горизонтали)?

Аватар пользователя BatKor BatKor 22 ноября 2016 в 10:33

Дружище раберись с тегами, почитай немного о html, а если не хочешь то как посоветовал «chimir #» position absolute на ссылку display block top 0 left 0 witdh 100% height 100% и эту ссылку вставь в header и будет тебе «щасье»

Аватар пользователя baldman88 baldman88 22 ноября 2016 в 22:56

Посмотрел код страницы. Добавил в nodes.css такое правило:

.region.region-header #block-block-6 .appointments-link a {
    color: #ff0000;
    font-size: 24px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

В болке написал:
<div class="appointments-link><a href="/appointments" title="Запись">Запись</a></div>
В итоге получил такое:
[img]https://s22.postimg.org/fd1qyrjq9/2016_11_22_20_37_09.png[/img]
Но это не то, что мне нужно. Во-первых, ссылка совсем не там. Во-вторых, блок контактов съехал ниже. Где я ошибаюсь?

Аватар пользователя baldman88 baldman88 22 ноября 2016 в 23:07

И да, что эта за фича такая? Вставлял изображение и меня попросили не ругаться матом (видимо не понравилась часть пути в ссылке, та что идет после имени хоста):
[img]https://s15.postimg.org/86c02ombf/2016_11_22_21_45_51.png[/img]
Перезалил и все нормально Smile

Аватар пользователя baldman88 baldman88 22 ноября 2016 в 23:25

Нет. Эту ошибку я не заметил (хоть спелчекер ее и подсветил), и она так и осталась в посте. Скорее дело вот в этом:
[img]https://s17.postimg.org/hz87tdhjz/xxx_png.png[/img]
Сообщение исчезло только после того, как перезалил изображение и вставил новую ссылку.
Но по теме топика -- воз и ныне там ... Sad

Аватар пользователя BatKor BatKor 22 ноября 2016 в 23:17
1

ТьФуу ты, думал тебенадо всю шапку обернуть в ссылку и не увидел.
#block-block-6 .appointments-link a {
color: #ff0000;
font-size: 24px;
position: absolute;
top: 50px;
left: 150px;
width: 100px;
height: 50px;
background-color: #000;//Что бы было видно тебе, а потом уберешь
border: 1px solid red;
border-radius: 10px;
}

Аватар пользователя baldman88 baldman88 23 ноября 2016 в 0:04

Вот уже ближе, но нет:
[img]https://s18.postimg.org/hnwjnv7fd/2016_11_22_22_33_56.png[/img]
Да и задание абсолютных величин отступа как-то не то. Дома у меня разрешение 1366х766. Если задать в пикселях, и у меня будет нормально, то на мониторе с разрешением 1920х1080, мне так кажется, будет что попало. Наверное лучше будет в процентах? А как быть с размером шрифта, если ширина body указана в абсолютных единицах? В css можно использовать арифметические операции?
Поправил вот так (кстати: без селектора .region.region-header, вообще не срабатывает):

.region.region-header #block-block-6 .appointments-link a {
    color: #ff0000;
    font-size: 24px;
    position: absolute;
    top: 6%;
    left: 40%;
    border: 1px dotted red;
    border-radius: 7px;
    padding: 5px 10px 5px;
    text-align: center;
}

Вышло:
[img]https://s13.postimg.org/so99sul8n/2016_11_22_22_55_09.png[/img]
Ну и то, что контакты сползают тоже плохо Sad

Аватар пользователя baldman88 baldman88 24 ноября 2016 в 23:51

В общем решил все весьма топорно (а может так и нужно на самом деле?). Пытался через админку и блоки, но получалась фигня. В итоге полез в page*.tpl.php. Посмотрел, а там элементы шапки заданы как table-cell. В нужном месте вставил ссылку (тоже как table-cell) и задал стиль для нее. Теперь хоть на всех разрешениях мониторов она на своем месте (правда на больших разрешениях шрифт мелковат, ну да ладно). Вот что вышло:
[img]https://s22.postimg.org/i4tdpmqtt/2016_11_24_22_33_41.png[/img]Главное жена довольна Smile
Спасибо всем!

Аватар пользователя multpix multpix 25 ноября 2016 в 0:26

baldman88 wrote:

Теперь хоть на всех разрешениях мониторов она на своем месте (правда на больших разрешениях шрифт мелковат, ну да ладно).

Увы, но mobilityfirs актуален и для вашей ЦА,
а с ним - беда
afrodita no mobility

Но если дама довольна - это главное)))

Аватар пользователя baldman88 baldman88 25 ноября 2016 в 0:40

А это что такое? Можно подробнее? А то я в вопросе вэба мимо проходил (я, в основном, по С++ и Python), но жена попросила, вот и взялся. Вроде с телефона пробовал -- все нормально отображается, даже не смотря на то, что разрешение дисплея 720х1280, а ширина тела жестко задана в 960 пикселей. Сайт делался довольно давно, и сомневаюсь, что я смогу что-то кардинально поменять (тем более за спасибо Smile

Аватар пользователя multpix multpix 25 ноября 2016 в 1:11
1

https://search.google.com/search-console/mobile-friendly
ctrl+shift+i chrome
f12 firefox
смотреть эмулятор моб.

для сравнения, как на пример - поглядеть на https://thoughtbot.com/

в довесок куда уж без seo:
поглядеть на микроразметку:
https://search.google.com/structured-data/testing-tool?hl=ru
почитать про нее:
https://developers.google.com/search/docs/guides/intro-structured-data
пример, и просто полезный ресурс:
http://jsonld.com/article/