Edit Page, Use Sass To Create Our Theme's Stylesheets. If it is your own theme, you can decide which. You want to identify the aspects of the layout that will be exactly the same across all pages of the site, regardless of whether there's 1 column vs. 2 columns, left sidebar vs. right sidebar, etc. This theme is compatible with elementary Page builder and comes with fully responsive design. We can achieve this in a similar fashion as the default banner image. This might still make a suitable c5 theme, but it will be less flexible than a theme in which the image can be swapped out via an image block. These blocks are also easy to template, so you can see your changes easily without having to add a block. Google Analytics). First, let’s create the directory that’s going to hold out theme. However, some background images are not symmetrical and will not work with different layout page types. Once we've made sure that the default page type template looks okay (and tweaked styles as needed), we'll want to make it more reusable by splitting up the header and footer into separate files (called “elements” in concrete5). This search from will not work with concrete5 though, so you need to create a custom template. You may also want to remove lines about hr, as this will ultimately confuse users. Bootstrap files). This file contains the information needed for concrete5 to identify the package, install it, uninstall it, and optional custom code that this package adds to the concrete5 startup routine. Responsive Servicing Concrete5 Theme $48. A theme may either reside in the application/themes/ directory (for custom themes in a site), or within the themes/ directory found inside any active package. We want to make sure that the sidebar will be displayed properly regardless of which blocks the user adds, so we need to tell concrete5 to wrap each block's html with those elements. Back in the default.php file, delete the code you just copied, and replace it with this: Create a new file in the “elements” directory called “footer.php”, and put this code at the top of it: Copy the portion of your template that you've decided will be the footer element and paste it in at the end of the new “elements/footer.php” file. Deciding which portion of the template constitutes the header and footer takes some thought. However, one potential side-effect of this is that any url's in the stylesheet that are surrounded by quotes will not work – so make sure you're removed those. For example, if your theme's name is “Clean Red Theme”, the folder name would be “clean_red_theme”. Visit the Marketplace > Find a Partner > Pixo offers Concrete5 website design, add-ons, installs, tutorials, ecommerce & theme design services for Concrete5. The solution is to change your template's stylesheet so that it applies the body style to a wrapper div instead. Concrete5 themes can change the look, style, and functionality of your website simultaneously. Useful for both experts and noobs in concrete5, as it covers ALL you need for creating a theme. It’s assumed that you have worked with HTML before and can also read code as you’ll see some basic PHP and JavaScript code. Add the wrapper div to the page type template by adding. We also left the “clearing div” element (
) at the end because it is important to the layout of the area as a whole. Concrete5 will allow you great flexibility and variety of features. Within the packages/dreamrs directory, run. Activate this theme (log in to your development site, go to the dashboard, click “Pages and Themes” on the left sidebar, find your new theme in the list, click the “Activate” button), then change the home page to use this theme (return to website, click “Edit Page” in the toolbar, click “Design” in the toolbar, choose your new theme, click “Save”, click “Exit Edit Mode” in the toolbar). They come with plenty of theme colors and custom templates. Browse the responsive themes & mobile themes that have been developed by our community. Other standard areas are 'Header' (usually for a banner image) and 'Footer' (for extended content at the bottom of the page – e.g. Right now concrete5 only supports background color customization and color customization, so don't waste time on other things. In these cases it may make sense to make it a new area that you can add content to. This extended content box is for miscellaneous things like twitter/facebook links, related content, and secondary navigation, and often they are styled differently from the rest of the page. Identify the editable areas of the template and replace the sample content with Areas: you would replace all of that with this code: Note that we took out all of the
elements, but left the surrounding
tags because they are essential for the structure of the page and have nothing to do with the actual content inside. For example, if the designer made a background image that had a line down the middle, this would work perfectly for a two column layout, but not so much for left/right sidebar and full layouts. Could this page use improvement? First, create a file named controller.php at the root of the package. First, let’s create the directory that’s going to hold out theme. Many css templates will have a built in search from block with some styling. Example: http://www.oswd.org/design/preview/id/3699 – this template's menu is a series of tags inside a
. Once you've decided on a template, download it and unzip it. When submitting a theme to the c5 marketplace you will most likely want to remove this, as you want the user to be able to decide. For example, if you have something like this in your main.css file: You would put the following in typography.css: And that would leave you with this in main.css: Rename the “index.html” file to “default.php” – the template is now a concrete5 page type (“page type” is concrete5's word for template). One page concrete5 themes help in making websites powerful and attractive as well as professional. This tool is absolutely essential when trying to diagnose html / css layout issues, and also lets you quickly make changes to a page's html or css to see what effect it will have, without having to constantly reload. Depending on how the template was designed, it is possible that the Concrete5 toolbar interferes with the layout when you are logged in (e.g. The name would then be theme_clean_red_theme. If you are converting a theme then it will most likely have a license. But if you want to convert a theme and package it up for the marketplace, there are many more steps and details involved. Make sure all images that came with the template are in a sub-folder called “images” (e.g. To create these other page types, simply copy the default.php file and rename it “left_sidebar.php”. The !important declaration in css causes an element to override other declarations of it later. Then look for the link on the dropdown that says submit to marketplace. If the user is starting with a fresh site and has sample content installed, this isn't a problem because the sample content already contains an auto-nav block (using the “Header Menu” custom template) in the 'Header Nav' area. You can also provide instructions on how to style them and what to apply, but still don't know if the user will add the correct type of content. It extends the Theme class mentioned earlier, which all custom PageTheme classes must do. These blocks are very common and you will want to be sure that they look okay when your theme is installed. Usually, the site name/title, banner image, and top-level navigation will go in the header element as well (but not always, depending on how your template html is structured). If every single portion of sidebar content has the same surrounding tags, then chances are they will be needed in your page type template as well. viola~ if you edit the new theme you will see the below result. You can read more about these here. The downside to this method is that the end-user will not be able to remove the auto-nav block or change its options – so they can't swap it out for a different navigation block (e.g. Example: http://www.freecsstemplates.org/preview/conjuction/ – this template is also designed for a blog. A title that is longer than a dozen or so characters will extend outside the box. Some templates use images for their navigation menus. While this may seem like a hard thing to do, it is actually remarkably easy. This tutorial will show you how to convert a free template into a Concrete5 theme, from selecting the right kind of template all the way to packaging it up for the marketplace. It will not work out-of-the-box with concrete5's auto-nav block. Is it a blog template or a generic site template? Now we will create the first version of our class: PageTheme is the required name for this file. Because a theme is technically a package that installs a theme and not a theme, you can also perform normal tasks in the controller.php. Tags: blog, business theme, clean, concrete5, corporate, creative, customization, elegant, gallery, … Have a close look at the layout of this page (if you didn't install sample content, you should add some blocks to every area so you can see what it looks like with content on the page). Find a theme that you wish to install and click on it. Before we even start building our theme or the custom functionality it contains, let’s create that package I mentioned earlier. If you're a web developer and don't use firebug yet, well it's time to start! They are extensively used in various websites to create stunning effects. They provide a responsive layout and come with sample content to publish a website quickly. Here are some specific things to look for when choosing a template: A majority of the free templates you will find on the internet were designed with blogs in mind. You may actually want to trim down extra content from index.html first, so it is easier to identify text areas. Really appreciate all your work on it. Also, to avoid unmatched html tags, it is best to balance any opening tags that appear in the header element with closing tags in the footer element (for example, if the and
tags are in the header element, you want the ”
” and ”” tags in the footer element). Then click submit once you are done and a group of your peers will review it and hopefully approve it. If you look at the html, you'll see that the scratch lines are a background image applies to the ”.post .meta” class – that is, content inside an element whose class is “meta”, which is itself inside another element whose class is “post”. "Creating Concrete5 Themes" is a practical, hands-on guide that provides you with a number of examples that will teach you how to create powerful concrete5 themes, change the look of content block elements, and even make your site ready for mobile devices. The only methods we’re defining in our class return the name and the description of the theme. Concrete5, however, is more of a general-purpose CMS and the majority of the sites built on it are probably not blogs. Create a default.php file But if you want to convert a theme and package it up for the marketplace, there are many more steps and details involved. '); Now let’s import the base theme class that our PageTheme class must extend. These are usually called in the css, which is not changeable by the end user without ftp and image editing. For example, if our template looks like this: We would put this portion into the header element: We would put this portion into the footer element: And we would leave this portion in the default.php page type template file: Note that we added an html comment (e.g. You then add Package after it because it is a package to lwt c5 know it can install it. For most themes you don't have to add any extra logic to get them to uninstall correctly. Just by adding a rule for .button, users can then output text with that class applied with one click, no custom templates. Example: http://www.freecsstemplates.org/preview/woodenly/ – The title (“Woodenly”) is constrained in the red box. When Submitting to the marketplace you need to have a file called icon.png that resides in the root of your package directory. Then add the Guestbook block to the bottom of the main content area. You can get innovative and creative concrete5 themes free and use them to create your pages by simply editing the base, adding and removing content and putting all data in relevant fields which are already set in the themes. If you don't do this, the call to “$this→getStyleSheet('main.css')” (which happens in a later step in the tutorial) will not work. We don’t need to give the theme the directory theme_dreamrs -- dreamrs by itself would be just fine. If this is the case, we do not want to make it easy for the end-user to remove this (the template author was nice enough to give it away for free, after all). However, a concrete5 theme needs to be flexible enough to handle any number of pages and any page names, which means the navigation menu must work with only text. This will make it so that text is displayed in the, Only move the following properties (and only when they're in the elements listed below this list). Example: http://opensourcetemplates.org/templates/preview/organic-paper/index.html – this template's menu contains images of feathers, which will not work in concrete5. We’ll be extending this class. Our certified partners can deliver top tier custom services and solutions. Most banner images are designed to be a specific width and height. Some Basic licenses are. I say what has changed in the changelog. Example: http://www.freecsstemplates.org/preview/yosemite/ – the image of the lake is a CSS background-image, and hence cannot be changed. Handles must be unique-- that is, not in use by another theme. Then cocpy the view.php from the search block inside this folder and give it a descriptive name. Note that the auto-nav block outputs
  • for the currently-active page, which is probably different than the class used by the template (for example, the above sample uses
  • ). For images that you want to hard-code into the template, you will need replace their “src” attribute with a concrete5 path function ($this→getThemePath). ””) to the closing tags in the footer element so that we can tell which opening tag they match in the header element. Assuming the template implemented its navigation menu as an unordered list, it is very easy to convert it to our concrete5 page type by replacing with a 'Header Nav' area. Some templates style their sidebar boxes (and other boxes through the page) using very specific CSS rules (for example, a background image applied to an

    element). In general I use Open Source for themes that I made/designed that I'm giving away, creative commons for converted templates, and marketplace license for paid themes. For the sidebar, take a look at how each item is coded in the template's html. Example: http://opensourcetemplates.org/preview/green-hosting/ – this template's menu contains only text, so it will work with concrete5. for example, it a template calls for #container .meta-title, then you may want to change that to #container h5, so that users can add it. it pushes down some portions of the page but not others). You'll then be taken to a form submission page where you fill in your package details. Make sure that any image references are *NOT* surrounded by quotes. Many templates include a large banner image at the top of the page. Submission type is theme, then input your themes handle (outer directory name), short and long description, and if you have a demo input that. Blogs are much more “templateable” because they all generally follow the same structure: main content area contains a list of items with a title, author, date, excerpt, tags and a link to comments; sidebar contains a search box, a list of categories, and a list of links.