Skip to content

 

Как изменить стандартный шаблон сайта на оригинальный шаблон

оригинальный шаблонДорогие друзья, читатели блога abramo8a.ru, задавались ли вы себе вопросом как изменить стандартный шаблон сайта на оригинальный шаблон? Лично у меня уже давно руки чешутся по изменению дизайна сайта. И сегодня я хочу показать, что можно сделать.

Мне приходится в день просматривать очень много блогов. Сюда входят не только блоги, на которые я подписана, нахожу в поиске или откуда мне оставляют комментарии. Также я администрирую несколько групп на сервисе Subscribe (это группы Старт Ап-анонс, Женское SEO и др.). И вижу, что часто повторяются одни и те же шаблоны сайтов. Иногда заходишь на сайт и думаешь, я уже здесь была или это что-то другое? 🙂 Даже картинки в шапке одинаковые.

Что именно я изменила и, главное, как я это делала?

Сегодня я изменила в своём шаблоне задний фон (background), цвета (color) и шрифт (font-family) заголовков, текста, ссылок. Это, конечно, незначительные изменения, но начало положено.

Для этого я в Панели управления-Дизайн-Редактор, в открывшемся шаблоне Список стилей (style.css) поменяла некоторые параметры, предварительно определив с помощью экранной пипетки и выписав на бумаге, какие цвета имеют те или иные настройки. Далее с помощью этой же пипетки я определила, какие цвета я хочу видеть на сайте и прописала полученные коды цветов в имеющихся стилях сайта.

Экранные пипетки имеются во многих сервисах, таких как FS-capture, Photoshop, Paint и пр. Открыв пипетку из FS-capture и кликнув ей по нужному мне цвету (цветовую гамму можно открыть в любом редакторе изображений), я записала на бумагу полученный код и, скопировав его, вставила в шаблон стилей body.

Открыв список стилей я стала искать нужные мне коды в виде #, цифр, букв или цифр с буквами. Например: #444, #еее, #0080FE. Обычно код 6-значный, но если все цифры одинаковые, то код может быть и 3-значным. Или так: #258 вместо #225588.

body {
margin:0;
padding:20px;
background:#444;
color:#еее;
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Times New roman', Sans-Serif;
text-align:left;
}

И так дальше, в других стилях, где стоят коды, которые мне надо изменить.

Обычно в шаблоне применяется 4-5 цветов. Посмотрите на цвета, которые сейчас используются на вашем сайте. Напишите для себя какой цвет на какой будете менять. Например: синий на голубой. С помощью пипетки выясните какой код у этих цветов. В стилях найдите код синего цвета и вставьте на его место код голубого цвета.

Не забудьте сохранить все изначальные настройки, чтобы можно было всё восстановить.

Тема моего сайта тоже не уникальна. Она очень удобная, 3-колоночная и так называемая "резиновая", подстраивается под любое окно браузера. Поэтому я её частенько встречаю в интернете. И по прошествии полугода ведения блога я решила потихоньку эту тему преобразовать. Так сказать, из стандартного шаблона сделать что-то оригинальное, не похожее на всех 🙂 Хотя, если ваш сайт очень молодой, то лучше пока не заниматься изменением внешнего вида, а писать тексты, много текстов.

Но я не буду делать изменения за раз. Знаете, как стилисты рекомендуют: изменяйте свою внешность постепенно. Чтобы не шокировать людей резкими контрастами. Вот и я пока внесла некоторые изменения в стандартные настройки сайта.

Кроме текстового и фонового изменения можно изменить картинку в шапке, Header или вставить её вновь, если шапка пустая. Ведь именно из-за одинаковых изображений сайты часто путаются. Если в настройках темы не предусмотрена вставка изображения, как в моём случае, то как это сделать можно почитать здесь.

Конечно, этим преобразования стандартного шаблона сайта в оригинальный не ограничиваются. Я постаралась как можно проще всё объяснить, но если что-то осталось не понятным, пжл, не стесняйтесь, задавайте вопросы. И не забывайте поделиться своим опытом 😉

А для расслабления посмотрите как можно быстро разобрать по косточкам и собрать вновь сайт... автомобиль 🙂 Вот что значит единство в действиях.

Сайт посвященный мотоциклам восход сова. Актуальная информация первый сайт знакомств на сайте.

51 комментарий

  1. Елена:

    Тоже хочу изменить шаблон своего сайта. Сегодня уже встретила своего» двойника». не очень приятно было, если честно.

    • Ольга Абрамова:

      Есть очень избитые темы. Поэтому немного творчества будет им на пользу.

  2. Александра:

    Спасибо за информацию, давно озабочена этим вопросом. Скажите, а как размер шрифта менять?

    • Ольга Абрамова:

      Александра, за размер шрифта отвечает параметр font-size: 10 рх, 12 рх. Замените число. А бывает достаточно изменить название шрифта, чтобы изменился размер. Так что экспериментируйте 🙂

  3. Александр Михайлович:

    Попробую и на своем блоге. Спасибо за информацию.

    • Ольга Абрамова:

      Пожалуйста.

  4. Елена:

    Вы правы, темы повторяются и нужно как-то выделиться, сделать запоминающимся свой сайт.

    • Ольга Абрамова:

      Именно запоминающимся 🙂

  5. Роберт:

    очень полезная инфа))) воспользуюсь))) спасибо за пост)))

    • Ольга Абрамова:

      Пожалуйста, Роберт. Надеюсь, Ваш сайт станет эксклюзивом со временем 🙂

  6. серёга:

    а как сделать, что бы при открытии сайта начинала играть музыка, звучать мелодия, песня. И когда захочется остановить, то остановить?. Такое возможно?

    • Ольга Абрамова:

      Я вижу на сайтах такие настройки. Можно в сайдбар виджеты установить, а можно вставить код видеоклипа. Только если виджет стоит и автоматически начинает играть при входе, многих это отвлекает от самой информации и пока найдёшь, как это остановить, то уже интерес теряется. А видео можно по желанию включать.

  7. Эля Князева:

    Уже хотела начать со шрифта.

    • Ольга Абрамова:

      Да, Эля, мелковато у Вас.

  8. Ирина:

    Ольга! Молодчага! Спасибище Вам огромное. А то я со своим сайтом: и расставаться не хочется, и не знала, как его украсить. Теперь постараюсь с ним договориться. А может быть Вы, как-нибудь на досуге и про замену цвета в заголовках сайдбара напишете? Спасибо!

    • Ольга Абрамова:

      Когда Вы будете менять цвет шрифтов текста, то и в сайдбаре тоже поменяется.

  9. серёга:

    я давно периодически захожу к тебе на сайт, много полезной информации.Твой сайт у меня в закладках. У меня уже тоже есть сайт, но пока там почти ничего нет

    • Ольга Абрамова:

      Спасибо, Серёга 🙂 А почему ничего нет? Надо начинать и в комментариях оставлять адрес. Даже если там только пара статей.

  10. Андрей:

    Спасибо, хорошо и понятно написано!

  11. Татьяна:

    Спасибо за науку, Ольга! Попробую что-либо изменить 🙂

    • Ольга Абрамова:

      Татьяна, пожалуйста. Надеюсь, получится.

  12. Наталия:

    Ольга, спасибо за подробное объяснение! Я уже дважды меняла тему — когда начинаешь делать свой сайт, о многих тонкостях просто не знаешь или не придаешь им значения. Часто тема нравится, но… то шрифт бы другой, то картинка в шапке не устраивает. Сейчас снова планирую поменять тему, Ваши подсказки оказались очень кстати!

    • Ольга Абрамова:

      Наталия, у меня тоже вторая тема. Наверное, так у всех, что-то не устраивает. Поэтому может не тему менять, а что-нибудь в теме.

  13. Валерий:

    Я давно задумывался о изменении чего-то на моем сайте. Но как-то руки не доходили. А самое главное — не знал как это делать. Теперь вы подсказали, попробую поэкспериментировать.
    Статья мне ваша понравилась, да и сайт, конечно, тоже. Уже не первый раз захожу на него. Поставил +1 и ретвит. Удачи вам.

    • Ольга Абрамова:

      Валерий, большое спасибо. Желаю Вашему сайту успешных изменений.

  14. Лилия:

    Спасибо за статью!
    А можно ли добавить на сайт в стандартный шаблон 3-ю колонку? и сделать «резиновый размер» как вы сказали про свой сайт?

    • Ольга Абрамова:

      Я не программист, Лилия, поэтому не знаю. Проще выбрать новый шаблон или обратиться к фрилансерам.

  15. Татьяна Зорина:

    Я на своём сайте тоже хотела поменять стандартные настройки. Но потом пришла к выводу, в первую очередь надо заниматься статьями. Кто-нибудь встречал такую тему, как у меня? Может тоже слишком распространённая?

    • Ольга Абрамова:

      Татьяна, если тема бесплатная и многофункциональная, то она рано или поздно будет широкомасштабной. Поэтому хоть-что не мешает в ней поменять. Но это со временем. Пока молодой блог, туда надо писать, наращивать посещаемость.

  16. Ирина:

    Спасибо большое за доступную информацию. Тоже намучилась с темой, а теперь, благодаря Вам смогу подправить всё под себя.

    • Ольга Абрамова:

      Ирина, если не всё, то многое можно поправить.

  17. Михаил:

    Здравствуйте Ольга! Надеюсь вы не будете против, если я немного поправлю вас…
    Если колор обозначается 258, то это означает, что каждая цифра повторяется, но никак не то что написано в посте, а читать: 258, можно как: 225588
    Просто я недавно менял цвета в блоге подобно вашему описанию, поэтому ещё помню, как читается полностью коды из трёх цифр.
    С Уважением, Михаил.

    • Ольга Абрамова:

      Михаил, спасибо за подсказку. Конечно, это моя ошибка. Я уже поправила 🙂

    • Михаил:

      Спасибо большое, что исправлены мои опечатки в моём комменте — я заметил, но уже было поздно, оставалась надежда только на вас, Ольга. Спасибо!

    • Ольга Абрамова:

      Пожалуйста, Михаил. Вы мне помогли исправить ошибку, я Вам 🙂

  18. Юрий:

    Да, старая тема надоедает, особенно когда встречаешь такую у другого блогера. Я воспользовался программой Artisteer и поменял себе тему. Думаю, что на этом не остановлюсь. Можно пойти таким путем, как советует Ольга. Главное движение. не стоять на месте.

    • Ольга Абрамова:

      Юрий, я тоже с помощью этой программы меняла тему, но до конца я ей не довольна, поэтому пока не ставлю. Хотя программа мне понравилась и я просидела с ней до 6 утра 🙂

  19. vvw:

    Может стоило бы и ширину текста увеличить? Немного неудобно читать и постоянно крутить колесико на мышке Можно погуглив найти советы психологов по оптимальной ширине читаемого текста. Надо же стремиться соответствовать требованиям поисковиков о качественном сайте.

    • Ольга Абрамова:

      Спасибо за совет,но вряд ли статьи подобного рода уместятся в пределах окна. Колёсико придётся крутить 🙂

  20. Олег:

    Свой шаблон мне нравится, но вот немного изменить его хочется. Только где время брать?

    • Ольга Абрамова:

      Да, Олег, со временем у всех напряг 🙂 Я помаленьку каждый день что-нибудь внедряю.

  21. Сергей Монеткин:

    Я лично заказывал переделку стандартного шаблона у своего знакомого, он мне его изменил до неузнаваемости, хотя структура осталась прежней.

    • Ольга Абрамова:

      Конечно, можно и заказать. Мне же интересно самой покопаться 🙂

  22. Ирина tratatushki:

    Ой мне тоже интересно самой покопаться, я как раз хочу поменять фото и фон, тоже уже встречала свою тему и не один раз. Вот настало время заняться. Спасибо!!!

    • Ольга Абрамова:

      Ирина, пожалуйста. Выходит, пришло и Ваше время 🙂

  23. светлана rud-svet:

    как хорошо что я к вам заглянула на огонек. у меня такой вопрос, а как надпись в шапке поменять на другое место? ну например, пониже или левее, или правее. какая функция за это отвечает?

    • Ольга Абрамова:

      Светлана, это зависит от шаблона темы блога. Везде по разному. Мне пришлось самой делать баннер для заголовка. Хотя это не совсем верно. Название сайта должно быть активным.

  24. светлана rud-svet:

    Все Оленька методом тыка нашла эти функции страшно было , но куда деваться если захотелось найти нужно искать. Оказывается все так просто

    • Ольга Абрамова:

      Не так страшен чёрт, как его малюют 🙂

  25. Михаил:

    Здравствуйте Оля! А как можно мне отписаться от новых комментов на этот пост, я поискал, но не нашёл. С уважением, Михаил.

    • Ольга Абрамова:

      Здравствуйте, Михаил, отписаться очень просто. Когда получаете письмо с новыми комментариями, внизу есть строчка со ссылкой: To manage your subscriptions or to block all notifications from this site, click the link below:….. Пройдите по ней и поставьте галочку Отписаться.