Как изменить CSS-стили новичку
Всем привет! Сегодня расскажу и покажу Вам, как изменять css-стили и как работать с кодом сайта новичкам. Этот вопрос мне часто задают новички, которые хотят разобраться что к чему на их блогах. И раз данная тема актуальна, я решил написать данную статью и записать для вас подробное видео.
Многие новички хотят знать более подробно как устроен их блог и как вносить какие-либо изменения в код. То есть, менять шрифт, фон, отступы и все остальное. Конечно можно просто взять и выучить html-код, php и css-стили, но это нужно если вы будете создавать рукописные сайты. Лично я не знаю все тонкости, мне хватает основных понятий и принципов.
Если изменения не касаются глобальной перестройки шаблона сайта, то с этим вполне может справиться и блогер-новичок. Все что для этого нужно – это Ваши желание, админпанель Вашего блога и обычный интернет-браузер.
Чтобы не рассказывать каждому в отдельности, как все это делается, я записал для Вас новое видео. К записи меня дополнительно подтолкнуло еще и прошедшее третье занятие в «Школе веб-мастеров» Яндекса, на котором спикер Алексей Иванов очень интересно рассказывал о взаимосвязи дизайна и юзабилити сайта и их влиянии на конверсию посетителей.
Тем своим читателям, кто еще не начал посещать эти бесплатные занятия, рекомендую почитать о «Школе веб-мастеров» и посмотреть предыдущие занятия. Уверен, что Вы почерпнете для себя много по-настоящему полезной информации.
Так вот, за дизайн определенных элементов в коде сайта отвечают именно стили CSS (или, как их еще называют, каскадные таблицы стилей), про изменение которых я и расскажу. Именно они отвечают за то, как выглядят страницы Вашего сайта. Они как-бы представляют код HTML, используя формат «свойство: значение». Стили CSS могут быть использованы для большинства HTML-тегов. Это все кажется на первый взгляд сложным, но по ходу просмотра видеоурока, Вы поймете насколько просто и увлекательно творить свой сайт с их помощью.
Для чего все это нужно? Ответ простой: очень редкий шаблон сочетает в себе требуемый функционал с требуемым дизайном. И ко всему еще добавлю, что применение стилей CSS позволяет получить более чистый код, который легче технически, шустрее в загрузке и более любим поисковыми системами.
В общем, вот мой видеоурок, перед просмотром которого, хочу еще раз напомнить, что прежде, чем начать экспериментировать со стилями своего сайта обязательно нужно сделать резервную копию!
Внимание! Если правая кнопка мыши не активна, проделайте следующую процедуру, о которой я говорил в видеоуроке.
Для браузера Firefox:
1. В адресной строке браузера введите about:config и нажмите Enter.
2. В строке поиска введите Javascript.
3. Найдите свойство javascript.enabled, поставьте значение false (двойной щелчок мыши по строке).
Надеюсь, что после просмотра у Вас не осталось вопросов. Но если все-таки что-то осталось непонятным, пишите в комментариях, вместе разберемся. Кого более подробно заинтересует тема каскадных таблиц стилей, всегда смогут найти массу информации в Сети.
В заключении поделюсь небольшой хитростью. Таким образом, как я показал в видео, можно не только редактировать свой сайт, но и скопировать понравившиеся стили с других сайтов, чтобы потом применить их в своей практике. На этом у меня на сегодня все. Жду Ваших комментариев и вопросов к статье.
P.S. Если вы еще не зарабатываете на партнерских программах, жду Вас в своей системе обучения партнерскому маркетингу. Кликайте по ссылке и узнавайте подробности прямо сейчас.
С уважением, Евгений Вергус.
Женя привет!посмотрел сейчас твое видео,как изменить стили!Видно не один я этим интересуюсь!да,на твоем блоге много можно найти,много интересного,сразу видно руку мастера!Спасибо!
Алексей, спасибо! Рад что видео понравилось и принесло пользу, значит уже не зря записал )
Евгений спасибо за данную статью очень интересно. Раньше знал за стиль CSS но у меня не было сайта а теперь есть свой сайт и данная статья очень пригодилась.
Всегда пожалуйста )
О, спасибо, Женя! Довольно неожиданно :). А то я уж тут кроме партнерок и не ждала ничего из сайтостроения 😉
А школа яндекса интересная, тоже смотрю записи. Даже лекции двухлетней давности там нашла для себя. Ну лучше поздно, чем никогда 🙂
Да ладно ) Конечно партнерки это основная деятельность, но и сайтостроении и продвижении я тоже много рассказываю )
Это действительно очень полезная статья с видео. Ведь постоянно чешутся руки,чтобы поэкспериментировать над своим блогом 🙂
Всегда пользовался браузером google chrome. Решил попробовать установить еще и мозиллу, вдруг и мне будет удобнее
Там намного удобнее, это факт!
Евгений, не в курсе сколько видеоуроков Яндекс планируется провести в «Школе вебмастеров».
Это вопрос или ответ? ))) Если вопрос, то я не знаю точно.
Спасибо, Евгений!
Очень полезная, актуальная статья! Давно хотелось кое-что изменить на своём сайте. Ваша статья — находка!
Рад что вам понравилось, Ольга!
Здравствуйте,Евгений!
Вобщем-то у меня на всех блогах со всеми шаблогами я таким образом и справляюсь, кроме одного (его я и вставила в строку «Сайт»)
Тамошняя тема не реагирует ни на какие манипуляции...
Когда-то я немного подкорректировала шапку- так она стала некликабельной.
А в самом шаблоне вообще ничего невозможно поменять.
Брать другой шаблон не хочется-не встретилось ничего такого, чтобы на душу легло.
Я где-то читала, что некоторые авторы ставят какой-то шифр, чтобы тему не меняли...
Там у меня в редакторе целых три СSS- пробовала на всех-не получается ничего изменить
Да, есть такие шаблоны, где все немного сложнее и мой способ не будет работать. Но таких шаблонов очень мало.
Подтверждаю,"Школа вебмастеров" от Яндекса очень полезное мероприятие, я сам вчера прослушал четвертое занятие «Как написать хороший текст для сайта» — присутствую на занятиях пока без пропусков. Действительно, там дают много полезной и нужной блоггеру информации. Кстати, Женя именно благодаря Вашей статье я узнал о предстоящем обучении — спасибо Вам.
Что касается CSS, действительно элементарные знания блоггеру нужны — ведь не будешь каждый раз по всякому пустяку бегать на фриланс? Для тех, кто хочет глубоко вникнуть, могу посоветовать бесплатные курсы Е. Попова по HTML и CSS.
Иван, всегда пожалуйста! и конечно же я подтверждаю, что если нужно изучить код, то бесплатные курсы Жени Попова самое то что надо.
Я сам часто в его курсах нахожу нужный мне ответ, ведь по каждой мелочи не набегаешься к фрилансерам.
Евгений посмотрел я ваше видео, хочу сказать только одно, что все что вы показали в этом видео не ко всем шаблонам это подойдет, бывает так что основные стили могут прописываться и в других файлах, а в главном стили, может быть только описание и например стиль body.
Поэтому, что бы лесть в стили нужно хоть немножко понимать строение самого блога.
Если тема простая, то это видео подойдет замечательно.
Да, я уже сказал ранее, что не ко всем шаблонам, но таких шаблонов очень мало.
Евгений,спасибо за интересный материал! Очень просто и доходчиво! Смотрел неоднократно другие материалы на эту тему, но полной ясности в голове не было. А у тебя все четко,ясно и без лишней воды. Классно!!! Буду с нетерпением ждать новых уроков по сайтостроению.
Рад что видео принесло и понравилось )
Здравствуйте Евгений!
В Вашем уроке по созданию сайта предоставлена тема для вордпрес DEVICE.Но там почемуто не могу поставить меню.В настройках вроде написано что можно использовать одно меню,выбираю его но оно не появляется на блоге.А без меню, блог не блог )
В своем курсе я не делаю упор ни на какие темы в принципе. Вы сами должны найти и выбрать ту тему, которая вам интересна. И мне не совсем ясно, что вы имеете в виду под Меню? Лично у меня нет на блоге меню, есть только страницы и рубрики и что, по вашему мнению мой блог не блог? )))
Евгений я извиняюсь за свою не грамотность,т.к. начинающий блогер )). Под меню имел ввиду,страницы. Применил новую тему а страницы не отображаются. Вот сейчас посмотрите на мой блог
blogyakupova.ru
надо смотреть настройки ) Тем много разных и все они по разному выглядят и работают. По этой теме точно не помню где там страницы, но они там есть )
Евгений,
спасибо за урок, мне как раз он кстати, хочу внести изменения в шапку своего сайта и хотелось бы это сделать самостоятельно,
но гуманитариям это дается не просто,а урок как скорая помощь...
И ещё вопрос не по теме.У меня в архиве имеются Ваши семейные фото с Питеринфобиз 2015, куда лучше Вам их отправить...
Валерия, привет! Фотки можешь загрузить куда тебе удобнее и просто пришли мне ссылку на почту, буду благодарен за фото.
Женя Привет!Все классно у тебя на сайте,много полезной информации!В целом у меня практически все настроено на сайте,но ни как не могу понять,как мне в слайдер добавить записи,что-бы они отображались на блоге.За ранее благодарю!Спасибо
Я не могу ответить на ваш вопрос. Так как шаблонов много и настройки у них тоже разные. Нужно смотреть что к чему в каждом конкретном случае.
Вот опять,вспомнил!Женя еще один вопрос.Как вниз подвала поставить социальные кнопки,или нужна определенная тема,с этими нижними виджетами?За ранее благодарю!Спасибо!
Кнопки можно поставить в любое место путем размещения кода, но для этого нужно знать немного код сайта. А если речь идет о виджетах внизу, как у меня, то здесь конечно тема должна поддерживать виджеты.
Как добовляется фотки пользователей которые пишут коментарии?
Нужно создать граватар, статья об этом есть на блоге.
я писал вам в контакте вы не ответили пожалуйста отвечайте на мой вопрос в контакте если нет трудно . Спасибо
В вк я не отвечаю и там об этом написано ))
я хотел рекламировать Вебтрансфер но там я не нашел как ставит метки
Здравствуйте Евгений
07.10.15
вот если я вступаю в группу в контакте будет ли видна в группе всем те ссылки партнерские та которые я даю . Спасибо
и я вступил в группу в гугле+ там в группе будет ли видна маи партнерские ссылки. Спасибо
Да, будет видна.
Хочу сказать огромное спасибо Евгению Вергусу за помощь
в создании своего первого сайта. Его бесплатный курс «Как создать свой сайт легко и просто» понятен даже для новичка.Язык простой и доходчивый,видео- исчерпывающие.Советую всем, у кого ещё нет своего сайта,обратиться к этому замечательному курсу!Вы получите не только новые необходимые знания ,но и получите массу удовольствия.Ведь это так интересно!
Лариса, спасибо за отзыв ) Рад что вам понравился мой курс по созданию сайта. Удачи Вам!
Евгений Вергус, извините, не знаю Вашего отчества. Можно поинтересоваться, почему адрес моей электронной почты оказался у Вас в черном списке? Что же я такое натворила? Тем более, что я заканчивала Ростовский Государственный Университет, факультет «Политическая экономия», а до этого РИНХ. Мы почти земляки. Вчера только вернулась в Подольск и увидела себя в «черном списке». Знаете, очень неприятно, особенно, когда приезжаешь не с радостного события.
Елена, вы о чем? В каком черном списке и где вы это увидели?
Евгений, добрый день!
На моем сайте в шаблоне WP при переходе на другие страницы предусмотрены всплывающие окна типа «подтвердите свое действие». Подскажите, как убрать их. Заранее благодарна
К сожалению, я не сталкивался с данной проблемой.
Евгений здравствуйте!
Пользовался этим методом в CHROME, но Вы правы — в FIREFOX удобнее. Только цвет фона изменить не удалось... Или шаблон такой? а в настройках темы изменение фона не предусмотрено...
Спасибо за нужную многим статью и видео
Удачи и успехов!
Не думаю что шаблон, цвета должны быть в папке со стилями.
Привет,Евгению!Тоже хочу выразить благодарность за полезные видеоуроки по созданию собственного сайта.Весь материал изложен простым и понятным языком,все шаги по созданию, показаны последовательно и с необходимыми для работы, материалами.Еще раз,спасибо!Продолжаю улучшать свой сайт.
Спасибо большое, Марина )
Как хорошо что нашла у Вас это видео. Пойду экспериментировать. Не хочу тему менять, но отдельные элементы не хотелось бы.
Спасибо
Благодарю
Евгений,хорошая статья, спасибо!
В вордпрессе есть пользовательские CSS (когда нажимаешь настроить в теме), как там работать? есть инфо?
У вас на блоге «поставить галочку» не работает, видимо кнопка «наверх» закрывает всю высоту!
Можно там тоже править и добавлять стили.
Здавствуйте Евгений! Всё учусь по Вашим урокам и Вы здорово в этом помогаете. Но у меня получилось изменить в коде размер шрифтов и в Мозиле все сработало, а в Хроме все по старому. Почему так? В редакторе style.css обновился
Это кеш в браузере, нажмите F5.
Всё разобрался. Почистил кэш комбинацией Cltr+F5 и изменения проявились. Теперь мой блог получше выглядит. Спасибо за полезную статью.