PapiDi Posted June 5, 2013 Share Posted June 5, 2013 Друзья, не журите новичка, укажите пжл, как я могу поменять фон главной страницы на картинку? Цвет фона мы меняем по адресу /themes/default/css/global.css body{ font:normal 11px/14px Arial, Verdana, sans-serif; color:#222; background:#fff } body.content_only { background: #FFF; - тут, если не ошибаюсь цвет, а как вставить рисунок? С Уважением! Link to comment Share on other sites More sharing options...
absent Posted June 5, 2013 Share Posted June 5, 2013 background-image: url('../img/button-large_exclusive.gif') 1 Link to comment Share on other sites More sharing options...
PapiDi Posted June 5, 2013 Author Share Posted June 5, 2013 Премного Благодарствую! Не затруднит ли Вас пояснить разницу, куда лучше вставить мою картинку: body{ font:normal 11px/14px Arial, Verdana, sans-serif; color:#222; background:#fff - сюда? } body.content_only { background: #FFF; - или же сюда добавить строку с нужной мне картинкой? ..понимаю вопросы для Вас простые, но уж больно хочется научиться понимать, чтобы нарисовать себе магазин.. Так же буду Благодарен, если поясните, вот к примеру я нарисовал себе главную страницу да, мне необходимо учитывать шапку сверху (где логотип итп) или же в дальнейшем я в этот верхний блок смогу вставить изображение дополняющее фон? С Уважением! Link to comment Share on other sites More sharing options...
Kerm Posted June 5, 2013 Share Posted June 5, 2013 В первый body {} background:#fff url('image.jpg') left top no-repeat; Картинка должна лежать в одной папке с CSS файлом, с таким кодом выше. 2 1 Link to comment Share on other sites More sharing options...
PapiDi Posted June 5, 2013 Author Share Posted June 5, 2013 Понял, буду пробовать. Спасибо. Link to comment Share on other sites More sharing options...
Dimitri Yelquin Posted June 6, 2013 Share Posted June 6, 2013 Фон лучше оформлять не одной картинкой, если это нечто, что должно быть достаточно высокого качества. Много будет весить. Те более, что большая часть большой картинки будет спрятана под страницей (элемент page). Можно украсить фон несколькими картинками. Это можно сделать в css3 — сразу несколько фоновых изображений в одном слое, но не все браузеры это поддерживают. Поэтому лучше использовать универсальный способ размещения сложного фона в разных слоях: html, body, header, footer. Цвет боди, хедера и футера должен быть изменён на transparent (прозрачно), иначе вышележащий слой будет перекрывать своим цветом картинку нижележащего. Расположение картинки может быть по углам (top left, top right, bottom left, bottom right), сверху по центру (top center) или снизу по центру (bottom center). Чтобы, как Вы спрашиваете, сделать фон для главной страницы — то есть, чтобы на других он не показывался? — нужно вписать рядом с основными правилами для каждого слоя, куда Вы хотите добавить фон для главной, дополнительное правило с индексом (= главная страница). Например: html { color: #666; } html #index { background: url(../img/pattern.png) repeat fixed } Правила записи: 1. элементы без хеша пишуться перед индексом, причём html — с пробелом (html #index), body — без пробела (body#index) 2. элементы с хешем пишуться после индекса и, желательно, с пробелом, так как иначе в некоторых случаях не срабатывает — #index #header... 1 Link to comment Share on other sites More sharing options...
PapiDi Posted June 6, 2013 Author Share Posted June 6, 2013 Благодарствую Уважаемый, полезная для меня информация! Link to comment Share on other sites More sharing options...
Dimitri Yelquin Posted June 6, 2013 Share Posted June 6, 2013 Забыл, что фиксировать фон, чтобы он не прокручивался, когда прокручивается страница, стóит при использовании паттернов, небольшой файл фактуры фона, например, под ткань, под грубую бумагу, под карбон... Если же используются картинки, то они, смотря по тому, что там изображено и в какой слой они помещены. Если фон из одной картинки, то он может и фиксироваться и прокручиваться вместе со страницей. Во втором случае нужно просто опустить fixed (за адресом картинки). Когда фон в хедере или футере, то он обязательно должен прокручиваться — никаких fixed! 1 Link to comment Share on other sites More sharing options...
PapiDi Posted June 6, 2013 Author Share Posted June 6, 2013 Dimitri Yelquin, спасибо дорогой, что делишься своими познаниями. Друзья, подскажите пжл, по какой дорожке лучше идти, рисовать цельный фон или же пробовать дублирующийся? И какой должен быть размер рисунка фона на престе, если выберу не дублирующийся? Link to comment Share on other sites More sharing options...
Dimitri Yelquin Posted June 6, 2013 Share Posted June 6, 2013 Дублировать означает повторить один раз. Здесь же идёт речь о просто повторяемом фоне, когда одним микроскопическим файлом заливается всё пространство сайта. Повторяемый фон называется паттерном. Источников паттернов в Сети — десятки тысяч. По образцу, однако, трудно определиться, как он будет смотреться на сайте. Поэтому лучшим способом выбрать подходящий часто бывает просмотр чужих сайтов. Стоп!.. Понравился фон? Наводим на него курсор, кликаем правой клавишей мышки, ищем строчку «Открыть фоновое изображение» в выпадающем меню. Если открылось непонятно что, то это, вероятнее всего, микроскопический паттерн 2 на 2, 3 на 3 или 4 на 4 пиксела. Его можно найти, поводив курсором в левом верхнем углу в одних браузерах или по центру — в других... Является ли это плагиатом? Ни в коем случае! Паттерн, как буква, не принадлежит лично никому. И тот, у кого берёте Вы, сам взял это либо у другого либо из библиотеки паттернов... 1 Link to comment Share on other sites More sharing options...
PapiDi Posted June 6, 2013 Author Share Posted June 6, 2013 Dimitri Yelquin, да спасибо, я уже потихоньку начинаю понимать структуру, для каждого блока свои рисунки, а фон он и есть фон, ранее у меня не знающего, было представление, что можно нарисовать одну общую на всю страницу и там прорисовать и кнопки и тп. Еще раз спасибо Вам, что уделяете свое время. Link to comment Share on other sites More sharing options...
PapiDi Posted June 6, 2013 Author Share Posted June 6, 2013 Dimitri Yelquin, подскажите пжл, а где мне надо и что именно прописать, чтобы поменять фон отдельно у блока, к примеру Новые товары? Link to comment Share on other sites More sharing options...
Dimitri Yelquin Posted June 6, 2013 Share Posted June 6, 2013 Чтобы поменять в новых товарах, идём в модули, там находим папку модуля blocknewproducts, в ней — файл blocknewproducts.css и правим стили для основного элемента модуля: #product #new-products_block_right, #category #new-products_block_right { float: right; list-style-type: none; width: ...px; height: ...px; margin-left: 0; overflow: hidden; background: url(img/image.jpg) top left repeat } NB: url(img/image.jpg) подразумевает нахождение фонового изображения в папке img внутри папки модуля, а не в общей. Link to comment Share on other sites More sharing options...
muzz-as Posted November 9, 2013 Share Posted November 9, 2013 Фон лучше оформлять не одной картинкой, если это нечто, что должно быть достаточно высокого качества. Много будет весить. Те более, что большая часть большой картинки будет спрятана под страницей (элемент page). Можно украсить фон несколькими картинками. Это можно сделать в css3 — сразу несколько фоновых изображений в одном слое, но не все браузеры это поддерживают. Поэтому лучше использовать универсальный способ размещения сложного фона в разных слоях: html, body, header, footer. Цвет боди, хедера и футера должен быть изменён на transparent (прозрачно), иначе вышележащий слой будет перекрывать своим цветом картинку нижележащего. Расположение картинки может быть по углам (top left, top right, bottom left, bottom right), сверху по центру (top center) или снизу по центру (bottom center). Чтобы, как Вы спрашиваете, сделать фон для главной страницы — то есть, чтобы на других он не показывался? — нужно вписать рядом с основными правилами для каждого слоя, куда Вы хотите добавить фон для главной, дополнительное правило с индексом (= главная страница). Например: html { color: #666; } html #index { background: url(../img/pattern.png) repeat fixed } Правила записи:1. элементы без хеша пишуться перед индексом, причём html — с пробелом (html #index), body — без пробела (body#index) 2. элементы с хешем пишуться после индекса и, желательно, с пробелом, так как иначе в некоторых случаях не срабатывает — #index #header... А этот способ подходит, когда надо на главной странице вывести какой-то фон (картинку) с несколькими ссылками на категории товара? Больше ничего быть не должно. А вот когда покупашка переходит по ссылке на категорию, тогда уже открывается всю остальное в нормальном виде. Или под эти нужды лучше вообще отдельную html страничку прописать, которая , будет загружаться первой? Link to comment Share on other sites More sharing options...
Dimitri Yelquin Posted November 10, 2013 Share Posted November 10, 2013 А этот способ подходит, когда надо на главной странице вывести какой-то фон (картинку) с несколькими ссылками на категории товара? Больше ничего быть не должно. А вот когда покупашка переходит по ссылке на категорию, тогда уже открывается всю остальное в нормальном виде. Или под эти нужды лучше вообще отдельную html страничку прописать, которая , будет загружаться первой? Здесь одно с другим никак не связано. Разумеется, подходит. «Покупашка»?! Вы, как бы, проспали двадцать лет? Очнитесь! Уже совсем не советские времена, и продавцы давно уже никто, чтобы так презрительно говорить о клиентах. Link to comment Share on other sites More sharing options...
muzz-as Posted November 10, 2013 Share Posted November 10, 2013 Здесь одно с другим никак не связано. Разумеется, подходит. «Покупашка»?! Вы, как бы, проспали двадцать лет? Очнитесь! Уже совсем не советские времена, и продавцы давно уже никто, чтобы так презрительно говорить о клиентах. Как раз дело в том, что презрительное отношение я сюда и не вкладывал. Я тоже постоянно что-то, где-то покупаю (производить всё сам, я пока не научился) т.е. точно такой же "покупашка". Негативные нотки уловили Вы в этом слове. Но вернёмся к вопросу, если можно... При помощи вот этого "{if $page_name == 'index'}{else}" можно легко убрать с главной страницы шапку, подвал и колонки с содержимым, это не проблема, но возникает вопрос. Как вывести на главную один фон, а на все остальные страницы совершенно другой? Буду благодарен за ответ. Link to comment Share on other sites More sharing options...
Dimitri Yelquin Posted November 10, 2013 Share Posted November 10, 2013 (edited) При помощи вот этого "{if $page_name == 'index'}{else}" можно легко убрать с главной страницы шапку, подвал и колонки с содержимым, это не проблема, но возникает вопрос. Как вывести на главную один фон, а на все остальные страницы совершенно другой? Буду благодарен за ответ. Так Вы сами на свой вопрос, как бы, уже и ответили!.. В файле шаблона нельзя задать стиль элементу «html», но зато можно любому другому. То, что Вы недописали, в полном виде выглядит так: {if $page_name == 'index'}background: #000{else}background: #fff{/if} Но это, опять же вне контекста. Вопрос, куда это вставлять? В тэг любого элемента, которому мы решили задать отдельные стили, добавляем style="", а в кавычки вставляем код с условием и стилями. Например: <body style="{if $page_name == 'index'}background: #000{else}background: #fff{/if}"> Лучше, однако, задать в шаблоне не стили, а класс и уже для него расписать стили в файле global.css: <body class="{if $page_name == 'index'}index{/if}"> Если у элемента уже имеется класс (например, right_block), а мы для какой-то одной катогории хотим задать стили без правого блока (no_right_block), то вместо <div class="right_block"> запишем <div class="{if $smarty.get.id_category == '18'}no_right_block{else}right_block{/if}"> Вроде, всё... Edited November 10, 2013 by Dimitri Yelquin (see edit history) 1 Link to comment Share on other sites More sharing options...
muzz-as Posted November 10, 2013 Share Posted November 10, 2013 Так Вы сами на свой вопрос, как бы, уже и ответили!.. В файле шаблона нельзя задать стиль элементу «html», но зато можно любому другому. То, что Вы недописали, в полном виде выглядит так: {if $page_name == 'index'}background: #000{else}background: #fff{/if} Но это, опять же вне контекста. Вопрос, куда это вставлять? В тэг любого элемента, которому мы решили задать отдельные стили, добавляем style="", а в кавычки вставляем код с условием и стилями. Например: <body style="{if $page_name == 'index'}background: #000{else}background: #fff{/if}"> Лучше, однако, задать в шаблоне не стили, а класс и уже для него расписать стили в файле global.css: <body class="{if $page_name == 'index'}index{/if}"> Если у элемента уже имеется класс (например, right_block), а мы для какой-то одной катогории хотим задать стили без правого блока (no_right_block), то вместо <div class="right_block"> запишем <div class="{if $smarty.get.id_category == '18'}no_right_block{else}right_block{/if}"> Вроде, всё... Спасибо за подсказку) вот буквально две минуты назад прописал в глобал (до этого в grid_prestashop). работает, что так, что так. Просто идея в том, чтобы разместить на бэкграунде главной странице 4-6 ссылок в виде картинок на основные категории товаров и футер. А при переходе с главной по ссылкам на категории уже открывается полная версия сайта. Link to comment Share on other sites More sharing options...
Dimitri Yelquin Posted November 10, 2013 Share Posted November 10, 2013 Гриды-то для подобных вещей никогда не используют! Это ж не шаблон одной из страниц или модуля. Правильно, будет работать... И велосипед поедет, если педали ногами крутить, а ногами рулить. Всё должно использоваться по прямому назначению. Link to comment Share on other sites More sharing options...
muzz-as Posted November 10, 2013 Share Posted November 10, 2013 А не проще и удобнее сделать вообще отдельную страницу хтмл? Чтобы она загружалась в начале. Страница и на ней 4-5 картинок с сылками. А фоны, подложки и все остальное уже после перехода по ссылкам? Link to comment Share on other sites More sharing options...
Dimitri Yelquin Posted November 10, 2013 Share Posted November 10, 2013 Посадочной страницей может быть и главная страница блога. И это получше, чем малосодержательная хтмл-страничка, сделанная исключительно для того, чтобы через неё войти в магазин. Да и главная страница магазина... Она-то чем Вас не устраивает? 1 Link to comment Share on other sites More sharing options...
muzz-as Posted November 10, 2013 Share Posted November 10, 2013 не устраивает тем, что я хочу сделать главную страницу, как на рисунке1, т.е. без белого фона, который на рисунке2 виден. А чтоб на всех остальных страницах этот фон был. Link to comment Share on other sites More sharing options...
Dimitri Yelquin Posted November 10, 2013 Share Posted November 10, 2013 Столь малоинформатиная страница и в поиске будет сильно проигрывать. Вас это не смущает? Link to comment Share on other sites More sharing options...
gooco Posted November 15, 2013 Share Posted November 15, 2013 Я же наоборот хочу, чтобы было как на рисунке 2, подскажите, как такое сделать? Link to comment Share on other sites More sharing options...
gooco Posted November 15, 2013 Share Posted November 15, 2013 разобрался, спасибо Link to comment Share on other sites More sharing options...
muzz-as Posted November 16, 2013 Share Posted November 16, 2013 Столь малоинформатиная страница и в поиске будет сильно проигрывать. Вас это не смущает? Дмитрий, день добрый. Как можно вывести на главную страницу сайта произвольные изображения? Но, допустим, чтобы они были не в самом теле сайта (не на белом фоне), а по углам монитора допустим? У меня получается либо картинка полностью заменяет вот этот разноцветный фон (смотреть выше), либо она просто размазана поверх сайта. И забыл сказать, чтобы эти изображения были только на главной странице. Можно допустим чуть переделать любой модуль, который показывает изображения (или кнопки) на сайте (допустим модуль соц. закладок). Но должен же быть способ это сделать проще. Link to comment Share on other sites More sharing options...
Dimitri Yelquin Posted November 18, 2013 Share Posted November 18, 2013 Дмитрий, день добрый. Как можно вывести на главную страницу сайта произвольные изображения? Но, допустим, чтобы они были не в самом теле сайта (не на белом фоне), а по углам монитора допустим? Как?! Так я же об этом уже рассказывал!.. И Вы сами цитировали мой пост (см. 14-й пост), где я на этот, как раз, вопрос и отвечаю. И 17-й перечитайте! Там кое-какая информация, которая тоже может Вам пригодиться... Link to comment Share on other sites More sharing options...
muzz-as Posted November 18, 2013 Share Posted November 18, 2013 да, это всё я сделал c утра, действительно просто нужно было перечитать советы Ваши) т.е. в итоге получилось вот что см. сайт. Но теперь вопрос в том, чтобы эти ссылки при наведении курсора менялись на другие. Стоит ли делать это в глобал или оформлять отдельным файлом стилей? Link to comment Share on other sites More sharing options...
Dimitri Yelquin Posted November 18, 2013 Share Posted November 18, 2013 Стоит ли делать это в глобал или оформлять отдельным файлом стилей? Всё в global.css. 1 Link to comment Share on other sites More sharing options...
Recommended Posts