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

Требуется установить скрипт магазина или плагин магазина в подпапку wordpressa и встроить его в существующий сайт так, чтобы товар можно было бы добавить и со страниц магазина и со страниц самого сайта.
Корзина, соответственно, должна работать и на страницах магазина и на страницах сайта.

Cкрипт должен быть на русском языке.

Настроить его работу.

Это должно выглядеть так:

• кнопка "Купить" под описанием товара,
• изображение корзины в сайдбаре,
• при клике по кнопке "Купить" товар должен добавляться в корзину с переходом на страницу корзины.

После перехода должно быть три кнопки: «Продолжить покупки», «Оформить заказ», «Пересчитать». А также возможность удалить товар и кнопка удалить все товары.
Нужно, чтобы добавленный товар отображался в корзине в виде списка:

1 товар + его стоимость
2 товар + его стоимость
3 товар + его стоимость и т. д.

+ Общая цена выбранного товара в 3х валютах: рубли, гривны, евро (руб., грн., eur).

Также в корзине должна быть функция удаления товаров и кнопка "Оформить заказ" (страница 1) и «Оформить быстрый заказ» (страница 2)

При нажатии на эти кнопки покупатель должен попадать на соответствующую страницу.

Кнопка "Купить" должна отображаться в анонсах товара и в полной записи на сайте.
Т.е. в файлах single.php и archive.php темы. Чтобы товар можно было добавить в корзину со страниц сайта, не переходя для этого в магазин.

При нажатии на изображение в анонсах и в полной записи на сайте должен появляться лайтбокс с увеличенным изображением товара.

На странице «Оформить заказ" (страница 1) должно находиться:

• список выбранных товаров с ценами и общей ценой, возле каждого товара должна быть кнопка «Удалить товар».
• изображения выбранных товаров.
• форма для заказа.
• выбор способа оплаты.
• Выпадающий список по странам «Выберите страну» таким образом: Украина, Россия и Укажите страну. При нажатии Укажите страну – поле очищается и человек просто вводит свою страну. Выбор одного из этих трех вариантов определяет то, кому отправляются данные формы (одному из трех админов).
• Кнопка «Отправить заказ».

После нажатия на кнопку «Отправить заказ» Вся информация с этой страницы должна отправляться на почту админа.

На странице «Оформить быстрый заказ" (страница 2) должно находиться:

• Список всех товаров, цена товара в трех валютах, выпадающий список для выбора количества товара и поле, в котором покупатель ставит "птичку", выбирая товар.

Кнопка – «Оформить заказ», которая отправляет покупателя на страницу «Оформить заказ» (страница 1)

В магазине не будет использоваться никаких способов оплаты.

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

Дальнейшее не связано с магазином.

На сайте, также, нужно сделать несколько опросных форм:

Все формы должны иметь капчу, обязательные и необязательные поля.
Все формы отправляются админу.
Формы следующие:

ОПРОСНЫЙ ЛИСТ

ОФОРМИТЬ СКИДКУ

Это только форма, которую покупатель заполняет, чтобы получить скидку. Данные этой формы также отправляются по почте админу.

На этой странице нужно сделать выпадающий список по странам «Выберите страну» таким образом: Украина, Россия и Укажите страну. При нажатии Укажите страну – поле очищается и человек просто вводит свою страну. Выбор одного из этих трех вариантов определяет то, кому отправляются данные формы.

Форма для граждан дальнего зарубежья должна быть заполнена только буквами английского алфавита. Поэтому в начале нужно поставить два переключателя, при нажатии на которые меняются язык формы (пример: вместо Имя – name и т.д.).
_______________________________________________________

ОФОРМЛЕНИЕ ЗАКАЗА МАГАЗИНА

Формы опишу дополнительно.

Это вкратце. Подробности в процессе работы.

design-vsego.dp.ua/

добрый день!
помогите пожалуйста убрать в шапке квадратик с надписбю "изображение"

он виден в IE и в Opera

что-то нахимичила видимо, хотела привязать к картинке ссылку на главную…

подскажите что делать?
я вставила в header.php <img src="<?php bloginfo(‘stylesheet_directory’); ?>http://design-vsego.dp.ua/wp-content/themes/autofocus/img/logo.gif">
и в style.css
#header {margin:55px 0 0;height:105px;text-transform:normal;width:600px;clear:none;float:left;color:#f70080;background: transparent url(img/logo.gif) no-repeat left;margin-top:10px;}

Здравствуйте, задавал этот вопрос на mywordpress.ru, хочу узнать и у вас:
шаблон выдает такую строку <div id="homewidget" class="grid_4"><h1>Введите ваши данные</h1></div> (если заглянуть в исходный код). Но на странице ее не видно, если написать по-английски то нормально. Весь CSS перелопатил, class здесь не имеет значения, я его убирал, результат тот-же. Файл CSS здесь. Помогите

Обратились ко мне знакомые с просьбой о помощи. Сам я далек от веб-программирования вообще и от WP в частности, поэтому просьба сильно не пинать за неточности в терминах :rolleyes:.
Сайт в свое время сделали, запустили и он работал нормально. Неделю назад было замечено, что сайт "поехал": центральная колонка стала выводится в самом низу справа, под правым сайдбаром. После чтения доков, форума и шаманства с page.php мне удалось вернуть отображение страниц в среднюю колонку:
Но вот поднять правый сайдбар на место мне не удается. И новости "разворачиваются" под сайдбаром, а не в центральную колонку.

Шаблон page.php:

<?php get_header(); ?>
<div id="wrapper">
<div id="wrapper_b">
<?php get_sidebar(); ?>


<div id="outer2">

<div id='content'>

        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <div class="post" id="post-<?php the_ID(); ?>">
            <div class="entry">
                <?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>

                <?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

            </div>
        </div>
        <?php endwhile; endif; ?>

        </div><!--content-->
</div> <!-- outer2 -->
<?php get_footer(); ?>
<?php get_sidebar('right'); ?>

</div><!-- wrapper_b -->
</div><!-- wrapper -->

или надо что-то в style.css править? Или в шаблоне сайдбара? Подскажите, плиз, где собака порылась…

Здравствуйте.
Скачал тему http://www.wpbot.ru/?p=1551 там в опере (IE 8, Mozilla Firefox, Google Chrome – нормально) кнопка поиска съезжает вниз. Подскажите пожалуйста как исправить?

Доброго! Помогите плиз. Появились квадратики в заголовке страницы. Как на рисунке, указанном ниже

Как решить эту проблему?

1. Есть сайт http://arbat.sebastopol.ua – это чтобы всем интересующимся была видна проблема явно и сразу.
2. как приклеить footer к низу странички?
3.Самый важный вопрос, есть ли где то в WordPress редактор html?Хорошо знаю html/css но не знаю почти php, не пойму например как мне подправить что то где то, к примеру вот на выше указанном сайте есть в сайдбаре номера телефонов, так вот ни в одном файле темы (footer.php/sidebar.php/comments.php/боковая панель.php и т.д.) пересмотрев внимательно весь код не нашел этих надписей-НЕ Я создатель сайта, но мне приходится теперь его администрировать и наполнять, в html-быстро бы все нашел и сделал, или тут только ПХП и все?
4.Видите как залезли кнопочки read more и как они прыгают? опять же пхп, какой модуль этим управляет, и как сделать чтобы они были все на одной горизонтали?
5.Как найти редактируемую главную страницу, вот в редакторе страниц есть все кроме главной…?
6.видел есть интересные плагины, как их загружать?вот скачался zip-файл, внутри плагин, устанавливать ftp на комп и загружать в указанный путь архив а потом уже ловить его в панели управления?
Большое всем спасибо за ответы… очень их жду

смысл в чем :

сайт – www.shtar.ru
шаблон – http://blogstyle.ru/1213
проблема – вот там меню, оно по левому краю ровняется, всю голову сломал чтобы сделать по центру, проблема еще в чем там есть, ссылки во вторую строчку переходят , т.е. как будто барьер у сайдбар2 (правая колонка) как исправить и сделать меню по центру???

выручаем плиЗ))

Сам как ни химичил – так ничего и не получилось сделать. вот сам глюк : http://henzo.org/kartinki/dab665e76affd6ece6524a6b42dc012ad.png http://henzo.org/kartinki/437eff971f704fb434707dba7627b633.png
глючит преимущественно в опере. Ссылка на css : http://henzo.org/wp-content/themes/deMar/style.css
может подскажите чего?

Подскажите пожалуйста где (в каких файлах index.php или другой) нужно исправлять ошибки, найденные валидатором "validator.w3.org"
Например такая:
Line 9, Column 87: end tag for "link" omitted, but OMITTAG NO was specified
…el="stylesheet" href="http://popularly.ru/wp-content/themes/Sublime/style.css">(именно знак больше подчёркнут)

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
очень надо! помогите!

добрый день!
сайт http://design-vsego.dp.ua

не могу пенести меню в шапке в правый угол – так как тема свестрана не совсем мне понятно!
используются z-index и я пока в этом ничего не понимаю.

куча текста – и что здесь отвечает за положение менюшки – не могу понять!

помогите пожалуйста!

/* begin Menu */
/* menu structure */

.artmenu a, .artmenu a:link, .artmenu a:visited, .artmenu a:hover
{
  text-align:left;
  text-decoration:none;
  outline:none;
  letter-spacing:normal;
  word-spacing:normal;
}

.artmenu, .artmenu ul
{
  margin: 0;
  padding: 0;
  border: 0;
  list-style-type: none;
  display: block;
}

.artmenu li
{
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
  float: left;
  position: relative;
  z-index: 5;
  background:none;
}

.artmenu li:hover
{
  z-index: 10000;
  white-space: normal;
}

.artmenu li li
{
  float: none;
}

.artmenu ul
{
  visibility: hidden;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  background:none;
}

.artmenu li:hover>ul
{
  visibility: visible;
  top: 100%;
}

.artmenu li li:hover>ul
{
  top: 0;
  left: 100%;
}

.artmenu:after, .artmenu ul:after
{
  content: ".";
  height: 0;
  display: block;
  visibility: hidden;
  overflow: hidden;
  clear: both;
}
.artmenu, .artmenu ul
{
  min-height: 0;
}

.artmenu ul
{
  background-image: url(images/spacer.gif);
  padding: 10px 30px 30px 30px;
  margin: -10px 0 0 -30px;
}

.artmenu ul ul
{
  padding: 30px 30px 30px 10px;
  margin: -30px 0 0 -10px;
}


/* menu structure */

.nav
{
  position: relative;
  margin: 0  auto;
  width: 982px;
  height: 23px;
  z-index: 100;
}

.artmenu
{
  padding: 0px 0px 0px 0px;
}


.nav .l, .nav .r, .nav .r div
{
  top: 0;
  position: absolute;
  z-index: -1;
  overflow: hidden;
  height: 23px;
}

.nav .l
{
  left: 0;
  right: 0px;
}


.nav .r
{
  right: 0;
  width: 0px;
}


.nav .r div
{
  width: 982px;
  right: 0;
}


.nav .l, .nav .r div
{
  background-position: left top;
  background-repeat: no-repeat;
  background-image: url('images/nav.png');
}

/* end Menu */

/* begin MenuItem */
.artmenu ul li
{
  clear: both;
}

.artmenu a , .artmenu a span
{
  height: 23px;
  display: block;
}


.artmenu a
{
  cursor: pointer;
  text-decoration: none;
  margin-right: 0px;
  margin-left: 0px;

}
.artmenu a span span
{
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  color: #CDF1F9;
  padding: 0 12px;
  margin: 0 0px;
  line-height: 23px;
  text-align: center;
  background-image: url('images/item-center.png');
  background-position: left top;
  background-repeat: repeat-x;

}




.artmenu a:hover span span
{
  color: #FCEFEE;
  background-position: left -23px;
}

.artmenu li:hover a span span
{
  color: #FCEFEE;
  background-position: left -23px;
}


/* end MenuItem */

/* begin MenuSeparator */
.nav .separator
{
  display: block;
  width: 1px;
  height: 23px;
  background-image: url('images/item-separator.png');
}

/* end MenuSeparator */

/* begin MenuSubItem */
.artmenu ul a
{
  display:block;
  text-align: center;
  white-space: nowrap;
  height: 23px;
  width: 180px;
  overflow:hidden;
  line-height: 23px;
  margin-right: auto;


  background-image: url('images/subitem-bg.png');
  background-position: left top;
  background-repeat: repeat-x;

  border-width: 1px;
  border-style: solid;
  border-color: #B5B0A1;
}

.nav ul.artmenu ul span, .nav ul.artmenu ul span span
{
  display: inline;
  float: none;
  margin: inherit;
  padding: inherit;
  background-image: none;
  text-align: inherit;
  text-decoration: inherit;
}

.artmenu ul a, .artmenu ul a:link, .artmenu ul a:visited, .artmenu ul a:hover, .artmenu ul a:active, .nav ul.artmenu ul span, .nav ul.artmenu ul span span
{
  text-align: left;
  text-indent: 12px;
  text-decoration: none;
  line-height: 23px;
  color: #0C4C5A;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
}

.artmenu ul ul a
{
  margin-left: auto;
}

.artmenu ul li a:hover
{
  color: #000000;
  border-color: #A19A87;
  background-position: 0 -23px;
}

.artmenu ul li:hover>a
{
  color: #000000;
  border-color: #A19A87;
  background-position: 0 -23px;
}

.nav .artmenu ul li a:hover span, .nav .artmenu ul li a:hover span span
{
  color: #000000;
}

.nav .artmenu ul li:hover>a span, .nav .artmenu ul li:hover>a span span
{
  color: #000000;
}


/* end MenuSubItem */

Здравствуйте!
У меня возникла проблема!
Есть сайт – http://bee.lviv.ua/
Так на нем на главной там где должна быть статьи выводяться категории!
Как зделать чтоб вместо категорий выводились статьи?

Доброго времени суток!

Есть у меня тема с изображением в шапке banner.gif, который прописан в header.php как

<div id="banner"></div>

а в style.css как

#banner { background: transparent url(images/banner.gif) no-repeat; width: 936px; height: 209px; margin-bottom: 20px; position: relative; top: 7px; left: 8px;}

Возникло желание заменить изображение в шапке на красивое слайдшоу. Полазил по форумам, посоветовали воспользоваться jquery, но как его прикрутить к моей теме я немогу додуматся, методом тыка мутил-мутил, безрезультатно.

Нашел на руселлере плагин к jquery с нужным эффектом (fade) http://ruseller.com/lessons.php?rub=32&id=400
но не могу никак прикрутить его, помогите 🙂

Помогите пожалуйста решить.
Есть код, который выводит содержимое рубрики. У нас есть записи, которые принадлежат к 2 рубрикам. Тут возникает проблема.
Этот код привязывает запись к одной из двух рубрик, и только там ее выводит. А в другой рубрике код не выводит название записи.
Например как тут: http://antioxbio.ru/category/for-life-bad/kardio-for-life-bad/
В рубрике "Кардио" опубликованых статей: 4 – а выводит только две!

Может ли кто-нибудь помочь решить это? Мы готовы заплатить.
Спасибо.

Прошу подсказать, может кто сталкивался с такой проблемой.
Приобрел отдельно хостинг именно для хранения файлов (jpg). Теперь проблема: как настроить некст ген галерею, что-бы она использовала файлы которые собираюсь хранить на новом хосте?

добавил второй сайдбар, но не могу выровнять его на странице
тема – default
прописал через "div" свойства

#sidebar
{
    border-left: solid 1px #ddd; 
    padding: 20px 0 20px 0;
    margin-left: 520px;
    width: 190px;
    padding-left: 10px; 
    border: 1px solid red;
    
    }

#sidebar form {
    margin: 0;
    }

#sidebar1
{
    border-left: solid 1px #ddd;
    padding: 0;
    margin-top: 0;
    margin-left: 730px;
    width: 190px;
    padding-left: 10px; 
    border: 1px solid red;
    }

http://picasaweb.google.com/lh/photo/9V-LIEVCk_3QZ9G4GiPouA?authkey=Gv1sRgCMewrKjfqYva3QE&feat=directlink

спасибо

Люди добрые, помогите кто чем может! 🙂 Не могу решить задачку. Надо растянуть до низа поле для контента. Для наглядности привожу код (из файла стилей) и прикладываю скрин темы.

/** BEGIN content **/
#content {
    width: 560px;
        background: #ffffff;
    float: left;
    padding: 10px 10px 0px 10px;
}
    #content .latest {
        padding: 0px 0px 0px 10px;
    }
        #content .latest h2 {
            margin-bottom: 0px;
            font-size: 1.5em;
        }
            #content .latest h2 a {
                color: #2d2d2d;
            }        
            #content .latest h2 a:hover {
               color: #000;
            }
        #content .latest .details {
            font-family: Verdana,Arial,Helvetica,sans-serif;
            font-size: 0.9em;
            color: #000;
        }
            #content .latest .details a {
                color: #2d2d2d;
            }
            #content .latest .details a:hover {
                color: #000;
                text-decoration: none;
            }
        #content .latest p {
         text-align: justify;
        }        
    #content p {
        line-height: 1.3em;
        margin-bottom: 10px;
    }
    #content ul {
        margin: 0 0 10px 16px;
    }
    #content ol {
        margin: 0 0 10px 18px;
    }
    #content li {
        line-height: 1.3em;
        padding: 2px 0;
    }
    #content h3 {
        font-size: 1.5em;
        font-weight: normal;
    }
    #content blockquote {
        padding: 10px 10px 0;
        border: 1px solid #cccccc;
        background-color: #eeeeee;
        font-weight: bold;
        margin-bottom: 10px;
    }
/** END content **/

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

В теме Arthemia? Не понимаю через какой тег это сделать. В Div-ах ничего толком не нашла. Подскажите плиз.

Приветствую. Как сделать, чтобы страницы, созданные с помощью wp-pagenavi отображались примерно так: 1, 2, 3 …. 9, 10.
А не 1,2,3,4,5,6,7,8,9,10