Помощь Инфа блок

Тема в разделе "DLE", создана пользователем Dillon, 28 янв 2010.

Информация :
Актуальная версия DataLife Engine 11.3
( Final Release v.11.3 | Скачать DataLife Engine | Скачать 11.3 demo )
Нужно ли обновляться | Как обновиться | Изменения в шаблонах
> Нет русских символов <
[Приватная тема DLE (Все подробности в ЛС к модератору раздела)]

Версии 11.2 и ниже - уязвимы!

Локализации | F.A.Q. | Внешний вид
Правила раздела | Правила форума
Обсуждение хайда карается баном!
В каждом сообщении указывайте версию DLE, которого они касаются!
Статус темы:
Закрыта.
Модераторы: killoff
  1. Dillon

    Dillon Постоялец

    Регистр.:
    19 янв 2010
    Сообщения:
    54
    Симпатии:
    2
    Добрый день уважаймые.
    Подскажите как можно сделать такой инфа-блок для DLE 8.2/8.3

    Вот скриншёт блока
    Перейти по ссылке
    У них еще такой плавный переход.

    Такие блоки я заметил как на _igromania.ru и _stopgame.ru помогите такое сделать.

    ===========================================================
    Вообщем вот этот добовляет только в прочтения полной новости

    И так поехали:

    Вырезал с щаблона yes2009 еще называеться yesgames

    1.Добавляем в шаблон fullstory.tpl как вам удобно


    Код:
    <!--Код менюшки-->
    <div class="newss2 news">
    <div style="padding:0px 0px 0px 0px">
    <div class="zagol2"><u>{title}</u></div>
    </div>
    <div class="telonews2">{short-story}</div>
    
    <div style="float:left; padding:10px 0px 0px 0px">
    <div id="wrapper">
    <ul class="tabs tabs1">
    <li class="t1 tab-current"><a>Инфо</a></li>
    <li class="t2"><a>Системные требования</a></li>
    <li class="t3"><a>Скриншоты</a></li>
    <li class="t6"><a>Ссылки</a></li>
    <li class="t7"><a>Скачать игру</a></li>
    </ul>
    
    <div class="t1">
    Полное название игры: "Risen"<br />
    Жанр: RPG / 3D<br />
    Язык Интерфейса: Английский (Звук+Текст)<br />
    Год выпуска: 2009<br />
    Разработчик: Pluto 13<br />
    Издатель: Deep Silver<br />
    Размер файла: 6.67 GB<br />
    Возраст: M - От 17 лет<br />
    <br />
    {full-story}
    </div>
    
    <div class="t2">
    Платформа: XBOX 360<br />
    Регион: Region Free<br />
    Прошивка: iXtreme Compatible
    </div>
    
    <div class="t3">
    3 доп. поля на скриншоты
    </div>
    <div class="t4">
    </div>
    
    <div class="t6">
    <div align="right">
    <div style="padding-bottom:5px;">
    <script type="text/javascript">
    var today=new Date()
    document.write('Ссылка для форума, ЖЖ <input class="podelis" type="text" value="Перейти по ссылке"size="65" onclick=this.select();readOnly>')
    </script>
    </div>
    
    <div style="padding-bottom:5px;">
    <script type="text/javascript">
    var today=new Date()
    document.write('Прямая ссылка <input class="podelis" type="text" value="'+window.location+'"size="65" onclick=this.select();readOnly>')
    </script>
    </div>
    
    <div>
    <script type="text/javascript">
    var today=new Date()
    document.write('HTTP ссылка <input class="podelis" type="text" onclick=this.select();readOnly value="<a href=&#34'+window.location+'&#34>Risen скачать игру бесплатно<\/a>" size="65">')
    </script>
    </div>
    </div>
    </div>
    
    <div class="t7">
    <b><font color="#e20c00">Для новичков: <a href="/download.html" target="_blank">Как отсюда качать?</a></font></b><br /><br />
    Сдесь следует дописать обменники с которых будут качать и добавить доп. поля
    </div>
    
    <div class="t8">
    </div>
    </div>
    <!--Код менушки-->
    
    Дальше в css/style.css добавляем


    Код:
    /* ИНФОБЛОК */
    /* <![CDATA[ */
    
    #wrapper {width:576px; margin:0; padding:0;}
    ul.tabs {padding:0; height:20px !important; margin:0; list-style:none;}
    * html ul.tabs {margin-bottom:0; padding:0;}
    ul.tabs li   {float:left;  font-weight:bold; padding:0; padding-right:1px;}
    ul.tabs li a {float:left; font-weight:bold; display:block; height:18px; padding:1px 5px 0px 5px; text-decoration:none; cursor:pointer; background-color:#C2BEA5;}
    * html ul.tabs li a {font-weight:bold; margin:0; padding:1px 5px 0px 5px;}
    *+html ul.tabs li a {font-weight:bold; margin:0; padding:1px 5px 0px 5px;}
    ul.tabs li a:hover {font-weight:bold; margin:0; color:#FFFFFF; padding:1px 5px 0px 5px; background-color:#C2BEA5;}
    ul.tabs li.tab-current a {font-weight:bold; height:19px; margin:0; background-color:#E5E2D1; padding:1px 5px 0px 5px;}
    div.t2, div.t3, div.t4, div.t5, div.t6, div.t7, div.t8 {padding:5px; width:566px; display:none;}
    div.t1, div.t2, div.t3, div.t4, div.t5, div.t6, div.t7, div.t8 {padding:5px; width:566px; background-color:#E5E2D1;}
    
    /* ]]> */
    
    div.tfaq {margin-top:3px; width:513px; background-color:#E6E6E6;}
    
    теперь в main.tpl добавляем можно после {AJAX}

    Код:
    <script type="text/javascript" src="{THEME}/css/jquery.js"></script>
    <script type="text/javascript" src="{THEME}/css/tabs.js"></script>
    Ну вобшем вот и все у меня все получилось вот скрин
    а да вложения кидаем в css убедителная прось помогите реализовать хоть эту менушку как я песал выше.
    Вложения закачал но вставить в сообшения немогу,модераторы вставте.
    Вот скрин что у меня получилось.

    Перейти по ссылке
     
  2. nithwich

    nithwich

    Регистр.:
    10 фев 2007
    Сообщения:
    421
    Симпатии:
    74
    Dillon нравится это.
  3. Dillon

    Dillon Постоялец

    Регистр.:
    19 янв 2010
    Сообщения:
    54
    Симпатии:
    2
    То что надо,А как это все впихнуть в DLE понравился эфект(Fade Effect) просто там по англ,направте маленько меня в нужном направлении,просто даже не знаю с чего начать...

    А лучше было бы если тут такуюже стать кто нибуть написа как сделать это для DLE с подробным расписаниям что да как

    Я вот попробывал,подумал что в main.tpl надо пихать код


    Гл нефега отображаеться как



    js и стили вроде подключал,я я что то делаю не правильно.
     
  4. nithwich

    nithwich

    Регистр.:
    10 фев 2007
    Сообщения:
    421
    Симпатии:
    74
    Код:
    <h2>Fade Effect</h2>
     
            <div id="container-4">
                <ul>
                    <li><a href="#fragment-10"><span>One</span></a></li>
                    <li><a href="#fragment-11"><span>Two</span></a></li>
                    <li><a href="#fragment-12"><span>Three</span></a></li>
                </ul>
                <div id="fragment-10">
                    <p>
                        Use a fade effect to switch tabs.
                        You can optionally specify the speed for the animation with the option <code>fxSpeed: value</code>.
                        The value is either a string of one of the predefined speeds in jQuery (<code>slow</code>,
                        <code>normal</code>, <code>fast</code>) or an integer value specifying the duration for the animation
                        in milliseconds. If omitted it defaults to <code>normal</code>.
                    </p>
                    <pre><code>$('#container').tabs({ fxFade: true, fxSpeed: 'fast' });</code></pre>
                </div>
                <div id="fragment-11">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                </div>
                <div id="fragment-12">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                </div>
            </div>
     
    
    в мейн,
    все остальное есть в архиве который предлагают скачать.
     
    Dillon нравится это.
  5. Dillon

    Dillon Постоялец

    Регистр.:
    19 янв 2010
    Сообщения:
    54
    Симпатии:
    2
    Добавил в main.tpl что написали
    Подключаю так
    после {AJAX} пишу
    Подключаю стили
    Но отображаеться не коректно
    Что не так я подключил? видимо стили или js
     
  6. nithwich

    nithwich

    Регистр.:
    10 фев 2007
    Сообщения:
    421
    Симпатии:
    74
    в папочке js есть .htacces ?
    и еще лучше выкладывай сразу main.tpl и все..так проще будит
     
  7. Dillon

    Dillon Постоялец

    Регистр.:
    19 янв 2010
    Сообщения:
    54
    Симпатии:
    2
    вообщем весь шаблон испаганил так и не сделал:(

    Вот файл main.tpl
    Найти код можно так <!-- Инфа блог -->
    Посмотреть вложение main.rar

    Буду рад ,и признательно благодарен если сделаете на этот шаблон(менушку) с объяснениям для этого шаблона с Fade Effect'ом.
    Посмотреть вложение x360a(3).rar
     
  8. nithwich

    nithwich

    Регистр.:
    10 фев 2007
    Сообщения:
    421
    Симпатии:
    74
    и так подключаем js
    подключаем css
    наш блок
    Код:
    <div id="tabs">	
    <ul class="Tab tabs">
    <li><a href="#test">Test</a></li>
    <li><a href="#test1">Test1 </a></li>
    </ul>	
    <div class="fix"></div>	
    <div class="inside">
    <div id="test">
    <ul>
    <li>TEST</li>
    </ul>
    </div>
    <div id="test1"> 
    <ul>
    <li>TEST1</li>
    </ul>
    </div></div></div>
    
    правим css под себя и вуаля :yahoo:
     

    Вложения:

    • x360a.7z
      Размер файла:
      190,6 КБ
      Просмотров:
      3
    Dillon нравится это.
  9. Dillon

    Dillon Постоялец

    Регистр.:
    19 янв 2010
    Сообщения:
    54
    Симпатии:
    2
    Очень благодарен.Не подскажите следушие...
    scr.JPG

    Вот там где One,Two,Threeвид как буто картинка или там методами css сделана закругления и такой вид? или это картинка токая то как ее сделать,или вообще как сделать так же как на картинке,и как там цвет сменит красный на зеленый зарания признателен...:ah:
     
  10. nithwich

    nithwich

    Регистр.:
    10 фев 2007
    Сообщения:
    421
    Симпатии:
    74
    в вашем пример реализовано в сss

    вот код его...
    Код:
    .tabs-nav a, .tabs-nav a span {
        display: block;
        padding: 0 10px;
        background: url(tab.png) no-repeat; 
    }
    

    //рисунок который вам нужен

    чуток подумать и вы сможете сделать его так же как там.
     
    Dillon нравится это.
Статус темы:
Закрыта.