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

Скачать исходники для статьи можно ниже

И сразу к делу… )

1. Узнаем какая тема (шаблон) используется на сайте, так как она в основном и определяет его общий дизайн и функционал.

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

Первое что нужно сделать – это определить на каком движке (CMS) сделан сайт.

Есть очень полезные онлайн сервисы, помогающие нам определить CMS сайта, например:

2ip.ru/cms/

Здесь просто указываем имя сайта и смотрим признаки какой CMS найдет данный сервис.

Нужный нам сайт базируется на WordPress – отлично! Значит тема подойдет для нашего сайта.

Идем далее и смотрим – какую тему использует сайт.

Как это сделать, оказывается достаточно просто.

Рассмотрим на примере браузера Firefox.

1. Открываем нужный нам сайт, например mnogoblog.ru.

2. Открываем “Исходный код страницы”, для этого нажимаем комбинацию клавиш CTRL + U (одновременное зажатие этих двух клавиш: CTRL и U) или же заходим в меню браузера в пункт “Инструменты”, далее подпункт “Веб-разработка” и выбираем в нем строчку “Исходный код страницы”.

3. Ищем строчку с ссылкой на файл стилей style.css.

Вот так она выглядит на моем сайте:

<link rel="stylesheet" href="https://mnogoblog.ru/wp-content/themes/glossyblue/glossyblue/style.css" type="text/css" media="all" />

Как ее легче отыскать?

В появившемся окошке “Исходный код страницы” выбираем в верхнем меню пункт “Правка”  и подпункт “Найти”.

И вводим в строку поиска “css” (без ковычек) или сразу “style.css” (без ковычек).

Что дает нам данная строчка?

Она дает нам название темы, то есть на моем сайте используется wordpress тема “glossyblue”, так как ее файл стилей использует на данный момент сайт mnogoblog.ru.

Теперь нам осталось вбить в поисковик запрос: “wordpress тема glossyblue” – и вы без проблем отыщете мою тему (правда я ее немного доработал).

Но данный способ определения темы может и не сработать, например владелец сайта может переименовать папку с темой.

Для решения этой задачки есть небольшая хитрость – в основном темы включают  в себя скриншот (картинку как будет выглядеть тема после установки) – вот его то и нужно найти.

То есть,  например на своем сайте я возьму и переименую папку темы с   glossyblue на mytheme, тогда при отыскании файла стилей style.css вы увидите в исходном коде сайта следующую строчку:

<link rel="stylesheet" href="https://mnogoblog.ru/wp-content/themes/mytheme/style.css" type="text/css" media="all" />

Понятно, что реальное название моей темы не mytheme, но как тогда узнать ее название?

Для этого достаточно в браузер вбить путь, заменив окончание style.css на screenshot.jpg или на screenshot.png.

Например если я вобью на своем сайте в браузер следующий url, то увижу скриншот темы glossyblue:

https://mnogoblog.ru/wp-content/themes/glossyblue/glossyblue/screenshot.png

Вот она:

Теперь нам нужно сохранить данный скриншот на свои компьютер.

Далее нужно воспользоваться поиском через картинки, например с помощью поисковика Google:

http://images.google.ru/

нажимаем в строке поиска на иконку фотоаппарата и указываем путь до скаченного нами скриншота темы.

И в выдаче результатов Google на 5 позиции у меня оказался сайт разработчика моей темы.
 
 

2. Тему скопировали, теперь ищем как создать интересные дизайнерские элементы понравившегося нам сайта.

 
Для этого можно воспользоваться расширением для браузеров.

Например для браузера Firefox – это Firebug.

Как его установить?

Для того, чтобы его поставить себе на Firefox нужно зайти в менюшке браузера в пункт “Инструменты”, далее выбрать подпункт “Дополнения” и в строке поиска ввести Firebug.

Как им пользоваться?

Я пользуюсь в основном следующей функцией (отмечена на скриншоте):

Как пользоваться данной функцией?

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

При этом элемент страницы, над которым находится курсор мыши, будет заключен силами плагина Firebug в синюю рамочку.

На скриншоте выше я выделил картинку с домиками и увидел, что она заключенна в блок div с названием buildings, а в файле стилей style.css прописаны следующие параметры:

 
 
PS: Также более подробно о Firebug можно прочитать по следующей ссылке:

http://ktonanovenkogo.ru/vokrug-da-okolo/programs/poleznye-rasshireniya-dlya-brauzerov-firefox-i-opera-chast-1-firebug-dlya-firefox.html