[Помогите] Прошу помощи в "кастрации" шаблона bootstrap

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем мастер алекс, 26 ноя 2015.

  1. мастер алекс

    мастер алекс

    Регистрация:
    26 ноя 2015
    Сообщения:
    1
    Симпатии:
    0
    Очень нравится общий вид этого шаблона : http://www.templatemo.com/live/templatemo_423_artcore



    Но в нем много для меня лишнего. Помогите отсечь не нужное но не повредить его работоспособность.



    Этап 1: На главной странице в нижней части слайдер из 3х изображений, которые не меняются сами. Мне нужно убрать два скрытых изображения и тем самым упразднить слайдер - сделать обычную область с фоновым изображением и текстом.



    Секция отвечающая за слайдер:
    <code>
    <divclass="swiper-container">
    <divclass="swiper-wrapper">

    <divclass="swiper-slide"style="background-image: url(images/slide1.jpg);">
    <divclass="overlay-s"></div>
    <divclass="slider-caption">
    <divclass="inner-content">
    <h2>Earth New House Project</h2>
    <p>Artcore is free HTML5 template by <bclass="blue">template</b><bclass="green">mo</b>. Credit goes to <arel="nofollow"href="http://unsplash.com">Unsplash</a> for photos.</p>
    <ahref="#"class="main-btn white">View Projects</a>
    </div><!-- /.inner-content -->
    </div><!-- /.slider-caption -->
    </div><!-- /.swier-slide -->

    <divclass="swiper-slide"style="background-image: url(images/slide2.jpg);">
    <divclass="overlay-s"></div>
    <divclass="slider-caption">
    <divclass="inner-content">
    <h2>Hotel and Residence Concept in Montenegro</h2>
    <p>We come with new fresh and unique ideas.</p>
    <ahref="#"class="main-btn white">View Projects</a>
    </div><!-- /.inner-content -->
    </div><!-- /.slider-caption -->
    </div><!-- /.swier-slide -->

    <divclass="swiper-slide"style="background-image: url(images/slide3.jpg);">
    <divclass="overlay-s"></div>
    <divclass="slider-caption">
    <divclass="inner-content">
    <h2>Natural 3d Architecture Design</h2>
    <p>Natural concrete is a material which is calm and clean.</p>
    <ahref="#"class="main-btn white">View Projects</a>
    </div><!-- /.inner-content -->
    </div><!-- /.slider-caption -->
    </div><!-- /.swier-slide -->

    </div><!-- /.swiper-wrapper -->
    </div><!-- /.swiper-container -->
    </code>

    CSS:

    <code>
    .swiper-container {
    overflow: hidden;
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    z-index:2;
    }
    @media screen and(max-width:768px){
    .swiper-container {
    top:120px;
    }
    .swiper-container a.main-btn {
    display: none;
    }
    }

    .swiper-wrapper {
    width:100%;
    height:100%;
    }

    .swiper-slide {
    background-size: cover;
    background-repeat:no-repeat;
    width:100%;
    height:100%;
    position: relative;
    z-index:8;
    }

    .overlay-s {
    position:fixed;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.6);
    z-index:9;
    }

    .slider-caption {
    position: absolute;
    overflow: hidden;
    z-index:10;
    width:100%;
    top:53%;
    color: white;
    }
    .slider-caption h2 {
    color: white;
    text-transform: uppercase;
    font-weight:300;
    font-size:2.5em;
    margin-bottom:20px;
    }
    .slider-caption p {
    margin-bottom:30px;
    font-size:1.5em;
    font-weight:300;
    }
    .slider-caption .inner-content {
    width:60%;
    margin:0auto;
    }
    .slider-caption a {
    color: white;
    }
    .slider-caption a.main-btn:hover {
    background-color: rgba(255,255,255,0.1);
    }
    @media screen and(min-width:769px)and(max-width:991px){
    .slider-caption h2 {
    font-size:1.7em;
    }
    .slider-caption p {
    font-size:1em;
    }
    }
    @media screen and(max-width:768px){
    .slider-caption {
    top:47%;
    }
    .slider-caption h2 {
    font-size:1.7em;
    }
    .slider-caption p {
    font-size:1em;
    }
    }
    </code>

    Этап 2: Меню. При уменьшении разрешения экрана, меню собирается в квадрат и скрывает пункты меню. В моем варианте предполагается всего 4 пункта меню и они вполне гармонично на другом шаблоне размещаются друг под другом.



    Как заставить меню не собираться в квадрат а просто при сжатии выстраиваться столбиком?
     
  2. iga

    iga

    Регистрация:
    6 фев 2014
    Сообщения:
    145
    Симпатии:
    20
    этап 1 - убрать слайдер и вставить на его место фоновое изображение с текстом. Читать мэнуал
    этап 2 - читать мэнуал

    И уж если тут что-то будет не получаться, задавать вопросы в теме. А то сейчас вопросы выглядят так, что вам лучше обратиться в раздел платной помощи.
     
  3. erkinaltai

    erkinaltai

    Регистрация:
    6 дек 2015
    Сообщения:
    5
    Симпатии:
    0
    1. Из секции слайдера убери вот эти части. Тем самым уберешь слайды 2-3.
    Код:
    <divclass="swiper-slide"style="background-image: url(images/slide2.jpg);">
    <divclass="overlay-s"></div>
    <divclass="slider-caption">
    <divclass="inner-content">
    <h2>Hotel and Residence Concept in Montenegro</h2>
    <p>We come with new fresh and unique ideas.</p>
    <ahref="#"class="main-btn white">View Projects</a>
    </div><!-- /.inner-content -->
    </div><!-- /.slider-caption -->
    </div><!-- /.swier-slide -->
    
    <divclass="swiper-slide"style="background-image: url(images/slide3.jpg);">
    <divclass="overlay-s"></div>
    <divclass="slider-caption">
    <divclass="inner-content">
    <h2>Natural 3d Architecture Design</h2>
    <p>Natural concrete is a material which is calm and clean.</p>
    <ahref="#"class="main-btn white">View Projects</a>
    </div><!-- /.inner-content -->
    </div><!-- /.slider-caption -->
    </div><!-- /.swier-slide -->
    Далее. Убери из index.html
    Вот эти элементы. Это кнопки перелистывания слайдера.
    Код:
    <a href="#" class="btn-left arrow-left fa fa-angle-left"></a>
    <a href="#" class="btn-left arrow-right fa fa-angle-right"></a>
    Далее. Зайди в файл plugins.js который лежит в папке js. В этом файле прописано несколько плагинов, в том числе и слайдер.
    Там удали весь код, который отвечает за слайдер.
    Ты легко найдешь код, так как код плагинов разделён многострочными комментариями.

    Вот комментарий с которого начинается код слайдера. Удаляй весь код до кода следующего плагина.
    Код:
    /*
    * Swiper 2.6.0
    * Mobile touch slider and framework with hardware accelerated transitions
    *
    * http://www.idangero.us/sliders/swiper/
    *
    * Copyright 2010-2014, Vladimir Kharlampidi
    * The iDangero.us
    * http://www.idangero.us/
    *
    * Licensed under GPL & MIT
    *
    * Released on: April 9, 2014
    */

    По меню советую заменить меню на другое банальной заменой плагина меню.