sending...
Concrete5 – How To Set Up a Basic Concrete5 Template
Happy holidays! Here’s a free how-to about creating a simple Concrete5 template.
I’m beginning a new website for Bogies Bar (map). The client desired a simple and effective way to manage and update content on their site without having to pay an IT support person each time. As a result, I’ve opted to use a wonderful new, open-source content management system, called Concrete5. The Concrete team’s tagline for the product is “A CMS made for Marketing, but strong enough for Geeks!” Essentially this means a marketing team that has minimal experience with web design and scripting languages can still easily and effectively manage a C5 website. At the same time, C5 is extremely extensible, and web-designer geeks like us can write add-ons and themes, and even sell them in the C5 Marketplace!
I’ll provide some more detailed how-to’s after the first of the year, but this CMS is shaping up to be extremely helpful to many businesses looking to make more extensive use of their internet presence. I’ve implemented websites in many similar softwares, such as Joomla, WordPress, Drupal, and ExpressionEngine. I can confidently say that C5 is by far the most client-friendly, elegant solution I have seen to date.
In order to get a Concrete5 based site up and running, you will need a web-server with PHP5 support. The following is a brief explanation of how to get a C5 site running, and how to implement your own theme.
- First, grab a copy of C5 and copy it to your web-server. Then, navigate there in your favorite web browser, and proceed with the installation. You will likely need to create a new MYSQL database on your server to link the installation to.
- Create a new directory in /Concrete5/themes/ (for the sake of this tutorial, we will name the theme’s directory “b_rad”)
- Create a text file, named “description.txt”, and save it under /Concrete5/themes/b_rad/. The first line of text in this document should be the theme’s name, and the second line should contain a brief description of the theme.
- Create a 120px by 90px screenshot of the theme, and save it as thumbnail.png in /Concrete5/themes/b_rad/.
- Copy in an existing static HTML/CSS theme, complete with any CSS and Javascript directories if they exist. If you don’t have a theme designed yet, you can design it yourself, or download a free theme for testing purposes.
- Rename index.html (or any HTML page you want to create a Concrete5 page type for) to default.php, and open it with your favorite text editor. Keep in mind that default themes require you to have at least a default.php, but many other addons require view.php, left_sidebar.php, and right_sidebar.php.
- Modify any relative links for CSS and images — they will look like this:
- Completely replace the title element in the header like so:
- Add this line to the footer (before the body is closed)
- To create editable regions such as navigation, divs, and ad space, implement the following code:
- After this, you can continue creating more editable regions. When you’re ready to test the implementation of the theme, browse to the Concrete5 administrator dashboard, and activate the theme! Enjoy.
<link rel="stylesheet" type="text/css" href="css/style.css" />
<img src="images/logo.png" />
So change them to this:
<link rel="stylesheet" type="text/css" href="<?php= $this->getStylesheet('css/style.css'); ?>" />
<img src="<?php=$this->getThemePath(); ?>/images/logo.png" />
<?php Loader::element('header_required'); ?>
<?php $left_nav = new Area('Left Nav'); $left_nav->display($c); ?>
This creates a new editable region, referred to as $left_nav, that is recognized by Concrete5.
concrete5 – incontext editing makes running a website simple on Vimeo.
c5 = pure awesomeness
Just a few minor notes on your examples here…
The “<?=" sequence (which is short for "<?php echo" is no longer supported in many recent versions of PHP (I'd specify which one specifically, but I forget… I think somewhere in the 4.x series) and should be avoided for compatibility. It's only a few extra characters to replace it with "<?php echo" (I know it's not as nice looking for simplistic code) and ensures compatibility with newer PHP installations.
Also, your last bit of code (for editable regions) defines a variable called "$left_nav" – I first thought there was a space in the variable name, but it just seems your choice of colour scheme and font size or something has caused your undscore to appear invisible in your code snippet. May want to double check that
… actually, it appears the problem is with line 220 of style.css defining .contentBlock to have a line-height of only 20px. If you adjust it to 22px, you can now see the underscore. It seems your font size (correction… the browsers chosen size, since it seems you haven’t specified one) is slightly too tall for your defined line height.
This doesn’t seem to work for me, the page appears unstyled as if it cannot find the css styles sheet.
Rich — did you ensure that you placed a ‘/’ after the ?> here? :
< ?php $this->getThemePath(); ?>/images/logo.png" />Being the creative & adventurous person that I am, I decided to take on the task of purchasing a domain & designing a website. It’s been 2 weeks, & the moment I am stuck & frustrated. I wish someone could explain to me how I could add text & pics to the site. Is there a Concrete5 for Dummies or Idiots? Or Explain Concrete5 to me like I’m a 4 year old. My goodness!
@Ani:
I would research more on the official Concrete5 documentation. If you have specific questions feel free to email me through my contact page, and I will personally assist you.
http://www.concrete5.org/documentation/
Hi it’s a Nice tutorial… Here is another one, http://www.altinkonline.nl/tutorials/concrete5/make-a-concrete5-theme/.
Very easy tutorial:)
hi i use bluehost and installed concrete5 via simple scripts I can not for the life of me find the css files or where the style sheets are! Every e book and tiuorials i read have a DIFFERENT screen shot of the concrete 5 interface anyone else getting what I am getting.
Randi,
They are located in the theme file you have selected for your Concrete installation. The theme directories are located in your web server, at the path /themes. I believe Yogurt is the default theme, but you may have added your own so be sure to edit the correct theme. I don’t believe you can edit CSS from the C5 dashboard, if that’s what you’re trying to do.
I know this is an old thread, but I’m just getting started with Concrete5, and I could use some help:
I have worked through a couple of “customizing a theme” tutes but always run into the same problem: I can’t get the admin/edit header bar to be visible. It looks like a CSS problem: the space is there, reserved, as if the header were set to “visibility:hidden”, but there’s no bar.
I’ve gone through the template CSS and there doesn’t seem to be anything that would account for this.
Any suggestions?
Thanks!
Dave
Have you been sure to include the
< ?php Loader::element('header_required'); ?>line in your head?