Создание шаблона

8 апреля 2008 - Администратор

Часть 1. Делаем верстку

Шаблон в InstantCMS представляет из себя один статичный html-файл в котором размечены позиции для модулей, основного тела, названия сайта и других функциональных частей страницы.

1. Чтобы создать новый шаблон, сначала необходимо создать для него папку внутри папки "templates".

Для примера назовем ее "mytemplate". Система сама обнаружит появление новой папки и шаблон станет доступен для выбора из панели управления. Внутри папки "mytemplate" так же можно создать папки для картинок и css.

2. На следующем этапе создается файл "template.php" в папке "mytemplate". Можно создать еще и пустой файл "index.html", на случай если кто-то наберет в адресной строке что-нибудь типа "http://www.mysite.ru/templates/mytemplate". После создания папок и файлов получаем следующую структуру:

3. Теперь дело за самим дизайном. Открываем файл "template.php" и верстаем в нем нужную html-страницу. При этом все картинки складываем в папку "mytemplate/images", а стили в файл "mytemplate/css/styles.css". Естесственно, что страница должна представлять из себя лишь скелет (шапка, колонки, подвал) и не содержать никакого контента (текста). Пример верстки см. на рисунке:

4. Настало время для рутинной части работы - создания css-классов. InstantCMS использует одни и те же названия классов и стилей в каждом шаблоне. Например, для вывода заголовков всегда используется класс "con_heading" и т.д. Ваша задача состоит в том, чтобы создать классы со стандартными названиями и нужным дизайном. Здесь можно взять готовый шаблон и действовать по образцу.

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

Мы рекомендуем для этой цели использовать браузер Mozilla Firefox с плагином Firebug.

5. После того как страница готова, необходимо проверить правильность указания путей к css-таблице и картинкам. Все пути обязательно должны быть абсолютными. Т.е., путь к css-файлу должен выглядеть как:

    /templates/mytemplate/css/styles.css

А пути ко всем картинкам должны выглядеть наподобии:

    /templates/mytemplate/images/abc123.jpg

Удобнее всего воспользоваться автозаменой ("images/" заменить на "/templates/mytemplate/images/"). После всех этих действий сохраните свой шаблон и попробуйте применить его на сайте (Панель управления - Настройки - Шаблон). Если все было сделано верно, вы должны увидеть ваш дизайн, но без какого-либо содержимого.

Страницы: 1 2
Комментарии (34)
0 # 25 ноября 2008 в 09:17 +2
Ну чтож, попробуем! ;)
Debugger # 4 декабря 2008 в 10:29 0
ну прям joomla вспоминается :)
0 # 12 ноября 2009 в 22:11 0
угу
0 # 30 января 2009 в 17:50 +2
Неудобно...Надо бы в самой админке верстать
0 # 28 февраля 2009 в 09:17 0
А с моей точки зрения очень даже удобно, это первая цмс (а перепробовал я их штук 50), которая настолько проста в освоении и внедрении, что просто нет слов. Ребята постарались на славу, за это им баальшой респект!!!
Alphaweb # 22 марта 2009 в 08:21 +1
Я полностью согласен с ’weds’- это очень практичная и простая система.
Если заниматься разработкой проекта и его продвижением, то это самый
лучший вариант: InstantCMS! Не надо грузиться деталями и прочим (зачем
быть разработчиком-профи, если хочется лишь заниматься любимым делом -
нести инфу и идеи собственной аудитории (разве не за этим всё кроется?)
Поэтому рекомендую особенно начинающему, но серьёзному пользователю и
wm-труженнику использовать эту замечательную систему - InstantCMS!
YuGiN # 7 апреля 2009 в 02:59 0
Спс, полезная инфа, только вот текст немешало бы покрупнее сделать а то невидть нифика!!
Hmelex # 14 апреля 2009 в 10:42 0
Блин я наверное отношусь к тем, кто сначала ремонтирует, а потом читает инструкцию по ремонту.

Потратила 24 часа на разбор по полочкам стандартного дизайна - чтобы за 6 часов сверстать новый.

Прочитав инструкцию - смоглабы сократить это время раза в 3.



Спасибо за статью.
Захар # 15 апреля 2009 в 08:41 +3
На эту тему есть закон Мерфи  laugh  laugh  laugh
"Если у вас ни**я не получается, загляните же, наконец, в инструкцию"
Виталий # 17 апреля 2009 в 14:40 0
Инсталировал на локальную машину ковыряю. Первое впечатлениу супер... Пробовал много разных штук (CMS) ЭТА ПЕРВАЯ ГДЕ ВСЁ ДОСТУПНО НЕ ОПЫТНОМУ САЙТОСТРОИТЕЛЮ (  laugh ), КОИМ Я ЯВЛЯЮСЬ. СПАСИБО ЗА ХОРОШО СДЕЛАННУЮ РАБОТУ.  ПОШЁЛ ДАЛЬШЕ КОВЫРЯТЬ
0 # 30 августа 2009 в 04:12 0
ну, а растягиватьчя шаблом будет сам?)
Евгений # 8 октября 2009 в 17:07 0
Уважаемые! а как шаблон поставить в последней версии? я на локалке хочу реализовать проект с помощью вашей cms
Андрей # 15 ноября 2009 в 18:53 0
Господа, кто-нибудь может подсказать как в каталоге на 1 товар прицепить несколько картинок?
Виктор # 16 ноября 2009 в 07:36 0
Андрей:
Господа, кто-нибудь может подсказать как в каталоге на 1 товар прицепить несколько картинок?
Ручками :). А еще изменить сам sql-запрос (с нужным Limit, если надо) и сам скрипт, чтобы мог в цикле выводить фото. Но если подходить к этому вопросу комплексно, то лучше немного доработать сам компонент, чтобы была возможность добавлять фотографии к товару, а не только их менять. При соответствующих познаниях в PHP и SQL это не сложно  hoho
Андрей # 19 ноября 2009 в 04:36 0
То есть без глубоких познаний PHP и SQL никак...
Тогда вставлю их в форму HTML.
Дмитрий # 4 февраля 2010 в 00:12 0
Вы забыли написать вставку для вывода контента
Даша # 5 февраля 2010 в 16:56 0
как-то непонятно совсем!Это платно? zst
0 # 16 марта 2010 в 23:45 0
Данный туториал будет работать для последней версии?
braincord # 29 мая 2010 в 12:07 0
сделал как здесь описали, только когда выбираю вывести модуль на всех страницах он дублируется на главной.
в чем может быть проблема? что еще надо прописывать кроме таких вещей:




еще такой вопрос:
верстка пропадает когда открываешь чисто статью, хотя когда смотришь в код страницы через браузер - все пути прописаны.
в чем может быть проблема?
braincord # 29 мая 2010 в 12:09 0
под вещами имел ввиду:
Код PHP:
?

и т.п.
					                            						
													

													
				

			

            
        

	                
		
                    

                

			

				
											braincord 
					
                        #
						29 мая 2010 в 14:45
                                                    0
                        				
			

			

									
						

							

								
									
								
								

															разобрался) все оказалось очень просто. Спасибо за столь простую CMS в верстке:)
					                            						
													

													
				

			

            
        

	                
		
                    

                

			

				
											Константин 
					
                        #
						30 мая 2010 в 23:13
                                                    +1
                        				
			

			

									
						

							

								
									
								
								

															Визуальный редактор бы замутить, как в УкозЕ) красота была бы))
					                            						
													

													
				

			

            
        

	                
		
                    

                

			

				
											braincord 
					
                        #
						30 мая 2010 в 23:16
                                                    0
                        				
			

			

									
						

							

								
									
								
								

															мне кажется это лишнее)
					                            						
													

													
				

			

            
        

	                
		
                    

                

			

				
											WALTERZ 
					
                        #
						15 января 2011 в 21:05
                                                    0
                        				
			

			

									
						

							

								
									
								
								

															эх видел бы я эту статью раньше, а то копался сидел, сам разбирался.
					                            						
													

													
				

			

            
        

	                
		
                    

                

			

				
											WALTERZ 
					
                        #
						15 января 2011 в 21:28
                                                    0
                        				
			

			

									
						

							

								
									
								
								

															Статья не целая.
Где например вывод  ?
					                            						
													

													
				

			

            
        

	                
		
                    

                

			

				
											0 
					
                        #
						28 января 2011 в 09:12
                                                    0
                        				
			

			

									
						

							

								
									
								
								

															Маны бы по iCMS...
Я в 1.7 cmsBody(); потерял, несколько дней не понимал, что происходит :)
А в целом - благодарность успехов!!!
					                            						
													

													
				

			

            
        

	                
		
                    

                

			

				
											0 
					
                        #
						19 мая 2011 в 18:16
                                                    0
                        				
			

			

									
						

							

								
									
								
								

															Я про cmsBody(); тоже ничего не знал вообще))

У меня уже паника была, но тут Madmax подсказал, в чем дело smile

Администраторы, может в этой статье упомяните о данном моменте? А то, мы - новички не сразу понимаем, почему не работают компоненты))
					                            						
													

													
				

			

            
        

	                
		
                    

                

			

				
											metallphilin 
					
                        #
						16 октября 2011 в 20:23
                                                    0
                        				
			

			

									
						

							

								
									
								
								

															поясните, где редактируются шаблоны форума?



/components/com_forum_view.tpl и /components/forum/frontend.php не дают всей картины. нужно, например поместить все тело в контейнер <div>



залоговок форума и то пришлось менять с 



 $inPage->printHeading($_LANG['FORUMS']);



на



 $inPage->printHeading('<div class="head"><div>'.$_LANG['FORUMS'].'</div></div>');



в /components/forum/frontend.php





где оно выводится, какой шаблон?
					                            						
													

													
				

			

            
        

	                
		
                    

                

			

				
											kreator 
					
                        #
						2 ноября 2011 в 22:45
                                                    0
                        				
			

			

									
						

							

								
									
								
								

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

													
				

			

            
        

	                
		
                    

                

			

				
											• Mike • 
					
                        #
						2 ноября 2011 в 22:59
                                                    +1
                        				
			

			

									
						

							

								
									
								
								

															контент обычно выводится через компоненты…
					                            						
													

													
				

			

            
        

	                
		
                    

                

			

				
											kreator 
					
                        #
						2 ноября 2011 в 23:09
                                                    0
                        				
			

			

									
						

							

								
									
								
								

															Эт очень хорошо! Вот я расставил модули в шаблоне (главное понят как это делается). Тогда как в шаблоне указать, что тут должен выводится компонент? И какие для этого шаблоны для вывода компонента взять и куда?
					                            						
													

													
				

			

            
        

	                
		
                    

                

			

				
											• Mike • 
					
                        #
						2 ноября 2011 в 23:22
                                                    0
                        				
			

			

									
						

							

								
									
								
								

															компоненты это: форум, блоги, люди, статьи и т.д всё что есть и активно в главном меню…
 шаблоны компонентов находятся в директории templates/ваш_шаблон/components …
					                            						
													

													
				

			

            
        

	                
		
                    

                

			

				
											kreator 
					
                        #
						2 ноября 2011 в 23:23
                                                    0
                        				
			

			

									
						

							

								
									
								
								

															
Код PHP:
<?php cmsBody(); ?>
всем спасибо! вот это надо вставлять (вдруг кто тоже искать будет)
					                            						
													

													
				

			

            
        

	                
		
                    

                

			

				
											• Mike • 
					
                        #
						2 ноября 2011 в 23:47
                                                    0
                        				
			

			

									
						

							

								
									
								
								

															проще сделать копию (директории _default_ ) стандартного шаблона, скопировать на комп и переименовать, после чего скопировать в директорию /templates и работать изменяя стандартные файлы…
 а чтобы «начинать с нуля» необходимо досконально знать структуру шаблонов и многих функций движка…