#1
Отправлено 05 Июнь 2014 - 09:04
Хотел бы установить следующие вкладки : http://cybernetic.me...dki-dlya-sajta/
Скачал архив. Хотелось бы в том месте как на картинке
Спасибо!
#2
Отправлено 05 Июнь 2014 - 10:29
Ильяc (05 Июнь 2014 - 09:04) писал:
Хотел бы установить следующие вкладки : http://cybernetic.me...dki-dlya-sajta/
Скачал архив. Хотелось бы в том месте как на картинке
2014-06-05_095303.png
Спасибо!
Я так понимаю, что Вы хотите данную вещь реализовать на главной странице? Это можно сделать, только если содержание вкладок полностью вносить в код. Там нельзя будет добавлять текст как через раздел Сайт - Страницы. Если устроит, то поможем поставить.
#3
Отправлено 05 Июнь 2014 - 10:54
MikDark (05 Июнь 2014 - 10:29) писал:
А есть варианты чтобы страницу добавлять? если нет то можно и так.. и скажите если содержимое вносить в код, это сказывается на скорости загрузки сайта? И еще вопрос если сделать сбоку под блоком категории, тогда можно будет страницы добавлять?
#4
Отправлено 05 Июнь 2014 - 11:07
Ильяc (05 Июнь 2014 - 10:54) писал:
Страницы в любом случае добавить будет нельзя. Вам нужно для начала файл organictabs.jquery.js и файл стилей загрузить в раздел Сайт - Редактор шаблонов.
Далее в шаблоне HTML перед </head> добавить:
<script type="text/javascript" src="{ASSETS_JS_PATH}organictabs.jquery.js"></script> <script> $(function() { $("#example-one").organicTabs(); }); </script>
и подключить файл стилей строкой:
<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}style.css">
где style.css нужно заменить на название загруженного файла стилей.
Далее после кода:
<div id="center_column" class="center_column">
Добавить:
<div id="example-one"> <ul class="nav"> <li class="nav-one"><a href="#featured" class="current">Featured</a></li> <li class="nav-two"><a href="#core">Core</a></li> <li class="nav-three"><a href="#jquerytuts">jQuery</a></li> <li class="nav-four last"><a href="#classics">Classics</a></li> </ul> <div class="list-wrap"> <ul id="featured"> <li><a href="http://css-tricks.com/perfect-full-page-background-image/">Full Page Background Images</a></li> <li><a href="http://css-tricks.com/designing-for-wordpress-complete-series-downloads/">Designing for WordPress</a></li> <li><a href="http://css-tricks.com/build-your-own-social-home/">Build Your Own Social Home!</a></li> <li><a href="http://css-tricks.com/absolute-positioning-inside-relative-positioning/">Absolute Positioning Inside Relative Positioning</a></li> <li><a href="http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/">IE CSS Bugs That'll Get You Every Time</a></li> <li><a href="http://css-tricks.com/404-best-practices/">404 Best Practices</a></li> <li><a href="http://css-tricks.com/date-display-with-sprites/">Date Display with Sprites</a></li> </ul> <ul id="core" class="hide"> <li><a href="http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/">The VERY Basics of HTML & CSS</a></li> <li><a href="http://css-tricks.com/the-difference-between-id-and-class/">Classes and IDs</a></li> <li><a href="http://css-tricks.com/the-css-box-model/">The CSS Box Model</a></li> <li><a href="http://css-tricks.com/all-about-floats/">All About Floats</a></li> <li><a href="http://css-tricks.com/the-css-overflow-property/">CSS Overflow Property</a></li> <li><a href="http://css-tricks.com/css-font-size/">CSS Font Size - (px - em - % - pt - keyword)</a></li> <li><a href="http://css-tricks.com/css-transparency-settings-for-all-broswers/">CSS Transparency / Opacity</a></li> <li><a href="http://css-tricks.com/css-sprites/">CSS Sprites</a></li> <li><a href="http://css-tricks.com/nine-techniques-for-css-image-replacement/">CSS Image Replacement</a></li> <li><a href="http://css-tricks.com/what-is-vertical-align/">CSS Vertial Align</a></li> <li><a href="http://css-tricks.com/the-css-overflow-property/">The CSS Overflow Property</a></li> </ul> <ul id="jquerytuts" class="hide"> <li><a href="http://css-tricks.com/anythingslider-jquery-plugin/">Anything Slider jQuery Plugin</a></li> <li><a href="http://css-tricks.com/moving-boxes/">Moving Boxes</a></li> <li><a href="http://css-tricks.com/simple-jquery-dropdowns/">Simple jQuery Dropdowns</a></li> <li><a href="http://css-tricks.com/creating-a-slick-auto-playing-featured-content-slider/">Featured Content Slider</a></li> <li><a href="http://css-tricks.com/startstop-slider/">Start/Stop Slider</a></li> <li><a href="http://css-tricks.com/banner-code-displayer-thing/">Banner Code Displayer Thing</a></li> <li><a href="http://css-tricks.com/highlight-certain-number-of-characters/">Highlight Certain Number of Characters</a></li> <li><a href="http://css-tricks.com/auto-moving-parallax-background/">Auto-Moving Parallax Background</a></li> </ul> <ul id="classics" class="hide"> <li><a href="http://css-tricks.com/css-wishlist/">Top Designers CSS Wishlist</a></li> <li><a href="http://css-tricks.com/what-beautiful-html-code-looks-like/">What Beautiful HTML Code Looks Like</a></li> <li><a href="http://css-tricks.com/easily-password-protect-a-website-or-subdirectory/">Easily Password Protect a Website or Subdirectory</a></li> <li><a href="http://css-tricks.com/how-to-create-an-ie-only-stylesheet/">IE-Only Stylesheets</a></li> <li><a href="http://css-tricks.com/ecommerce-considerations/">eCommerce Considerations</a></li> <li><a href="http://css-tricks.com/php-for-beginners-building-your-first-simple-cms/">PHP: Build Your First CMS</a></li> </ul> </div> <!-- END List Wrap --> </div> <!-- END Organic Tabs (Example One) -->
#6
Отправлено 05 Июнь 2014 - 14:26
Ильяc (05 Июнь 2014 - 13:12) писал:
2014-06-05_140657.png
В данном скрипте это не предусмотренно.
#7
Отправлено 05 Июнь 2014 - 15:37
MikDark (05 Июнь 2014 - 14:26) писал:
Вот такие вкладки как тогда добавить?http://efimov.ws/assets/files/develop/10/coda/index.html
И можно сделать так чтобы только при нажатии на кнопку открывались? и если увести с него курсор, закрывались снова?
#8
Отправлено 06 Июнь 2014 - 01:40
http://jemand.ru/vsp...tooltip-na-css/
реализация достаточно простая
#9
Отправлено 06 Июнь 2014 - 08:41
Vaccina (06 Июнь 2014 - 01:40) писал:
http://jemand.ru/vsp...tooltip-na-css/
реализация достаточно простая
Вот так думаю будет очень даже не плохо, если поможете настроить.. http://jemand.ru/ras...ok-css3-jquery/
Просто про мою продукцию нужно сначала прочитать что это, для чего, как использовать и т.д. А данный вариант самый подходящий, не уходя никуда из главной страницы, сразу можно узнать всю информацию
#10
Отправлено 10 Июнь 2014 - 01:18
Этот код в самый низ css файла:
.message { font: 12px Arial, Helvetica, sans-serif; -webkit-background-size: 40px 40px; -moz-background-size: 40px 40px; background-size: 40px 40px; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)), color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); width: 100%; border: 1px solid; color: #fff; padding: 15px; position: fixed; left: 0; text-shadow: 0 1px 0 rgba(0,0,0,.5); -webkit-animation: animate-bg 5s linear infinite; -moz-animation: animate-bg 5s linear infinite; } .quazar { background-color: #4ea5cd; border-color: #3b8eb5; } .jet { background-color: #de4343; border-color: #c43d3d; } .milky-way { background-color: #eaaf51; border-color: #d99a36; } .star { background-color: #61b832; border-color: #55a12c; } .message h3 { margin: 0 0 5px 0; } .message p { margin: 0; } @-webkit-keyframes animate-bg { from { background-position: 0 0; } to { background-position: -80px 0; } } @-moz-keyframes animate-bg { from { background-position: 0 0; } to { background-position: -80px 0; } } #trigger-list { text-align: center; margin: 100px 0; padding: 0; } #trigger-list li { display: inline-block; *display: inline; zoom: 1; } #trigger-list .trigger { display: inline-block; background: #ddd; border: 1px solid #777; padding: 10px 20px; margin: 0 5px; font: bold 12px Arial, Helvetica; text-decoration: none; color: #333; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } #trigger-list .trigger:hover { background: #f5f5f5; }этот код в main.js:
var myMessages = ['quazar','milky-way','jet','star']; // Типы сообщений function hideAllMessages() { var messagesHeights = new Array(); for (i=0; i<myMessages.length; i++) { messagesHeights[i] = $('.' + myMessages[i]).outerHeight(); $('.' + myMessages[i]).css('top', -messagesHeights[i]); } } function showMessage(type) { $('.'+ type +'-trigger').click(function(){ hideAllMessages(); $('.'+type).animate({top:"0"}, 500); }); } $(document).ready(function(){ hideAllMessages(); for(var i=0;i<myMessages.length;i++) { showMessage(myMessages[i]); } $('.message').click(function(){ $(this).animate({top: -$(this).outerHeight()}, 500); }); });этот код в шаблон HTML:
{% IF index_page %} <!-- Кнопки --> <ul id="trigger-list"> <li><a href="#" class="trigger quazar-trigger">Квазар</a></li> <li><a href="#" class="trigger jet-trigger">Джеты</a></li> <li><a href="#" class="trigger milky-way-trigger">Млечный Путь</a></li> <li><a href="#" class="trigger star-trigger">Звезда</a></li> </ul> <!-- Кнопки --> <!-- Панели --> <div class="quazar message"> <h3>Квазар</h3> <p>Квазар (англ. quasar) — особо мощное и далёкое активное ядро галактики. Квазары являются одними из самых ярких объектов во Вселенной — их мощность излучения иногда в десятки и сотни раз превышает суммарную мощность всех звёзд таких галактик, как наша.</p> </div> <div class="jet message"> <h3>Релятивистские струи, джеты</h3> <p>Релятивистские струи, джеты (англ. jet) — струи плазмы, вырывающиеся из центров (ядер) таких астрономических объектов, как активные галактики, квазары и радиогалактики. Обычно у объекта наблюдается две струи, направленные в противоположные стороны.</p> </div> <div class="milky-way message"> <h3>Млечный Путь</h3> <p>Галактика Млечный Путь, называемая также просто Гала?ктика (с заглавной буквы), — гигантская звёздная система, в которой находится Солнечная система, все видимые невооружённым глазом отдельные звёзды.</p> </div> <div class="star message"> <h3>Звезда</h3> <p>Звезда — небесное тело, в котором идут, шли или будут идти термоядерные реакции. Но чаще всего звездой называют небесное тело, в котором идут в данный момент термоядерные реакции.</p> </div> <!-- Панели --> {% ENDIF %}
#11
Отправлено 18 Июнь 2014 - 15:09
Vaccina (06 Июнь 2014 - 01:40) писал:
http://jemand.ru/vsp...tooltip-na-css/
реализация достаточно простая
Здравствуйте, помогите установить такие всплывающие подсказки в карточке товара для "условия доставки" и "условия оплаты". В всплывающем окне нужно отображать текст который сейчас там же написан
#12
Отправлено 19 Июнь 2014 - 00:56
.dynamic + .spoiler h3, .dynamic + .spoiler2 h3 { margin-top: 0; } .dynamic + .spoiler, .dynamic + .spoiler2 { background: #fff; border: 1px solid; border-radius: 6px; padding: 0 10px 10px; position: absolute; width: 300px; z-index: 100; }
#13
Отправлено 19 Июнь 2014 - 08:17
Сake (19 Июнь 2014 - 00:56) писал:
.dynamic + .spoiler h3, .dynamic + .spoiler2 h3 { margin-top: 0; } .dynamic + .spoiler, .dynamic + .spoiler2 { background: #fff; border: 1px solid; border-radius: 6px; padding: 0 10px 10px; position: absolute; width: 300px; z-index: 100; }
Добавил, но пока никаких изменений..Извиняюсь все очень красиво получилось) Спасибо!
Сообщение отредактировал Ильяc: 19 Июнь 2014 - 08:20
#14
Отправлено 19 Июнь 2014 - 08:55
Ильяc (19 Июнь 2014 - 08:17) писал:
Сake (19 Июнь 2014 - 00:56) писал:
.dynamic + .spoiler h3, .dynamic + .spoiler2 h3 { margin-top: 0; } .dynamic + .spoiler, .dynamic + .spoiler2 { background: #fff; border: 1px solid; border-radius: 6px; padding: 0 10px 10px; position: absolute; width: 300px; z-index: 100; }
Подскажите еще как мне сделать следующее? Нужно уменьшить строку поиска и в освободившееся место вставить кнопку "Заказать звонок" что бы при нажатии всплывало окно с формой куда нужно вписать:номер телефона и имя и все, ну и кнопка отправить. Цвет кнопки хотелось бы сделать как цвет шапки сайта а текст белый. Читал много на форумах, но не получилось..Спасибо!
#15
Отправлено 20 Июнь 2014 - 00:38
http://forum.storela...ро/#entry143348
Для уменьшения поиска в main,css найдите:
#tmsearch input.search_query { background: #FFFFFF; border: 1px solid #FFFFFF; color: #B6B6B6; float: left; height: 15px; margin: 11px 0 0 38px; padding: 1px; width: 568px; }замените на:
#tmsearch input.search_query { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #FFFFFF; color: #B6B6B6; float: left; height: 15px; margin: 11px 0 0 38px; padding: 1px; width: 368px; }
также в графическом редакторе уменьшите фон полосы поиска: bg_searc.png
#16
Отправлено 20 Июнь 2014 - 08:34
Vaccina (20 Июнь 2014 - 00:38) писал:
http://forum.storela...ро/#entry143348
Для уменьшения поиска в main,css найдите:
#tmsearch input.search_query { background: #FFFFFF; border: 1px solid #FFFFFF; color: #B6B6B6; float: left; height: 15px; margin: 11px 0 0 38px; padding: 1px; width: 568px; }замените на:
#tmsearch input.search_query { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #FFFFFF; color: #B6B6B6; float: left; height: 15px; margin: 11px 0 0 38px; padding: 1px; width: 368px; }
также в графическом редакторе уменьшите фон полосы поиска: bg_searc.png
#17
Отправлено 20 Июнь 2014 - 08:53
Ильяc (20 Июнь 2014 - 08:34) писал:
В шаблон HTML после кода:
<div id="tmsearch"> <form action="http://{NET_DOMAIN}/search" method="get"> <input class="search_query" type="text" id="search_query_top" name="q" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{%ELSE%}Поиск{%ENDIF%}" onfocus="if(this.value=='Поиск')this.value='';" onblur="if(this.value=='')this.value='Поиск';"> <input type="image" style="margin-top:8px; margin-left:3px;" src="{ASSETS_IMAGES_PATH}poisk.jpg" /> <input type="hidden" name="orderby" value="position"> <input type="hidden" name="orderway" value="desc"> </form> </div>
но сначала уменьшите поиск.
#18
Отправлено 20 Июнь 2014 - 11:42
MikDark (20 Июнь 2014 - 08:53) писал:
<div id="tmsearch"> <form action="http://{NET_DOMAIN}/search" method="get"> <input class="search_query" type="text" id="search_query_top" name="q" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{%ELSE%}Поиск{%ENDIF%}" onfocus="if(this.value=='Поиск')this.value='';" onblur="if(this.value=='')this.value='Поиск';"> <input type="image" style="margin-top:8px; margin-left:3px;" src="{ASSETS_IMAGES_PATH}poisk.jpg" /> <input type="hidden" name="orderby" value="position"> <input type="hidden" name="orderway" value="desc"> </form> </div>
но сначала уменьшите поиск.
#19
Отправлено 20 Июнь 2014 - 11:55
Ильяc (20 Июнь 2014 - 11:42) писал:
2014-06-20_124216.png
<div id="katalog">Каталог</div>Замените на
<div id="katalog"><a href="ссылка на каталог">Каталог</a></div>
Темы с аналогичным тегами вкладки
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Лазурь →
Другое →
Табы На СтраницеАвтор Гость_tanch_* , 27 дек. 2015 вкладки, табы, страница |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Пластик →
Страница товара →
Немного Поправить ДизайнАвтор Гость_Acum56_* , 14 марта 2014 Вкладки |
|
|||
Вопросы работы сервиса StoreLand →
Дизайн →
Шаблон Техника →
Страница товара →
Динамические ВкладкиАвтор Гость_emin808_* , 15 янв. 2013 вкладки, товар |
|
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных