» » Редактирование шаблона (адаптация шаблона) DataLife Engine (DLE), часть 3

Редактирование шаблона (адаптация шаблона) DataLife Engine (DLE), часть 3

Категория: Редактирование шаблона DLE

Редактирование, адаптация файла стилей шаблона Default.

 

Возьмем стандартный шаблон DLE Default, произведем редактирование шаблона, адаптацию шаблона для поисковых систем и сделаем его уникальным.

Начнем адаптацию шаблона со стилей. Заходим в styless.css, папка style. Данный файл отвечает за внешний вид вашего сайта. Здесь возможно изменить стиль шрифта, вид и цвет фона, размеры и т.д.

И так к примеру меняем фон нашего сайта. В данном шаблоне 50% это фоновое изображение и 50% это заливка цветом. Ищем следующий код:

body { background: #a8d2e5 url("/images/pagebg.png") repeat-x 50% 64px; color: #1f282c; word-wrap: break-word; }

Выбираем необходимый нам цвет фона сайта с помощью к примеру Adobe Photoshop или другой программы. Редактируем шаблон на наш вкус и переименовываем и редактируем файл pagebg.png. Таким же образом меняем цвет и стиль шрифта новостей.

К примеру получаем следующий код:

body { background: #33ff99 url("/images/fon.png") repeat-x 50% 64px; color: #023d11; word-wrap: break-word; }

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

 

Файл styles.css стиля данного шаблона содержит следующие цвета:

 

#a8d2e5  #c0d4de #e5e9eb #f2f2f2  #f2f2f2 #e0cdf3 #93918d
#1f282c #96c #1d76be #c5c5c5 #398cd7  #468edb #73858e
#398dd8 #297cd3  #127ad0  #7d7d7d #6c838e #a2b2ba #f1f5f7
#dbe8ed #3f4b51  #61a7e0 #bcc5c9 #f1f5f7  #e8e8e8 #eee
#fff  #4d5c64 #549fdd #596368 #f0f5f8  #428cda  #dadada
#e0e5e7 #63767f #cde0e9  #909ca3 #2886d4  #3f84cb #f5f6f7
#708893 #368fde #429be3 #2478cc  #f8fbfe #90a7b2 #bcc0c2
#516168 #e4ecf0  #338adb  #d8b2ff #f3f8fd  #2b88d5  #404040
#cbdfe8 #6b7a81 #e1ecf1 #f8fafc  #458fda #e4e6e6 #388bd4
#fbfdfe #b6cbd6 #f6f9fb #e5e5e5 #6d4595 #9dc4e6  


Копируем содержимое файла styles.css в Документ Microsoft Word. Подбираем необходимые цвета для замены. С помощью функции найти и заменить меняем необходимые цвета сразу во всем файл, указываем найти необходимый текст (код цвета) и заменить на необходимый нам код цвета во всем тексте файла. По окончанию работы копируем обратно содержимое в файл styles.css.

 

Как еще более облегчить и унифицировать наш труд рассмотрим далее. Ниже в таблице приведены цвета примерно соответствующие первоначальным и поддерживающиеся всеми веб-браузерами. Все цвета указываются в формате RGB. (Колонка Default — первоначальный цвет, WEB — примерно соответствующий первоначальному.)

 

  Default WEB   Default WEB   Default WEB
                 
1 #a8d2e5  99cccc 11 #c0d4de cccccc 21 #e5e9eb ccffff
2 #1f282c 333333 12 #96c 9966cc 22 #1d76be 3366cc
3 #398dd8 3399cc 13 #297cd3  3366cc 23 #127ad0  0066cc
4 #dbe8ed ccffff 14 #3f4b51  333366 24 #61a7e0 6699cc
5 #fff  ffffff 15 #4d5c64 666666 25 #549fdd 6699cc
6 #e0e5e7 ccccff 16 #63767f 666666 26 #cde0e9  ccccff
7 #708893 669999 17 #368fde 3399cc 27 #429be3 3399cc
8 #516168 666666 18 #e4ecf0  ccffff 28 #338adb  3399cc
9 #cbdfe8 ccccff 19 #6b7a81 666699 29 #e1ecf1 ccffff
10 #fbfdfe ffffff 20 #b6cbd6 cccccc 30 #f6f9fb ffffff
                 
31 #f2f2f2  ffffff 41 #f2f2f2 ffffff 51 #e0cdf3 ccccff
32 #c5c5c5 cccccc 42 #398cd7  3399cc 52 #468edb 3399cc
33 #7d7d7d 666666 43 #6c838e 669999 53 #a2b2ba 9999cc
34 #bcc5c9 cccccc 44 #f1f5f7  ffffff 54 #e8e8e8 ffffff
35 #596368 666666 45 #f0f5f8  ffffff 55 #428cda  3399cc
36 #909ca3 999999 46 #2886d4  3399cc 56 #3f84cb 3399cc
37 #2478cc  3366cc 47 #f8fbfe ffffff 57 #90a7b2 999999
38 #d8b2ff cc99ff 48 #f3f8fd  ffffff 58 #2b88d5  3399cc
39 #f8fafc  ffffff 49 #458fda 3399cc 59 #e4e6e6 ccffff
40 #e5e5e5 cccccc 50 #6d4595 663399 60 #9dc4e6 99ccff
                 
61 #93918d 999999            
62 #73858e 669999            
63 #f1f5f7 ffffff            
64 #eee ffffff            
65 #dadada cccccc            
66 #f5f6f7 ffffff            
67 #bcc0c2 cccccc            
68 #404040 333333            
69 #388bd4 3399cc            

 

Поговорим более подробно о формате задания цветов в HTML  RGB.


Формат записи цвета RGB имеет следующий вид:

rgb(red,green,blue);

Три составляющие цвета — красный, зеленый и синий. Значения указываются от 0 до 255 или в процентах от 0% до 100%. Таким образом красный цвет в RGB записывается:

rgb(255,0,0)

rgb(100%,0%,0%)

 

Запись цвета в HTML производится в шестнадцатиричной форме.

 

Шестнадцатеричная запись:


Цвета указанные с помощью шестнадцатеричной записи:

#RRGGBB

Где RR, GG и BB — это сконвертированные в формат base-16 соответствующие значения красного, зеленого и синего цветов RGB. Зеленый цвет в такой записи будет выглядеть так:

#00ff00

 

Шестнадцатиричная система:

 

0 1 2 3 4 5 6 7 8 9 A B E F

 

Соответственно 0 соответствует 00, 256 — FF.

 

Красный   Зеленый   Синий
R   G   B
FF 00 00   00 FF 00   00 00 FF
                     
Черный   Белый    
00 00 00   FF FF FF        

 

Первоначально наш шаблон Default имеет 69 оттенков цвета, после замены их остается 20.

 

1 9966cc   11 669999
2 ffffff   12 6699cc
3 0066cc   13 999999
4 333333   14 9999cc
5 333366   15 99cccc
6 3366cc   16 99ccff
7 3399cc   17 cc99ff
8 663399   18 cccccc
9 666666   19 ccccff
10 666699   20 ccffff
         

 

Теперь нам не составит большого труда сделать три цветовых комбинации нашего шаблона, необходимо поменять цветовые каналы местами.

 

Пример:

9966cc cc6699 66cc99

 

И так, мы получаем три цветовых решения шаблона Default:

 

  красный зеленый синий
  R G B
1 cc6699 99cc66 9966cc
2 cc6600 00cc66 0066cc
3 333333 333333 333333
4 663333 336633 333366
5 cc6633 33cc66 3366cc
6 cc9933 33cc99 3399cc
7 993366 669933 663399
8 666666 666666 666666
9 996666 669966 666699
10 999966 669999 669999
11 cc9966 66cc99 6699cc
12 999999 999999 999999
13 cc9999 99cc99 9999cc
14 cccc99 99cccc 99cccc
15 ffcc99 99ffcc 99ccff
16 ff99cc ccff99 cc99ff
17 cccccc cccccc cccccc
18 ffcccc ccffcc ccccff
19 ffffcc ccffff ccffff
20 ffffff ffffff ffffff