Question

Присмотрел адаптивный дизайн #1722, но его нужно сделать максимально удобным и компактным, особенно для мобильных устройств. Подскажите, пожалуйста, где и что поменять. Заранее спасибо большое! Сразу общие вопросы - для десктопа и телефона.

1. Как убрать с главной промо-блок и сделать, чтобы главная страница выглядела как все остальные?

2. Как уменьшить шрифт заголовков (везде кроме форума) примерно на четверть?

3. Как уменьшить высоту боковых блоков - убрать лишнее пустое пространство?

А дальше вопросы по адаптивному отображению шаблона на телефоне.

4. Как на главной странице форума сделать 3 колонки: Форум, Темы, Ответы?

5. Как на форуме в списке тем добавить колонку, в которой отображается количество ответов/просмотров (через | или в две строки)? Идея в том, чтобы сделать эту колонку адаптивно-узкой, чтобы не мешала отображению названия темы.

6. Как на форуме в теме с ответами сделать максимально компактным блок с инфой о пользователе? В первой строке: ник, дата и время (только цифры, без слов), # сообщения. Второй строкой: значок группы, название группы, статус, кол-во сообщений.

7. Как убрать аватарки (но чтобы в десктопной версии остались)?

8. Как убрать лишнее пустое место между сообщениями на форуме, и поставить явный разделитель (жирную черту что ли) между сообщениями?

9. Можно ли для неавторизованных убрать кнопки под сообщением – профиль, www, ЛС, вверх?

10. Как уменьшить шрифт названия сайта при просмотре с телефона?

Answer 1

1. Перейти в шаблон: http://234.usite.pro/panel/?a=tmpl&m=2&t=0 найти и удалить код:

 <!-- <global_promo> -->
 <?if($PAGE_ID$='sitePage1')?>
 <section>
 <div class="promo-wrap">
 <div class="promo">
 <div class="caption">
 <div class="cap-ds description">Vestibulum iaculis lacin</div>
 <div class="cap-ttl">Lorem ipsum</div>
 <div class="cap-ds"><a role="button" href="#">More</a></div>
 </div>
 </div>
 <div class="mouse-wrap">
 <a href="#" class="mouse-scroll"></a>
 </div>
 <div class="parallax-wrap"></div>
 <div class="second-parallax-wrap"></div>
 <div class="third-parallax-wrap"></div>
 <div class="fourth-parallax-wrap"></div>

 </div>
 </section>
 <?endif?>
 <!-- </global_promo> -->

2. Нужны конкретные примеры, мы не можем за вас ходить и искать по всему сайту заголовки непонятно какие.

3. В стилях ищем строку номер 110:

.sidebox {
    margin: 30px 0;
    position: relative;
    -webkit-box-shadow: 0 10px 20px rgba(217,213,230,0.5);
    box-shadow: 0 10px 20px rgba(217,213,230,0.5);
    border-radius: 7px;
    background-color: #fafaff
}

уменьшаем значение 30 на сколько нужно.

4. То есть колонку обновления хотите полностью убрать ?

5. Это доступно только внутри форумов, на главной форума это не доступно системно, пример http://234.usite.pro/forum/2

По остальным вопросам обратитесь к специалистам: https://divly.ru/ там помогут доработать сайт под ваши требования.

Comments

Спасибо.

1. Промо убрал. Как теперь поставить на главную (т.е. на "страницы сайта") ту верхнюю оранжевую полосу, что на всех страницах модулей? И как регулировать ее высоту?

2. На скрине выделил синим заголовки, о которых спрашивал - как уменьшить размер шрифта? Это и в блоге, и в статьях, и в новостях, и также - во всех названиях блоков. И как уменьшить шрифт названия сайта (выделил белым)? А внижней части сайта - тоже уменьшить шрифт надписей About, Quick links, Adress, Phones, Follow us.

3. Как убрать пустое место в блоках? (обозначил его красным на скрине). Вы написали изменить значение "30", но то - расстояние между блоками, а мне нужно убрать пустоту внутри блоков.

4. Этот вопрос был не по общему шаблону, а по адаптации под мобильный. В общем шаблоне менять нет необходимости. Все остальные вопросы - тоже по адаптации. Обращусь по ссылке, спасибо.

---

Эзотерик Лэнд,

1. В стилях удалить строку номер 105:

.sitePage1 header {
    position: absolute;
    z-index: 999;
    width: 100%;
    background: transparent;
}

2. В стилях строка номер 114:

.sidetitle{padding:20px 15px;background:#fff;border-radius:7px 7px 0 0;color:#70718e;font-family:"Roboto Condensed";font-size:20px;line-height:1.14;text-transform:uppercase;text-align:center;letter-spacing:1.4px}

регулируйте выделенное красным.

3. Регулируйте отступы в стилях строка 115:

.sidebox .inner {
    padding: 25px 20px 50px;
}

4. ок, шаблон вообще адаптивный.

---

Yuri_Geruk,

Спасибо. Остались вопросы:

1. Где регулируется высота оранжевой шапки сайта? На скрине которая.

2. Как изменить размер шрифта надписей About, Quick links, Adress, Phones, Follow us?

3. Как сделать, чтобы клик или тап по слову "Меню" (на скрине) вызывал боковое меню?

---

Эзотерик Лэнд,

1. В стиляхи ещем строку номер 106:

header {
    background-image: linear-gradient(-266deg,#fccb38 0,#fccb38 1%,#ff4d75 100%);
    height: 100px;
}

добавить выделенное, вместо 100 пишем нужную высоту.

2. В стилях строка 354:

#footer h6{font-size:28px;line-height:1.57;padding-top:30px;letter-spacing:1.4px}

3. Для этого нужно писать доп скрипт. Извините, здесь не поможем с этим вопросом.

---

Yuri_Geruk,

1. В стилях ищем строку номер 106: - не сработало, оранжевая шапка вообще слетает, остается только серый фон.

2. Как сформировать блок информера? Информер создал, но не получается его вывести в виде стандартного блока, нужно правильно сделать код всего блока. Подскажите пожалуйста.

3. Где настраивается высота секции в мобильном меню (на скрине)?

---

Эзотерик Лэнд,

1. Не видим чтобы вы вообще что-то меняли. Если удаляете изменения, мы не сможем ничего проверить.
2. Какой информер, для какого модуля. Код формируется стандартный, там ничего формировать не нужно еще дополнительно.
3. В стилях строка номер 837:

.slider-menu__link {
    display: block;
    text-decoration: none;
    font-weight: 400;
    padding: 10px 0;
    -webkit-transition: all .2s;
    transition: all .2s;
    border-bottom: 1px solid rgba(0,0,0,.1);
    font-size: 16px;
    word-break: break-word
}

---

Yuri_Geruk,

1. Разобрался, спасибо. Там помимо выделенного красным надо было поставить и точку с запятой, а я добавлял только выделенное.  2. Информер для форума - $MYINF_3$. Добавил его в первый контейнер - посмотрите как выглядит, без блока.   3. И тот же вопрос по поводу кода меню сайта. Добавил под информером - $NMENU_3$.

---

Эзотерик Лэнд,

1. ок
2. Вы неправильно добавляете. Зачем сразу вы в контейнер добавляете, блок добавляйте по инструкции: https://www.ucoz.ru/help/start/upravlenie-dizajnom-v-konstruktore#anchor-blocks и после уже в него информер вставляйте.
3. Аналогично и по меню, так же блок создавайте как описано в пункте 2 по ссылке.

---

Yuri_Geruk,

Спасибо большое. Еще вопросы появились.

1. Как убрать превращение строчных букв в заглавные (везде в названиях и заголовках)?

2. Как сделать сделать белый фон для текстовго поля на "страницах сайта"? (пример)

3. Как убрать черту перед заголовокм Н2? (по ссылке выше видно). И там что-то неправильно с размером шрифта для заголовка H2. В блоге и статьях заголовки отображаются как настроено, а на "страницах сайта" H2 больше, чем должно быть. Как исправить?

4. Подскажите, где меняется цвет текста, содержащего ссылку?

5. И где настраивается цвет градиента шапки?

6. Как убрать блок "Приветствую Вас!"?

---

Эзотерик Лэнд,

1. Конкретиные примеры приводите, мы не будем ходить по всему сайту и искать сами эти примеры.
2. В стилях ищем строку номер 10 body.tmpl_body { background-color: #f2f2f7; }
3. В стилях удалить строку 313 div#content section>h2:first-of-type{border-top:2px solid #fda649;} полностью удалить.
4. Какую ссылку и где конкретно, пример приводите.
5. В стилях строка 106 background-image: linear-gradient(-266deg,#fccb38 0,#fccb38 1%,#ff4d75 100%);
6. С шаблона удалить такой код:

 <?if($USERS_ON$)?><div class="sidebox marked"><div class="sidetitle"><span><!--<s5212>-->Приветствую Вас<!--</s>-->!</span></div>
 <div class="inner">
 <div class="user-box">
 <div class="user-ttl"><?if($USER_LOGGED_IN$)?><!--<s5212>-->Приветствую Вас<!--</s>-->, <a href="$PERSONAL_PAGE_LINK$"><b>$USERNAME$</b></a>!<?else?><!--<s5212>-->Приветствую Вас<!--</s>-->, <span>$USERNAME$</span>!<?endif?></div>
 <div class="user-btns"><?if($USER_LOGGED_IN$)?><a title="Мой профиль" href="$PERSONAL_PAGE_LINK$"><!--<s5214>-->Мой профиль<!--</s>--></a> <span>|</span> <a title="Выход" href="$LOGOUT_LINK$"><!--<s5164>-->Выход<!--</s>--></a><?else?><a title="Регистрация" href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a> <span>|</span> <a title="Вход" href="$LOGIN_LINK$"><!--<s3087>-->Вход<!--</s>--></a><?endif?></div>
 </div>
 </div>
 </div><?endif?>

---

Yuri_Geruk,

Спасибо большое.

1. Уточню. Как убрать превращение строчных букв в заглавные во всех заголовках Н1-Н6 (во всех модулях, везде на сайте)?

2. Я имел в виду цвет только для текстового поля, а за его пределами чтобы был тот же светло-серый фон, что в модулях Блог и Каталог статей (пример).

3. Размер заголовка Н2 на "страницах сайта" (пример) не соответствует заданному размеру (например в каталоге, а также в блоге). Где он настраивается?

4. Уточню вопрос "Подскажите, где меняется цвет текста, содержащего ссылку?": мне нужно изменить цвет ссылок либо сразу везде (предпочтительно), либо (если это отдельно настраивается) во всех добавляемых материалах в модулях Страницы сайта, Каталог статей, Блог, Форум.

5. И на главной странице сайта как сделать белый фон для текстового поля, и светло-серый - вокруг (точно как во втором вопросе)?

---

Эзотерик Лэнд,

1. В стилях ищем строки, 22:

h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    margin: 5px 0;
    padding: 0;
    text-transform: uppercase;
    font-family: 'Roboto Condensed'
}

строка 114:

.sidetitle{padding:10px 10px;background:#fff;border-radius:7px 7px 0 0;color:#70718e;font-family:"Roboto Condensed";font-size:14px;line-height:1.14;text-transform:uppercase;text-align:center;letter-spacing:1.4px}

строка  178 и 182

.eTitle{color:#70718e;font-family:"Roboto Condensed";font-size:15px;font-weight:400;line-height:1.2;text-transform:uppercase;letter-spacing:1.4px}

.eTitle a{color:#70718e;font-family:"Roboto Condensed";font-size:15px;line-height:1.2;text-transform:uppercase;letter-spacing:1.4px;text-decoration:none}

строка 74:

.site-n,.site-n a{color:#fff;font-family:"Roboto Condensed";font-size:18px;font-weight:700;line-height:1.33;text-transform:uppercase;letter-spacing:2px}

это для большей части должно помочь.

---

Yuri_Geruk,

Спасибо. Остальные вопросы остались:  

1. На "страницах сайта" размер заголовка Н2 не соответствует настройкам в стилях (пример). В блоге и каталоге статей всё соответствует настройкам.  

2. На главной и "страницах сайта" глюк с шаблоном. Я писал об этом выше. Нужно, чтобы было стандартно, как в каталоге статей и блоге: добавленный материал - на белом фоне, а за пределами белого текстового поля - стандартный светло-серый  фон. Что и где исправлять?

---

Эзотерик Лэнд,

1. В стялих строка номер 312:

div#content section>h2 {
    font-family: 'Roboto Condensed';
    font-size: 30px;
    padding-bottom: 5px;
    margin-bottom: 12px
}

2. В стилях строку номер 1039:

#content .eBlock {
    -webkit-box-shadow: 0 10px 20px rgba(217,213,230,0.5);
    box-shadow: 0 10px 20px rgba(217,213,230,0.5);
    border-radius: 7px;
    background-color: #fff;
    padding: 30px 30px 0
}

заменить на:

#content .eBlock,#content section {
    -webkit-box-shadow: 0 10px 20px rgba(217,213,230,0.5);
    box-shadow: 0 10px 20px rgba(217,213,230,0.5);
    border-radius: 7px;
    background-color: #fff;
    padding: 30px 30px 0
}

после будет как хотите.

---

Yuri_Geruk,

Да, спасибо большое. Еще несколько проблем шаблона, которые не знаю, как решить:

1. На странице поиска значок поиска наложен поверх значка меню. Я так понимаю, это значок должен быть в окне поиска справа, как в стандарнтной форме поиска.

2. Текст выезжает влево за границы в модулях: поиск, Каталог статей, Блог. Если с мобильного смотреть.

3. На форуме в каждом последнем сообщении темы отсутствует линия после строки "ник, дата, время, номер сообщения". Пример.

4. На форуме исчезает строка с адресом, когда смотришь с телефона. Это и в темах, и в разделах.

Заранее спасибо!

---

Эзотерик Лэнд,

1. В стилях строка номер 82:

#casing input.searchSbmFl[type='submit'],.searchForm .searchSbmFl {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    padding: 0;
    margin: 0;
    width: 42px!important;
    height: 36px;
    border: 0;
    border-radius: 0 3px 3px 0;
    white-space: nowrap;
    text-indent: 150%;
    overflow: hidden;
    background: #ab0202 url(/.s/t/1722/sch.png) 50% no-repeat!important
}

удалить красное.

2. В стили в самый низ новой строкой пропишите:

@media screen and (min-width: 240px) and (max-width: 650px) { .eMessage,.eText,.cMessage,.eTitle,.eDetails {margin-left: 30px;} }

3. В стилях удалить строку номер 371:

.gTable:not(#shop-price-list) tr:last-child td {
    border-bottom-color: transparent!important;
}

4. Непонятно о чем вы говорите. Хорошо бы скриншоти выделить на нем проблему, что именно исчезает и как должно быть.

---

Yuri_Geruk,

Третий вопрос решен, спасибо. Остались эти:

1. Не сработало, см. скрин #1. На странице поиска стало норм, а в остальных местах съехало везде. Отменил изменения.

2. Тоже не сработало. Изменения сохранены.

4. Вот эта строка адреса на форуме исзезает, когда сжимаешь браузер на компе наполовину; и на телефоне ее нет. Можно сделать, чтобы она не исчезала?

---

Yuri_Geruk,

Съезжание текста сам уже устранил, пока ждал ответа.

Остались вопросы:

1. На странице поиска значок поиска наложен поверх значка меню. Проблема только на странице поиска. Во всех остальных местах форма поиска отображается нормльно. Где что нужно исправить?

2. Строка адреса на форуме исчезает, когда сжимаешь браузер на компе наполовину; и на телефоне ее тоже нет. Можно сделать, чтобы она не исчезала? Скрин в предыдущем сообщении.

Спасибо.

---

Эзотерик Лэнд,

Если не помогло, тогда обращайтесь к специалистам: https://divly.ru/ там помогут с адаптацией шаблона. Мы чем могли тем помогли.