betweenbrain™ | web • print • idenity • creative

The long lost SyntaxHighlighter brush

Last Updated on Wednesday, 02 June 2010 13:11

We've been asked many times what brush we use with SyntaxHighlighter. It's generally the PHP brush, with html-script set to true. html-script: true is used for when you're writing HTML inside of another language, such as PHP. For example:

<pre class="brush:php; html-script: true"></pre>

Read more about it at http://alexgorbatchev.com/wiki/SyntaxHighlighter:Demo:html-script

Redirecting New Joomla Users On First Visit

Last Updated on Monday, 24 May 2010 08:48

While fine-tuning the user flow of our [under development] Joomla Engineering website, we needed a way to redirect new users to a designated page immediately upon registering (we're not using the activation email feature). To accomplish that, we engineered a system plugin to do so. It checks whether or not the user's lastvisitDate is "0000-00-00 00:00:00", and if it is, it sets the date to the current time and sends them to the designated page.

Sound like something that would be useful to you? If so, download the Redirect First Login plugin version 1.5.1.

Quick tip: SyntaxHighlighter BloggerMode

Last Updated on Thursday, 22 April 2010 11:31

We love SyntaxHighlighter for an enhancing code display. But, some WYSIWYGs have a nasty habit of converting white space within <pre> tags to <br /> tags. To get around this, enable BloggerMode. Looking for SyntaxHighlighter for Joomla? Check out the Ruby Tags website or download the Ruby Tags SyntaxHighlighter Plugin 1.1, which is updated with SyntaxHighlighter version 2.1.364.

 

Component Only Template

Last Updated on Tuesday, 27 July 2010 21:13

The power and flexibility of Joomla allows for the creative use of template techniques to expand its capabilities. One such technique is the use of a component only template. It expands the possibilities of a Joomla website by providing the ability to include content such as splash pages, full-screen Flash movies, and even pseudo 404 pages for hiding a website from a casual passerby. The following tutorial will show you how to implement a component only template.

To give you an idea of what can be accomplished with a component only template, we have put together the following demos. Each one is an article contained in this website. The only difference is the template.

Demo: Pseudo 404 Not Found

Demo: Loading Page

Demo: Flash Map

A component only template is exactly as the name implies, only the component. No module positions or other elements are included in this type of template. This allows for the possibility to exclusively display the content of an article.

Modify RokDownloads Date Format

Last Updated on Monday, 24 May 2010 08:32

RocketTheme produces some great Joomla! templates and extensions. Of them, we find ourselves using RokDownloads quite often. One of the most requested change that we need to make to it is the date format.Originally posted by Brian Towles of Team RocketTheme at the RocketTheme Forum:

Add this line for the languages/en-GB/en-GB.com_rokdownloads.ini

DATE_FORMAT_LC4=%m-%d-%Y

Call Joomla! Template Parameter From Template Override

Last Updated on Thursday, 04 February 2010 18:11

Here's a beauty of a gem for all of you template-override-happy, parameter junkies (I'm one too!). You can call template based parameters (hint: add your own) from within a template override. This first bit was originally posted at the Joomla! forums by okonomiyaki3000:

<?php 
global $mainframe;
jimport('joomla.filesystem.file');
$tparams = new JParameter(JFile::read(JPATH_BASE.DS.'templates'.DS.$mainframe->getTemplate().DS.'params.ini'));
?>

This allows you to read the template parameters. Then you can call one of them as follows:

<?php echo $tparams->get('redirectUrl'); ?>

Now, if that's not enough fun for you, we can mix in some JavaScript. For example, we'll take a newly created redirect parameter and slap it in the middle of a redirect, resulting in:

<script type="text/javascript"> window.setTimeout('window.location="<?php echo ($tparams->get('redirectUrl')); ?>"; ',1); </script>

NOTE: The Art of Web posted a nice write-up entitled "PHP: Passing variables to JavaScript that could come in handy.

Redirecting Joomla's View (MVC)

Last Updated on Monday, 24 May 2010 08:31

In some cases, redirecting the view of a component of module can be easily accomplished by a bit of JavaScript. For instance, the component ccNewsletter doesn't allow for an option (as of this writing) to redirect after a successful event occurs. To accomplish this task, simply add the following code at the end of a template override for the view of the component.

<script language="javascript" type="text/javascript">
 <!--
 window.setTimeout('window.location="http://betweenbrain.com/"; ',1000);
 // -->
</script>

You can control the time and destination of the redirect. Time is 1000 milliseconds in this case, and the destination is http://betweenbrain.com/. For example, ccNewsleter's activate view was:

<?php 
defined('_JEXEC') or die('Restricted access');
?>
><div>
 <?php echo $this->pageTitle; ?>
</div>
<table>
<tr>
 <td>
 <?php echo $this->operationStatus; ?>
 </td>
</tr>
</table>
<br/>

After the redirect code addition, it is now:

<?php 
defined('_JEXEC') or die('Restricted access');
?>
<div>
 <?php echo $this->pageTitle; ?>
</div>
<table>
<tr>
 <td>
 <?php echo $this->operationStatus; ?>
 </td>
</tr>
</table>
<script language="javascript" type="text/javascript">
 <!--
 window.setTimeout('window.location="http://betweenbrain.com/"; ',1000);
 // -->
</script>
<br/>

Download the ccNewsletter Overrides v1.1. Extract the contents to the HTML folder of your template and enjoy.

 

Update May 18th 2010: We've improved this code to use the base URL of the website. The new code, also available in the above download, is:

<script language="javascript" type="text/javascript">

     <!--

     window.setTimeout('window.location="<?php echo $this->baseurl ?>"; ',1000);

     // -->

</script> 

Customizing the print pop-up

Last Updated on Thursday, 20 May 2010 16:57

As Andrew Eddie at The Art of Joomla reports, the file /templates/$template/component.php controls the print view of a given article. Component.php acts just like index.php, which controls your template layout, module positions and CSS, among other things.

Component.php can be equally customized with features like module positions and custom CSS files. This is done using the same methods as with index.php.

At the heart of component.php is:

<head>

    <jdoc:include type="head" />

    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />

    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />

					<?php if($this->direction == 'rtl') : ?>

    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template_rtl.css" type="text/css" />

<?php endif; ?>

</head>

<body class="contentpane">

    <jdoc:include type="message" />

    <jdoc:include type="component" />

</body>

</html>

Read more... Add new comment

Including Joomla Module Positions in Template Overrides

Last Updated on Thursday, 04 February 2010 18:12

Originally posted by Andrew Eddie on the Joomla! Forum:

To load a module position within a layout you can do this:

<?php
$document = &JFactory::getDocument();
$renderer = $document->loadRenderer( 'modules' );
$options = array( 'style' => 'raw' );
echo $renderer->render( 'position_name', $options, null);
?>

Change the "style" to whatever you need (most likely raw, but could be xhtml), and change the position_name to the actual module position.

Attacking Chrome

Last Updated on Wednesday, 09 September 2009 10:16

Apparently Google's new browser Chrome, is based on the same technology as Apple Safari. I discovered this fact while searching for a way to apply Chrome / Safari specific CSS styles. I came across a number of *hacks* (which I personally would rather avoid using) some more complex, and frankly scary, than others. The following ?hack? came from Martin Ivanov's blog, dated Oct 1, 2008:

/* Google Chrome hack */
body:nth-of-type(1) .elementOrClassName
{
/* properties go here */
}

/* Safari hack */
body:first-of-type .elementOrClassName
{
/* properties go here */
}

While on the hunt for the above information, I came across a very cool website that illustrates CSS transformations, currently only supported by Chrome and Safari. The heat is definitely on for FireFox.