Есть исходники аккордеона, как их прописать в html виджете icms2

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО
#1 25 марта 2016 в 09:13
Есть исходники аккордеона, как их объединить и прописать в html виджете icms2. Ничего не понимаю в этом, только учусь, помогите разобраться
<div class="accordion">
<input class="toggle-box" id="block-1" type="checkbox">
<label for="block-1">Заголовок Панель №1</label>
<div class="box">
Здесь размещаете любое содержание — текст, изображения и т.д. и т.п.
</div>
<input class="toggle-box" id="block-2" type="checkbox" >
<label for="block-2">Заголовок Панель №2</label>
<div class="box">
Здесь размещаете любое содержание — текст, изображения и т.д. и т.п.
</div>
<input class="toggle-box" id="block-3" type="checkbox" >
<label for="block-3">Заголовок Панель №3</label>
<div class="box">
Здесь размещаете любое содержание — текст, изображения и т.д. и т.п.
</div>
</div>
.accordion{
/* ширина в % для резинового макета,
* можно определить фиксированное
* значение в px
*/
width: 100%;
padding: 0;
margin: 0 auto;
}
.toggle-box {
/* по умаолчанию скрыт */
display: none;
}

/* формируем внешний вид панелей аккордеона */

.toggle-box + label {
background: #6c6e74;
background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c6e74', endColorstr='#4b4d51',GradientType=0 );
color: #C9C9C9;
cursor: pointer;
display: block;
font: normal 14px Helvetica, Arial, sans-serif;
line-height: 21px;
padding: 8px 22px;
margin-bottom: 0px;
}
label a, a:hover{color: #ddd;}

/* формируем внешний вид панелей при наведении */

.toggle-box + label:hover{opacity: 0.9;}

/* формируем внешний вид панелей при нажатии на них */

.toggle-box + label:active{
background: #6c6e74;
background: -moz-linear-gradient(top, #6c6e74 0%, #545359 11%, #756d73 84%, #4b4d51 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(11%,#545359), color-stop(84%,#756d73), color-stop(100%,#4b4d51));
background: -webkit-linear-gradient(top, #6c6e74 0%,#545359 11%,#756d73 84%,#4b4d51 100%);
background: -o-linear-gradient(top, #6c6e74 0%,#545359 11%,#756d73 84%,#4b4d51 100%);
background: -ms-linear-gradient(top, #6c6e74 0%,#545359 11%,#756d73 84%,#4b4d51 100%);
background: linear-gradient(to bottom, #6c6e74 0%,#545359 11%,#756d73 84%,#4b4d51 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545359', endColorstr='#4b4d51',GradientType=0 );
}

/* содержание блоков скрыто */

.toggle-box + label + div {
display: none;
}

/* при обработке флажка (checkbox) показываем блок с содержанием */

.toggle-box:checked + label + div {
display: block;
}

/* формируем внешний вид кнопки переключателя на панели справа */

.toggle-box + label:before {
background: #404247;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
color: #C9C9C9;
content: "+";
display: block;
float: right;
font-size: 14px;
font-weight: bold;
height: 18px;
line-height: 18px;
margin: 2px 5px 0px;
text-align: center;
width: 18px;
box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
}
.toggle-box:checked + label:before {
content: "\2212";
}

/* оформляем блок с содержанием */

.box{
background: #fefefe;
border-left: rgba(0,0,0,0.1) solid 1px;
border-right: rgba(0,0,0,0.1) solid 1px;
border-bottom: rgba(0,0,0,0.1) solid 1px;
padding: 10px 10px 10px;
font: 14px Helvetica, Arial, sans-serif;
color: #333;
line-height: 1.5;
}

/* значения встраиваемых картинок в блоки */

.box img{
height: auto;
border: rgba(0,0,0,0.3) solid 1px;
}
.left-img{
float: left;
margin: 5px 10px 0px 0px;
}
.right-img{
float: right;
margin: 5px 0 0 10px;
}
.large-img {width: 100%;margin-bottom: 5px;}
#2 25 марта 2016 в 09:32
Birles, цсс лучше запихнуть в файл и подключить в main.tpl.php

а хтмл код вставлять в виджет
#3 25 марта 2016 в 09:42


Birles, цсс лучше запихнуть в файл и подключить в main.tpl.php

а хтмл код вставлять в виджет

Jestik

Буду очень благодарен, подскажите пожалуйста на примерах, как это сделать. Спасибо.
CSS файл аккордеона закинул в папку css шаблона. Теперь не знаю как это подключить в main.tpl.php
#4 25 марта 2016 в 09:52
<?php $this->addMainCSS("templates/{$this->name}/css/имя файла.css"); ?>


или так:

<link rel="stylesheet" type="text/css" href="путь к файл и имя файла.css">

в main.tpl.php
#5 25 марта 2016 в 09:52
Jestik,
Спасибо, разобрался.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.