Justin Frydman - Web developer/designer from Canada » CMS

How to adjust your Concrete5 theme while the edit bar is visible

defunct — Wed, 30 Jun 2010 21:04:03 +0000

A lot of people have the problem that when you are logged into the Concrete5 backend, the edit bar can move things around in your design. Here is an easy way to add a specific class to your tag so you can adjust positions of anything on the page while the edit bar is visible.

Replace your body tag in your Concrete5 theme’s header.php with the following:

canWrite()) ? ‘class=”c5-edit-mode”‘ : ”; ?> >

When you are logged into the dashboard and viewing pages though the sitemap, your body tag will look like this:

Now you can adjust your CSS, able to single out any classes or IDs.

Here is a section from my stylesheet:

body {

margin: 0;
padding: 0;
color: #4d4d4d;
font: 12px/13px Arial, Helvetica, sans-serif;
background: #000000 url(images/bg.jpg) top center no-repeat;
}

/* Move our background down by 48 pixels while the edit bar is visible */
body.c5-edit-mode {
background-position: center 48px;
}

Slow Speeds and Speeding up Concrete5 5.4

defunct — Tue, 11 May 2010 14:46:25 +0000

*UPDATE: Read the comments, the server hard drive was dying and that is the reason why files were never being cached. However these methods will still help speed your concrete5 website up.*

If you’re using the new Concrete5 5.4.x package you may have noticed your website has slowed down from previous versions. After doing some NET tests with Firebug we can see where the bottleneck presents itself.

Default Concrete5 5.4 Speeds

After examining the chart you can see that loading Concrete5′s jquery takes up the most time per page, at over 1 second in this case. Under normal circumstances we could live with this as it will get cached next load, let’s click on the page again:

Cached load of Concrete5 5.4

As we can see, ccm.base.css, jquery.js and ccm.base.js are being loaded every single time a page load is executed. These files seems to load insanely slow, especially the extra second it takes to load jquery. My theme is currently not editable, which slows down your site even more, causing more CSS files to be loaded every page load. The CSS files being loaded in this example are only needed when you are logged in editing pages and do not need to be loaded on the front-end.

Your tests may very depending your server setup, location from server and of course your template itself, but in the end this may be overhead you don’t need, so let’s speed up concrete5 page loading.

If you do not need jquery at all you can follow this guide on the Concrete5 website. This will stop jquery and all the non needed CSS files from loading in your front-end giving your website a snappy boost. If you do need jquery, I recommend loading it directly from google’s servers. This can speed up performance significantly and allows for actual file caching.

1. Copy concrete/elements/header_required.php into your local elements/ directory.
2. Open the file and find these lines:

$this->addHeaderItem($html->css(‘ccm.base.css’), ‘CORE’);
$this->addHeaderItem($html->javascript(‘jquery.js’), ‘CORE’);
$this->addHeaderItem($html->javascript(‘ccm.base.js’), ‘CORE’);

3. Replace them with the following, loading jquery direct from Google’s servers and not using their API for better performance:

if ($u->isRegistered()) {
$this->addHeaderItem($html->css(‘ccm.base.css’), ‘CORE’);
$this->addHeaderItem($html->javascript(‘jquery.js’), ‘CORE’);
$this->addHeaderItem($html->javascript(‘ccm.base.js’), ‘CORE’);
} else {
echo ‘’;
}

Results of our modifications

Non-cached load after Concrete5 modifications

Already we have taken our page load down a bit from 2.68 seconds to 2.41 seconds. Compare Concrete5′s 1.16 second jquery loading to Google’s 91 millisecond time. A significant difference. Now let’s compare a cached page load.

Cached page load after Concrete5 modifications

At last, a full page cache! Compare this from our previous cache test of 1.55 seconds to our new 619 milliseconds!

Social Icons Block

defunct — Fri, 04 Dec 2009 08:53:55 +0000

I’m pleased to release a simple block called Social Icons. It functions similar to what you see on the left of this page, by entering a URL into the block, the icon and link will appear automatically pre-formated that can be changed with CSS. This block is free!

You can download the block on the Concrete5 Marketplace.

The icons are created by Rogie and be used free of charge on non-commercial websites.

Enjoy!

Download Social Icons 1.0

Featured member on the concrete5 community!

defunct — Tue, 20 Oct 2009 17:26:07 +0000

I’m please to announce I have been selected as a featured member on the concrete5 community page. Concrete5 certainly has changed the way I build websites and applications and I am proud to be apart of such a great open source community! If you haven’t joined the forums yet, now is a good time.

How to disable Concrete5 site statistics

defunct — Sun, 23 Aug 2009 21:31:08 +0000

Concrete5 has built in site statistics tracking but it’s very simple and records every hit, not checking if the user is unique. This can create some very large database tables and possibly slow down your website. Although the graph will remain in the dashboard, the site will no longer track all the visits.

Open up config/site.php and add the following lines:

// turn off site tracking
define('STATISTICS_TRACK_PAGE_VIEWS', false);

As well, load up your favorite database manager, like phpMyAdmin and find the table PageStatistics and empty the contents to clean up past tracking data.

Injecting header items into a block

defunct — Sun, 23 Aug 2009 21:16:52 +0000

Many times you need to inject includes of javascript or css into the header instead of writing the include path into add.php or edit.php. This is a much cleaner solution and can be accomplished in the blocks controller.php. In this example I include both swfobject and jquery’s colorpicker libraries as well as the jquery colorpicker Concrete5 css file:

        /*
         * include swfobject and colorpicker in the header
         */
        public function on_page_view() {
                $html = Loader::helper('html');
                $this->addHeaderItem($html->javascript('swfobject.js'));
                $this->addHeaderItem($html->javascript('jquery.colorpicker.js'));
                $this->addHeaderItem($html->css('ccm.colorpicker.css'));
        }

Using the on_page_view() function easily accomplishes this.

Changing the Concrete5 title divider format

defunct — Sun, 16 Aug 2009 21:11:44 +0000

Many people do not like the default spacer that Concrete5 uses for its page titles which is “::”

To change this, open config/site.php and add the following code:

define(‘PAGE_TITLE_FORMAT’, ‘%1$s – %2$s’);

You may adjust the “-” character in the above code to any that you wish and that will become your new page title divider.

Introducing The Concrete5 Testimonials Package

defunct — Wed, 08 Jul 2009 20:48:45 +0000

*Edit*: Just submitted version 1.2 to the Concrete5 Marketplace. This version now includes a wysiwyg editor, so you can now style your text, add images and customize the testimonial as much as you like.

It also includes a new optional content textbox to add additional information below the testimonial. View the updated screenshots below!

*Edit*: The Concrete5 Marketplace has finally approved my submission. You can now purchase and install the Concrete5 Testimonials Package direct through your concrete5 install. I will be releasing an unlimited developers license that will be available here soon.

The Testimonials Package is a full featured Concrete5 Package.

Features

Manage Testimonials from an integrated Concrete5 backend
Includes a Testimonials single_page where all testimonials are shown. This page is configurable in the backend as to how many testimonials per page you wish to display. Pagination automatically kicks in
Testimonials Block can be placed in any editable area and will load a random testimonial on page load.
Clear, clean and valid XHTML/CSS for easy customization by developers (single_page and block views)

Screenshots

Add Testimonial

Manage your testimonials

Single_page view of testimonials with pagination

Adding the testimonails block

Testimonial Documentation

Welcome!

defunct — Sat, 20 Jun 2009 23:17:03 +0000

Hello,

I’d like to welcome you to this, my first blog post. I will have some articles up soon mostly focusing on Concrete5, an amazing CMS I have been using recently.

This blog will feature articles on web design, web development, backpacking and even some posts regarding learning the German language (Deutsche Sprache, schwere Sprache!).

So stay tuned!