Данный статья является гостевой и подготовлена Виталием, автором сайта mojwp.ru. Хотите так же написать гостевой пост — смотрите страницу Контакты на WPnew.ru Новый год к нам мчится, скоро все случится… Вот и будем готовиться к приходу праздника и украсим свой блог тематичными элементами. Полученные навыки позволят придать индивидуальности сайту под любой праздник. К тому же, предложенные «украшательства» не будут сильно напрягать посетителей. Украшать мы будем без применения плагинов, а воспользуемся небольшой вставкой кода и правкой файла стилей сайта (style.css, css.css или другое название).
Внимание.
Прежде, чем проводить какие-либо работы с кодом файлов шаблона, сделайте резервную копию редактируемого файла. Для самого же редактирования рекомендуется воспользоваться бесплатной программой Notepad++.
1. Изменяем маркированный список
Как создать свой бренд украшений
Если не знаете, что такое маркированный список, то велком в справочник http://htmlbook.ru/html/ul. Кто пишет статьи на сайт при помощи закладки «Визуально», то это такая кнопка: В подавляющем большинстве блогов подобный маркированный список имеет знак квадрата напротив элемента, либо черный круг. Посмотрите на свой сайт и убедитесь в этом. На wpnew.ru маркированный список отображается таким образом:
- пункт 1
- пункт 2
- пункт 3
Давайте заменим данные знаки картинкой. В нашем случае можно поставить рождественский колокольчик, либо елку.
Для задуманного нам понадобится помощь бесплатного дополнения к браузерам Firefox или Chrome под названием Firebug (https://getfirebug.com/). Как им пользоваться уже рассказывалось ранее https://wpnew.ru/udobnaya-rabota/firebug-for-firefox.html. Так же можете глянуть видео, где наглядно показано как работать с этим дополнением к браузеру (вычислим как сделан маркированный список на wpnew.ru):
Итак. Нашли в какой строке файла стиля у нас стоит атрибут list-style (в правом нижнем окошке Firebug пишет номер строки). Теперь заменяем его параметры на блокирующие:
было list-style: square inside none; стало list-style: none inside none;
В данном примере square обозначал черный квадрат. Есть и другие параметры (смотрим http://htmlbook.ru/html/li/type).
После блокировки нужно прописать путь до нашей картинки. Для этого нужно в файле стилей добавить новую строку со следующими параметрами:
.hentry-content ul li
Здесь показано на примере верстки шаблона wpnew.ru. Начало .hentry-content ul мы взяли с предыдущего пункта и добавили li, который дает понять браузеру, что далее нужно отображать картинку для каждого пункта в маркированном списке.
В параметре background мы указали путь к картинке (в данном случае она лежит в папке шаблона images). Остальные параметры скопируйте. Цифра 7 показывает вертикальный отступ картинки. Цифра 0 — горизонтальный отступ. Меняйте их, пока не найдете нужно вам значение (Firebug в помощь)
Так же не забудем о padding, который означает здесь отступ текста от картинки. Запоминайте как описываются отступы в пикселях:
padding: 1px 2px 3px 4px; — здесь соответственно: сверху справа снизу слева;
Если цифры одинаковые, то можно написать как в примере padding:14px;.
2. Меняем стиль курсора на произвольный
Теперь заменим стандартную «руку» курсора, которая появляется при наведении на ссылку, на любой другой рисунок (елку, конфету, Деда Мороза…). Посетителям сайта понравится подобная штука.
Так же необходимо вычислить название класса для тела стать, а точнее для ссылки. На wpnew.ru открываем FireBug, подводим его на любую ссылку в статье и смотрим справа класс — он будет .hentry-content a (непосредственно класс hentry-content, буква a — тег ссылки, для которой мы и будем делать).
В файле стилей прямо под искомой строкой прописано .hentry-content a:hover. В данном случае hover обозначает, что следующие параметры будут работать, если курсор наведен на ссылку. Это именно то, что мы ищем. Добавляем в эту строку с hover к уже существующим параметрам:
cursor: url(images/cursor-1.png), url(images/cursor-2.cur), default;
Здесь мы указываем путь до картинки 1, через запятую до картинки 2, и в конце говорим ставить курсор по умолчанию. Все это делается для того, если вдруг не обработается курсор №1 (утеряется на сервере, браузер не поймет), то подгрузится второй. Если и второй не получится загрузить, то появится по-умолчанию. Чуть подробнее об этом http://mojwp.ru/cursor-css.html
3. Долой Человека-загадку
Если у вас на блоге кто-то оставляет комментарий, и этот человек не зарегистрирован в сервисе Gravatar.com, то вместо красивой персональной аватарки появится Человек-загадка, либо некрасивый «покемон». Давайте сделаем на этот случай свою картинку.
Раз уж украшаем сайт к празднику, то и подберите тематичную картинку размером 64*64 px (в помощь фотошоп или любой другой графический редактор). Закачайте ее к себе на хостинг (обычно подобное размещают в папке images, которую найдете в шаблоне).
Далее необходимо сделать небольшую вставку кода в файл functions.php, который найдете у себя в папке шаблона сайта. Открываем его, листаем в самый конец и, перед закрывающим символом ?> вставляем следующее:
function newgravatar ($avatar_defaults) < $myavatar = get_bloginfo(‘template_directory’) . ‘/images/prazdnik.gif’; $avatar_defaults[$myavatar] = «Праздничная аватарка»; return $avatar_defaults; >
- get_bloginfo(‘template_directory’) . ‘/images/prazdnik.gif’ — путь до картинки (в данном случае она в папке images шаблона);
- Праздничная аватарка — произвольное название.
Сохранили файл functions.php, закачали его на хостинг и убедились что сайт работает. Далее идем в админку сайта > Параметры > Настройки обсуждения и видим снизу нашу картинку. Выбираем ее, нажимаем сохранить и теперь на сайте у вас на «незаграватарившихся» комментаторах красуется нужный рисунок.
Послесловие
На сегодня закончили. Пробуйте, только не забывайте делать резервные копии файлов на всякий случай.
Если есть идеи как украсить сайт, но не владеете навыками, чтобы подобное реализовать — пишите в комментариях к данной статье и попробуем решить «проблему».
Источник: wpnew.ru
Украшения для сайта сделать
главная » Украшения для сайта » Страница 2
- Украшения для сайта
- 6-12-2019, 20:39
- 574
- admin
- Украшения для сайта
- 5-12-2019, 23:44
- 712
- admin
- Украшения для сайта
- 5-12-2019, 23:23
- 716
- admin
- Украшения для сайта
- 2-12-2019, 20:51
- 1 743
- admin
- Украшения для сайта
- 2-12-2019, 20:48
- 847
- admin
- Украшения для сайта
- 2-12-2019, 20:46
- 1 081
- admin
- Украшения для сайта
- 30-12-2018, 16:52
- 1 151
- admin
- Украшения для сайта
- 10-12-2018, 08:38
- 964
- admin
Источник: for-web.ru
MnogoBlog
⛄как создать сайт на wordpress, настроить и оптимизировать wordpress
Архив рубрики: Украшаем сайт к празднику
Собрал все статьи, посвященные украшению сайта к праздникам: Новый Год, День Святого Валентина, 23 февраля, 8 марта, 9 мая и др.
Украшаем текст к 8 марта
Html коды данных значков
Запись обновлена Март 6, 2023 и опубликована в рубрике Украшаем сайт к празднику by Константин .
Падающие няшки: плагин Xmas Snow
С помощью плагина Xmas snow – можно украсить свой сайт к празднику различными падающими няшками: цветочками, сердечками, снежинками и др. Читать далее →
Запись обновлена Март 6, 2023 и опубликована в рубрике Украшаем сайт к празднику by Константин .
Валентинка в виджете
Здравствуйте, давайте создадим активное сердечко в виджете сайта на wordpress. При наведении курсором мышки на картинку с сердечком – картинка поменяется на другую. Читать далее →
Запись обновлена Февраль 14, 2023 и опубликована в рубрике Украшаем сайт к празднику by Константин .
Гирлянда из мигающих сердечек на сайт
Здравствуйте, украшаем сайт к празднику “Всех влюбленных!” (“День Святого Валентина”). Читать далее →
Запись обновлена Февраль 10, 2023 и опубликована в рубрике Украшаем сайт к празднику by Константин .
Плагин новогодней гирлянды Tea noel: различные модификации
Продолжаем украшать сайт к Новому Году! Плагин Tea noel позволяет добавить красивую интерактивную гирлянду на сайт. Мне показалось, что для сайта можно немного урезать гирлянду и её эффекты. Читать далее →
Запись обновлена Ноябрь 19, 2022 и опубликована в рубрике Украшаем сайт к празднику by Константин .
Плагин popup 5 секунд
Здравствуйте, давайте усовершенствует бесплатный плагин Popup Maker, и заставим всплывающее окно закрываться автоматически через 5 секунд или любое другое время. Читать далее →
Запись обновлена Ноябрь 14, 2022 и опубликована в рубрике Украшаем сайт к празднику by Константин .
______________________________
Рубрика: Украшаем сайт к празднику
Собрал все статьи, посвященные украшению сайта к праздникам: Новый Год , День Святого Валентина , 23 февраля , 8 марта , День космонавтики , 9 мая и др.
Запись обновлена Март 6, 2023 и опубликована в рубрике Украшаем сайт к празднику by Константин .
Плагин счетчика до Нового Года
Здравствуйте, предлагаю ниже три версии бесплатного плагина Christmas Countdown Widget с разными новогодними картинками, которые Вы можете скачать ниже с моего сайта.
Источник: mnogoblog.ru