This year we had a total of 5 presentations presented by our company. Below you can download each of the presentations and learn from them. Until next year…enjoy!

Rafael Corral

• PHP 5
• Speed! (how to gain more speed from your Joomla! site)

Jonathan Shroyer

• Badass CSS3
• Coding for SEO

Michael Pignataro

• E-Commerce the Joomla way

Thank you John and Linda, for all of your hard work of putting the expo together!

Best,

‘corePHP’ Staff

Anyone who has tried to add CSS3 to their site knows how difficult and time consuming it is to figure out the correct code for the correct browsers. Also, how do I make it work with IE? Wonder no more! With the Automated CSS3 Generator Plugin all you need to do is enter the values for the CSS3 you need and it does the rest. It also only outputs the CSS for the browser you are using so you won’t need 4 lines of CSS to do a simple rounded corner anymore.

Why would I use it?

Many images on a website are only there to emulate the look of a CSS3 command. A prime example is a rounded corner box with a slight drop shadow. It typically can take any- where from 3-20K of images, depending on how it’s done. With this plugin you don’t need extra div tags, images and 30 lines of CSS.
This saves HTTP requests and download time which can increase your SEO value. It also literally saves HOURS of development time and gives you options you didn’t have before.

What does it support?

We didn’t add in anything that IE can’t do exactly the same as the other browsers, so you don’t have to worry about your site looking different between browsers. The only exception is text-shadow. There is no way to have IE look exactly the same as other browsers with text-shadow, but it’s about as close as you can get!

We have currently added the following CSS3 into the plugin:

• Drop Shadow
• Text Shadow
• Rounded Corners
• Opacity
• Gradients (simple)
• RGBA
• Rotate
• Border Image (limited)

Visit the product page at http://www.corephp.com/joomla-products/automated-css3-generator-plugin.html or purchase here

We also offer paid support for transferring the images on your site into CSS3 code to save you valuable download time. Contact us today to learn more!

How do I run IE9?

First of all, you need to know that IE9 will only work in Vista or Windows 7. It was a very bad decision in my opinion, but it’s reality, so we work with it. My setup is a Macbook Pro 3 GHz with 4 Gigs of RAM. I first installed Windows 7 Professional 64 bit on a new VMware Fusion virtual disc, but it took up way too many resources to run smoothly. Not only that, it locked up my Mac side occasionally for about a minute or two which is unacceptable. I then created a new image using Windows 7 Professional 32 bit and it ran MUCH faster. One would almost say… SNAPPY! It does however take a long time to boot up the disc image at times. I recommend turning off Aero, which is the bells and whistles for the desktop. To do this just right click on the desktop and choose Customize. Click on the Windows 7 Simple theme and you will notice an increase in speed. I plan on turning off indexing as well in the near future to further speed it up.

After running your updates you then open Internet Explorer, but it won’t be IE9 yet. The opening page should have a button to click to download and install IE9. Just follow the steps and you will have a working version of IE9.

First impressions!

At first I didn’t notice much that was different other than a few facelifts to the interface and many more broken websites. Thankfully, Microsoft must have seen this coming so they gave us a fairly nice set of developer tools to fix their mistakes in. All joking aside, it is a much needed and improved toolset. It reminds me a lot of Firebug. You can edit HTML, CSS, view scripts, etc just like Firebug.

But what about HTML5 and CSS3?

While they did add support for a few good CSS3 properties, they still don’t support text-shadow, border-image, multiple columns, gradients, and transitions. It’s a start though! HTML5 has what I consider partial support. ACID Testing scores it as 55/100 while Firefox scores a 98/100. Read more about CSS3 support here and HTML5 support here.

Testing in IE7 and IE8

One other great addition is the ability to choose which browser you are using within IE9. Within the developer tools top menu you will find a dropdown to choose the Browser Mode and Document Mode to view the page in. You can choose browser modes for IE7, IE8, IE9 and IE9 Compatibility Mode. I actually enjoy having IE7-9 in one browser. It saves space and resources.

What about IE6?

Unfortunately, there are still clients out there that want to support IE6. I haven’t yet found a good solution in Windows 7 to view IE6 in, although I have read that you can run Virtual PC and any browser version you want in XP Mode. You can read more about this at http://articles.sitepoint.com/article/ie6-ie7-ie8-win7-xp-mode. Although IE Collection claims to have support for IE6 in Windows 7, it didn’t work for me. The best solution seems to be to have another virtual disk with a stripped down XP running IE6.

UPDATE: Thank you to John who posted a comment on IETester being able to run IE6 in Windows 7. It works great… and fast! I remember using it before, but I didn’t stick with it because the development tools are a little weak, but it does have some. If you could live edit the CSS it would be a solid program. Anyway, this is a great solution for testing IE6 and I’m very thankful for the information.

What do I do if I don’t want to fix my site for IE9?

Luckily, there is a solution that can buy you some time on fixing specifically for IE9 (if you ever want to at all.) There is a line of code that will force your webpage to open as a different version than IE9.

<meta http-equiv="X-UA-Compatible" content="IE=8" >

In your Joomla! template place this directly above

<jdoc:include type="head" />

If you have changed your document mode in the developer tools it may not load the default value so it may still look broken, but it isn’t. Your web page will load as if it is still in IE8. Other choices for forcing IE to load into other modes are:

<meta http-equiv="X-UA-Compatible" content="IE=4">   <!-- IE5 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=7.5" > <!-- IE7 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=100" > <!-- IE9 mode -->
<meta http-equiv="X-UA-Compatible" content="IE=a" >   <!-- IE5 mode -->

or you can push it into compatibility mode by using

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

You can read more details about this at http://msdn.microsoft.com/en-us/library/cc288325%28v=vs.85%29.aspx

Conclusion

It is unfortunate that Microsoft still can’t seem to release a decent browser that doesn’t break the appearance of websites. IE8 was so buggy that I used the above code in many sites to force them into IE7 mode. At least the tools to deal with them have improved which offsets the amount of time I’m wasting supporting yet another browser with another set of browser specific CSS. It is too early to tell what specific fixes are needed for IE9, but I have run into some issues that I haven’t found a fix for yet. Usually you can add position: relative or zoom: 1 to fix most issues, but that didn’t seem to do anything to disappearing sections this time around. We’ll let you know when we do find any new fixes. It seems to be issues that need to be patched it future releases. Make sure you have the most recent versions of script libraries, such as Cufon to support IE9.

That sums up my last couple weeks! Let us know if there is anything we missed.

• Quickly add code to restrict menus
• More accurately removes menus
• Better support for custom Joomla! templates
• Cleans up improper HTML to help cross browser support
• Code is specifically created for each template, so after upgrading cACL you will not loose template support.

libtidy is normally enabled in PHP by default. So little is required to use this extension. There is an on/off toggle button on the main config page that will allow you to turn off this feature if you require broken HTML for your template.

We would like to hear from you about what new features would help your experience with Community ACL for Joomla!

jimport('joomla.application.menu');
$menus = JSite::getMenu();
$m = $menus->getActive();

This checks for the active menus on the page and sets it into the variable $m so we can manipulate it. Next, you need to look at the menutype in the administrator Menu Manager (under Type). This is what we will use to determine which school is being viewed. I want to take this information and set a new variable named $school:

if($m->menutype == 'district-information') { $school = 'district-info'; }
if($m->menutype == 'cityname-elementary-school') { $school = 'cityname-elementary'; }
if($m->menutype == 'cityname-middle-school') { $school = 'cityname-middle'; }
if($m->menutype == 'cityname-high-school') { $school = 'cityname-high'; }

The first thing I did was echo the variable $school into an ID on the body tag.

body id="< ?php echo $school; ?>"

This allows me to style the CSS uniquely according to the school being viewed which gives you a lot of style control. To change the logo I can just call it by the school.

#cityname-high .logo {background: url(../images/logo-highschool.jpg);}

Another thing I did was load a unique module position according to the school so I could publish modules in all pages the menu shows up on. I did this by doing the following:

if($school == 'district-info') {
    echo '<jdoc :include type="modules" name="district_module" style="raw" />';
};
if($school == 'cityname-elementary') {
    echo '<jdoc :include type="modules" name="elementary_module" style="raw" />';
};
if($school == 'cityname-middle') {
    echo '<jdoc :include type="modules" name="middle_module" style="raw" />';
};
if($school == 'cityname-high') {
    echo '<jdoc :include type="modules" name="high_module" style="raw" />';
};

As you can see this can give you the ability to do things you may not have been able to do before in Joomla!. I know it saved me from a major headache!

jimport( 'joomla.application.module.helper' );
if(count(JModuleHelper::getModules('left'))) {
	put your code here
}

A very powerful addition to you Joomla! PHP library!

Coming soon: More template releases! ‘corePHP’ will both sell and release templates in the near future. Templates that are not free will be sold for $9.95 each.

‘corePHP’ welcomes new template developers!

Are you a developer? ‘corePHP’ has opened the jomCalendar template for anyone who wants to build and sell templates. jomCalendar has a built-in template engine and a simple configuration that allows you to design the look you want, whatever that may be. ‘corePHP’ also welcomes template clubs, so feel free to release your own themes and sell them to your clients. We are truly looking forward to seeing what you create!

NOTE – Be sure to read the documentation to understand what formats will work with jomCalendar. Click on Developer Documentation for more information. Check out jomCalendar Demo

Have fun with jomCalendar and be sure to let us know your thoughts!

Best,
Michael Pignataro
VP of Operations

For the most part, it’s pretty straight forward to style an object. For my example I will be putting an orange border around the object. I start with common sense by using:

.wrapping_div object {
    border: solid 2px #fe7600;
    display: block;
}

NOTE: It’s important to have the display:block in the code for Firefox & IE to wrap the border all the way around the object. Safari wrapped it fine without it.

This worked well for standards compliant browsers, but then there’s IE to deal with. IE doesn’t seem to see the object, instead it creates EMBED instead, so I tried the following code:

#ie .wrapping_div embed {
    border: solid 2px #fe7600;
    display: block;
}

Wow! It worked!!! But wait… IE8 now has borders on both the object AND the embed. Not good! Let’s fix that:

#ie8 .wrapping_div object {
    border: none;
}

I believe we now have a winner! This has been checked in IE6-8, Firefox on Mac and PC, Safari, Chrome and the latest Opera and it all looks the same. Amazing!

When creating your Joomla menu be sure to set the menu to LIST. This inserts the menu item id on each item so you can control individual items. Unfortunately, there is no way to have a “smart menu” where it automatically detects where borders should be removed after it wraps. If you do have control of the site though and items aren’t changing a lot then this is a perfect solution. Here is the CSS code:

#footer ul {
    width: 700px;
    margin: 0 auto 10px;
    display: inline-block;
}
#footer ul li {
    display: inline;
    white-space: normal;
}
#footer ul li a {
    padding: 0 15px;
    border-left: solid 1px #666;
    display: inline-block;
    margin-bottom: 4px;
}
#footer ul li.item102 a {border: none;}

The first part is typical and really needs no explanation. The border: none removes the left pipe on the first item in my menu (will be a different number on each site). Doing a menu this way seems to fix the issue with menu items breaking in the middle of two words at the ends which is a huge bonus as well. I know this has saved me countless hours and I hope it does for you as well!

Upon scraping the web for possible solutions I came across this gem:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />