Найти на сайте

Создаем свой шаблон в ARTISTEER 2

+20
3.08K
  2. Блоги
  3. Создаем свой шаблон в ARTISTEER 2
После создания вашего дизайна и разметки шаблона (создать новый HTML вебсайт компании) в программе Artisteer2, нужно єкспортировать его как HTML.Создаются такие файлы 1-page.html 2-style.css 3-style.ie6.css 4-script.js 5-папка images/
Мы создаем в директории templates/ свою папку с названием нашего шаблона mytema/
далее в ней создаем папки css/ и js/.В папку css/ ложим файлы экспортированные из артиста style.css и style.ie6.css, а в js/ ложим script.js. Пака чтоб не заморачиваться и не переписывать файл style.css -(в нем по умолчанию прописаны пути к графическим элементам так url(’images/Page-BgTexture.jpg’);- нам желательно переписать все пути так url(’templates/mutema/images/Page-BgTexture.jpg’);.Если нет желания переписывать все пути к графике, в файле style.css то оставьте все как есть -просто папку images/ поместите в созданную вами папку css/, тогда при использовании стилей графика будет браться с относительного url(’images/****.jpg’);.
Теперь надо в директории вашего шаблона создать файл позиций ввода.Создаем текстовый файл positions.txt и помешаем в нем наши позици:
  1. #  В этом файле перечислены все позиции, предусмотренные для                        
  2. #  вывода модулей в шаблоне.                                                
  3. #  
  4. #  Чтобы добавить новую позицию для вывода модулей, 
  5. #  добавьте ее название (латинскими буквами и цифрами) в список.
  6. #  Затем в нужном месте шаблона вставьте код: <?php echo cmsModule("название_позиции");?>
  7. #
  8. #
  9. left
  10. right
  11. top
  12. bottom
  13. user1
  14. user2
  15. user3
  16. user4
  17. user5
  18. user6
  19. user7
  20. user8
Позиций user может быть и больше и меньше, все зависит от ваших требований и оформления сайта.

Остался самый важный файл это template.php в нем содержится вся базавая разметка сайта.
Можно всять его с любого шаблона и скопировать в папку своего шаблона для редактирования.
Открываем файл template.php и удаляем все что между тегами <body> и </body> и копируем в него содержимое эспортированного артистом файла page.html. нас интересует все что расположено в нем между тегами <body> и </body> в page.html.Вот это содержимое мы переносим в наш template.php.
Далее в нем создаем важную часть где прописаны пути к нашему файлу css скрипту js.Вот код для примера:
  1. ?>
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <!-- HEAD !-->
  6. <?php cmsPrintHead(); ?>
  7.  
  8. <link type='text/css' href='/templates/_default_/basic/css/basic.css' rel='stylesheet' media='screen' />
  9.  
  10.  
  11.     <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
  12. <script src='/templates/_default_/basic/js/jquery.simplemodal.js' type='text/javascript'></script>
  13. <script src='/templates/_default_/basic/js/basic.js' type='text/javascript'></script>
  14.  
  15.     <script type="text/javascript" src="templates/mytema/js/script.js"></script>
  16.  
  17.     <link rel="stylesheet" href="/templates/mytema/css/style.css" type="text/css" media="screen" />
  18.     <!--[if IE 6]><link rel="stylesheet" href="/templates/mytema/css/style.ie6.css" type="text/css" media="screen" /><![endif]-->
  19. </head>
Оставляем все пути к скриптам системы инстант (пока оставлено query.simplemodal.js и basic.js)
Остальное 
  1. <script type="text/javascript" src="/includes/jquery/jquery.js"></script>
  2. <script type="text/javascript" src="/core/js/common.js"></script>
  3. <script type="text/javascript" src="/includes/jquery/treeview/jquery.treeview.js"></script>
  4. <script type="text/javascript" src="/includes/jquery/treeview/menu.js"></script>
  5. <script language="JavaScript" type="text/javascript" src="/includes/jquery/jquery.jcorners.js"></script>
  6. <script language="JavaScript" type="text/javascript" src="/core/js/karma.js"></script>
  7. <script language="JavaScript" type="text/javascript" src="/includes/jquery/autocomplete/jquery.autocomplete.min.js"></script>
  8. <script language="JavaScript" type="text/javascript" src="/core/js/smiles.js"></script>
  9. <script language="JavaScript" type="text/javascript" src="/includes/jquery/upload/ajaxfileupload.js"></script>
Подключаем по мере надобности.
Вместо /mytema/ прописываем ваше название шаблона тоесть названия созданной вами директории где и лежать все файлы вашего нового шаблона.

Собственно это и есть базовая разметка шаблона, остальнве ньюансы по разметке приложений и модулей инстант надо уже делать в листе стилей css.Пока в нами экспортированном артистом листе стилей есть только базовые стили, и нет стилей нужных предположим для правильного вывода каталога и других приложений.Для этого надо
брать из дефолтного листа стилей styles.css нужные стили и приводить их в соответствие с вашим дизайном на основе стилей артиста.Или переписывать код стилей в модулях.tpl на ваши стили.Ну эту тему мы затроним чуть погодя, эта тема требует большего и отдельного внимания.
А пока можно посмотреть что у нас получилось.
Это код template.php который подготовлен для примера, нужно вам расставить ваши ссылки, в месте где стоит #
  1. <li><a href="вставте ссылку на раздел НОВОСТИ">Новости</a></li>
  2.                                 <li><a href="ссылка на раздел Статьи"><span><span>Статьи</span></span></a></li>
  3.                                 <li><a href="другая ссылка">Другое</a></li>
В примере уже расставлен теги инстанта для вывода контента 
  1. <?php if (cmsCountModules("left")) { ?>
  2. 		<?php cmsModule("left"); ?>
  3. 		<?php } ?>
Это левая позиция для вывода, есть еше right,top,bottom,user1-user8
Расставив эти кода в нужных вам местах разметки таблиц шаблона, мы и получим сам шаблон.На примере видно где они расставлены, вы можете самостоятельно поменять на то что вам нужно.

После установки шаблона, нужно а админке указать допустим выводить модуль-Популярное в блогах в позицию user1 последние коментарии user2, последние обьявления user3, реклама user4, и тд.

ПОЛНЫЙ КОД ПРИМЕРА:
  1. <?php if(!defined('VALID_CMS')) { die('ACCESS DENIED'); } 
  2. /*********************************************************************************************/
  3. //																							 //
  4. // 						     design by Vladimir E. Obukhov, 2008                             //
  5. //                                                                                           //
  6. /*********************************************************************************************/
  7. ?>
  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  9. <html xmlns="http://www.w3.org/1999/xhtml">
  10. <head>
  11. <!-- HEAD !-->
  12. <?php cmsPrintHead(); ?>
  13.  
  14. <link type='text/css' href='/templates/_default_/basic/css/basic.css' rel='stylesheet' media='screen' />
  15.  
  16.  
  17.  
  18.  
  19.  
  20.     <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
  21. <script src='/templates/_default_/basic/js/jquery.simplemodal.js' type='text/javascript'></script>
  22. <script src='/templates/_default_/basic/js/basic.js' type='text/javascript'></script>
  23.  
  24.     <script type="text/javascript" src="templates/mytema/js/script.js"></script>
  25.  
  26.     <link rel="stylesheet" href="/templates/mytema/css/style.css" type="text/css" media="screen" />
  27.     <!--[if IE 6]><link rel="stylesheet" href="/templates/mytema/css/style.ie6.css" type="text/css" media="screen" /><![endif]-->
  28. </head>
  29. <body>
  30. <div class="PageBackgroundGlare">
  31.         <div class="PageBackgroundGlareImage"></div>
  32.     </div>
  33.     <div class="Main">
  34.         <div class="Sheet">
  35.             <div class="Sheet-tl"></div>
  36.             <div class="Sheet-tr"><div></div></div>
  37.             <div class="Sheet-bl"><div></div></div>
  38.             <div class="Sheet-br"><div></div></div>
  39.             <div class="Sheet-tc"><div></div></div>
  40.             <div class="Sheet-bc"><div></div></div>
  41.             <div class="Sheet-cl"><div></div></div>
  42.             <div class="Sheet-cr"><div></div></div>
  43.             <div class="Sheet-cc"></div>
  44.             <div class="Sheet-body">
  45.                 <div class="Header">
  46.                     <div class="Header-jpeg"></div>
  47.                     <div class="logo">
  48.                         <h1 id="name-text" class="logo-name"><a href="#">ЛОГО сайта</a></h1>
  49.                            <p><a href="javascript:window.external.AddFavorite('http://<?php echo $_SERVER['HTTP_HOST']?>/', '<?php cmsPrintSitename(); ?>')" id="ht_fav">В избранное</a></p>
  50.                     </div>
  51.                 </div>
  52.                 <div class="nav">
  53.                     <ul class="artmenu">
  54.                         <li><a href="/index.php" class=" active"><span><span>Главная</span></span></a></li>
  55.                         <li><a href="/view-content/id-2/menuid-10"><span><span>Новости</span></span></a>
  56.                                         <ul>
  57.                                 <li><a href="/content/10/novosti/novosti-saita">Новости сайта</a></li>
  58.                                 <li><a href="#"><span><span>Статьи</span></span></a></li>
  59.                                 <li><a href="#">Интересные</a></li>
  60.                             </ul>
  61.                             </li>
  62.                         <li><a href="/view-clubs/menuid-38"><span><span>Клубы</span></span></a></li>
  63.                         <li><a href="/view-photos/menuid-20"><span><span>Фотогалерея</span></span></a>                                       
  64.                                              <ul>
  65.                                 <li><a href="/view-photos/menuid-20">Прически</a>
  66.                                 <ul>
  67.                                 <li><a href="/photos/20/1035">Длинные</a></li>
  68.                                 <li><a href="/photos/20/1033">Короткие</a></li>
  69.                                 <li><a href="/photos/20/1034">Средние</a></li>
  70.                                 <li><a href="/photos/20/1037">Свадебные</a></li>
  71.  
  72.  
  73.                             </ul>
  74.                             </li>
  75.                                 <li><a href="#">Разное</a></li>
  76.                             </ul>
  77.                             </li>
  78.                         <li><a href="/view-blog/menuid-17"><span><span>Блоги</span></span></a></li>
  79.                         <li><a href="/catalog/23/10"><span><span>Каталог</span></span></a>
  80.                         <ul>
  81.                                 <li><a href="/catalog/23/10">Нейл арт</a></li>
  82.                                 <li><a href="/catalog/23/5">Ламбре</a> </li>
  83.                                 <li><a href="/catalog/23/6">Скрипт</a> </li>
  84.                                 </ul>
  85.                          </li>
  86.  
  87.                         <li><a href="/view-price/menuid-22"><span><span>Прайслист</span></span></a></li>
  88.                         <li><a href="/view-board/menuid-37"><span><span>Обьявления</span></span></a></li>
  89.                         <li><a href="#"><span><span>Вопросы</span></span></a></li>
  90.                         <li><a href="#"><span><span>Контакт</span></span></a></li>
  91.                     </ul>
  92.                     <div class="l">
  93.                     </div>
  94.                     <div class="r">
  95.                         <div>
  96.                         </div>
  97.                     </div>
  98.                 </div>
  99.                 <div class="contentLayout">
  100.                     <div class="sidebar1">
  101.                         <div class="Block">
  102.                             <div class="Block-tl"></div>
  103.                             <div class="Block-tr"><div></div></div>
  104.                             <div class="Block-bl"><div></div></div>
  105.                             <div class="Block-br"><div></div></div>
  106.                             <div class="Block-tc"><div></div></div>
  107.                             <div class="Block-bc"><div></div></div>
  108.                             <div class="Block-cl"><div></div></div>
  109.                             <div class="Block-cr"><div></div></div>
  110.                             <div class="Block-cc"></div>
  111.                             <div class="Block-body">
  112.                                 <div class="BlockHeader">
  113.                                     <div class="header-tag-icon">
  114.                                         <div class="BlockHeader-text">
  115.                                             <!-- Если юзер не авторизован, показываем ему ссылки с регистрацией и авторизацией -->
  116.   			  <?php if(!$inUser->id){ ?> 
  117. 				<a href="/registration" id="ht_reg">Регистрация</a>
  118. 				<a href="javascript:auth()" id="ht_auth">Авторизация</a>
  119.  
  120. 			  <?php } else { 
  121. 							$uid    = $inUser->id;
  122. 							$newmsg = usrNewMessages($inUser->id); 			  	
  123. 			  ?>
  124. 				<a href="/users/0/<?php echo $uid?>/profile.html" id="ht_profile">Профиль</a>
  125. 				<?php if (!$newmsg) { ?>	
  126. 					<a href="/users/0/<?php echo $uid?>/messages.html" id="ht_messages">Cообщения</a>
  127. 				<?php } else { ?>
  128. 					<a style="color:#F60;" href="/users/0/<?php echo $uid?>/messages.html" id="ht_messages">Cообщения <?php echo strip_tags($newmsg)?></a>
  129. 				<?php } ?>
  130. 				<a href="/logout" id="ht_logout">Выход</a>
  131. 			  <?php } ?>
  132.                                         </div>
  133.                                     </div>
  134.                                     <div class="l"></div>
  135.                                     <div class="r"><div></div></div>
  136.                                 </div>
  137.                                 <div class="BlockContent">
  138.                                     <div class="BlockContent-tl"></div>
  139.                                     <div class="BlockContent-tr"><div></div></div>
  140.                                     <div class="BlockContent-bl"><div></div></div>
  141.                                     <div class="BlockContent-br"><div></div></div>
  142.                                     <div class="BlockContent-tc"><div></div></div>
  143.                                     <div class="BlockContent-bc"><div></div></div>
  144.                                     <div class="BlockContent-cl"><div></div></div>
  145.                                     <div class="BlockContent-cr"><div></div></div>
  146.                                     <div class="BlockContent-cc"></div>
  147.                                     <div class="BlockContent-body">
  148.  
  149.  
  150.                                               <?php if (cmsCountModules("user8")) { ?>			
  151.                                               <?php cmsModule("user8"); ?>
  152. 		                               <?php } ?>
  153.  
  154.  
  155. 		                              <div id="bar_search">
  156.                         <form name="searchform" action="/index.php" method="get">
  157.                             <input type="hidden" name="view" value="search" />
  158.                           <input name="query" type="text" id="searchinput" /><input name="gosearch" id="searchbtn" type="image" src="/templates/_default_/images/searchbtn.png" alt="Поиск" width="22" height="23"  onclick="document.searchform.submit()"/>
  159.                         </form>
  160.                 </div>
  161.                                     </div>
  162.                                 </div>
  163.                             </div>
  164.                         </div>
  165.  
  166.                         <div class="Block">
  167.                             <div class="Block-tl"></div>
  168.                             <div class="Block-tr"><div></div></div>
  169.                             <div class="Block-bl"><div></div></div>
  170.                             <div class="Block-br"><div></div></div>
  171.                             <div class="Block-tc"><div></div></div>
  172.                             <div class="Block-bc"><div></div></div>
  173.                             <div class="Block-cl"><div></div></div>
  174.                             <div class="Block-cr"><div></div></div>
  175.                             <div class="Block-cc"></div>
  176.                             <div class="Block-body">
  177.                                 <div class="BlockHeader">
  178.                                     <div class="header-tag-icon">
  179.                                         <div class="BlockHeader-text">
  180.                                             Меню
  181.                                         </div>
  182.                                     </div>
  183.                                     <div class="l"></div>
  184.                                     <div class="r"><div></div></div>
  185.                                 </div>
  186.                                 <div class="BlockContent">
  187.                                     <?php if (cmsCountModules("left")) { ?>
  188. 		<?php cmsModule("left"); ?>
  189. 		<?php } ?>
  190.                                                           </div>
  191.                                     </div>
  192.                                 </div>
  193.                             </div>
  194.                         </div>
  195.                         <div class="Block">
  196.                             <div class="Block-tl"></div>
  197.                             <div class="Block-tr"><div></div></div>
  198.                             <div class="Block-bl"><div></div></div>
  199.                             <div class="Block-br"><div></div></div>
  200.                             <div class="Block-tc"><div></div></div>
  201.                             <div class="Block-bc"><div></div></div>
  202.                             <div class="Block-cl"><div></div></div>
  203.                             <div class="Block-cr"><div></div></div>
  204.                             <div class="Block-cc"></div>
  205.                             <div class="Block-body">
  206.                                 <div class="BlockHeader">
  207.                                     <div class="header-tag-icon">
  208.                                         <div class="BlockHeader-text">
  209.                                             Путь по сайту
  210.                                         </div>
  211.                                     </div>
  212.                                     <div class="l"></div>
  213.                                     <div class="r"><div></div></div>
  214.                                 </div>
  215.                                 <div class="BlockContent">
  216.                                     <div class="BlockContent-tl"></div>
  217.                                     <div class="BlockContent-tr"><div></div></div>
  218.                                     <div class="BlockContent-bl"><div></div></div>
  219.                                     <div class="BlockContent-br"><div></div></div>
  220.                                     <div class="BlockContent-tc"><div></div></div>
  221.                                     <div class="BlockContent-bc"><div></div></div>
  222.                                     <div class="BlockContent-cl"><div></div></div>
  223.                                     <div class="BlockContent-cr"><div></div></div>
  224.                                     <div class="BlockContent-cc"></div>
  225.                                     <div class="BlockContent-body">
  226.                                         <div>
  227. 		                               <?php cmsPathway('»'); ?>
  228.  
  229.                                         </div>
  230.                                     </div>
  231.                                 </div>
  232.                             </div>
  233.                         </div>
  234.                     </div>
  235.                     <div class="content">
  236.                         <div class="Post">
  237.                             <div class="Post-tl"></div>
  238.                             <div class="Post-tr"><div></div></div>
  239.                             <div class="Post-bl"><div></div></div>
  240.                             <div class="Post-br"><div></div></div>
  241.                             <div class="Post-tc"><div></div></div>
  242.                             <div class="Post-bc"><div></div></div>
  243.                             <div class="Post-cl"><div></div></div>
  244.                             <div class="Post-cr"><div></div></div>
  245.                             <div class="Post-cc"></div>
  246.                             <div class="Post-body">
  247.                         <div class="Post-inner">
  248.                             <h2 class="PostHeaderIcon-wrapper">
  249.                                 <span class="PostHeader">Добро пожаловать</span>
  250.                             </h2>
  251.                             <div class="PostContent">
  252.  
  253.                                     <?php cmsModule("top"); ?>
  254. 				<?php cmsBody(); ?>
  255. 				<?php cmsModule("bottom"); ?>
  256.  
  257.  
  258.                                 <table class="table" width="100%">
  259.                                 	<tr>
  260.                                 		<td width="33%" valign="top">
  261.                                 		<div class="Block">
  262.                                 			<div class="Block-body">
  263.                                 				<div class="BlockHeader">
  264.                                 					<!--div class="header-tag-icon"-->
  265.                                 					<div class="BlockHeader-text">
  266.                                 						<center>Популярное</center></div>
  267.                                 					<!--/div-->
  268.                                 					<div class="l">
  269.                                 					</div>
  270.                                 					<div class="r">
  271.                                 						<div>
  272.                                 						</div>
  273.                                 					</div>
  274.                                 				</div>
  275.                                 				<div class="BlockContent">
  276.                                 					<div class="PostContent">
  277.                                 					     <img src="/templates/mytema/images/01.png" width="55px" height="55px" alt="an image" style="margin: 0 auto; display: block; border: 0" />
  278.                                 					     <?php if (cmsCountModules("user1")) { ?>			
  279.                                                                              <?php cmsModule("user1"); ?>
  280. 		                                                             <?php } ?>	
  281.                                 					</div>
  282.                                 				</div>
  283.                                 			</div>
  284.                                 		</div>
  285.                                 		</td>
  286.                                 		<td width="33%" valign="top">
  287.                                 		<div class="Block">
  288.                                 			<div class="Block-body">
  289.                                 				<div class="BlockHeader">
  290.                                 					<!--div class="header-tag-icon"-->
  291.                                 					<div class="BlockHeader-text">
  292.                                 						<center>Интересное</center></div>
  293.                                 					<!--/div-->
  294.                                 					<div class="l">
  295.                                 					</div>
  296.                                 					<div class="r">
  297.                                 						<div>
  298.                                 						</div>
  299.                                 					</div>
  300.                                 				</div>
  301.                                 				<div class="BlockContent">
  302.                                 					<div class="PostContent">
  303.                                 						<img src="/templates/mytema/images/02.png" width="55px" height="55px" alt="an image" style="margin: 0 auto; display: block; border: 0" />
  304.                                 						<p><?php if (cmsCountModules("user2")) { ?>			
  305.                                                                                 <?php cmsModule("user2"); ?>
  306. 		                                                                <?php } ?> </p>
  307.                                 					</div>
  308.                                 				</div>
  309.                                 			</div>
  310.                                 		</div>
  311.                                 		</td>
  312.                                 		<td width="33%" valign="top">
  313.                                 		<div class="Block">
  314.                                 			<div class="Block-body">
  315.                                 				<div class="BlockHeader">
  316.                                 					<!--div class="header-tag-icon"-->
  317.                                 					<div class="BlockHeader-text">
  318.                                 						<center>Архив</center></div>
  319.                                 					<!--/div-->
  320.                                 					<div class="l">
  321.                                 					</div>
  322.                                 					<div class="r">
  323.                                 						<div>
  324.                                 						</div>
  325.                                 					</div>
  326.                                 				</div>
  327.                                 				<div class="BlockContent">
  328.                                 					<div class="PostContent">
  329.                                 						<img src="/templates/mytema/images/03.png" width="55px" height="55px" alt="an image" style="margin: 0 auto; display: block; border: 0" />
  330.                                 						<p><?php if (cmsCountModules("user3")) { ?>			
  331.                                                                                 <?php cmsModule("user3"); ?>
  332. 		                                                                 <?php } ?> </p>
  333.                                 					</div>
  334.                                 				</div>
  335.                                 			</div>
  336.                                 		</div>
  337.                                 		</td>
  338.                                 	</tr>
  339.                                 </table>
  340.  
  341.                             </div>
  342.                             <div class="cleared"></div>
  343.                         </div>
  344.  
  345.                             </div>
  346.                         </div>
  347.                         <div class="Post">
  348.                             <div class="Post-tl"></div>
  349.                             <div class="Post-tr"><div></div></div>
  350.                             <div class="Post-bl"><div></div></div>
  351.                             <div class="Post-br"><div></div></div>
  352.                             <div class="Post-tc"><div></div></div>
  353.                             <div class="Post-bc"><div></div></div>
  354.                             <div class="Post-cl"><div></div></div>
  355.                             <div class="Post-cr"><div></div></div>
  356.                             <div class="Post-cc"></div>
  357.                             <div class="Post-body">
  358.                         <div class="Post-inner">
  359.                             <h2 class="PostHeaderIcon-wrapper">
  360.                                 <span class="PostHeader">user4</span>
  361.                             </h2>
  362.                             <div class="PostContent">
  363.  
  364.  
  365.  
  366.                                   <p> <?php if (cmsCountModules("user4")) { ?>			
  367.                                       <?php cmsModule("user4"); ?>
  368. 		                         <?php } ?></p>
  369.  
  370.  
  371.                                         <p>
  372.                                             рекламное место свободно  
  373.  
  374.  
  375.  
  376.                                         </p>
  377.  
  378.  
  379.  
  380.                                   <table class="article"  cellspacing="0" cellpadding="0">
  381.                                   <tbody>
  382.                                     <tr>
  383.                                       <th>  user5 <?php if (cmsCountModules("user5")) { ?>			
  384.                                              <?php cmsModule("user5"); ?>
  385. 		                              <?php } ?></th>
  386.                                       <th>   user6 <?php if (cmsCountModules("user6")) { ?>			
  387.                                                <?php cmsModule("user6"); ?>
  388. 	                                       <?php } ?></th>
  389.                                       <th>  user7   <?php if (cmsCountModules("user7")) { ?>			
  390.                                                <?php cmsModule("user7"); ?>
  391.                                                <?php } ?></th>
  392.                                     </tr>
  393.  
  394.                                   </tbody></table>
  395.  
  396.  
  397.  
  398.                             </div>
  399.                             <div class="cleared"></div>
  400.                         </div>
  401.  
  402.                             </div>
  403.                         </div>
  404.                     </div>
  405.                 </div>
  406.                 <div class="cleared"></div><div class="Footer">
  407.                     <div class="Footer-inner">
  408.                         <a href="#" class="rss-tag-icon" title="RSS"></a>
  409.                         <div class="Footer-text">
  410.                             <p><a href="#">Контакт</a> | <a href="#">Соглашение</a> | <a href="#">Trademarks</a>
  411.                                 | <a href="#">Privacy Statement</a>
  412.  
  413.                                 Copyright © 2010 ---. All Rights Reserved.</p>
  414.                         </div>
  415.                     </div>
  416.                     <div class="Footer-background"></div>
  417.                 </div>
  418.             </div>
  419.         </div>
  420.         <div class="cleared"></div>
  421.         <!--  -->
  422.         <p class="page-footer"><a href="#">Web Template</a></p>
  423.     </div>
  424. </body>
  425. </html>
  426.  
  427.  
Seo для блога, meta "keywords" и meta "description"
создаем шаблон artisteer 2
+2
Светлана Кондратьева ✝️ Светлана Кондратьева ✝️ 14 лет назад #
Очень хорошее сообщение для тех, кто не умеет рисовать( как и я).

Спасибо!

Единственное, что ты забыл добавить, эта методика годится для версии 1.5.1. Начиная с 1.5.2 некоторые модули уже используют Smarty, а 1.5.3 (насколько я видела) абсолютно весь вывод использует Smarty. При попытке поставить такой шаблон на 1.5.3 начнутся чудеса.
0
maia maia 14 лет назад #
Но истина где-то рядом. Всеравно отличное начинание!
0
oll oll 14 лет назад #
Это сдесь абсольтно не причем.Тестирую сейчас этот шаблон для себя на версии 1.5.2.Причем с переделанным модулем Архив на smarty.Шаблонизатор делает свое дело вне зависимости какая разметка шаблона или какие стили применяются,после компиляции он тихонько выводит код по тем тегам которые мы раставляем,и ему всеравно стоит этот тег в дивах,таблице,списке, или вообще без разметки.Если есть желание можете посмотреть работу на моем сайте credo.Сырец,еще надо коректировать стили вывода модулей и приложений,но общая концепция видна.
0
lezginka.ru lezginka.ru 14 лет назад #
oll, спасибо за хорошее начало, но сайт твой не работает :(
0
Pampa Pampa 14 лет назад #
Очень нужный материал, ждем продоления - про модули и приложения!
Кстати, сайт работает. А как сделан модуль слайд-картинок (про купальники)?
0
oll oll 14 лет назад #
Это не самый красочный вывод красивее на Demo ImageFlow Q.Там моджете забрать и код (Вид-исходный код страницы)/Для работы надо еше jquery-1.3.1.min.js Тут полный код,картинки вставляеш свои и тексты редактируеш
Код PHP:


JQuery Photo Slider with Semi Transparent Caption




$(document).ready(function() {		
	
	//Execute the slideShow
	slideShow();

});

function slideShow() {

	//Set the opacity of all images to 0
	$('#gallery a').css({opacity: 0.0});
	
	//Get the first image and display it (set it to full opacity)
	$('#gallery a:first').css({opacity: 1.0});
	
	//Set the caption background to semi-transparent
	$('#gallery .caption').css({opacity: 0.7});

	//Resize the width of the caption according to the image width
	$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
	
	//Get the caption of the first image from REL attribute and display it
	$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
	.animate({opacity: 0.7}, 400);
	
	//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('gallery()',6000);
	
}

function gallery() {
	
	//if no IMGs have the show class, grab the first image
	var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));

	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));	
	
	//Get next image caption
	var caption = next.find('img').attr('rel');	
	
	//Set the fade in effect for the next image, show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
	//Set the opacity to 0 and height to 1px
	$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });	
	
	//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
	$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
	
	//Display the content
	$('#gallery .content').html(caption);
	
	
}



body{
	font-family:arial
}

.clear {
	clear:both
}

#gallery {
	position:relative;
	height:485px
}
	#gallery a {
		float:left;
		position:absolute;
	}
	
	#gallery a img {
		border:none;
	}
	
	#gallery a.show {
		z-index:500
	}

	#gallery .caption {
		z-index:600; 
		background-color:#000; 
		color:#ffffff; 
		height:100px; 
		width:100%; 
		position:absolute;
		bottom:0;
	}

	#gallery .caption .content {
		margin:5px
	}
	
	#gallery .caption .content h3 {
		margin:0;
		padding:0;
		color:#1DCCEF;
	}
	




КУПАЛЬНИКИ ОТ BIKINILUX
Как вывести в инстанте?
Чтоб не путаться создаем в директории includes/myphp/ типа includes/myphp/имя
Туда ложим index.html страницу с этим или другим кодом.Тамже создаем папку называем imagesmod/ или подругому (тогда в коде надо поменять на свое название) туда ложим графику и именуем каждую картинку miraclesuitf1.jpg - miraclesuitf2.jpg и тд,или даем свое название и естественно меняем и в коде на свое название,если графика в png формате то и указываем miraclesuitf1.png.
Создаем еше одну папку js/ туда ложим jquery-1.3.1.min.js.
Подготовка закончена.Теперь создаем новый ПОЛЬЗОВАТЕЛЬСКИЙ МОДУЛЬ в админке МОДУЛИ-СОЗДАТЬ НОВЫЙ и выбираем в "СОДЕРЖИМОЕ МОДУЛЯ" - "ВСТАВИТЬ" -а в списке "ВНЕШНИЙ СКРИПТ" в появившемся поле Файл: /includes/myphp/имя той папки где все добро лежит/index.html
Ну и произвести настройки этого модуля -публиковать модуль и где показывать (на всех страницах или на выбраных),позиция лучше top в левых и правых позициях не всегда приемлемо.Ну и сдесь же в редакторе можно дополнительно оформить текстом или графикой .
0
oll oll 14 лет назад #
Код коряво вставился и не весь,я подготовлю полностью и выложу.Жалко коментарии не редактируются.
0
imprint imprint 14 лет назад #
у меня сайт на артисте... вот
только проблема никак не могу сделать автоматически разбивку модулей.....
пробывал:
создал в модулях новый модуль типа module_left
брал код из артиста левого контента самого шаблона и вставлял в module_left как не пытался блин что то неполучается....
0
oll oll 14 лет назад #
брал код из артиста левого контента самого шаблона и вставлял в module_left
Из кода артиста как раз ничего брать не надо,в него надо вставлять код инстанта для вывода контента.
А где у вас инициализация,и у вас нет ни одной позиции для вывода.Вы должны на шаблоне расставит
Код PHP:
ну и другие right,top,bottom,user.
Посмотрите внимательно на код примера,там все позиции вывода уже расставлены,вы должны следовать этому примеру и расставить у себя на шаблоне
Код PHP:
левая позиция    
		
		
правая 
		
		
центр
ну и тд.
0
oll oll 14 лет назад #
От досада,что за приколы ,не вставляется код в теги хоть тресни..... Утро-вечера мудренее...
0
oll 14 лет назад #
imprint прочитай это http://instantcms.ru/content/40/read37-2.html#cВот эти кода надо обязательно расставить по вашему шаблону ,а у вас просто чистый код html без намека на связку с инстантом.Посмотрите как это расставлено у меня.
0
oll 14 лет назад #
Я вижу у ВАс все получилось.Удачи.
0
imprint imprint 14 лет назад #
я имел ввиду...что бы если создавать через админку модуль что бы он автоматом вставлялся в сам шаблон отдельным модулем.... вроде начало работать но просто шапка от боди ушла в верх.....пришлось вернуть всё на обратку...буду разбираться.....
0
Роман 14 лет назад #
Довольно интересно! Надо попробывать!
0
Князь Мышкин Князь Мышкин 14 лет назад #
Слава чайникам! У меня не получилось по-нормальному =)
0
TTT TTT 14 лет назад #
не ложим, а кладем) читать больно...
0
oll oll 14 лет назад #
Извиняюсь.Меня целый день то ложили,то клали....Просто запуталась.
LonelyCat LonelyCat 14 лет назад #
Комментарий удален
0
Fuze Fuze 14 лет назад #
скепсис совсем не в тему, грамотность только украшает человека, а то что читать больно, полностью поддерживаю Timmy, здесь много пользователей, которые мало того что не могут выразить свои мысли, так еще и пишут не грамотно - читать не то что больно - аж передергивает.
+1
Zau4man Zau4man 14 лет назад #
угу. и в комменте выше как минимум пропущено 2 запятые перед "что". Ща протрезвею может еще ошибки найду :)
+2
oll oll 14 лет назад #
Дамы владеют не наименьшими возможностями совершать оплошности.(Лоренс Питер)

Еще от автора

SEO FAQ ICMS v 1.10.4

SEO FAQ ICMS v 1.10.4

Полнофункциональное SEO решение для компонента "FAQ" ICMS v1.10.4
2
SEO board ICMS v 1.10.4

SEO board ICMS v 1.10.4

Полнофункциональное SEO решение для компонента "Доска обьявлений" ICMS v1.10.4
15
SEOBOX сборка ICMS 1.10.4

SEOBOX сборка ICMS 1.10.4

Начата реализация SEO дистрибутива системы ICMS версии 1.10.4
44

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.