Как сделать шаблон адаптивным?

Тема в разделе "Верстка", создана пользователем CHADREX, 24 май 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. CHADREX

    CHADREX Психопат

    Регистр.:
    12 янв 2014
    Сообщения:
    542
    Симпатии:
    202
    Всем привет. Такая ситуация. Купил один шаблон по дешевке, но он оказался не адаптивным. А на демосайте он адаптивный. Так вот вопрос, можно ли посредством css сделать его адаптивным?

    Вот демо сайт: http://fluid.imagecmsdemo.net/

    Просто я пробовал тупо заменить css с демки но увы.
     
  2. Sorcus

    Sorcus Sorcus. A New Beginning.

    Moderator
    Регистр.:
    10 июл 2011
    Сообщения:
    300
    Симпатии:
    588
    Если у разраба покупал, спросил-бы у него...Или где-то левак взял?
     
  3. inturned

    inturned Webmaster & Designer

    Регистр.:
    7 ноя 2011
    Сообщения:
    530
    Симпатии:
    244
    Конечно, в css файле надо создать @-правила, типа так:
    Код:
    @media (min-width: 767px) and (max-width: 1023px)
       body {
          width: 100%
       {
    {
    
    Ну это как пример, а вообще исследуй тот шаблон, который купил и вырежи из него весь похожий код.

    Вообщем, тебе нужно искать @media (min-width: ...px) and (max-width: ....px) в файлах css демки и сделать у себя тоже самое, только соответственно со своими классами, а еще в адаптированном может меню в canvas быть с использованием jquery библиотеки.
     
    Последнее редактирование: 24 май 2014
  4. CHADREX

    CHADREX Психопат

    Регистр.:
    12 янв 2014
    Сообщения:
    542
    Симпатии:
    202
    Ну ширину я сделал адаптивной, а вот меню с облако баннеров не получается.
     
  5. inturned

    inturned Webmaster & Designer

    Регистр.:
    7 ноя 2011
    Сообщения:
    530
    Симпатии:
    244
    Для баннеров подойдет что-то типа такого в css:
    Код:
    min-width: ***px;
    max-width: ***px;
     
  6. CHADREX

    CHADREX Психопат

    Регистр.:
    12 янв 2014
    Сообщения:
    542
    Симпатии:
    202
    Да css идентичен должен быть по идее. Если там конечно php страницы не изменили.

    ImageCMS это, та если бы владел знаниями по php то сюда бы и не лез. А дуб дубом. Что касается баннеров то я бы забил на них, а поставил какой нибудь слайдер, layer slider например.
     
    Последнее редактирование модератором: 25 май 2014
  7. inturned

    inturned Webmaster & Designer

    Регистр.:
    7 ноя 2011
    Сообщения:
    530
    Симпатии:
    244
    Напиши либо разработчику, у которого покупал шаблон.
    Или если не покупал у него, а где-то еще, то:
    1. Проверь все классы css в демо
    2. Когда будешь делать тоже самое у себя в css, то смотри какие классы у тебя, сравнивай их с демо-шаблоном и делай адаптированный css у себя

    Та не нужны тебе знания PHP, максимум java script, чтобы меню сделать и то можно без js совершенно, чисто на CSS. Если css знаешь то спокойно все сделаешь.
    Пришли тогда что ли мне ссылку на сайт, посмотрю че да как.

    Дело в том что даже в PHP ты будешь все равно вписывать значения css

    Короче, пиши в ЛС или в скайп, ник тот же(остальные контакты в профили), там детально все обсудим, чтобы тут не флудить за зря. А здесь просто выложу потом готовое решение по твоему вопросу и все.
     
    Последнее редактирование: 25 май 2014
  8. inturned

    inturned Webmaster & Designer

    Регистр.:
    7 ноя 2011
    Сообщения:
    530
    Симпатии:
    244
    Решение!

    Больше здесь: http://htmlbook.ru/css/media

    Теперь по конкретному шаблону уважаемого ТС.
    С демо сайта http://fluid.imagecmsdemo.net/ скачиваем CSS

    Код:
    http://fluid.imagecmsdemo.net/templates/fluid/css/adaptive.css
    Теперь в своей папки с шаблоном в файл main.tpl пишем:
    Код:
    <link rel="stylesheet" type="text/css" href="{$THEME}css/adaptive.css" media="all" />
    И в папку со стилями CSS: ваш_сайт.ру/templates/fluid/css/ кидаем adaptive.css

    Но, в данном случае у ТС не много не правильно отображается, но все остальное можно сделать уже в adaptive.css, своими руками. Все проще, чем писать адаптацию с нуля.

    В принципе, решение найдено.

    P.S. Еще одно: можно написать разработчику и поинтересоваться у него.

    Тему можно закрывать.
     
    teodor и CHADREX нравится это.
Статус темы:
Закрыта.