Сворачивание виджетов (не колонки!)

Хочу спросить, как такое сделать, чтобы можно было открывать-закрывать по виджету, а не всю колонку с ними?

На движках с редактируемыми шаблонами можно добавить скрипт в каждый виджет.

Пойдет! Расскажите подробнее!

Вариант для Pun.

Откройте Па > Оформление > Шаблоны - Портал
Нажмите справа от необходимого виджета (в качестве примера "mod_statistics" - "Статистика")
Обратите внимание на начало кода:

<div class="module main">
<div class="main-head"><div class="h3">{L_STATISTICS}</div></div>
<div class="main-content">

Красным цветом выделено название виджета. Скопируйте его. После этого замените весь указанный фрагмент на следующий:

<div class="module main"><script type="text/javascript">var num= 0; var curc;</script>
<div class="main-head" onClick=" if(this.nextSibling.style.display=='none') {my_setcookie(this.firstChild.id,'0',0,0); this.nextSibling.style.display='block';} else {my_setcookie(this.firstChild.id,'1',1,0); this.nextSibling.style.display='none'; }" style="cursor:pointer;">
<div id="cret">Название виджета<span class="icomod"></span></div><script type="text/javascript">curc= document.getElementById('cret'); curc.id+=(++num)+'_'+escape(curc.innerHTML);</script>
</div>
<div class="main-content">

<script type="text/javascript">if(my_getcookie(curc.id)=='1') curc.parentNode.nextSibling.style.display='none';</script>

Выделенную красным строку замените на предварительно скопированное название (в указанном примере это будет {L_STATISTICS}).

Затем сохраните и опубликуйте шаблон.

В персональную CSS добавьте стиль для icomod - иконки в правом углу шапки виджета:

Код:

.icomod {
background-color: transparent;
background-image: url("http://i72.servimg.com/u/f72/15/82/36/69/check10.png");
background-position: 0 0;
background-repeat: no-repeat;
float: right;
width: 18px;
height: 18px;
}

https://i.servimg.com/u/f72/15/82/36/69/check10.png - можете заменить на ссылку своей иконки.



И таким образом обработайте все необходимые виджеты.
Будьте внимательны! В кодах виджетов mod_login, mod_news, mod_poll, mod_recent_topics и standard есть комментарии и идентификаторы - их удалять нельзя.

Переписать надо следующим образом - сохранив их на своих местах:

Причем в шаблоне "Последние темы" код придется вставить дважды, для варианта виджета с прокруткой и без нее.

Ух, пойду разбираться

Доброго времени суток!
Я что-то намудрил и никак не получается установить сворачивающийся виджет "Вход". Что-то упустил и не могу понять что Укажите на ошибку, пожалуйста!

Код:

<div class="module main">   
<!-- BEGIN switch_login -->
   <div class="module main"><script type="text/javascript">var num= 0; var curc;</script>
<div class="main-head" onClick=" if(this.nextSibling.style.display=='none') {my_setcookie(this.firstChild.id,'0',0,0); this.nextSibling.style.display='block';} else {my_setcookie(this.firstChild.id,'1',1,0); this.nextSibling.style.display='none'; }" style="cursor:pointer;">
<div id="cret">{L_LOGIN}<span class="icomod"></span></div><script type="text/javascript">curc= document.getElementById('cret'); curc.id+=(++num)+'_'+escape(curc.innerHTML);</script>
</div>
<div class="main-content">

<script type="text/javascript">if(my_getcookie(curc.id)=='1') curc.parentNode.nextSibling.style.display='none';</script>

   <form action="{S_LOGIN_ACTION}" method="post">
   <fieldset class="frm-set login">
      <dl>... и т.д.

Там аналогичным образом надо прописать - для виджета неавторизированного пользователя и для участника форума. Т.е. вот так:

Код:

<div class="module main"><script type="text/javascript">var num= 0; var curc;</script>
<!-- BEGIN switch_login -->
<div class="main-head" onClick=" if(this.nextSibling.style.display=='none') {my_setcookie(this.firstChild.id,'0',0,0); this.nextSibling.style.display='block';} else {my_setcookie(this.firstChild.id,'1',1,0); this.nextSibling.style.display='none'; }" style="cursor:pointer;">
<div id="cret">{L_LOGIN}<span class="icomod"></span></div><script type="text/javascript">curc= document.getElementById('cret'); curc.id+=(++num)+'_'+escape(curc.innerHTML);</script>
</div>
<div class="main-content">

<script type="text/javascript">if(my_getcookie(curc.id)=='1') curc.parentNode.nextSibling.style.display='none';</script>


   <form action="{S_LOGIN_ACTION}" method="post">
   <fieldset class="frm-set login">
      <dl>
         <dt><label for="username">{L_USERNAME}:</label></dt>
         <dd><input type="text" tabindex="1" name="username" id="username" size="20" maxlength="40" value="{USERNAME}" class="inputbox autowidth" /></dd>
      </dl>
      <dl>
         <dt><label for="password">{L_PASSWORD}:</label></dt>
         <dd><input type="password" tabindex="2" id="password" name="password" size="20" maxlength="25" class="inputbox autowidth" /></dd>
         <dd><a href="{U_SEND_PASSWORD}" rel="nofollow">{L_SEND_PASSWORD}</a></dd>
      </dl>
      <dl>
         <dd><label for="autologin"><input type="checkbox" name="autologin" id="autologin" tabindex="4" class="checkbox" {AUTOLOGIN_CHECKED} /> {L_AUTO_LOGIN}</label></dd>
      </dl>
      <dl>
         <dd><input type="submit" name="login" tabindex="6" value="{L_LOGIN}" class="button1" /></dd>
      </dl>
   </fieldset>
   </form>
   </div>
   <!-- END switch_login -->

   <!-- BEGIN switch_login_small -->

<div class="main-head" onClick=" if(this.nextSibling.style.display=='none') {my_setcookie(this.firstChild.id,'0',0,0); this.nextSibling.style.display='block';} else {my_setcookie(this.firstChild.id,'1',1,0); this.nextSibling.style.display='none'; }" style="cursor:pointer;">
<div id="cret">{L_LOGIN}<span class="icomod"></span></div><script type="text/javascript">curc= document.getElementById('cret'); curc.id+=(++num)+'_'+escape(curc.innerHTML);</script>
</div>
<div class="main-content">

<script type="text/javascript">if(my_getcookie(curc.id)=='1') curc.parentNode.nextSibling.style.display='none';</script>

   <form action="{S_LOGIN_ACTION}" method="post">

   <p><label for="username"><strong>{L_USERNAME}:</strong></label></p>
   <p style="height:2em;valign:top;"><input type="text" name="username" id="username" size="15" maxlength="40" value="{USERNAME}" class="inputbox autowidth" /></p>
   <p><label for="password"><strong>{L_PASSWORD}:</strong></label></p>
   <p style="height:2em;valign:top;"><input type="password" id="password" name="password" size="15" maxlength="25" class="inputbox autowidth" /></p>
   <p align="center"><a href="{U_SEND_PASSWORD}" rel="nofollow">{L_SEND_PASSWORD}</a></p>
   <p align="center"><input type="checkbox" name="autologin" id="autologin" tabindex="4" class="checkbox" {AUTOLOGIN_CHECKED} /><label for="autologin"> {L_AUTO_LOGIN}</label></p>
   <p align="center"><input type="submit" name="login" tabindex="6" value="{L_LOGIN}" class="button1" /></p>
   </form>
   </div>
   <!-- END switch_login_small -->

   <!-- BEGIN switch_profile -->

<div class="main-head" onClick=" if(this.nextSibling.style.display=='none') {my_setcookie(this.firstChild.id,'0',0,0); this.nextSibling.style.display='block';} else {my_setcookie(this.firstChild.id,'1',1,0); this.nextSibling.style.display='none'; }" style="cursor:pointer;">
<div id="cret">{USERNAME} <span class="icomod"></span></div><script type="text/javascript">curc= document.getElementById('cret'); curc.id+=(++num)+'_'+escape(curc.innerHTML);</script>
</div>
<div class="main-content clearfix details">

<script type="text/javascript">if(my_getcookie(curc.id)=='1') curc.parentNode.nextSibling.style.display='none';</script>

   <div class="left">
      {USERNAME_AVATAR}
   </div>
   <dl class="left">
      <dt>{L_MESSAGES}: </dt>
      <dd> <strong>{NB_MESSAGES}</strong></dd>
      <dt>{L_PM}: </dt>
      <dd> {NB_PM_UNREAD} / {NB_PM_READ}</dd>
      <dd style="text-align: center;"><a href="{U_PROFILE}">{L_MY_PROFILE}</a></dd>
   </dl>
   </div>
   <!-- END switch_profile -->
</div>

Прошу прощения, код не показался сразу. Благодарю!

Спойлер:

Пожалуйста!

Еще раз спасибо! Это уже "переварю" чуть позже, бо в голове с непривычки каша

Спасибо, все получилось! Можно закрывать тему.