Форум Сайтостроение Веб-строительство

Нужна помощь по вкладкам в шаблоне

[Удален]
1707

Добрый день!

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

В полной новости (fullstory.tpl), в самом низу есть три переключаемые вкладки:

"Комментарии от пользователей сайта", "От пользователей ВКонтакте", "От Facebook"

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

Собственно, вот этот кусок кода который выводит их: 

<ul class="comments-tabs">

   <li><a title="" class="current" href="#">Комментарии от пользователей сайта</a></li>

   <li><a title="" href="#">От пользователей ВКонтакте</a></li>

   <li><a title="" href="#">Facebook</a></li>

 </ul>

 <div title="" class="comments-panes">

    <div title="" style="display: block;">

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

Хотел бы к каждой из вкладок прилепить дополнительное поле.

Кто знает как сделать, подскажите...

Спасибо.

p.s. Движок DLE 9.6

SR
На сайте с 14.11.2008
Offline
104
SuRS
#1

Выложите полностью код fullstory

Даже самый долгий путь начинается с первого шага. Не бойся начать.
[Удален]
#2 

<div class="main-news">

  <div class="title-left-top">

    <div class="title-right-top">

      <div class="title-right-bottom">

        <h1>{title}</h1>

      </div>

    </div>

  </div>

  

<div class="main-news-category">

  Опубликовано {date} в категории {link-category}

  <script type="text/javascript" src="{THEME}/js/crossxhr.js"></script>

<div id="kinipoisk">

     <span class="kinoid" style="display: none;">

[xfvalue_kp]

   </span>

     <div class="kinorating"></div>



</div>

</div>

  

<div class="shot-text2">

{full-story}

<div style="clear: both;"></div>

<div style="clear: both;"></div>

</div>



  <div class="main-news-more">

    <div id='ratig-layer'>{rating}</div> Автор - {author}  | Просмотров - {views}  [complaint]Сообщить о ошибке[/complaint]

  </div>

  

    [related-news]<div class="related">

      <div class="related-title">

        Похожие новости:

      </div>

      <ul>{related-news}</ul>

    </div>[/related-news]



<ul class="comments-tabs">

   <li><a title="" class="current" href="#">Комментарии от пользователей сайта</a></li>

   <li><a title="" href="#">От пользователей ВКонтакте</a></li>

   <li><a title="" href="#">Facebook</a></li>

 </ul>

 <div title="" class="comments-panes">

    <div title="" style="display: block;">
digitalpnz
На сайте с 03.05.2012
Offline
43
digitalpnz
#3

дружище, если такая фича уже предусмотрена в твоем скачанном шаблоне то тебе нужно топать в файл addcomments.tpl шаблона, если не разберешься выложи его тоже сюда

и вообще помоему это не реализовано в шаблоне, ибо такая вещь делается через jQuery вот так - http://jquery.page2page.ru/index.php5/%D0%92%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B8_UI

а по реализации я наверное сделал бы так

В код main.tpl перед закрытием тега HEAD поставь след код: 

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

  <script src="/ui/jqueryui.custom.js"></script>

  <link type="text/css" href="/ui/jqueryui.custom.css" rel="stylesheet" />

  <style>

    body{font:normal 9pt Arial,sans-serif;}

  </style>



  <script>

    $(function(){

      $( "#tabs" ).tabs();

    });

  </script>

Твой fullstory меняешь на это (бэкап не забудь сделать) 

<div class="main-news">

  <div class="title-left-top">

    <div class="title-right-top">

      <div class="title-right-bottom">

        <h1>{title}</h1>

      </div>

    </div>

  </div>

  

<div class="main-news-category">

  Опубликовано {date} в категории {link-category}

  <script type="text/javascript" src="{THEME}/js/crossxhr.js"></script>

<div id="kinipoisk">

     <span class="kinoid" style="display: none;">

[xfvalue_kp]

   </span>

     <div class="kinorating"></div>



</div>

</div>

  

<div class="shot-text2">

{full-story}

<div style="clear: both;"></div>

<div style="clear: both;"></div>

</div>



  <div class="main-news-more">

    <div id='ratig-layer'>{rating}</div> Автор - {author}  | Просмотров - {views}  [complaint]Сообщить о ошибке[/complaint]

  </div>

  

    [related-news]<div class="related">

      <div class="related-title">

        Похожие новости:

      </div>

      <ul>{related-news}</ul>

    </div>[/related-news]



<div id="tabs">

    <ul>

      <li><a href="#tabs-1">Комментарии сайта</a></li>

      <li><a href="#tabs-2">контакт</a></li>

      <li><a href="#tabs-3">фэйсбук</a></li>

    </ul>

    <div id="tabs-1">

      <p>{addcomments}</p>

    </div>

    <div id="tabs-2">

      <p>код комментов контакта</p>

</div>



    <div id="tabs-3">

      <p>код комментов фэйса</p>

</div></div>



{comments}

{navigation}

но прежде чем так делать посмотри все же addcomments там может уже реализовано это, хотя хз :)

[Удален]
#4

Ваш вариант не прокатил:

А что я должен увидеть в addcomments?

Вот он файл: 

<div class="s-block">

      <div class="title-block">

        {title}

      </div>

      <div class="s-block-content">

 <table class="user-info-table" style="margin: 0;">

      [not-logged]

    <tr>

      <td width="70" height="25">Ваше Имя:</td>

      <td width="380"><input type="text" name="name" id="name" class="form-input-stand" /></td>

    </tr>

    <tr>

      <td width="70" height="25">Ваш E-Mail:</td>

      <td width="380"><input type="text" name="mail" id="mail" class="form-input-stand" /></td>

    </tr>

  [/not-logged]

    <tr>

      <td colspan="2">{editor}</td>

    </tr>

[question]

    <tr>

        <td class="label">

            Вопрос:

         </td>

         <td>

             <div>{question}</div>

         </td>

    </tr>

    <tr>

        <td class="label">

            Ответ:<span class="impot">*</span>

        </td>

        <td>

            <div><input type="text" name="question_answer" id="question_answer" class="f_input" /></div>

        </td>

    </tr>

[/question]

  [sec_code]

    <tr>

      <td width="70" align="left">Код:</td>

      <td width="380" align="left"><br />{sec_code}</td>

    </tr>

    <tr>

      <td width="70" align="left" height="35">Введите код:</td>

      <td width="380" align="left"><input type="text" name="sec_code" id="sec_code" class="form-input-stand" /></td>

    </tr>

  [/sec_code]

  [recaptcha]

	<tr>

	<td colspan="2" height="25"><strong>Введите два слова, показанных на изображении:</strong></td>

	</tr>

	<tr>

	<td colspan="2" height="25">{recaptcha}</td>

	</tr>

	[/recaptcha]

    <tr>

      <td colspan="2" align="right"><input onclick="doAddComments();return false;" value="Добавить" name="submit" type="image" src="{THEME}/images/add-buttom.jpg" style="border: 0;" /></td>

    </tr>

  </table>

</div></div>
digitalpnz
На сайте с 03.05.2012
Offline
43
digitalpnz
#5
twiller:
Ваш вариант не прокатил:



А что я должен увидеть в addcomments?

Вот он файл:

<div class="s-block">
      <div class="title-block">
        {title}
      </div>
      <div class="s-block-content">
 <table class="user-info-table" style="margin: 0;">
      [not-logged]
    <tr>
      <td width="70" height="25">Ваше Имя:</td>
      <td width="380"><input type="text" name="name" id="name" class="form-input-stand" /></td>
    </tr>
    <tr>
      <td width="70" height="25">Ваш E-Mail:</td>
      <td width="380"><input type="text" name="mail" id="mail" class="form-input-stand" /></td>
    </tr>
  [/not-logged]
    <tr>
      <td colspan="2">{editor}</td>
    </tr>
[question]
    <tr>
        <td class="label">
            Вопрос:
         </td>
         <td>
             <div>{question}</div>
         </td>
    </tr>
    <tr>
        <td class="label">
            Ответ:<span class="impot">*</span>
        </td>
        <td>
            <div><input type="text" name="question_answer" id="question_answer" class="f_input" /></div>
        </td>
    </tr>
[/question]
  [sec_code]
    <tr>
      <td width="70" align="left">Код:</td>
      <td width="380" align="left"><br />{sec_code}</td>
    </tr>
    <tr>
      <td width="70" align="left" height="35">Введите код:</td>
      <td width="380" align="left"><input type="text" name="sec_code" id="sec_code" class="form-input-stand" /></td>
    </tr>
  [/sec_code]
  [recaptcha]
	<tr>
	<td colspan="2" height="25"><strong>Введите два слова, показанных на изображении:</strong></td>
	</tr>
	<tr>
	<td colspan="2" height="25">{recaptcha}</td>
	</tr>
	[/recaptcha]
    <tr>
      <td colspan="2" align="right"><input onclick="doAddComments();return false;" value="Добавить" name="submit" type="image" src="{THEME}/images/add-buttom.jpg" style="border: 0;" /></td>
    </tr>
  </table>
</div></div>

посмотри по этой ссылке реализацию, там еще стили нужны http://jquery.page2page.ru/index.php5/%D0%92%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B8_UI

и еще обратите внимание в коде выложенным мной квадратные скобки у related-news убрались на кракозябры, верните обратно

а вообще лучше покажите пальцем где скачать этот шаблон, а то вот так кодами кидаться это мы будем долго к успеху идти

digitalpnz
На сайте с 03.05.2012
Offline
43
digitalpnz
#6

Делай короче вот так: 

<div class="main-news">

  <div class="title-left-top">

    <div class="title-right-top">

      <div class="title-right-bottom">

        <h1>{title}</h1>

      </div>

    </div>

  </div>

  

<div class="main-news-category">

  Опубликовано {date} в категории {link-category}

  <script type="text/javascript" src="{THEME}/js/crossxhr.js"></script>

<div id="kinipoisk">

     <span class="kinoid" style="display: none;">

[xfvalue_kp]

   </span>

     <div class="kinorating"></div>



</div>

</div>

  

<div class="shot-text2">

{full-story}

<div style="clear: both;"></div>

<div style="clear: both;"></div>

</div>



  <div class="main-news-more">

    <div id='ratig-layer'>{rating}</div> Автор - {author}  | Просмотров - {views}  [complaint]Сообщить о ошибке[/complaint]

  </div>

  

    [related-news]<div class="related">

      <div class="related-title">

        Похожие новости:

      </div>

      <ul>{related-news}</ul>

    </div>[/related-news]



<div id="tabs">

    <ul>

      <li><a href="#tabs-1">Комментарии сайта</a></li>

      <li><a href="#tabs-2">контакт</a></li>

      <li><a href="#tabs-3">фэйсбук</a></li>

    </ul>

    <div id="tabs-1">

      <p>{addcomments}</p>

    </div>

    <div id="tabs-2">

      <p>код комментов контакта</p>

</div>



    <div id="tabs-3">

      <p>код комментов фэйса</p>

</div></div>



{comments}

{navigation}

Скачивай файлы из вложения к этому сообщению, клади их в папку images темы и в main.tpl пиши перед </head> (сначала удали то что я писал тебе в предидущем сообщении) 

<link rel="stylesheet" href="{THEME}/images/jquery.ui.all.css">

	<script src="{THEME}/images/jquery-1.7.2.js"></script>

	<script src="{THEME}/images/jquery.ui.core.js"></script>

	<script src="{THEME}/images/jquery.ui.widget.js"></script>

	<script src="{THEME}/images/jquery.ui.tabs.js"></script>

	

	<script>

	$(function() {

		$( "#tabs" ).tabs({

			collapsible: true

		});

	});

	</script>

далее в файл стиля пиши 

/* overrides for ui-tab styles */

#widget-docs ul.ui-tabs-nav { padding:0 0 0 8px; }

#widget-docs .ui-tabs-nav li { margin:5px 5px 0 0; }



#widget-docs .ui-tabs-nav li a:link,

#widget-docs .ui-tabs-nav li a:visited,

#widget-docs .ui-tabs-nav li a:hover,

#widget-docs .ui-tabs-nav li a:active { font-size:14px; padding:4px 1.2em 3px; color:#fff; }



#widget-docs .ui-tabs-nav li.ui-tabs-selected a:link,

#widget-docs .ui-tabs-nav li.ui-tabs-selected a:visited,

#widget-docs .ui-tabs-nav li.ui-tabs-selected a:hover,

#widget-docs .ui-tabs-nav li.ui-tabs-selected a:active { color:#e6820E; }



#widget-docs .ui-tabs-panel { padding:20px 9px; font-size:12px; line-height:1.4; color:#000; }



#widget-docs .ui-widget-content a:link,

#widget-docs .ui-widget-content a:visited { color:#1b75bb; text-decoration:none; }

#widget-docs .ui-widget-content a:hover,

#widget-docs .ui-widget-content a:active { color:#0b559b; }

Должно заработать. ☝

zip images.zip
[Удален]
#7

Получилось вот такое:

Скачать можно тут: 

http://newtemplates.ru/220-kino-tt-test-templates.html
digitalpnz
На сайте с 03.05.2012
Offline
43
digitalpnz
#8

Держи брат

http://depositfiles.com/files/jw6145xwu

p/s сюда вложением не полезло ибо файл <1мб ☝

если какие еще вопросы по DLE или верстке есть проконсультирую в ЛС

[Удален]
#9
digitalpnz:
Держи брат

http://depositfiles.com/files/jw6145xwu

p/s сюда вложением не полезло ибо файл <1мб ☝
если какие еще вопросы по DLE или верстке есть проконсультирую в ЛС

Вот за это спасибо дружище!

p.s. Цвет моно поменять кнопочек? что было прописано и где?

digitalpnz
На сайте с 03.05.2012
Offline
43
digitalpnz
#10

Цвет кнопочек меняется в css файле который лежит в папке js шаблона

p/s всегда пожалуйста, за благодарность есть кнопка)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий