30 стилей оформления для плагина WP-PageNavi
Представляю вам новую подборку стилей оформления постраничной навигации для плагина WP-PageNavi. Используется градиент CSS3, проверена работа во всех современных браузерах (FireFox, Chrome, Opera, IE10) и проверена совместимость со всеми дефолтными шаблонами WordPress.
Установка стиля элементарна: просто скачайте нужный архив и распакуйте его в папку /wp-content/plugins/wp-pagenavi/. Также вы можете скопировать содержимое файла pagenavi-css.css в файл styles.css в папке вашего шаблона. Таким образом, вы избавитесь от необходимости сохранять файл pagenavi-css.css при обновлении плагина. Только не забудьте в настройках плагина убрать галку с опции "Использовать стиль pagenavi-css.css".
Первая картинка – это скриншот панели плагина с настройками по умолчанию, а вторая картинка это скриншот панели, в которой убраны лишние элементы. Как настраивать панель дело целиком ваше, только помните – при переходе на страницу из середины списка панель становится гораздо шире (хотя бы из-за появления слов "Первая" и т.д.), поэтому не стоит настраивать плагин так, чтобы панель занимала все свободное место на главной странице блога.
Как я уже упомянул, проверена работа во всех современных браузерах и везде панель выглядит одинаково хорошо. За исключением IE9 и ниже, там никакого градиента в принципе не наблюдается. Если для вас это критично, то используйте стили из этой подборки стилей, в ней градиент сделан картинками.
Так же я проверил совместимость стилей со всеми дефолтными шаблонами WordPress (от Default до Twenty Twelve) и десятком популярных шаблонов из репозитория – никаких конфликтов не обнаружено, панельки выглядят абсолютно одинаково во всех просмотренных мной шаблонах. Но если вы найдете какой-либо недочет – скажите, я обязательно поправлю.
И да, стили создавались с помощью сервиса Ultimate CSS Gradient Generator - если предложенные мной варианты не подходят к вашему шаблону, то вы можете сами подобрать нужный цвет и градиент с помощью этого сервиса. Сделать это довольно просто, но если будут вопросы – пишите.
Понравился пост? Подпишись на обновления по 
RSS или 
Twitter !
| Новости Ужгорода Узнайте последние новости Ужгорода тут на сайте news.uzhgorod.ua |
Главная
#1,
Спасибо большое! Использовала 9 вариант, очень красивый!
#2,
В титле написано 30 стилей, а в тексте записи 33. Вы бы уж поправили заголовок то :) Хотя если уж быть совсем точным, то стиль тут всего один, все остальные лишь производные от него..
#3,
да я хотел 3 стиля удалить из тех, которые неудачные, но потом стало их жалко :) а так да, стиль один - цвета разные, собственно - мне стиль нравится, а цвета разные, чтобы к любому шаблону подходили.
#4,
Не подскажите, а как этим генератором пользоваться? Вот выбрала я там полупрозрачный градиент, а дальше? Что куда вставлять?
#5,
ох, ну попробую объяснить.
первым делом установите у себя любой из выложенных тут стилей.
затем заходите на сайт генератора, выбирайте нужный градиент. там справа будет текстовое поле CSS с нужным кодом. копируйте его и вставляйте в pagenavi-css.css вот в это место (старый код там удаляйте):
теперь у вас есть сама панелька в нужном градиенте. нужно теперь подобрать градиент для текущей страницы и для наведения мышкой. для этого в генераторе на нужной градиенте кликните на кнопку "hue/saturation", откроется окошко, в котором вы должны подкрутить ползунок "Lightness" чуть левее - чтобы градиент стал темнее. сделали - теперь копируйте полученный код сюда:
теперь у вас есть и градиент для текущей страницы и при наведении мышки. последний штрих, найдите в последнем коде что-то типа "startColorstr='#7ec47e'", и скопируйте этот цвет в:
этот код устанавливает цвет контура для панели. собственно, его вы можете и сами подобрать, без всяких копирований откуда либо.
#6,
Спасибо! С трудом, но разобралась!
#7,
Всем привет!Скачал 10 форму залил через FTP думал все норм. Никак не хочет отображаться. Может дело заключается в том что я пишу не на странице а в рубриках? Сейчас у меня стоит тема Tank не активированная. Подскажите.
#8,
ну во-первых, одного файла шаблона недостаточно - он работает вкупе с плагином. а во-вторых, в вашем шаблоне реализована подгрузка следующей страницы контента. сделано это довольно забавно и интересно. но при этом никакие плагины постраничной навигации у вас в принципе работать не будут, пока вы эту "фишку" шаблона не отрубите.
#9,
Добрый день, а можешь подсказать как сделать нави как у вас в блоге на данный момент, то есть так же закруглить углы и добавить анимации. А ещё буду очень признателен если расскажите как блок навигации подвинуть вниз и вправо. Заранее спасибо
#10,
долго объяснять - смотрите css-код (в вашем случае их него надо удалить #content), а вниз и вправо это надо у .wp-pagenavi прописать нужный margin (ну или поправить существующий там padding).
#11,
Спасибо за ответ, забыл добавить что надо в папке с плагином добавить /img/grad.gif
Не хочу показаться навязчивым, можешь ли ты провести ацдит моего сайта, может подскажешь, что желательно переделать?
#12,
понятия не имею. явных огрехов не замечено - шаблончик более-менее приличный, придраться без детального анализа достаточно сложно.