A quick guide for creating PyroCMS Theme from a normal HTML / CSS template
Get any HTML /CSS template & follow the steps below!!
We prefer:
http://www.freecsstemplates.org
http://www.oswd.org
1. Install PyroCMS.
2. Go to installation folder -> addons -> shared_addons -> themes
3. There are two pre built themes. Copy either “minimal” or “conjuction” folder & paste it .
4. Here, we’ll use folder “minimal” . You’ll now see a new folder named “Copy of minimal”.
5. Rename it with the new theme name as u like. I’ll name it “tutorial”
6. Open the folder .
7. Open file “theme.php” in notepad++ or any other IDEs.
8. In the file
Replace “ class Theme_Minimal extends Theme “ with “class Theme_Tutorial extends Theme “
PTR : Old theme folder’s name must be replaced with the new folder name u gave to it. The first letter of name should begin with the capital letter.
Replace the text in between the single quotation mark as relevant.
Save & close the file.
9. Delete all the files in CSS folder & put the css file of ur new template in that folder.
10. Goto folder “views” -> then folder “layout”. There is a file “default.html” which is supposed to be like “index.html” of HTML/CSS template.
11. Open “default.html” in editor.
12. Also open the index.html file of downloaded template in editor.
13. Copy all the content of “index.html” in to the “default.html” after removing the initial content of “default.html” .
14. Replace CSS linking code in head section
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
With
{pyro:theme:css file=”your_css_filename.css”}
15. If u hav javascript file in templates…create JS folder in “Tutorial” folder & paste inside it..
16. Linking Js file from head section
{pyro:theme:js file=”filename.js”}
In case u hav multiple files…use same code multiple times bt the order of js/css should occur as it is in template head section
17. Now..we break down the file “default.html” into multiple files.
18. All broken mini files are called partials and they should be kept in folder “partials”.
19. Let’s check the breaking process..
20. Create a new file named “metadata.html” & then cut the code inside <head> tag & paste it to “metadata.html”.save the file in folder “partials”.
21. Create a new file named “nav.html” & then cut the code inside <head> tag & paste it to “metadata.html”.save the file in folder “partials”.
22. You can cut contents in side the <div> tags as well.
Suppose: default.html has following code
<div class=”nav”>
<ul>
<li>home</li>
<li>contact</li>
</ul>
</div>
Cut the contents inside <div></div> tag and paste it to new file & name it “nav.html” & save it to “partials” folder
23. Similarly break other codes from default.html file & save to partials.
24. Now we learn to link the files in folder”partials” so that the code we broke is included in default.html.
In head section
<head>
{pyro:theme:partial name=”metadata”}
</head>
In <div> tag
<div class=”nav”>
{pyro:theme:partial name=”nav”}
<div/>
25.Now we learn to use images in the theme we working for.
26. copy the folder “images” from the downloaded template & paste it to the theme folder.
27.check CSS file & find the images it has been using..then cut all images from folder “images” except those being used by css file & paste it to new folder named “img”.
28.replace the code in other files.
initial code :- <img src=”button.png” alt=”submit”/>
New code :- {pyro:theme:image file=”button.png”}
29. to get the navigation menu set by from the admin panel in certain div
<div class=”menu_bar”>
{pyro:navigation:links group=”header”}
</div>
30. to get the content set by admin (dynamic content) in any div
<body>
<div class=”main_content”>
{pyro:template:body}
</div>
There go you. Your PyroCMS Theme is now ready to be used.
For Code Visit our Github page:
https://github.com/organizations/semicolondevelopers
Tutorial by:
Prajwol Shrestha
Semicolon Developers
