Как изменить цвет в шаблоне блога
Несмотря на то, что существует миллион готовых шаблонов для блогов WordPress, среди которых есть и очень оригинальные, все равно хочется что-то там подкрутить, подправить и сделать свой блог не похожий на другие.
Самый простой способ – изменить цвет фона разных частей блога. Для этого нужно слегка подредактировать фай стилей в шаблоне оформления. Как изменить цвет в шаблоне блога я рассказываю в этом видеоуроке:
Вы можете скачать этот видеоурок и посмотреть его на своем компьютере с лучшим качеством изображения.
Марина,пыталась поменть цвет шапки на красный
как сказано в уроке-навела курсор-определила что этот элемент называется header, зашла в файл css и поменяла цвет background
результат такой-при загрузке сайта-красный цвет быстро мегает-потом снова серый появляется….почему так?
Давно искал подобное руководство, спасибо твоему блогу за такой материал. Ещё бы хотел узнать, как снять в шаблоне выделение ссылок синим цветом. Т.е не сам текст ссылки, а поле вокруг ссылки.
Ссылка задается элементом A, но поле вокруг нее может задавать и более “старший” элемент, например, заголовок или список. Нужно так, как я показывала в уроке http://marina-makarova.info/?p=117 определить, какой именно элемент имеет background синий и убрать этот цвет. Если подсветка появляется при наведении мыши, то поищи такую запись в CSS:
a hover: ….
hover – обозначает состояние элемента при наведении на него мыши.
А общий фон шаблона каким образом можно изменить? Вот у меня он на данный момент серый, хотелось бы поставить белый.
А каки образом меняется общий фон блога? У меня он на данный момент серый а мне нужен белый)
maks, Вам нужно в админке блгога в правом меню найти команду ВНЕШНИЙ ВИД, а в ней подкоманду РЕДАКТОР. Там нужно открыть файл стилей style.css в нем нужно найти запись типа этой:
body {
background: #507803 url(images/background.jpg) ;
Измените код серого цвета на белый: #ffffff
фона может быть задан и с помощью картинки – или удалите ее url(images/background.jpg) или замените на свою
Не забудьте поменять права доступа к файлу стилей. Читайте о них здесь:
http://marina-makarova.info/?p=109
Здравствуйте Марина! Очень доступно ихъясняетесь, спасибо
У меня есть вопрос не конкретно по этой теме (надеюсь он близко стоит).
Такая ситуация: У меня блог на Вордпрессе (на бесплатной основе). Возможно ли изменить цвет ссылок в правой части блога (категории, архивы, последние записи и тд)
И ищё вопрос (этот уже более отдалённый)
Если у меня блог на бесплатной основе (с припиской wordpress в адресе), возможно ли перейти когда-нибудь на платную основу, ну и чтоб приписка исчезла при этом? Или может это я ерунду какубю-нибудь говорю
Буд благодарен за помощь.
Если вы хотите перейти на платный хостинг, то это лучше сделать как можно быстрее. Вы ведь пишете статьи и поисковые системы их индексируют и направляют посетителей к вам. если вы создадите блог на платном хостинге, то нужно будет некоторое время, чтобы он проиндексировался. Поэтому чем меньше у вас пока информации на блоге, тем безболезненней пройдет этот процесс.
А что касается изменения цвета ссылок, то это зависит от того есть ли у вас доступ к файлу стилей оформления блога style.css. По идее должен быть и в нем нужно найти записи,относящиеся к ссылкам и поменять в них цвет, как показано в уроках на моем блоге.
Добрий день, Марина.
В мене блог на Вордпресі, не знаю яким чином та маю велике бажання змінити
- колір бокової панелі,
- колір зовнішньої частини ресурсу (те що у Вас на сайті зеленого кольору)
Дякую Вам за Ваші попередні рекомендації.
Сприятливих Вам обставин та позитивних емоцій,
з повагою Ігор.
Здравствуйте, Игорь.
Чтобы поменять цвет фона блога (колір зовнішньої частини ресурсу), нужно в файле style.css найти свойства для элемента body. Они могут выглядеть приблизительно так:
body {
background:#507803 url(images/background.png) repeat-x 0 0;
width:1170px;
margin:0 auto;
font:normal 12px Georgia,”Times New Roman”,”Bitstream Charter”,Times,serif;
color:#4a483d;
}
То, что выделено жирным, и отвечает за цвет фона. Здесь #507803 – код цвета фона, а url(images/background.png) repeat-x 0 0; говорит о том, что есть еще и картинка, которая повторяется только по горизонтали ( repeat-x )
Найдите подобную запись у себя и замените цвет на тот, что вам нужно.
Чтобы найти элемент, отвечающий за боковую колонку, посмотрите мой урок А что там внутри? http://marina-makarova.info/?p=117
Так вы сможете найти имя для элемента div, который содержит боковую колонку и уже в нем – свойства цвета.
Добрий день, Марина.
Перш за все висловлюю Вам свою вдячність за Ваші відгуки.
Марина, хочу дізнатися щодо оптимізації ресурсу під браузери….(зображення даного сайту в експлорері бажає кращого).
Спасибо, Игорь
Шаблон этого блога просто довольно широкий – 1170 пикселей по горизонтали. Именно это, скорее всего, и вызывает у вас неудобства. Потому что на моем компьютере во всех браузерах блог выглядит одинаково.
Спасибо за пост. Шаблоны для Вордпресс в сети выложены пачками, но всё равно хотелось бы что нибудь своего, эксклюзивного. Марина, а не могли бы вы сделать пост о русификации англоязычных шаблонов? Было бы просто здорово!
Русификацией шаблонов я никогда не занималась
Обратитесь к Гудвину – он делает это профессионально и выкладывает у себя на блоге совершенно бесплатно. Шаблоны для всех своих блогов я брала именно у него.
Здравствуюйте! Я создала 2 блога, этот православный третий, ну никак не могу совладать с цветами, подбираю рекламу уже день 5-й и в цвет попасть не могу, а тему менять ой как не хочеться!
У Вас очень качественный сайт и очень нужный! Я просмотрела видио, но вот у меня 8-я версия эксплоера, но я там не нашла Средства разработчика, только средства обозревателя. Может это где в настройках есть?
В InternetExplorer средства разработчика можно открыть кнопкой F12 на клавиатуре. А вообже они находятся в верхнем правом углу в группе команд Сервис.
У меня на блоге, в этой статье http://marina-makarova.info/?p=190 , вы можете скачать программку Rule, с помощью которой тоже можно легко определить цвет любого элемента на экране компьютера.
Здравствуйте ещё раз Марина. У меня возник вопрос. Как расширить обычный шаблон во всю ширину браузера? Спасибо.
Обычно шаблон блога делается на основе элементов div- это так называемая “дивная верстка”. Суть ее заключается в том, что для всех элементов – шапки, боковых колонок, области для вывода статей и т.п. устанавливаются четкие размеры, особенно ширина. Если вы измените общую ширину шаблона, то вся красота может просто “поплыть”, т.е. все элементы будут не на своих местах. Хотя и не обязательно.
Если это вас не пугает, то попробуйте в файле style.css изменить ширину для общего шаблона.
Обычно она задается в самом начале шаблона для элемента body (но тоже могут быть разные варианты – некоторые авторы шаблонов добавляют еще и дополнительные div’ы для формирования основной части блога):
body {
background:#507803 url(images/background.png) repeat-x 0 0;
width:1170px;
margin:0 auto;
font:normal 12px Georgia,”Times New Roman”,”Bitstream Charter”,Times,serif;
color:#4a483d;
}
Попробуйте, может у вас получится
А потом напишите плз о результатах.
привет Марина.!
Мне очень нужна ваша помошь всвези с моим блогом.
Я поставила в блог дизайн со слайдшовом.
у меня такой вопрос,как поменять картинки в слайде?
Вот можете посмотреть: http://www.lifewithdemy.blogspot.com
Я бы посмотрела ролик,только он у меня не показывает(
Здравствуйте, Деми!
Что-то давно не заходила на блог и поэтому не ответила сразу. Сейчас посмотрела ваш сайт – слайд-шоу работает
Шикарнейший мануал! Спасибочки огромное. Бложик в подписки
Пожалуйста
Спасибо огромное, очень помог ваш видеоурок!
Спасибо за видео. Очень помогло. Марина не подскажете можно ли на сайте одновременно размещать рекламу от гугл и яндекс?
Пожалуйста!
Конечно можно. Только получить коды рекламных блоков гугля можно практически без проблем, а яндекс директ принимает в свою рекламную сеть только раскрученные сайты.
Марина, а подскажите можно ли текст изменить в заголовке шаблона? и как это сделать?
Почему-то стерлось мое прошлое сообщение. Повторю его: после редактирования текста(цвет, шрифт), а также после изменения размеров некоторых боксов, изменения видны только в гугл хром, а в интернет експлорер например, все остается попрежнему. Я и страницы обновлял, и браузер перезарускал, и денвер перезапускал но ничего не меняется. Почему и как исправить? Спасибо.
Александр, предыдущее ваше сообщение не показывалось, так как все комментарии на этом блоге проходят модерацию
А вы обновляли файл, в который вносили изменения? Для этого в нем должны быть установлены права доступа 644. После внесения изменений права доступа опять нужно поменять на 666.
Спасибо что ответили. Я не думал что на денвере тоже нужно менять права доступа да и честно говоря без понятия как это делать. И разве это причина того, что в одном браузере отображается корректно отредактированные вещи, а в другом нет?
Спасибо что ответили. Я не думал что на денвере тоже нужно менять права доступа да и честно говоря без понятия как это делать. Подскажите?))
Прошу прощения за занудство, но сам никак не разберусь. Прописываю в style.css float:left все поменялось. Вернул назад в right. Опять все поменялось. Через пару часов делаю тоже самое, не меняет никак вообще. Все выполняю на денвере. Версия вордпрес 2.8.6. Как быть? И так в гугл хром и в интернет експлорер. Спасибо.
Спасибо, очень помогли. очень понятно и доходчиво объяснили.
Пожалуйста, Антон
Марина! Такая же проблема:
пыталась поменть цвет шапки на красный
как сказано в уроке-навела курсор-определила что этот элемент называется header, зашла в файл css и поменяла цвет background
результат такой-при загрузке сайта-красный цвет быстро мегает-потом снова серый появляется….почему так?
Спасибо!
Татьяна, у вас в файле стилей цвет шапки задается картинкой feat1.gif:
.header {
background: url(“images/feat1.gif”) repeat-x scroll center bottom #D8D7D7;
Поэтому вам нужно поменять эту картинку
Марина! я нашла как сделать все по моему вопросу! ))
Спасибо большое!
Пожалуйста, Татьяна,
Как вывести сервис в браузере что бы приступить к просмотр цвета!
В Интернет эксплорере нужно нажать клавишу на клавиатуре F12. Для Мозилы нужно установить дополнение Firebug (скачайте бесплатно с сайта http://firebug.ru/ там и инструкции есть как им пользоваться) и тоже для вызова нажмите F12.
Марина, здравствуйте.
Пожалуйста, подскажите,как можно поменять цвет на имеющуюся картинку, а не просто другой цвет?
Я уже где-то писала об этом, но вот еще раз:
body {
background:#507803 url(images/background.png) repeat-x ;
Нужно для свойства фона background какого-то элемента (body, header или другого нужного вам), указать url той картинки, которую вы хотите видеть в качестве фоновой. repeat-x обозначает, что эта картинка будет повторяться по горизонтали, repeat-y по вертикали, а если просто repeat, то и по горизонтали и по вертикали.
Здравствуйте Марина.
Вы многим помогаете освоить ворд пресс.
Пожалуйста помогите и мне,обясните начинающему как заменять картинки на большом экране
в слайд шоу который находиться
на главной странице сайта.
Это должно быть написано в файле описания вашего конкретного шаблона для блога. Если у вас там встроен плагин Featured Content Gallery, то я про него писала в этой статье:
http://marina-makarova.info/nastrojka-plagina-featured-content-gallery/
Марина, спасибо большое за ваш блог. Написано все понятно и красиво. Я пытаюсь изменить готовый шаблон для своего блога и у меня такая возникла проблема. Не могу изменить меню с английского на русский. Я до этого блога сделала другой и там все получилось изменить, но вот с настоящим прямо головная боль. Название блога удалось изменить, а вот само меню не получается. Помогите пожалуйста советом. С уважением,
Ирина
Ирина, это нужно смотреть, в каком файле PHP формируется это меню. В разных шаблонах может быть по разному. Выделяете какое-то слово на английском в меню и ищите, есть ли оно в каждом файле темы. Когда найдете этот файл, то прямо в нем и меняете английские слова на русские.
Спасибо за ответ, Марина. Буду пробовать.
Мариночка, спасибо вам огромное за ваш труд, вы мне очень помогли!!
Пожалуйста, Алексей
Скачала плагин с тестом, цвета совершенно не устраивали, но благодаря Вашему видео все быстро изменила. Спасибо, отличный урок!
Здравствуйте, Марина!
Спасибо за Ваш сайт, Вы действительно делитесь нужной полезной информацией.
Я сама начинаю делать свой сайт на движке Вордпресс. Скачала и установила тему iHealth 1.0 от NewWpThemes.com. В этой теме есть возиожность через настройки поменять фон, т. е. загрузить нужную картинку для фона. Сколько не пыталась, ничего не получается, и не только именно с этой темой, но и другими подобными темами. Разве что получилось установить нужный фон для стандартной темы Twenty Ten 1.3 от the WordPress Theme. Подскажите, с чем это может быть связано? И если не получится изменить фон через настройки фона, то единственный выход – корректировать HTML-код?
И еще такой вопрос. Если в качестве фона у меня будет картинка и я пропишу ее в HTML коде, то где сама эта картинка должна хранится? Ведь когда мы загружаем на Вордпресс какую-либо тему, то все необходимые файлы, в т. ч. и файлы с расширением .jpg, для этой темы уже укомплектованы.
Буду Вам очень благодарна за помощь.
Здравствуйте, Татьяна!
Обычно все картинки для любой темы вордпресс хранятся в папке images этой темы. Т.е. вы просто свою картинку загружаете в эту папку и уже потом в файле style.css указываете url Например так:
body {
background:#507803 url(images/background.png) repeat;
}
Вместо файла background.png указываете имя своего файла с картинкой
Здравствуйте, Марина! Спасибо за столь интересную тему! Очень интересовалась этим. Все начала пробовать.
Решила украсить блог к Новому году. И застряла. Фон меняется великолепно. А вот с картинкой – проблема.
body {
background: #f2bef2 url(images/fon1.jpg) repeat-y;
но фон почему -то по вертикали не повторяется. В верхней части картинка( по бокам), в нижней – розовый фон.
Может в коде я пишу что-то не так? (Если убираю цвет f2bef2 , то ни картинки , ни цвета), просто белый цвет… Спасибо.
Не знаю, Елена, чем вам помочь – вроде все правильно написано в коде.
Марина, огромное Вам спасибо! Вы меня вдохновили на дальнейшее движение – изучение способов изменения стандартных шаблонов. Просто недавно обнаружила клон своего блога, и очень захотелось как-то выделиться.
Здравствуйте Марина.Учусь делать свой сайт.Просмотрела Ваш урок,но у меня не выходит поиск на моем сайте в мозила.пишет что не найдено.Уже скачала программу Firebug 1.9 и ничего не меняется.я не сильна в написании HTML i CSS ваш урок как палочка выручалочка.
Спасибо что работаете и для нас .С уважением Светлана.
Марина! Спасибо Вам огромное за Вашу работу. Сегодня переделал шаблон под новый. Супер!
Счастья Вам, процветания, Божественной любви, успехов в делах!
Это самое лучшее обьяснение, которое есть в инете.
Спасибо!
Здравствуйте, у меня возникла проблема, как показано в видео уроке с моим примером есть не стыковки( Мне кроме цвета нужно изменить шаблон, то есть таких сайтов, как у меня 10 шт. и каждый сделал свои изменения ( Поменяли цвет, поменяли блоки местами и мелкие моменты) но сама суть осталась просто добавляли уникальность.
Я уже неделю пытаюсь что то сделать, результат нулевой.
Обращаюсь к Вам Марина, есть возможность мне помочь лично? Буду очень признателен или подскажите кто может помочь. Услуги оплачу.
Спасибо.
Здравствуйте, Сергей!
Я не занимаюсь переделкой шаблонов – и времени нет, да и знаний в PHP недостаточно ((
Спасибо Марина за содержательное видео,ещё не испробовал у себя,но сейчас хочу поэкпериментировать у себя на сайте,я только учусь вообще сайт сделать,думаю получится.