FAQ по дизайну и верстке (HTML, CSS)

Готовые ответы по дизайну и верстке

тема Storefront: стилизация шапки сайта

Доброго дня,Имеется заготовка сайта с темой Storefront. 
Пытаюсь…1. уменьшить размер шапки вместе с главным меню (хотелось бы меню пунктов так из 9 в одну горизонтальную строку на десктопах).
2. Увеличить размер поисковой строки и выравнять ее по середине
Прикрепил к посту картинку для иллюстрации того, что хочетсяпо п1.: пробовал так…

<?php
// Your code here
?>
.home .site-header {
    margin-bottom: 20px !important;
}
+


.storefront-breadcrumb {
	padding: 1.41575em 0 !important;
	margin: 0 !important;
}

Помогает так себе… Уменьшается отступ выше заголовка сайта ТОЛЬКО на главной странице… на всех других — не работает… и с меню ничего не происходит…Возникает куча ламерских вопросов:Как сделать меню более компактным?Как уменьшить шапку на всех страницах?Как уменьшить отступ ПОСЛЕ меню?Ну и с поиском бы разобраться

Подскажите как реализовать эффект как на примере.

Добрый день. Возник следующий вопрос: хочется реализовать на сайте эффект анимации логотипа при скроллинге страницы вниз (и наоборот). 
Пример такого эффекта:  https://hexdigital.com/
Спасибо.

Перелинковка

Здравствуйте. Как сделать перелинковку внутри вкладки..Что бы я нажал «1 этаж» высветились площади 1 этажа,нажал «2 этаж» высветились площади второго этажа…Вот как это сделано у них https://ruplans.ru/proekti/proekti_5325.html во вкладке «Площади/Описание»

Шапка темы

Здравствуйте . Пользуюсь темой Rife Free подскажите пожалуйста как мне в шапке указать, все контакты компании, если в настройках темы этого нету..

Убрать сайдбар в мобильной версии

Доброго времени суток.
Подскажите, как можно убрать сайдбар в мобильной версии?
Код стилей:

/*-----------------------------------------------------------------------------------*/
/*    MEDIA QUERIES
/*-----------------------------------------------------------------------------------*/

@media only screen and (max-width: 1200px) {
    #background_left{
        right: 50%;
        margin-right: 487px;
        width: auto;
        background-position: right top;
        background-repeat: no-repeat;
    }

    #background_right{
        left: 50%;
        margin-left: 478px;
        width: auto;
        background-position: left top;
        background-repeat: no-repeat;
    }
}

@media only screen and (max-width: 959px) {
    #background_leaves{
        background: none;
    }
    #footer_decal{
        display:none;
    }
    #wrapper{
        padding-bottom: 0;
    }
    .wpcf7 input, .wpcf7 textarea {
    width: 80%;
    }
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #inner_container .sidebar{
        width:215px;
    }
    #inner_container .sidebar-left{
        width:214px;/*1px mess on left*/
    }
    #wrapper,#header_menu,#footer{
        width:715px;
    }
    #inner_container .sidebar .widget{
        clear: none;
        float: left;
        width: 185px;
        margin-top: 10px;
    }
    #inner_container .with-right-sidebar,
    #inner_container .with-left-sidebar{
        width:500px;
    }
    #inner_content{
        padding: 15px;
    }

    .full_banner{
        border-radius: 5px;
        height: auto;
        padding-bottom: 9px;
    }
    .full_banner .link{
        margin:0 0 0 10px;
    }
    .full_banner .title,
    .full_banner .content{
        float:none;
    }

    .fancy_post {
        margin: 0 18px 20px 0;
        width: 226px;
    }
    .fancy_post.columns3 {
        width: 202px;
    }
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    #wrapper,#header_menu,#footer{
        width:440px;
    }
    .fancy_post {
        margin: 0 0 20px 34px;
    }
    .fancy_post.columns3 {
    }
    #inner_container .sidebar{
        float: left;
        width: 435px;
        padding: 0 0 0 10px;
    }
    .widget{
        margin-right: 10px;
        clear: none;
        float: left;
        width: 175px;
        margin-top: 7px;
    }
    #inner_container .with-right-sidebar #inner_content,
    #inner_container .with-left-sidebar #inner_content{
        border-radius: 0;
    }
    #inner_container .with-left-sidebar,
    #inner_container .with-right-sidebar{
        width: 100%;
    }
    #inner_content{
        padding: 15px;
    }
    #inner_content img{
        max-width: 100%;
        height: auto;
    }
    /* slider mods */
    .flexslider_wrapper .flexslider_sidebar li a{
        font-size: 9px !important;
        padding:0 0 0 7px;
        background: none;
    }
    .full_banner{
        border-radius: 5px;
        height: auto;
        padding-bottom: 9px;
    }
    .full_banner .link{
        margin:0 0 0 10px;
    }
    .full_banner .title,
    .full_banner .link,
    .full_banner .content{
        float:none;
    }
    .blog_footer{
        height: auto;
    }
    .blog_footer ul{
        width: 300px;
    }
    .blog_footer ul li{
        clear: left;
    }
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {


    #wrapper,#header_menu,#footer{
        width:110px;
    }
    #header_menu{
        padding: 0;
        background: none;
        height: auto;
    }
    #inner_container .sidebar{
        float: none;
        width: 100%;
        padding: 0 0 0px 5px;
    }  

    .widget{
        margin-right: 0px;
        clear: none;
        float: left;
        width: 100%;
        margin-top: 7px;
    }
  #inner_container .with-right-sidebar #inner_content,
    #inner_container .with-left-sidebar #inner_content{
        border-radius: 0;
    }
    #inner_container .with-left-sidebar,
    #inner_container .with-right-sidebar{
        width: 100%;
    }

    #inner_content{
        padding: 10px;
    }
    #inner_content img{
        max-width: 100%;
        height: auto;
    }




    .fancy_post {
        margin: 0 0 17px 0;
        width: 270px;
    }
    .full_column .fancy_post.columns3,
    .fancy_post.columns3 {
        width: 270px;
    }
    .widget{
        margin-right: 10px;
        clear: left;
        float: left;
        width: 250px;
    }
    /* slider mods */
    .flexslider_wrapper .flexslider_sidebar li a{
        font-size: 8px !important;
        padding:0;
        background: none;
    }
    .flexslider_wrapper .flexslider_sidebar li a span {
         display: block;
         text-align: center;
     }
    .full_banner{
        background: #4477ac;
        border-radius: 5px;
        height: auto;
        padding-bottom: 9px;
    }
    .full_banner .link{
        margin:0 0 0 10px;
    }
    .full_banner .title,
    .full_banner .link,
    .full_banner .content{
        float:none;
    }

    /*blog*/
    div.blog .date_flag{
        /*margin-right: 0;*/
        display: none;
    }
    .blog_footer{
        height: auto;
    }
    .blog_footer ul{
        width: 260px;
    }
    .blog_footer ul li{
        clear: left;
    }
    .blog_summary{
        margin-top: 10px;
    }
    .blog_summary .blog_thumb{
        margin: 0 0 0 51px;
    }
    .blog_summary .blog_text.has_image{
        padding: 0;
    }
    .blog_summary .blog_text.has_image .entry-summary{
        padding-top: 170px;
    }
    .blog_footer a.dtbaker_button_light{
        margin: 5px 0px 0 195px;
        position: absolute;
    }

    /* stom iage alisngmnemt */
    img.alignleft, img.alignright, img.aligncenter{
        margin: 3px;
        float: none;
    }
    .blog_full .fancy_image{
        float:none;
        margin: 0 0 5px 0;
    }
}

пункт меню перебрасывает на новую строку

У меня есть адаптивный шаблон.

Проблема — при разрешении меньше 1024 меню отображается отлично, когда увеличиваю разерешение допустим до 1600-1200 или 1920х1080 то 1 пункт перепрыгивает на новый ряд.

Кто может подсказать как бы правильно отредактировать с учетом, что это уже готовый шаблон visal comaposer и минифицированными версиями файлов

Как вывести FAQ в один из блоков на главную страницу

Здравствуйте! У меня есть несколько проблем в редактировании темы на Вордпресс!

Как сделать всплывающий блок с записями статичным?

Как вывести FAQ в один из блоков на главную страницу? Страницу я создала и скачала плагин Spider FAQ! Но вывести не получается! Есть скрины, можете ли вы помочь?

свое меню

добрый день возникла проблема гугл не помог не смог найти то что нужно суть проблемы что заменить стандартное меню сайта на свое вот пару скринов вот меню которое стоит http://joxi.ru/52aR4VnIGeE78A вот это меню хочу сделать http://joxi.ru/KAxjOaYh4bZx1m не могу понять как прошу помощи

Что лучше и дешевле – адаптировать шаблон или купить новый?

Всем доброго времени суток.Шаблон сайта не адаптирован под мобильные устройства.Подскажите что лучше,купить подходящий шаблон или заказать верстку?

интересны все мнения,и основное – что получится дешевле,бюджет не резиновый..:)интересные новости по теме:Грузоперевозки,услуги,цены на кузовной ремонт.У нас вы можете сделать заказ на вызов такси,дома и бани из бруса под ключ,аренда автовышки,покраска авто,кузова,выкуп автомобилей.Эвакуатор спб,эвакуация автомобилей,грузоперевозки спб,переезды спб,грузоперевозки в спб,заказ газели,покраска автомобиля спб,полная покраска автомобиля,такси в спб,вызов такси,дома из бруса под ключ,бани,аренда автовышки,аренда автовышек,выкуп битых автомобилей,выкуп битых авто,кузовной ремонт автомобиля,кузовные работы,покраска автомобиля в спб,кузовной ремонт автомобиля,аренда спецтехники,аренда манипулятора,крана,автокрана,ямобура,взять в аренду,аренда автокрана,автокран,манипулятор,ямобур,арендовать бур,строительство,бассейнов,бассейна,бассейн,под ключ,монтаж оборудования бассейнов,сервисное обслуживание бассейнов,бассейны,жалюзи,роботы для бассейна,построить бассейн

Подскажите как создать лендинг по готовой схеме?

Помогите пожалуйста
Добрый день! Сразу извиняюсь за беспокойство. И если не по адресу обратилась. И заранее благодарна, если ответите! Я начинающий веб-дизайнер. Очень сильно начинающий) И попала по глупости в такую ситуацию. Пообещала сделать лендинг человеку на Ворд Прессе (ни разу в нем не работала и думала, что там все также просто как в ЛП и Wix) А теперь не знаю что делать. Потому что человеку нужно конкретное расположение блоков как на файле, я нарисовала. А когда выбираю какую- либо тему в Ворд прессе, то отредактировать ее под такую схему не получается. Что делать ? Может быть есть какие-то темы, которые свободно редактируются. То есть меняются местами блоки, добавляются/удаляются новые? Или может быть нужен какой-то плагин для этого ? Пожалуйста, подскажите, если разбираетесь в этом.. + требуются ссылки на соцсети добавлять и фотогаллерею их работ, как это все добавить в нужном месте? Если тут это все сложно рассказать готова заплатить за консультацию(

Подскажите где найти тему

Подскажите, пожалуйста, симпатичную тему для wordpress, похожую на сайты http://www.interviewrussia.ru и the-village.ru (с логотипом по центру и плиточным дизайном). Ищу везде уже больше месяца и почти отчаялась.
Спасибо!

Изменить вид главной странцы

Добрый день!
Хочу изменить вид главной страницы.
Я сделала слайдер, который шел с темой, но уменьшила его размеры (был на всю ширину). Слева на странице расположен сайдбар. Но из-за уменьшения размера слайдера в левом верхнем углу образовалось пустое место.
Хорошо бы поднять на это пустое место какой-нибудь виджет, но как это сделать- не могу разобраться. В css не особо сильна, но если может кто-то подсказать, как сделать, то думаю смогу разобраться:)

Вот как это у меня сейчас:(

Не могу убрать бордюр.

Добрый день.

Пытаюсь сделать кнопку на странице wp. скачал изображение кнопки, указал ссылки. Все получилось. Но не могу убрать бордюр вокруг кнопки.
И (не знаю как описать))) Область нажатия выходит за пределы картинки в право до конца ширины окна. т.е. ссылка занимает всю строку. Хотя картинка по ширине только 300 пикселей.

Вот код:

<a href="#contact_form_pop" class="fancybox">

<img src="http://*******.ru/wp-content/uploads/2015/01/zakaz.png" alt="" border="0"/>
</a>

<div style="display:none" class="fancybox-hidden">
<div id="contact_form_pop">
[contact-form-7 id="581" title="Заголовок"]
</div>

Я не разбираюсь в HTML. Собрал этот код на просторах интернета)))))
Помогите пожалуйста.

Картинка на фоне

Задача следующая:
Необходимо разместить картинку слева от контента, на общем фоне.

Делаю вот так:
.main_content {
background: #FFE1EF url(‘img/content_bg.gif’) repeat-y ;
background: url(‘img/n12.png’)no-repeat ;

всё встаёт вроде нормально, но картинка сдвигает фон или неправильно на него накладывается что ли…не знаю в чём дело.
Картинка – 200 * 388 px c прозрачным фоном
Фон – 1147*7 с repeat ( розовый – 80 пикселей, 913 светло-розовый, и опять 80 пикслеей розового

Помогите в шаблоне увеличить body поста

взываю о помощи!:) нужно увеличить body поста , сутки голову ломаю, http://avtodetali.dn.ua/ нужно чтоб пост был правее и шире…

Нужна помощь за Wmr

Помогите, пожалуйста, найти ошибку в верстке. Вроде wrap везде стоит с фоном ffffff, даже в шаблоне уже прописала, на всякий случай, но при загрузке в Гугл Хром, почему-то грузится бордовый фон body, потом на него грузятся буквы и рисунки, а потом между бордовым фоном боди и буквами/черточками грузится белая прослойка? Почему общий контейнер сразу не загружается белым?

Помогите в визуальной настройке Меню

Есть мой сайт http://auramusic.com.ua/
В нем создано свое трехуровневое меню в сайдбаре
Для него нужно настроить визуализацию почти как в сайте http://kam-pod.gov.ua/ настроено левое меню

Чтобы при наведении разварачивался другой уровень меню и соответственно при дальнейшем наведениии разварачивался третий уровень меню

Подскажите пожалуйства есть ли какой плагин для визуализации своего сайдбарного меню, или же подскажите тему (доступную для скачивания) в которой уже реализовано даную визуализацию

Большое спасибо!

Как удалить ссылки в футоре (видео)

Друзья, для тех кому нужно удалить ссылки из подвала (footer.php) я написал 3 видео урока. Надеюсь, что они вам пригодятся. Вот 3 ссылки на видео:

1. Как удалить закодированные ссылки в футоре на шаблонах WordPress (урок №1)
2. Как удалить закодированные ссылки в подвале на WordPress (урок 2)
3. Как удалить закодированные ссылки в футоре на WordPress (Урок 3)

С Уважением, Вячеслав Дронов

Стилизация списка комментариев

Вот в файле comments.php есть такой блок:

<ol class="commentlist">
      <?php wp_list_comments();?>
</ol>

который выводит список комментариев к записи, точнее функция <?php wp_list_comments();?> выводит список комментариев. Поскольку функция заключена в блок списка с классом commentlist, то тут понятно как стилизовать этот список. А по какому тогда принципу стилизуются метаданные комментария (автор, дата, ссылка "ответить" и т.д)?

Нужно немного подправить Css

Установила к себе на блог (http://zhenskij-sajt-katerina.ru, WordPress) 2 блока тизеров LadyCash: один в сайдбаре (работает), второй внизу постов (отображается некрасиво, видно несколько серых границ). Написала в службу поддержки и получила такой ответ: "Блок подцепляет стили сайта. Нужно подправить стили на своем сайте, либо задать для нашего блока другие стили." Тем, кто разбирается, моя проблема скорее покажется пустяком, а я вот весь день искала в файле style.css, какие строки отвечают за цвет границы таблиц. Хотя не совсем уверена, что те серые границы тизерного блока вообще имеют хоть какое-то отношение к таблице. Сразу оговорюсь, что при оформлении самого тизерного блока никаких границ я не выбирала вообще, тем более серых. Кто сталкивался с такой проблемой, подскажите, что мне изменить.

Anonymous
Отправить
Ответ на: