Hey guys, I had found a lot of information about building themes on concrete5, but much of it I found was in a few different places, other parts I had to search a little for, so I thought I would provide a one stop place for everything I have learned about building themes. This guide is everything the quick tutorials have, about putting in the header, the stylesheets, and the content areas, plus limiting blocks in the content areas, putting a login link, and about theme customization.
I am sure I will revise as I learn more, but for now, here is version 1.
If there is anything else you feel I should include in this guide, please let me know,
Thanks and enjoy.
Here are some things I noticed:
* In general, you should not use php short tags ("<?=") in tutorials because many servers have this option turned off by default so people who don't know about configuring php.ini files will be really confused as to why it's not working.
* Step 1: Remove ALL tags from the <head> (not just <title>)
* Step 2: You don't need to put the stylesheet in the root of your theme folder -- you can have it in a subdirectory and pass the path the getStyleSheet() -- for example, $this->getStyleSheet('css/style.css')
You might also want to mention that you cannot have quotes around image paths in your stylesheet if you use the getStyleSheet() method -- for example, "background: url('../images/bg01.jpg')" won't work -- it must be "background: url(../images/bg01.jpg)".
* Step 3: You may also want to mention that for things like sidebars where every item should be in a <div> or <li> tag, you can do something like this:
* You might want to mention that you need to include this:
<?php Loader::element('footer_required');?>
just before the closing </body> tag, otherwise google analytics code that's pasted into the dashboard won't appear on your site.
* You might want to explain how to create a separate header.php and footer.php file inside an elements folder (like the built-in themes do) -- if you have several different page types, this makes it much easier to update header info that's on all pages in one fell swoop.
It's also worth mentioning that when creating a custom template especially in a development environment it is common to install concrete5 in a sub-directory. When doing this if you name the theme directory the same name as the concrete5 install directory the installation of the theme will fail silently.
For instance if you are developing a site and you create a sub-directory such as /var/www/mysite and then you create/download a theme and name that directory /var/www/mysite/themes/mysite your theme will not install. The page will refresh and no error message will be shown, the thumbnail, description, and install button will remain.
A simple practice such as appending _theme to any theme directory you create will save you the trouble of searching for the resolution and searching through your code questioning if you have done something wrong in setting up your template. I hope this saves someone some time. So if you are having the issue I described, changing the directory name of your theme will likely resolve your issue.
Hi, I hope you can help me, I´m very lost, I just don´t know how to begin, I want to make my own theme, I saw the video and I try but it doesn´t work, could you recommend me some others links?
Thanks...
Unfortunately there aren't a ton of tutorials available for this. Can you give a little more detail about what exactly the problem you're having is? Or do you just have no idea how to start at all?
Are you familiar already with how HTML and CSS work? If not, then that's something I would learn first (there are tons of tutorials and books available for this -- it has nothing to do specifically with Concrete5, just learning how to design and build a normal web page with HTML and CSS).
If you are already familiar with HTML and CSS, and have a sample page ready to go, can you post it here (just the HTML page needs to be posted)? I can give you some pointers based on your HTML that should help.
Hi, thanks for the help, well I was working in an example and I made it like the video but I don´t have many php knowledge, here´s the attach of my html.
You have a little typo in your code. On line 71, you're missing a closing quotation mark, so instead of this:
$a=new Area('lateral_der);
you should have this:
$a=new Area('lateral_der');
Other than that, I can't see anything wrong with your theme. Although I would move the style.css out of the images folder (and change the path referencing it from default.php) because it doesn't make sense to have it there -- but this is just a "good housekeeping" thing, not a requirement of concrete5.
Another thing I would mention is a note on sticking with common content Area names. I see a lot of templates that people created and they make up their own Area names. This causes much confusion when a user switches to a different theme because all of their content blocks are now gone.
Some common names are:
Main - Main content area
Sidebar - Is used for sidebars, right and left. If a user switches the page type and the theme was designed properly, the sidebar content will switch with it.
Footer - Footer stuff like copyright or navigation
Header Nav - Main menu area, usually an autonav
Header - Can be anything, default content has a large image.
I done a simple one with only one pagetype (default.php)
but when using admin dashboard I still see diff. page types
as leftsidebar fullwidth and so on
Can the dashboard be customized to only show the pagetypes for
the specific theme .. eg: only 2 pagetypes
Hey,
Yes you can customize your page types to show only the ones you want. You can even customize your page type icons too.
To delete unwanted page types, go to pages and themes, then in the top of the pages and themes section you will see a page types icon. Click on the settings button of the type you want to delete. In the settings window, you will now see a delete button.
If you want to customize the page type icons to your pages, create a file set called "Page Type Icons". Anything you put in that file set can be assigned to a page type.
Here are some things I noticed:
* In general, you should not use php short tags ("<?=") in tutorials because many servers have this option turned off by default so people who don't know about configuring php.ini files will be really confused as to why it's not working.
* Step 1: Remove ALL tags from the <head> (not just <title>)
* Step 2: You don't need to put the stylesheet in the root of your theme folder -- you can have it in a subdirectory and pass the path the getStyleSheet() -- for example, $this->getStyleSheet('css/style.css')
You might also want to mention that you cannot have quotes around image paths in your stylesheet if you use the getStyleSheet() method -- for example, "background: url('../images/bg01.jpg')" won't work -- it must be "background: url(../images/bg01.jpg)".
* Step 3: You may also want to mention that for things like sidebars where every item should be in a <div> or <li> tag, you can do something like this:
* You should mention that you need to create a view.php file -- copy your default.php file and replace:
with:
* In addition to showing a login link, you might also want to show how to output a link to your site (or just the sitename):
and how to output the copyright date in the footer:
* You might want to mention that you need to include this:
just before the closing </body> tag, otherwise google analytics code that's pasted into the dashboard won't appear on your site.
* You might want to explain how to create a separate header.php and footer.php file inside an elements folder (like the built-in themes do) -- if you have several different page types, this makes it much easier to update header info that's on all pages in one fell swoop.
Hope this helps!
-Jordan