Notice: Undefined variable: reg_user in /var/www/user382/data/www/kalitkas.ru/lost.html on line 106

Тонкая настройка виджетов

Наши виджеты для сайта имеют три обязательных параметра: ширина виджета в пикселях (единицах измерения разрешения экрана), цвет фона виджета и цвет рамки виджета в RGB (красно-зелено-синей палитре цветов). Причем цвета нельзя указывать названиями (red, green, blue и так далее), можно только в шестнадцатиричной составляющей цвета (afa, afada5, 534, 3d5eff и так далее). Пример установки нашего виджета для сайта Совместимость:

Если вы устанавливаете на свой сайт несколько наших виджетов, то параметры можно писать один раз или, если вы хотите установить разный цвет фона у виджетов, то изменяйте только цвет фона, остальные параметры можно повторно не писать, например:

Тонкая настройка виджетов

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

По умолчанию, то есть без специального указания в таблице стилей, все элементы виджетов выглядят так же, как аналогичные элементы вашего сайта. Внутренними стилями изменены только выравнивание по центру верхней ссылки и нижней кнопки, у кнопки также установленны ширина в 100 пикселей, высота в 20 пикселей и скругление углов. Так же у полей для ввода данных вычисляется ширина и отступы, остальные параметры не указаны и будут наследованны с таблицы стилей вашего сайта. Но вы можете самостоятельно назначить стили к нашим виджетам через свойства таблицы стилей. Для этого мы предоставляем классы наших виджетов:

Теперь мы на примере покажем как можно изменять внешний вид наших виджетов для сайта. Но в начале расскажем основные принципы...

Все наши виджеты находятся в блочных элементах <div> с соответствующими виджетам классами. Верхние ссылки с названиями виджетов находятся в абзацах <p> с выравниванием по центру и отступами сверху и снизу в 5 пикселей. Далее идут формы, которые вы можете настроить по своему усмотрению. В формах находятся списки и текстовые поля, которые имеют отступы слева и справа, а так же ширину в пикселях для точного выравнивания. Эти значения мы не рекомендуем вам изменять. Списки с выбором числа имеют класс select.s_d, месяца select.s_m, года select.s_y, с выбором гороскопа и года в виджете Совместимость select.s_c, кроме того, описание гексаграмм в виджете Книга перемен уменьшенного размера (включено в тег <small> </small>). Ну и наконец, нижняя кнопка виджета находится в блочном контейнере <div> с выравниванием по центру и отступами сверху и снизу в 5 пикселей, сама кнопка имеет скругление углов в 10 пикселей (углы скругляются в большинстве браузерах, кроме Internet Explorer, к сожалению), ширину 100 и высоту 20 пикселей.

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

<style>
  div.sovmestimost, div.numerolog, div.answer, div.goro, div.life, div.geksagram {
    margin-top : 10px / Устанавливаем отступ сверху между виджетами
  }
  div.sovmestimost, div.numerolog, div.answer, div.goro, div.life {
    font : normal 14px helvetica, arial, sans-serif; / настраиваем шрифт и размер текста
    color : #595959;  / Устанавливаем цвет текста
  }
  div.geksagram {   / Устанавливаем отдельный шрифт и черный цвет текста для Книги перемен
    font : normal 14px "Times New Roman", Times, serif; 
    color : black;
  }
  div.goro p {  / Прижимаем верхнюю ссылку Гороскопов к правому краю
    text-align : right !important;
  } / Атрибут !important нужен для указания, что мы хотим именно так
  div.geksagram p a {  / Меняем оформление ссылки виджета Книга перемен
    text-decoration : underline;
    color : #900;
  }
  div.life div input {
    font : 12px Arial;  / Устанавливаем шрифт и рамку кнопки виджета Кто ты
    border : solid 2px #900;
  }
  div.answer { / Изменяем скругленность рамки виджета Заветный вопрос
    border-radius : 0 10px 10px 0 !important;
    -moz-border-radius : 0 10px 10px 0 !important;
    -webkid-border-radius : 0 10px 10px 0 !important;
  } / Скругляем только правые углы
  .numerolog div input:hover, .answer div input:hover, .geksagram div input:hover,
  .life div input:hover, .goro div input:hover,
  .sovmestimost div input:hover {
    background-color : #dfdfdf;
    cursor : pointer;
  } / Меняем фон и форму курсора при наведении на кнопку
  / Остальные параметры оставляем без изменений, а они у нас на сайте выглядят так
  a {
    text-decoration : none;
    color : #069
  }
  a:hover {
    text-decoration : underline
  }
  input, select {
    color : #069;
    font : normal 11px Courier, Helvetica, sans-serif;
    border : solid 1px #006699
  }
</style>
<script type="text/javascript">
  wdg_width=200;       /* ширина виджета в 200 пикселей */
  wdg_color="fafafa";  /* светлый цвет виджета в RGB */
  border_color="ddd";  /* серый цвет рамки в RGB */
</script>
<script type="text/javascript" src="http://kalitkas.ru/widget/numerology.js"></script>
<script type="text/javascript" src="http://kalitkas.ru/widget/answer.js"></script>
<script type="text/javascript">
  wdg_color="fdd";  /* меняем цвет виджета на розовый */
  border_color="900";  /* а цвет рамки на темно-красный */
</script>
<script type="text/javascript" src="http://kalitkas.ru/widget/life.js"></script>
<script type="text/javascript">
  border_color="009";  /* теперь меняем цвет рамки на темно-синий */
</script>
<script type="text/javascript" src="http://kalitkas.ru/widget/goroscop.js"></script>
<script type="text/javascript">
  wdg_color="ddf";  /* и наконец меняем цвет виджета на голубой */
</script>
<script type="text/javascript" src="http://kalitkas.ru/widget/geksagramm/geksagram.js"></script>
<script type="text/javascript" src="http://kalitkas.ru/widget/sovmestimost.js"></script>

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

Мы предоставляем в ваше распоряжение не только функциональные, но и красочные виджеты для сайта.


Notice: Undefined variable: main_text in /var/www/user382/data/www/kalitkas.ru/lost.html on line 109

© Numerologys.ru - 2010г.
.