Добро пожаловать в клуб по WordPress

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

Совет Быстро адаптируем тему WP

Тема в разделе "Основы, описания, уроки.", создана пользователем Wildcdu, 8 янв 2017.

  1. Сей опус имеет много моментов, но расскажу кратко.
    И так решили Вы, что то изменить в дизайне Вашего сайта. (Размер шрифта, цвет или что то еще) Чтобы не обременять себя долгими поисками или Вы еще не готовы погрузится в мир CSS стилей и прочих извращений, но очень хочется тогда этот способ для Вас.
    Открываем свое детище в ГуглХром...
    Щелкаем на нужном элементе ПКМ (Правая кнопка мыши) выбираем "Посмотреть код"
    ClubWP.ru - Клуб WordPress
    Справа появится вот это
    ClubWP.ru - Клуб WordPress
    Выбираем это, нажимаем
    ClubWP.ru - Клуб WordPress
    И вуаля видим нужный кусок в style.css даже с номером строки...
    ClubWP.ru - Клуб WordPress
    Теперь правим ручками то что вам нравится (в примере я решил изменить размер шрифта)
    Тут же видим изменения... (ну прям визуальный редактор)
    Изменения в браузере не влияют на Ваш дизайн, а только показывают изменения и после обновления страницы исчезнут


    Тут для вас радостная весть если изменения Вам нравятся и вы хотите их сохранить то открываете свой style.css и вносите те изменения которые Вы сделали.

    У Вас есть путь к файлу (если вдруг Вы правите через FTP, посмотреть кстати можно просто подведя мышку к строке где написано имя файла) номер строки... что еще для счастья надо?

    А надо сохранить Ваши изменения и наслаждаться Вашим персональным дизайном!!!
    Делайте резервный копии перед внесением изменений!!!


    P.S. Добавлю что таким способом (не всегда конечно) можно ©переть дизайн понравившейся темы )))

    Всех благ Вам!
     
    Prideness и Garri нравится это.
  2. Продолжу опус по издевательству над CSS в легкой форме.
    И так Вам понравился шрифт где то а у Вас на сайте его нет...
    Не беда )))

    Ищем качаем нужный шрифт
    Помещаем его в папку с Вашим style.css
    И вставляем этот код в Ваш style.css

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:

    В данном примере Вы задали новый тип шрифта font-family для заголовков H1, H2.

    Не забудьте! Метод бывает не совместим со старыми браузерами. Firefox, IE, Chrome и Opera более менее свежие "кушают" на ура!


    Делайте резервный копии перед внесением изменений!!!
     
    Prideness нравится это.
  3. Продолжим тему CSS.
    Как в У.Шекспире - "Быть, или не быть"...
    custom.css или нет...
    Пример: правим как в примере style.css своей темы и тут "прилетает" обновление темы и все как по Гайдаю - "Лелик - усе пропало!!!"
    Чтоб такого не случилось делаем custom.css и подключаем его в теме и вроде как все должно работать, НО очень часто (на мой взгляд) правим custom.css а изменений ноль. Случается это потому что в CSS есть еще и контейнеры и класс контейнеров! Вот где собака порылась!
    У этих контейнеров есть приоритет (его можно посмотреть с помощью способа выше, в каком порядке грузится приоритет итд)
    иногда помогает такой код в custom.css
    .main-content a {font-size: 18px; }

    те мы объявляем для контейнера .main-content изменения, ключевой момент именно в этом.

    так что смотрите внимательно делайте бакапы и да прибудет с Вами сила!!!

    Разбор полетов CSS будем продолжать...
    Критика и дополнения приветствуются.
     
    Prideness нравится это.
  4. Добавлю кусочки CSS для изучения применения
    Раз:

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:

    Анимашка подчеркивает ссылки на вашем сайте (прикольно)
    Ищите у себя кусок и заменяете на этот или в кустоме... (данный код я публиковал тут но он в мусоре а тут ему на мой взгляд самое место)

    и два:

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:

    Класс кнопки можно сделать свой (это пример)
    Красивая кнопка с помощью CSS в замен стандартным прямоугольным.

    Этот пост постараюсь обновлять мини кусочками интересного.

    Добавочка для осмысления (все примеры являются основой а не аксиомой):
    Стилизуем контакт форм

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:

    Стилизуем кнопку

    Вы не авторизованны на нашем форуме и не имеете возможности видеть этот код!

    Для того, что его посмотреть, Вам надо:

     
    #4 Wildcdu, 8 янв 2017
    Последнее редактирование: 8 янв 2017
    Prideness нравится это.
Загрузка...
Похожие темы - Быстро адаптируем тему
  1. adward
    Ответов:
    5
    Просмотров:
    112
  2. den
    Ответов:
    0
    Просмотров:
    163
  3. Zitex
    Ответов:
    1
    Просмотров:
    147
  4. Fishka
    Ответов:
    6
    Просмотров:
    183