    
|
|
|
Like most content management systems, PyroCMS uses front-end themes. Though PyroCMS themes are built a bit differently than what you might be used to from other systems, they’re still quite easy to create. They’re so easy, in fact, that very little PHP experience is required to assemble them!
PyroCMS themes consist of HTML, images, CSS, and JavaScript, arranged into the following supported folders:
While these folders will no doubt look familiar to you, the "views" folder makes the most sense within the context of MVC. When building a theme for PyroCMS, you are really building the views (including assets) of a MVC patterned application. These views consist of a master layout file and multiple partial files (i.e. a header.html or footer.html) that shares presentation logic between different layouts. We’ll discuss this more shortly.
To get started building your first PyroCMS theme, create the supported folder structure in one of the two places that themes may reside within an instance of PyroCMS:
addons/shared_addons/themes (for themes available to all sites)
Or:
addons/[site-name]/themes (for themes available to only one specific site)
Once you have the base theme folder containing the supported folder structure created, the first file that you'll want to add to your theme is theme.php.
addons/shared_addons/themes/[my-theme-name]/theme.php
This theme.php file contains all essential details for your theme, including its name, author, version, etc. In a way, this file is similar to the comment block found at the top of a WordPress theme's style.css file. Here’s a basic example of a theme.php file for your PyroCMS theme:
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Theme_Foo extends Theme
{
public $name = 'Foo';
public $author = 'Zac Vineyard';
public $author_website = 'http://zacvineyard.com';
public $website = 'http://example.com/themes/foo';
public $description = 'The antithesis theme to your Bar theme.';
public $version = '1.0';
}
/* End of file theme.php */
Please take note that this file extends a PyroCMS class, called Theme. Also, because you are declaring a PHP class in this file, you'll need to make sure that the name of the folder containing your theme is used in the class declaration. So, if the folder housing your theme is called, "foo," the class created in your theme.php should be named, Theme_Foo (instead of Theme_Custom, as shown in the example within PyroCMS' documentation).
Once you have created your theme.php file, you can login to your PyroCMS control panel and view your theme listed in the Themes module.
All layouts files for a PyroCMS theme exist in one of two locations:
addons/[site-ref]/themes/[my-theme-name]/views/layouts/
Or:
addons/shared_addons/themes/[my-theme-name]/views/layouts/
Every theme should have a layout file, named "default.html" in one of the locations listed above. Additional layout files are optional; I'll show you how to add more layout files in a moment. First, it’s important to review the contents of a layout file.
Layout files in PyroCMS are built using HTML and a tag parser, referred to as the Lex Tag Parser. This is what a very basic PyroCMS layout file looks like:
<!DOCTYPE html>
<html>
<head>
<title>{{ template:title }}</title>
{{ template:metadata }}
</head>
<body>
<h1>{{ template:title }}</h1>
{{ template:body }}
</body>
</html>
The special tags you see in this bit of HTML are Lex parser tags. If you've ever used Smarty templates in PHP, these may look somewhat familiar. The primary benefit to using Lex parser tags in your layout files is that you don't have to put PHP directly in your views (remember, we're using MVC), which gives you the best chance of creating PyroCMS themes that follow the don’t repeat yourself pattern.
The example that I've given above is simple, of course, but Lex parser tags are quite powerful. They can loop through data, work with attributes, and more. Learn more about the Lex Parser in the PyroCMS documentation.
A more complex PyroCMS layout file looks like this:
<!DOCTYPE html>
<html>
<head>
<title>{{ template:title }}</title>
{{ template:metadata }}
{{ theme:favicon file="favicon.png" }}
{{ theme:css file="style.css" }}
{{ theme:js file="site.js" }}
</head>
<body>
<div class="header">
<div class="logo">
{{ theme:image file="logo.jpg" alt="Your Cool Logo" }}
</div>
<div class="nav">
{{ navigation:links group="header" }}
</div>
</div>
<div class="content">
<h1>{{ template:title }}</h1>
{{ template:body }}
</div>
</body>
</html>
You'll notice that this layout file, using Lex, includes assets, like CSS, JavaScript, and images. Using Lex tags and HTML allows PyroCMS developers to build layout files very quickly.
Partials in PyroCMS, which stands for partial layouts, allows you to break layouts into reusable parts or sections. These sections can then be loaded by different layout files. This keeps you from typing the same code (header, footer, etc.) into multiple layout files.
Depending on where you've placed your theme files, partials are created in one of two locations:
addons/[site-ref]/themes/[my-theme-name]/views/partials/
Or:
addons/shared_addons/themes/[my-theme-name]/views/partials/
Partials are loaded into layouts using this Lex tag:
{{ theme:partial name="partialname" }}
This Lex tag operates exactly like a PHP include statement – similar to one that you would find in WordPress or other themes. The code below is a simple example of a PyroCMS layout that takes advantage of partials.
{{ theme:partial name="header" }}
<div class="content">
<h1>{{ template:title }}</h1>
{{ template:body }}
</div>
{{ theme:partial name="footer" }}
The contents of the header.html partial and footer.html files are, of course, the HTML we'll need to reuse from the template in our previous code example above. One quick pointer: there is no limit to the number of partials that you can use in one layout. Additionally, partial files may contain any combination of valid HTML and Lex.
To add another layout to your instance of PyroCMS, create one more layout file in your theme's views/layouts/ directory. This file may receive any name, but it’s a good idea to name it as descriptively as possible – like about.html.
For added flexibility, you can make use of as many layout files as you'd like. When you edit or create a Page Type in your PyroCMS control panel (Control Panel→Pages→Page Types) and select your desired file from the dropdown, all the layouts in your theme's layout file will be available to use.
PyroCMS is able to easily display separate layouts for mobile and desktops. To use this feature, move your layout files into a folder, called "web" within the views folder, so that your default layout will be located here:
[your-theme]/views/web/layouts/default.html
When a user accesses your site using a desktop browser, the primary layout files in this location will be used. If the user accesses your site using a mobile device browser, users will be supplied with the mobile layouts that you've created in this location:
[your-theme]/views/mobile/layouts/default.html
This feature works with multiple layout files.
Please take note of this warning found in the PyroCMS documentation: "PyroCMS does not consider the iPad a mobile device, so it will not load your mobile layouts if the user is accessing your site using an iPad." If, however, on your site, you'd like to make an iPad recognized as a mobile device, you can change the "user_agent.php" file within the config/ directory to make the iPad recognized a mobile device.
Using this article as a guide, you can see how easy it is to create a theme in PyroCMS. The code examples provided are quite simple, so I encourage you to explore the PyroCMS documentation to become more experienced with layouts, mobile layouts, partials, and the Lex Parser in PyroCMS. Have fun!
]]>
Rose Carignan is majoring in Computer Engineering
Catherine Rossbach is a Math/Physics major with a minor in Computer Science
Shari Kurland is majoring in Computer Science
Neena Paul is majoring in Computer Science
Shawn Lupoli is an lecturer in Computer Science
The Artemis Project is a five-week summer program held at UMBC for rising 9th grade girls interested in computing. Artemis 2013 will be in session from June 24 to July 26. Camp will be held from 9:00am-3:00pm Monday through Friday on the UMBC campus. The Artemis Project program originated at Brown University in 1996 and is being brought to UMBC by Professor Marie desJardins through her contact with Amy Greenwald at Brown..
Creative and motivated girls who are curious about mathematics, science or computing and are entering ninth grade in the fall of 2013 can apply. No prior computer experience is necessary or expected.
UMBC's Artemis Project program will be led and taught by four accomplished undergraduate women from UMBC's Department of Computer Science and Electrical Engineering. Shawn Lupoli, who is a lecturer in UMBC's Computer Science program, is the faculty advisor. The Artemis staff are diverse and have a wealth of knowledge and experience in computer science, computer engineering, mathematics and the sciences.
Participants will spend a part of each day learning about different topics in computer science such as computer architecture, cryptology, artificial intelligence and robotics. Students will spend time in the computer lab developing programs in Alice and Python and using applications like Adobe Photoshop and Dreamweaver.
Over the course of the five weeks the group will go on several field trips, listen to and interact with guest speakers to hear about their jobs or research and participate in fun outdoor activities. The field trips will take place every Friday to places like NASA's Goddard Space Flight Center, the Baltimore Science Center and the National Cryptologic Museum. At the end of the program, students will have a day where they can showcase the work they have done for their families and members of the UMBC community.
By the end of the program, students will have had a rigorous introduction to computer science and engineering and applications of technology. They will have learned to think more conceptually and have practical skills that they can carry with them wherever their future leads.
The fee for the camp is $1000, which covers five weeks of lessons, field trips, lunch, and a t-shirt for each student. Financial aid is available. You can find information and application forms on the 2013 UMBC Artemis site.
For more information you can contact one of the people involved i.n this summer's camp. The coordinators are all women who are undergraduate studnets who are studying either computer science or computer engineering.
The faculty advisor for the 2013 Artemis Project camp is:
|
|
|
Send questions and resumes to jobs@cal.org. The Center for Applied Linguistics (CAL) currently has the following job vacancies. Click on each position title to learn more. Visit the jobs section of our website to learn more about CAL and the application process. Interested parties should send resume and cover letter: Mail: Electronically: CAL offers a comfortable work environment with competitive compensation and an excellent benefits package. We are conveniently located two blocks from the Tenleytown/AU Metro Station on the Red Line. The Center for Applied Linguistics is an equal opportunity employer and does not discriminate in hiring or employment based upon race, color, religion, national origin, sex, age, marital status, handicap, or any other reason not related to employment. In accordance with USCIS regulations, all successful applicants will be required to show proof of their legal right to accept employment in the United States. |