Тематика: По цвету: Красный Желтый Зеленый Синий Оранжевый Розовый Серый Белый Черный Мульти

Ваш сайт на CMS Joomla? Добавьте его в галерею Joomfans!

Вы можете совершенно бесплатно добавить ваш веб-сайт в нашу галерею сайтов. Подробнее...

Галерея Добавить

  • Страница:
  • 1

ТЕМА: Transplant Nebulae RokStories Style

Transplant Nebulae RokStories Style 12 года, 10 мес. назад #1316

How to Integrate Nebulae RokStories Style to Other Templates

1. Please ensure you have the latest version of RokStories installed.

2. Go to Extension ? Module Manager, and search for the mod_rokstories. Set the Layout Type parameter to "Scroller Showcase"



3. Download the following package, extract it on your desktop, and put it under the following directory.
<Joomla Root>/templates/<your template name>/images/

Вложенный файл:

Имя файла: 2_167cbbd343233a0c8312aee11bedc385.zip
Размер файла: 4312


4. On the site you want to transplant the RokStories, please create these directories (marked red below).
<Joomla Root>/images/stories/demo/style1/

5. Download Nebulae RocketLauncher package, unzip it, then go to /images/stories/demo/style1/ folder and copy all the sample images files to the directory mentioned in step 4.

6. Edit your template.css.
<Joomla Root>/templates/<your template name>/css/template.css

At the end of the lines, add below codes:
 
/* RokStories */
.rokstories-tip {z-index: 300;}
.feature-title {color: #fff;}
.feature-desc  {color: #bbb;}
.feature-block {margin: -15px -25px -30px -25px;}
.feature-block .description a.readon {font-weight: normal;}
.fp-rokstories {width: 960px;height: 436px;display: block;}
.rokstories-layout8 .feature-block .created-date {margin-bottom: 15px;}
.rokstories-layout8 .image-small {padding: 0;}
.rokstories-layout8 .image-small .wrapper {float: left;position: relative;}
.rokstories-layout8 .image-small .items-1 {width: 100%;}
.rokstories-layout8 .image-small .items-2 {width: 50%;}
.rokstories-layout8 .image-small .items-3 {width: 33.33%;}
.rokstories-layout8 .image-small .items-4 {width: 25%;}
.rokstories-layout8 .image-small .items-5 {width: 20%;}
.rokstories-layout8 .image-small .items-6 {width: 16.66%;}
.rokstories-layout8 .image-small .items-7 {width: 14.2%;}
.rokstories-layout8 .image-small .items-8 {width: 12.5%;}
.rokstories-layout8 .image-small .items-9 {width: 11.1%;}
.rokstories-layout8 .image-small .items-10 {width: 10%;}
.rokstories-layout8 .image-small .items-11 {width: 87px;}
.rokstories-layout8 .image-small .wrapper-padding {padding: 10px 12px 10px 10px;}
.rokstories-layout8 .wrapper.active .active-arrow {width: 40px;height: 14px;position: absolute;left: 50%;margin-left: -20px;top: -14px;}
.rokstories-layout8 .feature-block img.feature-sub {width: 65px;height: 65px;margin: 0;box-shadow: inset 2px 2px 2px rgba(0,0,0,0.5);}
.rokstories-layout8 .image-small .thumb {float: left;margin: 0 10px 10px 0;}
.rokstories-layout8 .feature-block .feature-desc {font-size: 100%;line-height: 140%}
.rokstories-layout8 .feature-block .feature-title {font-size: 18px;line-height: 18px;font-weight: normal;margin: 4px 0 10px 0;}
.feature-block .image-small {background: url(../images/rokstories/rokstories-bar.png) 50% 0 repeat-x;}
.rokstories-layout8 .image-small .wrapper {background: url(../images/rokstories/vert-div.png) 100% 0 repeat-y;}
.rokstories-layout8 .image-small .wrapper.active {background: #616161 url(../images/rokstories/rokstories-active.png) 50% 0 repeat-x;box-shadow: 1px 1px 4px rgba(0,0,0,0.4);}
.rokstories-layout8 .wrapper.active .active-arrow {background: url(../images/rokstories/rokstories-active-arrow.png) 0 0 no-repeat;}
.rokstories-layout8 .feature-block .thumb {border-right: 1px solid rgba(255,255,255,0.1);border-bottom: 1px solid rgba(255,255,255,0.1);}
.feature-block img&#91;src $="rokstories-blank1.png"&#93;, .feature-block img&#91;src $="rokstories-blank2.png"&#93;, .feature-block img&#91;src $="rokstories-blank3.png"&#93;, .feature-block img&#91;src $="rokstories-blank4.png"&#93; {width: 960px;}
.feature-block img&#91;src $="rokstories-blank1_thumb.png"&#93;, .feature-block img&#91;src $="rokstories-blank2_thumb.png"&#93;, .feature-block img&#91;src $="rokstories-blank3_thumb.png"&#93;, .feature-block img&#91;src $="rokstories-blank4_thumb.png"&#93; {background-size: 186px 65px;}
.rokstories-layout8 .wrapper.last {background: none;}
.feature-block img&#91;src $="rokstories-blank1.png"&#93; {background: url(../../../images/stories/demo/style1/fp-rokstories1.jpg) 0 0 no-repeat;}
.feature-block img&#91;src $="rokstories-blank2.png"&#93; {background: url(../../../images/stories/demo/style1/fp-rokstories2.jpg) 0 0 no-repeat;}
.feature-block img&#91;src $="rokstories-blank3.png"&#93; {background: url(../../../images/stories/demo/style1/fp-rokstories3.jpg) 0 0 no-repeat;}
.feature-block img&#91;src $="rokstories-blank4.png"&#93; {background: url(../../../images/stories/demo/style1/fp-rokstories4.jpg) 0 0 no-repeat;}
.feature-block img&#91;src $="rokstories-blank1_thumb.png"&#93; {background: url(../../../images/stories/demo/style1/fp-rokstories1.jpg) 30% 0 no-repeat;}
.feature-block img&#91;src $="rokstories-blank2_thumb.png"&#93; {background: url(../../../images/stories/demo/style1/fp-rokstories2.jpg) 30% 0 no-repeat;}
.feature-block img&#91;src $="rokstories-blank3_thumb.png"&#93; {background: url(../../../images/stories/demo/style1/fp-rokstories3.jpg) 30% 0 no-repeat;}
.feature-block img&#91;src $="rokstories-blank4_thumb.png"&#93; {background: url(../../../images/stories/demo/style1/fp-rokstories4.jpg) 30% 0 no-repeat;}
 


7. For Internet Explorer 7, we need to put some tweak for the specific version. For Gantry based template, the Internet Explorer specific css file is located under <Joomla Root>/templates/<your template name>/css/template-ie7.css.

At the bottom of the file, add the following line:

 
/* RokStories */
.image-small {zoom: 1;}
 


8. Here is the sample of RokStories content.

 
<img src="images/stories/demo/rokstories-blank1.png" alt="image" />
 
<p>Mauris lobortis. Aliquam lacinia purus magna.</p>
 
<hr id="system-readmore" />
 
<p>Integer fermentum elit in tellus. Integer ligula ipsum, gravida aliquet, fringilla non, interdum eget, ipsum. Praesent id dolor non erat viverra volutpat. Fusce tellus libero, luctus adipiscing, tincidunt vel, egestas vitae, eros.</p>
 
Вложения:
  • joomfans
  • Вне сайта
  • Administrator
  • smo,seo, design
  • Постов: 516
  • Репутация: 48
Adipiscing et ridiculus velit! Mauris, pellentesque duis integer sit non. Augue ac! Dolor tincidunt in etiam mus amet!
  • Страница:
  • 1
Время создания страницы: 0.34 секунд