Войти

Авторизация

Логин:
Пароль:
Забыли пароль?
Регистрация
Сайт пользователей Artisteer и Themler. Официальный торговый представитель.

Адаптивный дизайн - настройка меню, логотипа и пр

Помогите с настройкой элементов
Постоянный участник
Степаныч
Медаль
Сообщений: 660
42 дня назад
Innajan:
А можно ли как-то привязать логотип и слоган к краю листа? А то при смене разрешения всё выравнивание разъезжается...

Все элементы в шапке имеют дополнительную коррекцию стилей через файл script.js поэтому простое изменение стилей в файле .css для них не получится.

Что бы сделать обычное управление в .css надо переименовать класс в index.php и соответственно так же найти и переименовать этот класс в файле стилей .css

Например у Вас для логотипа class="art-object20424339933" переименовать его например так class="art-object20424339933s", в конце добавил s и в файле стилей сделать то же самое.

Теперь можно просто задавать нужные параметры в файле .css для этого стиля, и назначать куда и как его подвинуть.

Однако в этом случае нужно проверять и исправлять если необходимо положение и в файле стилей для адаптивных устройств style.responsive.css

Innajan:
А меню нельзя вытащить поверх лого во избежание перекрытия (мало ли, может, со временем будет куча подпунктов и они перекроют-таки логотип)?

z-index у лого пробовали ставить меньше, а у меню возможно наоборот больше?

Спойлер
Редактировалось: 1 раз (Последний: 12 мая 2015 в 00:40)
Постоянный участник
Malover
Медаль
Сообщений: 625
8 дней назад
Innajan:
А можно ли как-то привязать логотип и слоган к краю листа?

В стилях для art-object20424339933 поставьте

left: 0;
top: 0;

для отступов добавить

margin-left: 10px;
margin-top: 10px;Добавлено спустя 2 минутыТолько работать наверное будет только после переименовки:

Степаныч:
Например у Вас для логотипа class="art-object20424339933" переименовать его например так class="art-object20424339933s", в конце добавил s и в файле стилей сделать то же самое.

Теперь можно просто задавать нужные параметры в файле .css для этого стиля, и назначать куда и как его подвинуть.
Постоянный участник
Handy
Медаль
Сообщений: 759
3 дня назад
Innajan, Не лучше будет совсем отказаться от постороннего слайдера. Сделать слайдер в Artisteer полностью с логотипом и текстами. Потом вырезать слайдер из кода и вставить модулем, как в теме:

Скрытый текст виден только зарегистрированным пользователям


Это более удобный вариант, чем переделывать. music
качественное продвижение и раскрутка сайтов в сеопульте
Посетитель
Innajan
Сообщений: 26
290 дней назад
Handi:
Не лучше будет совсем отказаться от постороннего слайдера. Сделать слайдер в Artisteer полностью
Честно говоря, я так и не поняла, как пользоваться родными артистировскими слайдерами. Поэтому и не использовала их.
Handi:
вырезать слайдер из кода и вставить модулем
- это тоже не поняла, как делается.
Вообще, в моём случае лучше, чтобы было всё в визуальном режиме и поменьше кода, иначе я никогда не смогу научить заказчиков модерировать собственный сайт.
Переименовывать класс и потом ещё проверять положение в файле стилей для адаптивных устройств style.responsive.css - возьму на заметку на будущее, может, пригодится. А пока открыла я его, посмотрела - и даже не знаю, как его править, что там должно быть... Лучше, наверное, пока воздержаться.
Придётся смириться с тем, что на разных устройствах логотип и слоган будут отображаться по-разному.
В принципе, меня уже почти всё устраивает, меню отображается поверх логотипа, лого расположен так, как я и хотела.
Всем огромное человеческое спасибо!
Постоянный участник
Malover
Медаль
Сообщений: 625
8 дней назад
Innajan:
Переименовывать класс и потом ещё проверять положение в файле стилей для адаптивных устройств style.responsive.css - возьму на заметку на будущее, может, пригодится. А пока открыла я его, посмотрела - и даже не знаю, как его править, что там должно быть...

В нем все то же. В видеоуроках есть про Firebug постарайтесь научится.
Для редактирования мобильного дизайна обычно использую Firebug открывая шаблон в Mozilla в нем через Инструменты - Веб-разработка - Адаптивный дизайн.
Посетитель
Innajan
Сообщений: 26
290 дней назад
Malover, спасибо за советы!
Установила Файрбаг, посмотрела, как выглядит сайт на мобильных устройствах и ужаснулась... Начиная с разрешения 980 на 1280 шапка съезжает, логотип исчезает, первый пункт меню "О компании" становится неактивным (нажимаешь - не работает). Откуда-то надпись "div>" появляется под хэдлайном...
""
Изображение уменьшено. Щелкните, чтобы увидеть оригинал.

Высоту шапки в файле template.responsive.css убрала, ничего не изменилось.
Постоянный участник
Степаныч
Медаль
Сообщений: 660
42 дня назад
Innajan:
Откуда-то надпись "div>" появляется под хэдлайном...
Смотрите где то неправильно скопировали див, нет "<" перед див, с этим лучше разобраться иначе в некоторых браузерах шаблон посыпится.

Innajan:
первый пункт меню "О компании" становится неактивным (нажимаешь - не работает).

Смотрите что его может заслонить, скорее всего какая то часть прозрачного изображения от чего то.

Innajan:
посмотрела, как выглядит сайт на мобильных устройствах и ужаснулась...

Хм.. имхо выглядит неплохо. На мобильных сайты обычно так и выглядят. Второй вопрос что, что в результате перестановок логотипа он перестал появляться в нужном месте для мобильных устройств.

Подумаю может что лучше можно придумать. Но пока ничего лучшего как пытаться прописывать его в стилях только для мобильного не придумал.

Вообще все больше склоняюсь к мысли Handi:

Handi:
Не лучше будет совсем отказаться от постороннего слайдера. Сделать слайдер в Artisteer полностью с логотипом и текстами. Потом вырезать слайдер из кода и вставить модулем, как в теме:

То есть все пытаться реализовать в программе, раз у Вас с работой по коду тяжело. Это даст всё таки наиболее готовый шаблон к тому что требуется, без исправлений.

Логотип у Вас пропал потому что в мобильных стилях style.responsive.css для него прописаны правила по старому. Кстати возможно его часть и закрывает на мобильном виде пункт "О компании".

Спойлер
Редактировалось: 1 раз (Последний: 14 мая 2015 в 00:46)
Постоянный участник
Malover
Медаль
Сообщений: 625
8 дней назад
Степаныч:
Malover, не точно объяснил Firebug нужен не только для мобильного, а для всех устройств.

Не правильно выразился. Firebug использую при редактировании любого вида.

В начале долго не хотел им разбираться как пользоваться, но потом когда понял, что все довольно просто, не представляю даже что можно как то делать шаблоны без него.
Посетитель
Innajan
Сообщений: 26
290 дней назад
Спасибо большое за советы!
Да, действительно, был пропущен знак "<" перед div.
Файрбаг был включён, просто я эту панель сдвинула вниз, чтобы было лучше видно. Там вроде всё сразу интуитивно понятно.
А логотип и хэдлайн я по совету Степаныча вытаскивала наверх в index.php, поставив перед закрывающим тегом </header>. То есть не через css.
А что именно надо поправить в стилях только для мобильного? Я имею в виду для того, чтобы хотя бы просто вытащить логотип наверх. Попробовала выставить z-index, не помогло. Логотип не появился. Может быть, нужно уменьшить картинку и сделать ссылку на неё в файле css?
И как-то странно не работает главный пункт меню - работают только подпункты. Не похоже, чтобы что-то заслоняло...
Редактировалось: 1 раз (Последний: 15 мая 2015 в 00:14)
Постоянный участник
Степаныч
Медаль
Сообщений: 660
42 дня назад
Innajan:
И как-то странно не работает главный пункт меню - работают только подпункты. Не похоже, чтобы что-то заслоняло...

Посмотрел сейчас. Если правильно понимаю то это сделано сознательно через скрипт. Если есть выпадающие пункты то родитель становится не кликабельным.

Возможно связано с тем, что на смарте при нажатии пальцем если будет переход в родитель то пользователь никогда не сможет перейти в подпункты, он не будет успевать, сразу будет открываться страница родителя.

Можно конечно попробовать что то поискать в коде, но наверно не осилю.
Если возможно попробуйте переструктурировать пункты так что бы учитывать такую особенность.


Innajan:
А что именно надо поправить в стилях только для мобильного? Я имею в виду для того, чтобы хотя бы просто вытащить логотип наверх.

Завтра выберу время попробую глянуть. Отпишусь.
Постоянный участник
Степаныч
Медаль
Сообщений: 660
42 дня назад
Innajan:
А что именно надо поправить в стилях только для мобильного? Я имею в виду для того, чтобы хотя бы просто вытащить логотип наверх. Попробовала выставить z-index, не помогло. Логотип не появился

Оказалось все не в адаптивном стиле а в обычном, там есть указание для мобильного.

Что бы логотип появился надо в template.css строка 408

Код PHP:
  1.  
  2. .default-responsive .art-object2042433993
  3. {
  4. display: none;
  5.  
  6. z-index: 999;
  7.  
  8. }
  9.  
убрать display: none;


Что бы отпозиционировать логотип в адаптивном по своему, а в обычном по своему:

Нужно вначале все выставить как Вам нужно в файле стилей template.css для логотипа у Вас строка 391

Код PHP:
  1.  
  2. .art-object2042433993
  3. {
  4. display: block;
  5. left: 0%;
  6. margin-left: 350px;
  7. position: absolute;
  8. top: 0px;
  9. width: 566px;
  10. height: 351px;
  11. background-image: url('../images/object2042433993.png');
  12. background-position: 0 0;
  13. background-repeat: no-repeat;
  14. z-index: 999;
  15. }
  16.  
После этого в браузере переключить через инструменты на адаптивный вид и настраивать уже стили для логотипа в указанной выше строка 408:

Код PHP:
  1.  
  2. .default-responsive .art-object2042433993
  3. {
  4. [s] display: none;[/s]
  5.  
  6. z-index: 999;
  7.  
  8. }
  9.  
Добавить сюда положение относительно top и left и margin если нужно. Иногда что бы перебить другие стили надо использовать !important
так:
margin-right: 0 !important;
Посетитель
Innajan
Сообщений: 26
290 дней назад
Степаныч, спасибо огромное!
Всё получилось, для адаптивного дизайна просто будет подгружаться картинка поменьше. Не могу победить слоган, где только ни пробовала настраивать, в мобильном варианте не удаётся убрать его огромность и подвинуть. Может как-то сделать, чтобы он вообще не показывался, а сам слоган просто тупо добавить к картинке логотипа? Хотя это всё, конечно,такие пляски с бубном...
И всё-таки стало интересно насчёт родного слайдера - из какого файла нужно вырезать код (index.php?) и в какой файл вставить? А каким образом вставляется как модуль?
И вопрос насчёт пункта меню в мобильном варианте актуален... Если подпункты отключить, то пункт меню работает.
Редактировалось: 1 раз (Последний: 16 мая 2015 в 00:50)
Постоянный участник
Malover
Медаль
Сообщений: 625
8 дней назад
Innajan:
Может как-то сделать, чтобы он вообще не показывался, а сам слоган просто тупо добавить к картинке логотипа?

В template_002.css строка 108

Код PHP:
  1. .default-responsive .art-header .art-headline, .default-responsive .art-header .art-slogan {
  2. display: block !important;
  3. left: 0 !important;
  4. margin: 2% !important;
  5. text-align: center !important;
  6. top: 0 !important;
  7. z-index: 1000;
  8. }
display: block !important; замените на display: none;

Innajan:
И всё-таки стало интересно насчёт родного слайдера - из какого файла нужно вырезать код (index.php?) и в какой файл вставить? А каким образом вставляется как модуль?

из index.php этот код что вырезали нужно вставить в кастомный (код html) модуль, в редакторе в режиме источник (или html код).
Кастомный модуль добавить, в менеджере модулей, кнопка "Создать", выбрать " HTML-код Модуль отображает на сайте фрагмент HTML-кода, набранного вручную или с помощью... "

Тему про слайдер просмотрите всю, там есть какой код вырезать.
Постоянный участник
FDmitriy
Медаль
Сообщений: 401
6 дней назад
Innajan:
Хотя это всё, конечно,такие пляски с бубном...

Куда ж без них? smile
При разработке макета сайта стараюсь учитывать возможности программы. Лично я пошел бы по вашему сайту другим путем.
Сделал бы под меню или над ним узкий хедер, в него слева разместил бы тонкий, длинный логотип, а справа какой то модуль с помощью CONTROL-ID в него можно или контактные данные или кнопки соцсетей разместить.

Все было бы по феншую и без бубна. За исключением слайдера. smile
Редактировалось: 4 раза (Последний: 17 мая 2015 в 14:11)
Посетитель
Innajan
Сообщений: 26
290 дней назад
FDmitriy:
слева разместил бы тонкий, длинный логотип
Я не могу менять ни логотип, ни брендбук фирмы. Лого такой, какой есть, и нужно исходить из этого. Я, как дизайнер, должна вписать имеющийся логотип и цветовую гамму подобрать в соответствии или с брендбуком или с цветами лого. Это, так сказать, аксиома работы дизайнера.
Malover, спасибо, сделала по Вашему совету. По слайдеру возьму на заметку на будущее. Пока оставлю тот, с которым столько мучилась.
И всё-таки что же делать с меню, неужели ни у кого не было косяков, это родное артистировское меню, ничего в нём не изменяла.
|
Перейти на форум:
Быстрый ответ
У вас нет прав, чтобы писать на форуме.