One feature I really like is the “template” plugin which allows you to create html snippets which you can insert into the content block. In this tutorial I’m going to show you, how you can create a simple 2 and 3 column table template.

TinyMCE Configuration

You’ll find almost anything you have to know on this page: http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/template. But luckily for you, I’m going to make this even easier for you.

First, you have to go to the Dashboard – Sitewide Settings. In the bottom right corner, you can activate a “Custom” configuration for the rich text editor. Once you’ve enabled it, it will show you some options. What do we need to activate the TinyMCE templates:

• We have to load the template plugin
• There must be a button to display the template dialog
• We have to create at least one template

theme : "concrete", 
plugins: "inlinepopups,spellchecker,safari,advlink,template",
editor_selector : "ccm-advanced-editor",
spellchecker_languages : "+English=en",	
theme_concrete_buttons1 : "template,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,hr,|,styleselect,formatselect,fontsizeselect",
theme_concrete_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,forecolor",
theme_concrete_blockformats : "p,address,pre,h1,h2,h3,div,blockquote,cite",
theme_concrete_toolbar_align : "left",
theme_concrete_fonts : "Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats",
theme_concrete_font_sizes : "1,2,3,4,5,6,7",
theme_concrete_styles: "Note=ccm-note",
spellchecker_languages : "+English=en",
template_templates : [
	{
		title : "2 Columns",
		src : "themes/yourTheme/templates/2_columns.html",
		description : "Adds a 2 columns table"
	},
	{
		title : "3 Columns",
		src : "themes/yourTheme/templates/3_columns.html",
		description : "Adds a 3 columns table"
	}
]

There’s one thing you probably have to change. In the two templates I’ve added, there’s a hardcoded path which won’t work on your site. Make sure it points to an existing directory. The content of the html file is rather simple. I modified the example for TinyMCE to make it look like this:

<!-- This will not be inserted -->
<div class="mceTmpl">
<table width="98%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th scope="col">HEADER 1</th>
<th scope="col">HEADER 2</th>
</tr>
<tr>
<td>Sample Data</td>
<td>Sample Data</td>
</tr>
</table>
</div>

How you can insert an HTML snippet

You’re already done, but where can you find the snippets? We you add a new content block, you’ll see a new button:

When you click on this button, you’ll see a dialog where you can select the template:

Unfortunately, the insert button is a bit hidden, you have to scroll down to insert the template. You can insert as many snippets into one content block as you want:

I hope you like it and thanks for completely reading this tutorial!

But there’s another way to access your server using SSH like tools without having to worry about encrypted tunnels or any other threats SSH could cause. It’s called shellinabox and can be found on Google Code.

If you’re working with debian like I do, you can even download a prebuilt deb file.
wget http://shellinabox.googlecode.com/files/shellinabox_2.10-1_i386.deb
dpkg -i shellinabox_2.10-1_i386.deb

The installer creates an init script located in /etc/init.d/shellinabox. As soon as it has been started you can access your shell using any webbrowser using an address like this: https://localhost:4200. But the port 4200 is usually not accessible if you’re working behind a firewall that blocks SSH traffic. Let’s use apache to redirect traffic from HTTPS to 4200. We have to enable mod_proxy if it’s not already active:

/etc/apache2/mods-enabled
ln -s ../mods-available/proxy.conf
ln -s ../mods-available/proxy.load
ln -s ../mods-available/proxy_http.load

Edit the site file where you want to add your shell, I used /etc/apache2/sites-available/default-ssl and added these lines:
<Location /shell>
ProxyPass http://localhost:4200/
Order allow,deny
Allow from all
</Location>

Shellinabox uses https by default as well and is accessible by any ip address. We want to change that, let’s edit this file /etc/init.d/shellinabox and add SHELLINABOX_ARGS (the last line in the following box):
# Set some default values
SHELLINABOX_DATADIR="${SHELLINABOX_DATADIR:-/var/lib/shellinabox}"
SHELLINABOX_PORT="${SHELLINABOX_PORT:-4200}"
SHELLINABOX_USER="${SHELLINABOX_USER:-shellinabox}"
SHELLINABOX_GROUP="${SHELLINABOX_GROUP:-shellinabox}"
SHELLINABOX_ARGS="--localhost-only --disable-ssl"

If you now restart all the services “/etc/init.d/shellinabox restart” and /etc/init.d/apache2 restart”, you’re shell can be accessed by https://localhost/shell from anywhere you want!

Concrete5 allows you to customize this page but it needs a few modifications. Some of them are probably a bit hard to find – which is why I wrote this tutorial. The standard Concrete5 “page not found” page looks like this:

As you can see, the layout uses the default concrete5 dashboard theme. First, we’d like to use our own theme! Open “config/site_theme_paths.php”, there are already a few commented examples in the file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?php  
 
defined('C5_EXECUTE') or die(_("Access Denied."));
 
$v = View::getInstance();
$v->setThemeByPath('/page_not_found', "yourtheme");
 
/* 
	you can override system layouts here  - but we're not going to by default 
 
	For example: if you would like to theme your login page with the Green Salad theme,
	you would uncomment the lines below and change the second argument of setThemeByPath 
	to be the handle of the the Green Salad theme "greensalad" 
 
$v = View::getInstance();
 
$v->setThemeByPath('/login', "yourtheme");
 // $v->setThemeByPath('/403', "yourtheme");
 // $v->setThemeByPath('/register', "yourtheme");
 // $v->setThemeByPath('/dashboard', "yourtheme");
 
*/

In line 5 and 6 you can see the two lines I’ve added. Make sure that you replace “yourtheme” with the name of your theme – identical to the directory name of your theme in the folder “themes”.

Make sure your theme has a file called view.php. It might look similar to this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
$this->inc('elements/header.php');
?>
 
 	<div id="content">
	   <div id="body">
	   	<!-- begin -->
	   	<?php
	   	echo $innerContent;
	   	?>
	   	<!-- end -->
	   </div>
	</div>	
 
<?php
$this->inc('elements/footer.php');
?>

$innerContent is where all the information is saved.

Once you’ve saved site_theme_paths.php your error page uses your own theme. In my case like this:

Sitemap

It might make sense to display a sitemap when a users landed on the 404 page. This is also easy to do. Create a copy of /concrete/single_pages/page_not_found.php here /single_pages/page_not_found.php. This makes sure we don’t modify files within the Concrete5 core. Open the file and make it look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<?php  defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
 
<h1 class="error"><?php echo t('Page Not Found')?></h1>
 
<?php echo t('No page could be found at this address.')?>
 
<?php  if (is_object($c)) { ?>
	<br/><br/>
	<?php  $a = new Area("Main"); $a->display($c); ?>
<?php  } ?>
 
<br/><br/>
 
<?php
$bt = BlockType::getByHandle('autonav');
$bt->controller->orderBy = 'display_asc';                    
$bt->controller->displayPages = 'top';
$bt->controller->displaySubPages = 'all';     
$bt->controller->displaySubPageLevels = 'all';                    
$bt->render('view');
?>		
 
<br/><br/>
 
<a href="<?php echo DIR_REL?>/"><?php echo t('Back to Home')?></a>.

Lines 13 to 20 uses the autonav block to display a sitemap. That’s it! In my case the “page not found” page looks like this:

A bit useless in my case but probably more helpful if you have more pages than I do.

The default autonav Block in Concrete5 allows you to add a navigation/menu to your site in almost no time. But as soon as you want to use images it get a bit more difficult. In this tutorial I’m going to show you, how you can specify pictures for each page and pull them in an autonav template.

Page attributes

Concrete5 allows you do add different kinds of attributes to your page. You can use them to manage meta tags, tags, notes, thumbnails or images for your navigation. First we have to create two new page attributes where we can select the pictures. One which will be shown if the page is currently active and one for inactive pages.

All the important information has a red overlay:

• Attribute type must be Image/File
• The Handle is used in the template, make sure you remember it
• The Name is just a description to explain what the use of the attribute is

Assign images

We have two new attributes where we can assign some images. The following screenshot explains this:

• In the sitemap, open “Properties” for the page where you would like to see an image in the navigation
• Go to the last tab “Custom Fields” and add the two fields you just created
• Select the image you want to see if the page is active and inactive

Do this for all the pages where you’d like to have an image instead of a text link. You can always add and modify the images for the pages. Even your end-user can add new image menu item this way. One of many reasons why page attributes are so powerful!

Custom Autonav Template

If you haven’t worked with custom template you should probably read this tutorial first: http://www.codeblog.ch/2009/03/concrete5-templates/.

To create a new custom template, simply copy /concrete/blocks/autonav/view.php to /blocks/autonav/templates/image_navigation.php. You probably have to create the folders autonav and templates first.

Around line 55 you should see this code (might be different, depending on your c5 version:

1
2
3
4
5
6
7
8
9
10

if ($c->getCollectionID() == $_c->getCollectionID()) { 
	echo('
	<li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected" href="' . $pageLink . '">' . $ni->getName() . '</a>');
} elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) { 
	echo('
	<li class="nav-path-selected"><a class="nav-path-selected" href="' . $pageLink . '">' . $ni->getName() . '</a>');
} else {
	echo('
	<li><a href="' . $pageLink . '">' . $ni->getName() . '</a>');
}

With some HTML and PHP knowledge you probably have already found the place which outputs the link text. It’s of course “$ni->getName()”. This is the code which we have to modify to display images if they’ve been selected.

We replace $ni->getName() with variables which will hold the html code for the image or the link text:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$linkTextActive = $ni->getName();
$linkTextInactive = $ni->getName();
 
$picOn = $_c->getAttribute('pic_on');
$picOff = $_c->getAttribute('pic_off');
 
if ($picOn) {
  $linkTextActive = '<img src="' . $picOn->getURL() . '" alt="' . $linkTextActive . '"/>';
}
if ($picOff) {
  $linkTextInactive = '<img src="' . $picOff->getURL() . '" alt="' . $linkTextInactive . '"/>';
}
 
if ($c->getCollectionID() == $_c->getCollectionID()) { 
	echo('
	<li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected" href="' . $pageLink . '">' . $linkTextActive . '</a>');
} elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) { 
	echo('
	<li class="nav-path-selected"><a class="nav-path-selected" href="' . $pageLink . '">' . $linkTextActive . '</a>');
} else {
	echo('
	<li><a href="' . $pageLink . '">' . $linkTextInactive . '</a>');
}

• Line 1,2: The new variables
• Line 4,5: Get the attribute values – the image
• Line 7-12: Checks if the attribute has a value and replaces the link text

Now you can add an autonav block, set all the properties and after you’ve added the block, click on it again an hit “Set Custom Template”. If you create our custom template in the correct folder, you should now be able to select it.

If everything worked you should now have a top navigation like this:

Dialog

The following screenshot shows you the dialog you can use to enter the information related to the expand block. There’s a special feature which I haven’t seen before – you can select the template while adding a new block. No need to open a second dialog!

Updates / Contribution

If you have some nice arrows/layouts. Please contact me! I’d be happy to add them to this block which we could later publish on the Concrete5 Marketplace once it contains a few nice layouts!

Download / Installation

Download block here.

Extract the zip file into /blocks/ and make sure you keep the directory “remo_expand”. It’s not a package yet and therefore must be extracted to blocks and not packages!

Custom Templates

If you don’t know anything about “Custom Templates”, you should probably read this article first: http://www.codeblog.ch/2009/03/concrete5-templates/. In short: Concrete5 allows you to style any block using templates in case you need to change the html output and not only the css rules.

Core modification

There’s one small thing I didn’t want to modify in the custom template since it shouldn’t be printed anyways. This might change in a future version, but because it doesn’t break anything I’m going to make the “not recommendable” core change in this case. Open the file “concrete/blocks/form/controller.php” and go to line 667 as shown on this screenshot:

Remove ’style=”width:95%”‘ as it makes css styling a bit nasty. Please note that this step isn’t necessary, it’s just about the layout!

The default layout

If you create a new form, it usually looks like this:

It works but doesn’t look very nice.

New form style

In this tutorial I’m showing you how you can create a form in which the labels are in the textfields and not on top or left. This might especially be useful if you have a very small page and a huge form. It also looks nice.

This is how the result is going to look like:

Let me start with the php template view.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

<?php    
defined('C5_EXECUTE') or die(_("Access Denied."));
$survey=$controller; 
$miniSurvey=new MiniSurvey($b);
$miniSurvey->frontEndMode=true;
?>
<div class="ccm-form" id="ccm-form-id-<?php echo intval($bID)?>">
 
<?php  if ($invalidIP) { ?>
<div class="ccm-error">
<?php echo $invalidIP?>
</div>
<?php  } ?>
<form enctype="multipart/form-data" id="miniSurveyView<?php echo intval($bID)?>" class="miniSurveyView" method="post" action="<?php  echo $this->action('submit_form')?>">
	<?php   if( $_GET['surveySuccess'] && $_GET['qsid']==intval($survey->questionSetId) ){ ?>
<div id="msg"><?php  echo $survey->thankyouMsg ?></div>
<?php   }elseif(strlen($formResponse)){ ?>
<div id="msg">
			<?php  echo $formResponse ?>
			<?php  
			if(is_array($errors) && count($errors)) foreach($errors as $error){
				echo '
<div class="error">'.$error.'</div>
';
			} ?></div>
<?php  } ?>
	<input name="qsID" type="hidden" value="<?php echo  intval($survey->questionSetId)?>" />
	<input name="pURI" type="hidden" value="<?php echo  $pURI ?>" />
	<?php   	
	$questionsRS = $miniSurvey->loadQuestions($survey->questionSetId, intval($bID), 0);
	$surveyBlockInfo = $miniSurvey->getMiniSurveyBlockInfoByQuestionId($survey->questionSetId,intval($bID));
 
	$showEdit = false;
	$hideQIDs=array();
 
	while($questionRow=$questionsRS->fetchRow()) {	
		if(in_array($questionRow['qID'], $hideQIDs)) continue;
 
		$msqID=intval($questionRow['msqID']);
 
		$requiredClass=($questionRow['required'])?' required ':'';
		$requiredSymbol=($questionRow['required'])?' *':'';
 
		echo '
<div class="ccm-form-element'.$requiredClass.'">';
		$_REQUEST['Question'.$msqID] = $questionRow['question'] . $requiredSymbol;				
 
		echo $miniSurvey->loadInputType($questionRow,showEdit);
		echo "</div>
";	
	}	
 
	if($surveyBlockInfo['displayCaptcha']) {		
		$captcha = Loader::helper('validation/captcha');				
		echo "
<div class=\"ccm-form-captcha\">";
 
		echo '
<div class="required">';		
		echo '<input type="text" value="Sicherheitscode hier eingeben" name="ccmCaptchaCode" class="ccm-input-captcha"/>';
		// Please note that we need to style our captcha, we therefore create it manually!
		//$captcha->showInput();
		echo "</div>
";
 
		echo "
<div>";
		$captcha->display();
		echo "</div>
";
 
		echo "</div>
";
		echo '
<div style="clear:both"></div>
';
	}
 
	echo '<input class="formBlockSubmitButton button" name="Submit" type="submit" value="senden" />';
 
	?> 
</form></div>

I’m not explaing each line because I assume you understand PHP, otherwise this tutorial isn’t made for you – sorry!
What I changed:

• Calling some methods found in the controller out of the view
• Created a div layout instead of a table layout
• Added some CSS classes to indicate required fields
• Added a strange line which makes sure that the value attribute of the textfield contain the description

Now, we’ve got a form where we don’t have any labels next to the input fields. But we need to get rid of these values at some point, otherwise the users are able to submit forms using the default values (labels). To achieve this, we’re going to use some JavaScript checks:

1
2
3

   $('.miniSurveyView input[type=text], textarea').click(onEnterField);
   $('.miniSurveyView input[type=text], textarea').focus(onEnterField);
   $('.miniSurveyView input[type=text], textarea').blur(onLeaveField);

These events get raised once a users clicks into a textfield within our form. There we check whether we have to replace the label or not using this code:

1
2
3
4
5
6
7
8
9
10
11
12

function onEnterField() {
   if (this.origLabel == null)
      this.origLabel = this.value;
   if (this.origLabel == null || this.origLabel == this.value)
      this.value = '';
 
	$(this).prev(".formError").slideUp();
}
function onLeaveField() {	
   if (this.value == '' && this.origLabel != null)
      this.value = this.origLabel;
}

We also add some client side checks to make sure the users has entered all the required fields. This allows us to safe a request and a few milliseconds of waiting.

$(document).ready(function() {
 
   $('.miniSurveyView input[type=text], textarea').click(onEnterField);
   $('.miniSurveyView input[type=text], textarea').focus(onEnterField);
   $('.miniSurveyView input[type=text], textarea').blur(onLeaveField);
 
	$('.miniSurveyView').submit(function() {
		var formErrors = 0;
 
		$('.formError').remove();
		$('input[type=text], textarea', this).each(function() {
 
			if (($(this).attr('origLabel') == undefined || $(this).val() == $(this).attr('origLabel')) && $(this).parent().hasClass("required")) {
				formErrors++;
				$(this).before('
<div class="formError" id="formError'+formErrors+'" style="height:18px;color:red;font-size:10px;display:none;">Bitte Wert eingeben:</div>
')
				$("#formError" + formErrors).slideDown(200,function() {					
				});
			}
		})
 
		if (formErrors > 0)
			return false;
		else
			return true;
	})
 
});

We check for all fields and make sure the have a value in case they’re underneath a div with the class “required”. We simply display a div above the input fields in case there’s a value missing.

The template also contains some css rules which I’m not going to show in this article. They’re pretty straight forward, but you can also find them here:

Download Form Template

Extract the zip into “blocks/form/templates”. You might have to create the diretories form and templates first!
Enjoy!

This tutorial describes a small method which calculates the real width of a string and lets you create better looking preview texts!

Measuring string width

PHP offers several methods to measure a string width. You can use the built in method ImageFontWidth to measure the width of a string using the built in PHP fonts. This is quite easy and works well if you want to create a captcha or something similar, using the PHP fonts.

But there’s another method which you can easily use to get the complete bounding box of a true type font string. It’s called imagettfbbox. The return value is an array which contains several values needed for a bounding box.

The trimming method

As you’ve probably seen on the picure at the beginning of the article, I needed a method that cuts off a string after a certain width and adds a string to indicate that the text isn’t completely shown. Here’s some code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function trim_by_width($text,$width,$font_file,$font_size=7,$append_string = '...')
{
	$append_string_box = imagettfbbox($font_size,0,$font_file,$append_string);
	$append_string_width = $append_string_box[2];
 
	$str_len = strlen($text);
	for ($i = 0; $i<=$str_len; $i++)
	{
		$trimmed_text = substr($text,0,$i);
		$bounding_box = imagettfbbox($font_size,0,$font_file,$trimmed_text);
		$trimmed_text_width = $bounding_box[2];
		if ($trimmed_text_width + $append_string_width > $width && $i > 0)
		{
			$str_to_return = substr($trimmed_text,0,strlen($trimmed_text)-1);
			if ($trimmed_text_width != $str_len)
			{
				$str_to_return .= $append_string;
			}
			return $str_to_return;
		}
	}
	return $text;
}

$trimmed_text = trim_by_width($text, $width, $font_file, $font_size, $append_string='...');

$text:
The first parameter is the string which you want to trim

$width:
This defines the maximum width of the text in pixels! Not in characters or anything else

$font_file:
Here you have to specify the location of your true type font file.

$font_size:
The font size you want to use. Please note that unit depends on the version of the GD library you're using. GD1 uses pixels, whereas GD2 uses points

$append_string:
An optional string to define the text appended at the end of a trimmed text. By default set to "..."

An example

You can call the method like this:

echo trim_by_width('this is a long text',55,dirname(__FILE__) . '/verdana.ttf',8);

It assumes that the file verdana.ttf is in the same directory as the php script. It will cut the text “this is a long text” after 55 pixels.

That’s it!

You want more speed with Concrete5? Make sure you’re using eAccelerator!

In this tutorial I’ll explain how to install eAccelerator on a Debian Linux Server.

Already installed?

Create a page called info.php somehwere in a directory you can access using http://…

1
2
3

<?php
   phpinfo();
?>

Try to find “eAccelerator”. If you can’t find it, it’s not installed, go ahead with the following instructions.

Install eAccelerator

Open a console/ssh connection to your server and enter these commands:

wget http://bart.eaccelerator.net/source/0.9.5.3/eaccelerator-0.9.5.3.tar.bz2
tar xvfj eaccelerator-0.9.5.3.tar.bz2
cd eaccelerator-0.9.5.3
phpize
./configure --with-eaccelerator-shared-memory --with-php-config=/usr/bin/php-config --with-eaccelerator-userid=www-data --with-eaccelerator-content-caching 
make
make install

You might want to check whether 0.9.5.3 is still the latest version. As of the 12th of June 2009 it is.

Make sure there are no error messages before you continue.

Create the directory where you want to save the eAccelerator cache files:

mkdir -p /var/cache/eaccelerator
chmod 0777 /var/cache/eaccelerator

Create the config file for eAccelerator. Use a vi or any other text editor to create the config file:

vi /etc/php5/conf.d/eaccelerator.ini

Enter this content:

extension = "eaccelerator.so"
eaccelerator.shm_size = "16"
eaccelerator.cache_dir = "/var/cache/eaccelerator"
eaccelerator.enable = "1"
eaccelerator.optimizer = "1"
eaccelerator.check_mtime = "1"
eaccelerator.debug = "0"
eaccelerator.filter = ""
eaccelerator.shm_ttl = "0"
eaccelerator.shm_max = "0"
eaccelerator.shm_prune_period = "0"
eaccelerator.shm_only = "0"
eaccelerator.compress = "1"
eaccelerator.compress_level = "9"

You can restart apache using this command now:

/etc/init.d/apache2 restart

Open the info.php again and check whether you can see eAccelerator. If everything looks fine, go to the directory of your Concrete5 and edit “config/site.php” – add this line:

define('CACHE_LIBRARY', 'eaccelerator');

Open your Concrete5 and feel the difference!

Table layouts

I’m not going into the details about tableless layouts, just a few basic things. The table tag shouldn’t be used for a layout, using div & css is the way to go. With Concrete5 you could theoretically create two areas but you would then have the problem that the content in the left column doesn’t have to same margin to the top as the content in the right.

I’m therefore describing a block that creates a proper div output which you can style using common css rules.

The staff block

The block contains only two elements. A picture and a textfield to enter a little note/description about the person.

The html output will look like this:

1
2
3
4
5

<div class="ccm-person">
   <div class="ccm-person-image"><img src="http://myserver/remo.jpg" alt=""></div>
   <div class="ccm-person-description">Lorem ipsum dolor sit ame.</div>
   <div style="clear:both"></div>
</div>

Please note that I’ve added div at the end that uses an inline-style to clear the output. You might want to use a class of your theme but since there’s no class name that’s available everything, I’ve decided to use an inline-style to explain the block!

Without any styling this will generate an output where the text is shown underneath the picture. But since we want to have a table-like layout, we add a few lines to our css file:

1
2
3
4
5
6
7
8

.ccm-person-image {
   float: left;
   width: 80px;
}
.ccm-person-description {
   float: left;
   width: 385px;
}

This is usually specific to your layout, change it to suit your needs!

Download block

Prequisites

In this tutorial I’m using a simple theme which you can find in the Concrete5 Marketplace, it’s called Dreamy and has been created by Scott.

I removed a few things in the theme which I don’t need to make it a bit easier to understand, but that’s not necessary.

The page design

I created a simple text page using the modified theme which looks like this:

Please note that I’ve changed the colors of H1 and H2. When you now edit this page, the WYSIWYG editor TinyMCE looks like this:

The headings H1 and H2 are black. Wouldn’t it be nice if the user could see the typography there too? This is what typography.css is good for. Let us add a few lines to typography.css:

1
2
3
4
5
6

h1 {
   color:#54bed4;
}
h2 {
   color:#adc42c;
}

By default, the WYSIWYG editor looks for the file called typography.css and includes all the styles too. By doing this, it allows you to add styles which can be displayed during the editing of a text to give the user a first impression about the text layout.

If you edit a text after you’ve added the css rules, the editor will look like this:

You might have to clear your cache if you can’t see the changes!