Меняем фон в 825 шаблоне ucoz и блоке новостей

Меняем фон в 825 шаблоне ucoz и блоке новостей

В шаблоне Ucoz 825, фон не однотипный, а составной. Фон состоит из двух частей. Это картинка 2.gif, вы ее найдете вверху Таблицы стилей и заливка черным цветом #1f1f1f. Вы все найдете в описании #contanier.

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

825 шаблон ucoz

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

Меняем составной бэкграунд шаблона 825 на свой

Для понимания того что нужно поменять - посмотрим исходник. Так выглядит оригинальный код описания бэкграунда:
#contanier {background: url('/.s/t/825/2.gif') center repeat-y #1f1f1f; margin:0px; padding:0px; text-align: center;}
заменим на серый бесшовный рисунок (который взят для примера, можете взять свой)
#contanier {background: url('/imgcss/gray.gif') #999; margin:0px; padding:0px; text-align: center;}. Теперь у нас все залито картинкой gray.gif и выглядит как на скрине:

на изображении я отметил, где серый фон вылезает на центральной колонке. Если вас устраивает такой дизайн, можете оставить как есть (если например, вы возьмете черный рисунок вместо серого, то этого изъяна видно не будет).

Меняем оформление центральной колонки в 825 шаблоне ucoz

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

Это сделать просто в коде, который располагается немного ниже, вот этот код:
#centerColumn {width: 599px; vertical-align: top;}
нужно добавить цвет подложки, тогда код примет следующий вид:
#centerColumn {width: 599px; vertical-align: top;background:#1f1f1f}. Ну вот, совсем другое дело.

Как изменить фон в блоке новостей 825 шаблона ucoz

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

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

Обычно за оформление новости, отвечает класс .eBlock. Если посмотреть оригинальный код:
.eBlock {border-top:1px solid #000000;border-bottom:1px solid #000000;background:#1f1f1f;}
, то увидим, что блок новостей заливается черным цветом и описан данным свойством background:#1f1f1f;. Меняем его на белый background:#fff; и делов то.

 

Но у нас остался по прежнему серый шрифт, который на белом фоне сморится немного нелепо. Найдите в Таблице стилей .eMessage {padding: 10px !important;} и добавьте туда описание цвета шрифта color:#111;. Теперь код должен выглядеть так:
.eMessage {padding: 10px !important;color:#111;}. Пользуйтесь :)


Комментарии (0)

Оставить Комментарий

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]