• DONATE to NULLED!
    Форуму и его команде можно помочь, мотивировать модераторов разделов.
    Помогите модератору этого раздела killoff лично.

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

Статус
В этой теме нельзя размещать новые ответы.

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="[url='+window.location+']Risen скачать игру бесплатно[/url]"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 убедителная прось помогите реализовать хоть эту менушку как я песал выше.
Вложения закачал но вставить в сообшения немогу,модераторы вставте.
Вот скрин что у меня получилось.

Для просмотра ссылки Войди или Зарегистрируйся
 
То что надо,А как это все впихнуть в DLE понравился эфект(Fade Effect) просто там по англ,направте маленько меня в нужном направлении,просто даже не знаю с чего начать...

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

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


<div id="container">
<ul>
<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li><a href="#section-3">Section 3</a></li>
</ul>
<div id="section-1">
...
</div>
<div id="section-2">
...
</div>
<div id="section-3">
...
</div>
</div>

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



* Section 1
* Section 2
* Section 3

...
...
...

js и стили вроде подключал,я я что то делаю не правильно.
 
Код:
<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>

в мейн,
все остальное есть в архиве который предлагают скачать.
 
Добавил в main.tpl что написали
Подключаю так
после {AJAX} пишу
<script type="text/javascript" src="{THEME}/js/animatedcollapse.js"></script>
<script type="text/javascript" src="{THEME}/js/jquery-1.1.3.1.pack.js"></script>
<script type="text/javascript" src="{THEME}/js/jquery.history_remote.pack.js"></script>
<script type="text/javascript" src="{THEME}/js/jquery.tabs.js"></script>
<script type="text/javascript" src="{THEME}/js/jquery.tabs.min.js"></script>
<script type="text/javascript" src="{THEME}/js/jquery.tabs.pack.js"></script>
Подключаю стили
<link rel="shortcut icon" href="{THEME}/js/tab.pmg" />
<link media="screen" href="{THEME}/js/jquery.tabs.css" type="text/css" rel="stylesheet" />
<link rel="shortcut icon" href="{THEME}/js/loading.gif" />
<link media="screen" href="{THEME}/js/jquery.tabs.css" type="text/css" rel="stylesheet" />
<link media="screen" href="{THEME}/js/jquery.tabs-ie.css" type="text/css" rel="stylesheet" />
Но отображаеться не коректно
Fade Effect
* One
* Two
* Three
Use a fade effect to switch tabs. You can optionally specify the speed for the animation with the option fxSpeed: value. The value is either a string of one of the predefined speeds in jQuery (slow, normal, fast) or an integer value specifying the duration for the animation in milliseconds. If omitted it defaults to normal.
$('#container').tabs({ fxFade: true, fxSpeed: 'fast' });
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. 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.

Что не так я подключил? видимо стили или js
 
Добавил в main.tpl что написали
Подключаю так
после {AJAX} пишу
Подключаю стили
Но отображаеться не коректно
Что не так я подключил? видимо стили или js
в папочке js есть .htacces ?
и еще лучше выкладывай сразу main.tpl и все..так проще будит
 
вообщем весь шаблон испаганил так и не сделал:(

Вот файл main.tpl
Найти код можно так <!-- Инфа блог -->


Буду рад ,и признательно благодарен если сделаете на этот шаблон(менушку) с объяснениям для этого шаблона с Fade Effect'ом.
 
и так подключаем js
jquery.js
tab.js - здесь юзаем .fadeOut и .fadeIn
подключаем 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 KB · Просмотры: 3
Очень благодарен.Не подскажите следушие...
scr.JPG

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

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


background: url(tab.png) no-repeat;
//рисунок который вам нужен

чуток подумать и вы сможете сделать его так же как там.
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху