Ответы пользователя по тегу CSS
  • Что делать если лого ломает сайт и поменять брейкпоинты бургера на сайте Wordpress?

    azerphoenix
    @azerphoenix
    Java Software Engineer
    Добрый вечер.
    1) Как отметил коллега, у вас ошибка в слове Coockie должно быть Cookie.
    2) Далее настоятельно рекомендую задавать вопросы поотдельности, а не 3 в одном.
    3)
    как поменять брейкпоинты меню бургера на сайте?

    Что именно вы подразумеваете под брейкпоинтом в данном контексте? В моем понимании брейкпоинт - это точка остановки во время дебага. У вас при ширине 961 - 1452 пикс. меню начинает постепенно сжиматься, но бургер не появляется. Грубо говоря, в планшетной версии отображается полноценное меню, а не бургер. Можно при помощи медиазапросов скрыть полноценное меню и отобразить бургер. скрыть - ashade-nav показать - ashade-mobile-header
    4)
    Как убрать виджет ,,недавние комментарии" на сайте на странице блога

    Раз это виджет, то значит он убирается в разделе Внешний вид - виджеты. Далее найти соответствующую колонку и удалить виджет recent comments. Или же может быть, что при помощи виз. редактора определена область виджетов и добавлены необходимые виджеты. Тогда найдите соответствующую страницу и удалите оттуда этот виджет.
    5)
    на сайте логотип с размером 500x500 занимает пол экрана по какой-то непонятной причине, а когда он меньше хоть бы на 1 пиксель он становится маленьким как не знаю что (можете посмотреть на сайте)

    Меня больше заинтересовало другое, а именно название лого)))
    sbxMaEu.png
    Вот, будет умора, когда лого проиндексируется и попадет в гугл с таким названием
    К тому же, логотип на данный момент размером 300х250 пикс, скорее всего лого становится маленьким потому, что там высота задается автоматически, а ширина 100%. Когда меню уменьшается, то логотип по ширине не уменьшается и соответственно, высота адаптируется под нее. На момент просмотра сайта я не заметил данной проблемы. Попробуйте описать проблему более подробно
    Ответ написан
    1 комментарий
  • Как Подчеркнуть первый уровень раскрывающегося меню?

    azerphoenix
    @azerphoenix
    Java Software Engineer
    Natasha000, добрый день! Было бы неплохо предоставить ссылку на сайт. Так будет проще что-либо подсказать.
    А если отвечать общими словами, то попробуйте например:

    .category-menu .et_pb_menu__menu li.first-level {
    border-bottom: 2px solid #ff0000;
    }
    Ответ написан
  • Spring boot не видит css и js. Пути к файлам прописывал по советам всех форумов. Может не правильный конфиг?

    azerphoenix
    @azerphoenix Куратор тега Spring
    Java Software Engineer
    Добрый день.
    Используете ли вы шаблонизатор thymeleaf?

    Если да, то это не совсем корректно:
    <link href="${pageContext.request.contextPath}/templates/bootstrap/plugins/fontawesome-free/css/all.min.css" rel="stylesheet">


    Попробуйте так:


    То же самое проделайте с js
    Например,
    <script th:src="@{/bootstrap/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>


    Все остальное замените таким же образом. Должно сработать.

    И еще что в консоли браузера отображается во вкладке Сеть (Network) ?
    Ответ написан
    4 комментария
  • Иконка на пол экрана в момент загрузки сайта?

    azerphoenix
    @azerphoenix
    Java Software Engineer
    Здравствуйте!
    Причиной является то, что:
    1) иконка большого размера
    2) ограничение размеров иконки задано при помощи css
    3) пока загружается страница и загрузятся отдельные файлы (css, js), а затем уже стили применяются к странице. Вот, на этот временной интервал вы видите большую иконку
    Ответ написан
    4 комментария
  • Оптимизация Wordpress. Или как оставить только нужное в head?

    azerphoenix
    @azerphoenix
    Java Software Engineer
    Для оптимизации я использую плагины:
    Fastest Cache + Fastest Cache Premium + Autoptimize. Правильно сконфигурировав эти плагины можно добиться результатов до 100 баллов по PageSpeed. Другой вопрос - а надо ли?
    Вообще, использование виз. редакторов чуть усложняет оптимизацию сайта, но тем не менее это возможно. Ну и в целом обратите внимание на размеры и вес фото, на хостинг, на используемые плагины и на многое другое. Желательно использовать меньше внешних скриптов или подгружать их асинхронно
    Ответ написан
    Комментировать
  • Почему на разных телефонах по разному отображается кнопки в формах?

    azerphoenix
    @azerphoenix
    Java Software Engineer
    Потому, что кривая верстка. Такое довольно часто может встречаться, когда сверстано без учета аспектов браузеров и моб. телефонов. Например, кнопки в android & iOS могут отличаться. Кнопки могут отличаться в safari, IE и т.д. Нужна просто CSS коррекция
    Этот вопрос не имеет отношения к ВП.
    Ответ написан
    Комментировать
  • Как обнаружить ошибку в CSS?

    azerphoenix
    @azerphoenix
    Java Software Engineer
    Здравствуйте!
    Использовал давным давно этот плагин оптимизации и кеширования, но в конечном итоге остановился на плагине Fastest Cache + Fastest Cache Premium. Причиной того, почему я использую этот плагин - минимум затрат, максимум эффекта. И до сих пор практически не встречался с ошибками, которые могли быть связаны с этим плагином. Помню один раз была проблема в теме Divi и с этим плагином и то наблюдалась она в браузерах IE.
    Попробуйте установить этот плагин и включите все пункты и посмотрите на результат и на то, будет ли ошибка.
    Ответ написан
    Комментировать
  • Что в вёрстке отвечает за подпункты меню?

    azerphoenix
    @azerphoenix
    Java Software Engineer
    Откройте dev tools браузера и проинспектируйте элемент.

    Как сделать так, чтобы эти "рамки" были на весь подпункт меню?
    Ещё хотелось бы сделать выравнивание текста по центру в подпунктах - что за них вообще отвечает?

    Вам нужно тег ul субменю сделать на всю ширину - width:100%; или задать минимальную ширину: min-width:300px;

    Чтобы выровнить текст добавьте text-align:center
    Ответ написан
    1 комментарий
  • Как верстать и сразу же натягивать на WP?

    azerphoenix
    @azerphoenix
    Java Software Engineer
    Как понимать верстаю ли я или натягиваю на ВП? Понимаете, это разные абсолютно вещи.
    И вообще верстка не связана с натягиванием на ВП.
    Все начинается с работы дизайнера. После чего дизайн отдается верстальщику. Верстальщик с учетом ТЗ верстает шаблон используя html, css, js (тут он может подключить кучу разных сборщиков, препроцессоров и т.д. - gulp, haml, less, scss и т.д.).
    Далее разработчик создает тему для WordPress на основе верстки, т.е. пишет рнр код зная кодекс ВП.
    Ответ написан
    Комментировать
  • Как отодвинуть кнопки?

    azerphoenix
    @azerphoenix
    Java Software Engineer
    Вопрос не имеет отношения ни к WordPress, ни к Woocommerce. Тут дело в верстке (Html & css).
    Могу общими словами сказать, что можно сделать, а дальше уже вам придется реализовать.
    Во-первых, можно средствами js получить высоту каждого блока, а делее найти блок наибольшей высоты и задать этот размер другим блокам. Таким образом все блоки будут одной высоты и не будет "лесенки".
    Во-вторых, можно например, задать блокам свойство min-height (с запасом). Тогда блоки также будут одинаковой высоты.
    В-третьих, вы можете задать минимальную ширину кнопке, чтобы "в корзину" поместить в ряд. (min-width)
    В-четвертых, у вас кнопка явно смещена вправо. Сказать почему так, не могу. Надо глянуть это на самом сайте. Однозначно, дело в html & css
    Ответ написан
    Комментировать
  • Как удалить лишний CSS?

    azerphoenix
    @azerphoenix
    Java Software Engineer
    ммм... было бы неплохо уточнить вопрос, так как я тут увидел несколько вложенных вопросов:

    Как удалить лишний CSS?

    Если речь идет об удалении лишнего CSS кода, то вы можете скачать ваш проект, открыть его в IDE (Webstorm или любой другой продукт Jetbrains) и в инспекторе выбрать unused css.
    Другой вариант - установить старую версию лисы до 52.
    Найти указанные тут дополнения и почистить ваш сайт -
    Dust Me Selectors
    CSS usage

    Внимание! В новых версиях лисы они не работают!
    https://stackoverflow.com/questions/7147441/firefo...

    А вот, онлайн сервис для удаления неиспользуемого CSS - https://unused-css.com/

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

    В ВП стили и скрипты подключаются через functions.php (в норме). Иногда если это самопис, то можете увидеть подключение кода в header.php || footer.php
    Правильно ли я понимаю, что вы выкачали эти стили и теперь, внешние не нужны вам, так как они у вас уже имеются локально? Если так, то установите плагин query monitor на ваш сайт, найдите handle этих скриптов и при помощи wp_dequeue_style() удалите
    https://wp-kama.ru/function/wp_dequeue_style
    https://ru.wordpress.org/plugins/query-monitor/
    Ответ написан
    Комментировать
  • Как выровнять масштаб и положение картинок в блоках для сайта в Photoshop?

    azerphoenix
    @azerphoenix
    Java Software Engineer
    Здравствуйте!
    1) обработайте ваши иконки в фотошоп и приведите к одинаковому размеру. Например, создайте холст размером 50х50 пикс. Затем помещайте каждую иконку в центр.
    2) добавьте изображения в html + стилизуйте их при помощи CSS. Например, используя флексбокс или еще что.
    Ответ написан
    2 комментария
  • Верстка под wordpress?

    azerphoenix
    @azerphoenix
    Java Software Engineer
    Все возможно. Зависит от вас и от того, как именно вы реализуете функционал
    Ответ написан
    2 комментария
  • Как сделать модальное окно Wordpress на своей верстке?

    azerphoenix
    @azerphoenix
    Java Software Engineer
    это через WP или нужен чистый CSS/JS?

    что вы подразумеваете под реализацией через WP?
    Если нужны плагины, то вот:
    Popup Maker, Easy Modal

    Если тема на бустрапе, то тут подсказывать даже нечего.
    Также можно подключить любую jQuery библиотеку для модалок и т.д.
    Ответ написан
  • Не могу убрать блоки в мобильной версии?

    azerphoenix
    @azerphoenix
    Java Software Engineer
    Остаётся пустота, так как просто скрываю содержимое.

    Вам нужно при помощи медиа-запросов не только скрыть блоки (display none), но и для оставшегося блока задать 100% ширину, чтобы в моб. версии отображался полностью. Тогда не будет пустоты
    Ответ написан
  • Как отключить сворачивание в кнопку категорий в мобильном меню?

    azerphoenix
    @azerphoenix
    Java Software Engineer
    Может не в ту сторону копаю?

    Скорее всего.
    Обычно, это все делается на уровне CSS || JS. Посмотрите, какой CSS код (медиа-запрос) скрывает бок при малых разрешениях экрана.
    Рнр тут ни причем, так как рнр не знает какое разрешение экрана у клиента. Это все js & css
    Ответ написан
  • Пара вопросов: background для записей категорий wordpress, header?

    azerphoenix
    @azerphoenix
    Java Software Engineer
    для одиночной записи понятно:

    .postid-1 {
    
    background-image: url(".... ") ;
    ...
    }


    В теории это не совсем одиночная запись, а запись с ID равным 1 postid-1
    Думаю, что это некорректный способ присваивания стиля для одиночной записи.

    как установить общий фон "X" для всех записей входящих в категорию 1?

    Подобная логика должна решаться на уровне рнр.
    Прочитайте про условные теги ВП.
    https://wp-kama.ru/id_89/uslovnyie-tegi-v-wordpres...

    Второй вопрос. Установил отступ для хедера
    аналогично первому вопросу - как реализовать отступ только на домашней странице (на домашней странице предполагается временно), в категориях (всех записях категорий)?


    Ответом на все ваши вопрос будут - условные теги Wordpress.

    Для домашней страницы логика:

    if( is_front_page() || is_home ) {
    // вставляем стили для главной
    }


    Для одиночной записи тег
    if( is_single()  ) {
    // вставляем стили для одиночной записи
    }


    Для проверки находится ли запись в определенной категории (рубрике)

    if ( in_category( 10 ) ) {
    // вставляем стили для записи, которая находится в рубрике с ID 10
    }
    Ответ написан
    Комментировать
  • Как сверстать карту коронавируса?

    azerphoenix
    @azerphoenix
    Java Software Engineer
    Здравствуйте!
    Если вас не устраивает embed, то используйте Яндекс API

    Или же можете поискать готовые плагины
    Пример работы такого плагина -
    https://reporter.by/coronavirus
    Ответ написан
  • Верстка шаблона на WordPress, прилинковать страницы, как сделать?

    azerphoenix
    @azerphoenix
    Java Software Engineer
    Прочитайте эти материалы:
    https://codex.wordpress.org/Theme_Development
    https://developer.wordpress.org/themes/getting-started/

    Сверстана главная страница.

    Сверстаны все страницы, так как вы приобрели html шаблон.
    Возможно, вы имеете ввиду, что создана тема и шаблон главной страницы.
    Как прилинковать остальные?

    Также, как и создавали шаблон для главной страницы.
    Только для внутренних страниц скорее всего будет один шаблон page.php
    А контент будет динамически добавляться из БД. Все зависит от вашей верстки.
    Ответ написан
    Комментировать
  • Как сделать вывод постов Wordpress в виде неправильной сетки?

    azerphoenix
    @azerphoenix
    Java Software Engineer
    Здравствуйте!
    Неправильная сетка - Masonry Grid
    Готовый набор сниппетов -
    https://bootsnipp.com/search?q=Masonry+Grid
    Например, https://bootsnipp.com/snippets/a6aDD
    https://bootsnipp.com/snippets/Zkk0O

    А также существуют готовые плагины. Ищите в гугл wordpress masonry grid
    Ответ написан