Пакет 25 стилей для Vbulletin 4

Пакет 25 стилей для Vbulletin 4




Выкладываю пакет стилей к vB 4.х.х.
Тут разные версии от 4.0.5 до 4.2
Во многих темах присутсвуют psd файлы.
Стили были скачены в разных углах сети. Многое устанавливал ,всё отлично работает, если конечно версия форума совпадает с версией стиля.




Список стилей:

  • 1. Стиль blackorwhite 4.1.9
  • 2. Стиль bleckorhvite 4.1.10
  • 3. Crystal Clean Skin 4.1.10
  • 4. DarkGreenOutLines vB 4.1.10
  • 5. Dark Vision vB 4110-4111
  • 6. FMI-GameSkin-vB4.2
  • 7. Futuris vB4.1.12
  • 8. GK Transporant vb4.0.2
  • 9. hazieyatie vb 4.1.х
  • 10.Heilight 4.1.12
  • 11.iskins 4.1.5
  • 12.mekarsenja vb4.1.х
  • 13.mahligai vb4.1.х
  • 14.membara vb4.1.10
  • 15.merhania vb4.1.4
  • 16.pemanis vb4.1.10
  • 17. Reptile_Green_4110_v2.50
  • 18. Royal Flush Skin 4.1.10
  • 19. Supertune vb 4.1.11 и 4.1.12
  • 20. Take Five vb 4.1.10
  • 21. Totally.Pro.Style vb 4.1.12
  • 22. TwistedDarkGreen vb 4.0.8 - 4.1.12
  • 23. Underground_4.1.12
  • 24. UPRISING_gaming_Skin_vb4.1.10-4.1.11
  • 25. ws-eve vb4.1.10-4.1.12

Скачать стили: vb4 архив zip. размер 46,4 мБ []

Прошу пардону, если найдёте неточности по версиям.
Обязательно уточняйте версию внутри архива,а не по названиям на папках.






Оставить комментарий

Как создать вкладки на странице

Как создать вкладки на странице


Простая реализация создания горизонтальных или вертикально расположенных вкладок на jQuery с использованием простенького кода для создания дополнительных вкладок.


Как выглядят дополнительные вкладки - Демо.


Скачать скрипт можно тут []




Разметка html

1. Горизонтальное расположение вкладок(как в демо):

<div class="section">

    <ul class="tabs">
        <li class="current">Первая вкладка</li>
        <li>Вторая вкладка</li>
        <li>Третья вкладка</li>
        <li>Червертая вкладка</li>
    </ul>

    <div class="box visible">
        <p>параграф</p>
    </div>
    <div class="box">
        <p>параграф</p>
    </div>
    <div class="box">
        <p>параграф</p>
    </div>
    <div class="box">
        <p>параграф</p>
    </div>

</div>

2.Вертикальное расположение вкладок.


<div class="section vertical">

    <ul class="tabs">
        <li class="current">Первая вкладка</li>
        <li>Вторая вкладка</li>
        <li>Третья вкладка</li>
        <li>Червертая вкладка</li>
    </ul>

    <div class="box visible">
        <p>параграф</p>
    </div>
    <div class="box">
        <p>параграф</p>
    </div>
    <div class="box">
        <p>параграф</p>
    </div>
    <div class="box">
        <p>параграф</p>
    </div>

</div>

CSS

Стили горизонтальных и вертикальных вкладок:

.section {
    width: 600px;
    background: #EFEFEF;
    margin: 0 0 30px;
}
ul.tabs {
    height: 28px;
    line-height: 25px;
    list-style: none;
    border-bottom: 1px solid #DDD;
    background: #FFF;
}
.tabs li {
    float: left;
    display: inline;
    margin: 0 1px -1px 0;
    padding: 0 13px 1px;
    color: #777;
    cursor: pointer;
    background: #F9F9F9;
    border: 1px solid #E4E4E4;
    border-bottom: 1px solid #F9F9F9;
    position: relative;
}
.tabs li:hover,
.vertical .tabs li:hover {
    color: #F70;
    padding: 0 13px;
    background: #FFFFDF;
    border: 1px solid #FFCA95;
}
.tabs li.current {
    color: #444;
    background: #EFEFEF;
    padding: 0 13px 2px;
    border: 1px solid #D4D4D4;
    border-bottom: 1px solid #EFEFEF;
}
.box {
    display: none;
    border: 1px solid #D4D4D4;
  border-width: 0 1px 1px;
    background: #EFEFEF;
    padding: 0 12px;
}
.box.visible {
    display: block;
}

.section.vertical {
    width: 440px;
    border-left: 160px solid #FFF;
}
.vertical .tabs {
    width: 160px;
    float: left;
    display: inline;
    margin: 0 0 0 -160px;
}
.vertical .tabs li {
    padding: 0 13px;
    margin: 0 0 1px;
    border: 1px solid #E4E4E4;
    border-right: 1px solid #F9F9F9;
    width: 132px;
    height: 25px;
}
.vertical .tabs li:hover {
    width: 131px;
}
.vertical .tabs li.current {
    width: 133px;
    color: #444;
    background: #EFEFEF;
    border: 1px solid #D4D4D4;
  border-right: 1px solid #EFEFEF;
  margin-right: -1px;
}
.vertical .box {
  border-width: 1px;
}

javascript

Подключаем jQuery и скрипт для вкладок:

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">script>
<script type="text/javascript" src="tabs.js">script>

Содержимое файла tabs.js:


(function($) {
$(function() {

    $('ul.tabs').delegate('li:not(.current)', 'click', function() {
        $(this).addClass('current').siblings().removeClass('current')
            .parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150);
    })
})
})(jQuery)

Оставить комментарий

Навороченный адаптивный слайдер

Адаптивный слайдер

Время не стоит на месте, заметно меняется внешний вид сайтов в сети, особенно большой популярностью пользуется адаптивный дизайн.

Слайдеры, "карусели", "кирпичная кладка", теперь можно встретить почти на любом сайте, они могут придать легкость и изюминку сайту, особенно когда в них используются эффекты HTML5 и CSS3.




Ниже вставленный слайдер хорош тем, что:
1. Дивовый(резиновый) дизайн сам подстраивается под размер страницы.
2.Картинки могут быть совершенно разных размеров. Т.е. не обязательно подгонять все фото под один размер.
3. У слайдера есть возможность вставки видео. Можно подключить ролики с YouTube, Vimeo, Html5, Video, Wistia и аудио то же можно подключить.
4. Есть кнопка Увеличить-уменьшить.
5. Лёгкая установка.
6. Три варианта установки на Ваш выбор: Слайдер , Плитка , Карусель .
Все три варианта будут работать на одном сайте одновременно.


Примеры вставки на светлом фоне - Слайдер, тут - Плитка .
Вариант вставки на страницу цмс vBulletin, а это на отдельной странице

Скачать слайдер можно тут.

Установка слайдера:

Установка слайдера очень простая:
1.Вставляем папочку suorce2 в корень сайта.
2. Выбираете вариант слайдера, их там ТРИ - слайдер.txt, плитка.txt, карусель.txt.
Копируете содержимое желаемой конструкции на свою страницу.
3. В папочках images/big (большие фото) и images/thumbs (превьюшки) заменяете фото на свои. Это всё.

Вставка фото и видео

Названия фотографий и их количество регулируется в файликах слайдер.txt, плитка.txt, карусель.txt.
Рассмотрим вставку фото:

<img alt=" Мультфильм  Ну,погоди!" // Будет отражаться в слайдере.
src="suorce2/images/thumbs/tile6.jpg"   //Большая фото
data-image="suorce2/images/big/tile6.jpg" //Превьюшка большой фото
data-description="Ну, чумодан,погоди!"   //Описание для искалок
style="display:none"> a>       


Названия фотографий для удобства можно в обоих папках сделать одинаковым ,например цифрами -(1,2,3,4,5), второй слайдер - (21,22,23,24), слайдер три- (31,31,33,35), четвёртый (41,42,43)

Вставка видеоролика выглядит таким образом:

<img alt="Видео с Ютуба  "
data-type="youtube"
data-videoid="Y-ATemepPrk"  // ID ролика, обрубок ютубовской ссылки
data-description="Мультфильм с Ютуба">

Для вставки видео достаточно воткнуть обрубок ссылки на ролик. Той самой ссылки, которая находится на ютубе под кнопкой "Поделиться" Название ролика меняейте сами, верхняя строчка будет показываться в слайдере.

Кому святой троицы покажется мало, можно сходить на офф.сайт и допилить желаемое самостоятельно.



Оставить комментарий

Прыг: 01 02 03 04

^Наверх