Simple guide to building your theme
Permalink 12 users found helpful
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.
(EDIT)
I have updated the attached file, you can find it just below in the paperclip, or I have attached it at the bottom with the post saying I updated the file.
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.
(EDIT)
I have updated the attached file, you can find it just below in the paperclip, or I have attached it at the bottom with the post saying I updated the file.
Thanks for the help. I'll add this, and post the revised version.
Thanks again.
Thanks again.
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.
Best Regards,
Jason
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.
Best Regards,
Jason
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...
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.
-Jordan
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.
-Jordan
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:
you should have this:
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.
$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.
the other thing to look at (in addition to what jordan said) is the link to your stylesheet location in images/style.css is it should be and you also call style.css in an invalid location later on, might want to delete that.
<?=$this->getThemePath()?>
<?=$this->getThemePath()?>/
Thank you both, I hope with that can work, I let you know... greetings :)
You can't remove all the tags from the <head> if one of them is a stylesheet. Removing them all isn't necessary.
SITE using PRINT or ECHO does not show the Text in my SITENAME variable...it only shows SITE on my theme. What I want is a variable to display the SITENAME information from the system information. So I can add the Site name to a theme. Seems a global variable is the closest thing to getting it. Is there a PHP setting that I need to set? ECHO/PRINT SITE is doing nothing for me except printing SITE.
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.
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.
So where's the guide...?
hm ,found it (tiny green paper clip icon)
..could have fooled me.
hm ,found it (tiny green paper clip icon)
..could have fooled me.
Hey ibadesigns, were you able to post your revision?
Thanks so much! This helped clear up some things. I'm really loving this software!
Hi ..
Thanks for tutor help :-)
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
Cheers
Thanks for tutor help :-)
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
Cheers
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.
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.
Hi,
Just looking for the revised file ?
Any luck.
Thanks,
Alan.
Just looking for the revised file ?
Any luck.
Thanks,
Alan.
Hey All,
I realize I am probably resurrecting what some might consider a dead thread. But I still do plan on giving out a revised version of this. I hope to continue to help everyone to build their themes.
I also thank those who have contributed, I have also learned much.
I realize I am probably resurrecting what some might consider a dead thread. But I still do plan on giving out a revised version of this. I hope to continue to help everyone to build their themes.
I also thank those who have contributed, I have also learned much.
waiting for the new versoin :)
I will be working on the new version this weekend.
For another discussion. I have also been working on a client instruction
book for concrete so your clients will have a go-to guide for editing their
sites.
For another discussion. I have also been working on a client instruction
book for concrete so your clients will have a go-to guide for editing their
sites.
Sounds great - I am very much looking forward to it. I am a designer and want to learn to make themes for C5 from scratch.. You work is very much appreciated!
In case you haven't seen it, there is a much less simple (but more detailed) theme guide in this how-to:
http://www.concrete5.org/documentation/how-tos/designers/making-a-t...
http://www.concrete5.org/documentation/how-tos/designers/making-a-t...
This should make a few people happy, and maybe a "Finally" might slip out too, which is okay. I am at this moment revising the guide to include all the suggestions made thus far.
Okay Everyone, after way too long, here is the updated version.
Can't wait to read through it!
HI Jordan been tearing my hair out to the point of boldness trying to customise my theme. I have uploaded my original index.html and default.php. Could you please kindly steer me in the right direction. The images wont show in my sms and editable areas seem fine
Thanking you in advance
Craig
Thanking you in advance
Craig
A few things I notice at first glance:
1) You have your header navigation in the HTML document's <head> tag, instead of the <body>. Move this code so it's after the <body> tag:
2) None of the quotation marks appear to be right -- make sure you are using "straight quotes" and not "curly quotes". The "curly quotes" would occur if you're using a word processing program like Microsoft Word or iWork Pages. Instead you should use a plain text editor (on WIndows, use Notepad++, or on a Mac use TextWrangler -- both are free downloads, just google for them).
3) You have your Footer area after the closing </body> tag. Move this code up so it's above the <?php Loader::element('footer_required'); ?> line:
Best of luck,
Jordan
1) You have your header navigation in the HTML document's <head> tag, instead of the <body>. Move this code so it's after the <body> tag:
<!-- Header with Navigation -->
<div class="box" id="header">
<h1><img src="images/images/logo_03.png" width="185" height="120" alt="logo"></h1>
<ul id="navigation">
<?php
$a = new Area(ëheader_naví);
$a->display($c);
?>
</div>2) None of the quotation marks appear to be right -- make sure you are using "straight quotes" and not "curly quotes". The "curly quotes" would occur if you're using a word processing program like Microsoft Word or iWork Pages. Instead you should use a plain text editor (on WIndows, use Notepad++, or on a Mac use TextWrangler -- both are free downloads, just google for them).
3) You have your Footer area after the closing </body> tag. Move this code up so it's above the <?php Loader::element('footer_required'); ?> line:
<?php $a = new Area(ëfooterí); $a->display($c); ?>
Best of luck,
Jordan
Thanks Jordanlev,
I will implement the changes, most appreciative for your help and for you taking the time to respond!
Thank you once again.
Craig
I will implement the changes, most appreciative for your help and for you taking the time to respond!
Thank you once again.
Craig
One other thing I noticed, I overlooked including this in my PDF, but if you are defining a static image that won't be controlled by Concrete, but simply by your theme, then you need to have
before the image path.
for example
Hope this helps, this should solve the issue with your images not showing up.
<?=$this->getThemePath()?>/
before the image path.
for example
<img src="<?=$this->getThemePath()?>/images/header/image2.jpg" />
Hope this helps, this should solve the issue with your images not showing up.
Another addition I was just thinking about as I was building another site. If you want to make sure things like your H1s and other elements of your sites style don't interfear with the concrete5 backend styling, preface all your divs with something like the name of the site. For example, the site I am working on now if called breakfast at tifinys, so I have each div start with tifinys, like so
This way your stylesheet will never interfere with the styling concrete5 already has in place for the backend.
#tifinys-masthead { blah blah blah } #tifinys-masthead h1 { blah blah blah }
This way your stylesheet will never interfere with the styling concrete5 already has in place for the backend.
I just started working with concrete5 and wanted to simply modify one of the themes, Greek Yogurt. Some of the help on the forum seems to address changes that are from an older version of Concrete5. I am using the latest one. I figured out how to change add a background image in CSS but in this theme there are pictures just below the header text area that change with each page. I edited each page and changed the picture but it seems to me that there must be a way to use my pictures in these rotating headers. Does it mean placing pictures in the database? Do I have to create a stack with my pictures and if so then how do I tell the theme to use them? I know html and css plus php etc. but not familar with the work flow. I mostly build sites using dreamweaver and most are static. Here is the site I am referencingwww.www.billanddonnasadventures.com...
Bless you man - appreciated.
Hey Everyone,
Just wanted to let you know that I will be releasing another version soon with some of the stuff I have learned and also adding in some of the things I overlooked and added in this thread.
Just wanted to let you know that I will be releasing another version soon with some of the stuff I have learned and also adding in some of the things I overlooked and added in this thread.
I really appreciate you taking the time to put this guide together.
Being a beginner friendly guide, you might want to add a warning not to copy and paste code directly from the pdf, but instead to type it out manually.
I should have known better, but I was bein lazy and paid the price.
<?php Loader::element(‘footer_required’); ?> (copied from ebook=wrong)
<?php Loader::element('footer_required'); ?> (typed manually=right)
Notice the subtle difference in block quotes? this had me stumped for hours throwing me this error.
Warning: include(/home4/mydir/public_html/mysite/concrete/elements/‘footer_required’.php) [function.include]: failed to open stream: No such file or directory in /home4/mydir/public_html/mysite/concrete/core/libraries/loader.php on line 92
Warning: include() [function.include]: Failed opening '/home4/mydir/public_html/mysite/concrete/elements/‘footer_required’.php' for inclusion (include_path='/home4/mydir/public_html/mysite/libraries/3rdparty:/home4/mydir/public_html/mysite/concrete/libraries/3rdparty:.:/usr/lib/php:/usr/local/lib/php') in /home4/mydir/public_html/mysite/concrete/core/libraries/loader.php on line 92
Lesson Learned
Being a beginner friendly guide, you might want to add a warning not to copy and paste code directly from the pdf, but instead to type it out manually.
I should have known better, but I was bein lazy and paid the price.
<?php Loader::element(‘footer_required’); ?> (copied from ebook=wrong)
<?php Loader::element('footer_required'); ?> (typed manually=right)
Notice the subtle difference in block quotes? this had me stumped for hours throwing me this error.
Warning: include(/home4/mydir/public_html/mysite/concrete/elements/‘footer_required’.php) [function.include]: failed to open stream: No such file or directory in /home4/mydir/public_html/mysite/concrete/core/libraries/loader.php on line 92
Warning: include() [function.include]: Failed opening '/home4/mydir/public_html/mysite/concrete/elements/‘footer_required’.php' for inclusion (include_path='/home4/mydir/public_html/mysite/libraries/3rdparty:/home4/mydir/public_html/mysite/concrete/libraries/3rdparty:.:/usr/lib/php:/usr/local/lib/php') in /home4/mydir/public_html/mysite/concrete/core/libraries/loader.php on line 92
Lesson Learned
Thank you so much for posting this note. Saved me tons of headaches
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