Общий гороскоп на сайт

Искал решение по размещению общего гороскопа на всю страницу сайта. Нашёл подходящий вариант и подправил стили. Гороскоп имеет навигацию по нескольким дням. Вот как он выглядит

Итак, в страницу сайта вставляем:

<div id="ignio-bigdaily-com"><a href="http://www.ignio.com/">Загрузка гороскопа от Ignio</a></div>
<script type="text/javascript" charset="utf-8" src="//ignio.com/r/export/utf/bigjs/daily/com.js"></script>

1 2	<div id="ignio-bigdaily-com"><a href="http://www.ignio.com/">Загрузка гороскопа от Ignio</a></div> <script type="text/javascript" charset="utf-8" src="//ignio.com/r/export/utf/bigjs/daily/com.js"></script>

В стили копируем следующий код:

/////////////////////////////////////////////////////////////////////////////////////////////////*ГОРОСКОП*///////////////////////////////////////////////////////////////////
  .ignioBigInformer { /* Глобальные установки */
    /*width: 300px;*/ /* Ширина информера - если надо */
    /*border: 1px solid blue;*/ /* Если хочется сделать рамку вокруг информера... */
    margin: 10px 0px 10px 0px; /* Отступы снаружи от рамки с краёв: сверху, справа, снизу, слева */
    padding: 5px 10px 5px 10px; /* Отступы внутри от рамки с краёв: сверху, справа, снизу, слева */
    font-family: Tahoma, Verdana, Geneva, Helvetica; /* Шрифт основного текста */
    color: #000000; /* Цвет основного текста и цвет заголовка */
    background: #ffffff; /*Цвет фона */
  }

  .ignioBigInformer * { /* Не обращаем внимания */
      padding: 0;
      margin: 0;
   }

  .ignioBigInformer a { /* Ссылки */
    color: #0000ff; /* Цвет ссылок */
    text-decoration: none; /* Не подчёркивать ссылки */
   }

  .ignioBigInformerTitle { /* Заголовок */
    padding: 5px 0px 5px 0px; /* Отступ около заголовка: сверху, справа, снизу, слева */
    text-align: left; /* Выровнять заголовок влево */
    /* color: red; */ /* Если хочется цвет заголовка сделать отличным от цвета текста */
  }

  .ignioBigInformerTitle h2 {
    font-size: 38px; /* Размер текста заголовка */
    text-align:  center;
    color: red;

  }

  .ignioBigInformerDates { /* Даты */
    font-size: 22px; /* Размер текста дат */
    font-weight: bold; /* Жирность: да */
    padding: 15px 10px 15px 10px; /* Отступы: сверху, справа, снизу, слева */
  text-align:  center;
  }
  
  .ignioBigInformerDates span {
    padding-right: 20px; /* Отступ между датами по горизонтали */
  }
  
  .ignioBigInformerDates span a { /* Даты - ссылки (не текущие даты) */
    text-decoration: underline; /* Подчёркивать ссылки на датах */
  }

  .ignioBigInformerTexts { /* Блок - все знаки Зодиака - названия + тексты */
    padding: 5px 0px 5px 0px; /* Отступы: сверху, справа, снизу, слева */
  }

  .ignioBigInformerSign { /* Блок для одного знака Зодиака: Название + текст */
    padding: 5px 0px 5px 0px; /* Отступы: сверху, справа, снизу, слева */
  }

  .ignioBigInformerSign h3 { /* Названия знаков Зодиака */
    font-size: 24px; /* Размер текста */
    font-weight: bold; /* Жирность: да */
    color: red;
  }

  .ignioBigInformerSign p { /* Текст */
    padding: 5px 0; /* Отступы между абзацами если вдруг текст одного знака состоит из нескольких абзацев */
    font-size: 17px; /* Размер шрифта текста */
    text-align: justify; /* Сделать разрядку текста */
  }

  .ignioBigInformerTail {  /* Подпись */
    padding: 5px; /* Отступы */ 
    font-size: 0px; /* Размер шрифта */
    text-align: right; /* Выровнять по центру */
  }

/////////////////////////////////////////////////////////////////////////////////////////////////*ГОРОСКОП*///////////////////////////////////////////////////////////////////

.ignioBigInformer { /* Глобальные установки */

/*width: 300px;*/ /* Ширина информера - если надо */

/*border: 1px solid blue;*/ /* Если хочется сделать рамку вокруг информера... */

margin: 10px 0px 10px 0px; /* Отступы снаружи от рамки с краёв: сверху, справа, снизу, слева */

padding: 5px 10px 5px 10px; /* Отступы внутри от рамки с краёв: сверху, справа, снизу, слева */

font-family: Tahoma, Verdana, Geneva, Helvetica; /* Шрифт основного текста */

color: #000000; /* Цвет основного текста и цвет заголовка */

background: #ffffff; /*Цвет фона */

}

.ignioBigInformer * { /* Не обращаем внимания */

padding: 0;

margin: 0;

}

.ignioBigInformer a { /* Ссылки */

color: #0000ff; /* Цвет ссылок */

text-decoration: none; /* Не подчёркивать ссылки */

}

.ignioBigInformerTitle { /* Заголовок */

padding: 5px 0px 5px 0px; /* Отступ около заголовка: сверху, справа, снизу, слева */

text-align: left; /* Выровнять заголовок влево */

/* color: red; */ /* Если хочется цвет заголовка сделать отличным от цвета текста */

}

.ignioBigInformerTitle h2 {

font-size: 38px; /* Размер текста заголовка */

text-align: center;

color: red;

}

.ignioBigInformerDates { /* Даты */

font-size: 22px; /* Размер текста дат */

font-weight: bold; /* Жирность: да */

padding: 15px 10px 15px 10px; /* Отступы: сверху, справа, снизу, слева */

text-align: center;

}

.ignioBigInformerDates span {

padding-right: 20px; /* Отступ между датами по горизонтали */

}

.ignioBigInformerDates span a { /* Даты - ссылки (не текущие даты) */

text-decoration: underline; /* Подчёркивать ссылки на датах */

}

.ignioBigInformerTexts { /* Блок - все знаки Зодиака - названия + тексты */

padding: 5px 0px 5px 0px; /* Отступы: сверху, справа, снизу, слева */

}

.ignioBigInformerSign { /* Блок для одного знака Зодиака: Название + текст */

padding: 5px 0px 5px 0px; /* Отступы: сверху, справа, снизу, слева */

}

.ignioBigInformerSign h3 { /* Названия знаков Зодиака */

font-size: 24px; /* Размер текста */

font-weight: bold; /* Жирность: да */

color: red;

}

.ignioBigInformerSign p { /* Текст */

padding: 5px 0; /* Отступы между абзацами если вдруг текст одного знака состоит из нескольких абзацев */

font-size: 17px; /* Размер шрифта текста */

text-align: justify; /* Сделать разрядку текста */

}

.ignioBigInformerTail { /* Подпись */

padding: 5px; /* Отступы */

font-size: 0px; /* Размер шрифта */

text-align: right; /* Выровнять по центру */

}

Автор публикации

не в сети 2 месяца

GOOD WEBMASTER

В наличии любые плагины и темы последних версий от компании AIT THEMES

Поддержать проект монетой можно так: https://money.yandex.ru/to/410012768487959

Комментарии: 6Публикации: 262Регистрация: 17-12-2017

Метки

Гороскоп

Меню

Общий гороскоп на сайт