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

    Тема: Twenty Seventeen.

    Пробовал и:
    all: unset;

    border: none;

    outline: none;

    Да чего только не пробовал, никак. Есть идеи?

    • Тема изменена 7 месяцев, 2 недели назад пользователем lexdev.

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 15 ответов — с 1 по 15 (всего 16)
  • вы про какие ссылки говорите? можете принтскрин показать?

    если про верхнее меню, то надо корректировать #top-nenu>li.a:focus {blablabla-none}

    если про ВСЕ!!!! ссылки на сайте, то попробуйте корректировать

    body a:focus {blablabla-none} — поможет верняк

    Я говорю про 3 кнопки, которые в самом низу страницы(дикиди, трубка, ватсап), я их потом вырежу, чтобы всё было красочно и чётко, но вокруг этих иконок тема рисует окантовку серо-чёрного цвета, вот её мне нужно убрать.

    какого серо-черного? в дырочку? там тоже a:focus обведено

    Вот эти рамки))

    Попробовал через a.focus — нифига.

    Не a.focus, а a:focus — разницу понимаете? И обязательно уточнять, где именно.

    <!DOCTYPE html>
    <html>
    <head>
        <style>
    
            .image-link {
                position: fixed;
                bottom: 20px;
                right: 20px;
                display: flex;
                flex-direction: column-reverse; 
                align-items: flex-end;
                a:focus {border-none}
                z-index: 999;  
            }
    
            .image-link a {
                margin-top: 10px;
            }
    
            .image-link img {
                width: 50px; 
                height: 50px; 
                cursor: pointer;
                border: none
            }
        </style>
    </head>
    <body data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1>
    
        <div class="image-link">
            <a href="tel: +7 (952) 543-34-43">
                <img src="https://beauty-space-vrn.ru/wp-content/uploads/2023/09/whatsapp.png" alt="Изображение 1">
            </a>
            <a href="https://dikidi.ru/998530">
                <img src="https://beauty-space-vrn.ru/wp-content/uploads/2023/09/ikonka-dikidi.png" alt="Изображение 2">
            </a>
            <a href="https://wa.me/+7 (952) 543-34-43?text=Здравствуйте!">
                <img src="https://beauty-space-vrn.ru/wp-content/uploads/2023/09/whatsapp1.png" alt="Изображение 3">
            </a>
        </div>
    
        <p>Пример текста на странице.</p>
    </body>
    </html>

    Я вот вообще не совсем понимаю, что мне надо делать, потому сюда и обратился, что бы я в этот фокус не написал — рамка остаётся. И такое только в этой теме.

    • Ответ изменён 7 месяцев, 2 недели назад пользователем lexdev.
    • Ответ изменён 7 месяцев, 2 недели назад пользователем lexdev.

    вы либо самостоятельно верстать научитесь, либо найдите человека, который вас научит… если нет денег на разработчика. ну или букварь прочитайте https://html5book.ru/osnovy-css/

    a:focus — это НЕ СТИЛЬ. это селектор элемента (псевдокласса).

    • Ответ изменён 7 месяцев, 2 недели назад пользователем efess.

    Я открою Вам маленький секрет, я сейчас и учусь верстать, и из всего, с чем я на данный момент столкнулся и прочитал, я всего-лишь не понял, как именно убрать эти рамки. Мой вопрос заключался в этом, и прежде чем идти на форум поддержки, я прочитал далеко не одну статью на эту тему, и ни одна из них не помогла, ровно как и Ваш ответ.

    Что за странная логика? Если человек обращается в тп с вопросом, это не значит, что у него нет денег на разработчика, я учусь всему сам, а это тот случай, где нужной инфы банально нет.

    я вам открою большой секрет — так не учатся, а по верхам хватают. статьи читать надо, когда букварь прочитан.

    ваш вопрос к wordpress никакого отношения не имеет, это не «он рисует рамки вокруг кнопок» — не ту часть вы у себя поддерживаете.

    а откуда в коде страници берется этот текст?

     /* Стили для изображений-ссылок */
            .image-link {
                position: fixed;
                bottom: 20px;
                right: 20px;
                display: flex;
                flex-direction: column-reverse; /* Размещаем изображения-ссылки в столбце с обратным порядком */
                align-items: flex-end;
                a:focus {border-none}
                z-index: 999; /* Устанавливаем высокий z-index, чтобы кнопки были поверх всего содержимого */
            }
    
            .image-link a {
                margin-top: 10px;
            }
    
            .image-link img {
                width: 50px; /* Установите ширину 10 пикселей */
                height: 50px; /* Установите высоту 10 пикселей */
                cursor: pointer; /* Измените курсор при наведении на изображения */
                border: none
    }

    Ваш самописный блок не туда вставлен, поэтому принимает на себя лишние стили. Доработки в тему можно вносить хуками или с помощью механизма дочерних тем. Тема Twenty Seventeen не имеет нужных вам хуков, поэтому правильно будет создать дочь, и вставить ваш блок например в header.php перед началом контента. В этом случае не будет проблем с версткой, только z-index блока надо будет повысить.

    Я вот вообще не совсем понимаю, что мне надо делать

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

Просмотр 15 ответов — с 1 по 15 (всего 16)
  • Тема «Рамки в темах» закрыта для новых ответов.