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

[Wildcdu]

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

Справа появится вот это

Выбираем это, нажимаем

И вуаля видим нужный кусок в style.css даже с номером строки...

Теперь правим ручками то что вам нравится (в примере я решил изменить размер шрифта)
Тут же видим изменения... (ну прям визуальный редактор)

Изменения в браузере не влияют на Ваш дизайн, а только показывают изменения и после обновления страницы исчезнут

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

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

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

Делайте резервный копии перед внесением изменений!!!

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

Всех благ Вам!

 

[Wildcdu]

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

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

@font-face {
  font-family: 'Lobster';
  src: url('lobster-regular.ttf');
}
h1, h2 {
font-family: 'Lobster', 'Georgia', serif;
}

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

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

Делайте резервный копии перед внесением изменений!!!

 

[Wildcdu]

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

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

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

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

 

[Wildcdu]

Добавлю кусочки CSS для изучения применения
Раз:

a {
    line-height: 1;
    display: inline-block;
    color:#0085ba;
    text-decoration:none;
    cursor: pointer;
}
a:after {
    display: block;
    content: "";
    height: 2px;
    width: 0%;
    background-color: #0085ba;
    transition: width .3s ease-in-out;
}
a:hover:after,
a:focus:after {
    width: 100%;
}

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

и два:

.uploadButton {
    display: block;
    width: 100px;
    background: #3df;
    padding: 10px;
    color: #FFF;
    font-size: 16px;
    font-weight: bold;
    font-family: Tahoma;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
}
.uploadButton:hover {
    background: #3ce;
}

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

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

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

.wpcf7-form{
    background: #000;
    width : 375;
    height: 460px;
    overflow: hidden;
    margin: 20px;
    border: 2px solid #fff;
}
.wpcf7-form h2{
    font-size : 20px;
    text-align: center;
}
.wpcf7-form input, .wpcf7-form textarea {
    border-color: #808080 #C0C0C0 #C0C0C0 #D4D4D4;
    border-style: solid;
    border-width: 1px;
    padding: 4px;
    line-height: 16px;
    font-size: 14px;
    width: 350px;
    float: none;
    margin: 0;
}
.wpcf7-form textarea {
    line-height: 16px;
    font-size: 14px;
    height: 100px;
}
.wpcf7-form p{
    font-size : 14px;
    margin-left: 20px;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 290px;
    padding: 0 0 10px;
    color: #fff;
}

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

.buttons_form {
     padding: 0px;
     height: 30px;
     width: 150px !important;
     border: none !important;
     cursor: pointer;
     color: #fff;
     -webkit-border-radius: .5em;
     -moz-border-radius: .5em;
     border-radius: .5em;
     color: #faddde;
     border: solid 1px #980c10;
     background: #d81b21;
     background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
     background: -moz-linear-gradient(top,  #ed1c24,  #aa1317);
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}