Saturday, 28 January 2012 08:46

Cleaning code in Dreamweaver

When I am editing html or php files when creating my templates, I use Dreamweaver. I have had it for years and it has always worked for me, but there has always being an annoyance.

More often than not, when the file is downloaded from the server to local copy and then opened for editing, a mass of empty lines are added between each code line, bulking out the code.
My OCD kicks in and I have to clear up these blasted blank lines, but it is tedious and takes a lot of time, now I have found a solution.

So if you use Dreamweaver and wish to remove the excess blank spaces, give this a try.

  1. Open the file in Dreamweaver
  2. Press CTRL + F to open the Find and Replace tool
  3. Select Current Document in the Find In selector
  4. Select Source Code in the Search selector.
  5. Make sure the checkbox calle Use Regular Expression is enabled.
  6. In the Findbox, type:  
    • [\r\n]{2,} 
  7. In the Replace box, type: 
    •  \n
  8. Press the Replace All button.

After a few seconds, depending on how severe the clean up is, all those rogue blank spaces will be gone.

Hope someone finds this useful.

Published in K2Joom Blog
Sunday, 22 January 2012 10:48

Customising Tag Views - Information

Any users of K2 may be familiar with creating template over rides, the art of modifying the styling, operation and layout of different K2 views using a K2 template placed in the Joomla template.

For the last couple of years, I have been providing templates, training and customisation of these views and now that V2.5 of K2 is out, there are a couple of considerations to take into account if your creating your own.

Most view customisation continues to use the standard MVC over ride philosophy, except for the tag view to a certain extent.

What is a tag?

A tag is a way of linking content, items, which can be across a variety of categories.
Imagine your selling electrical items on your site, you can use tags in items such as TV, DVD Player, PLASMA, LCD etc etc.
With the related tags links in K2, an item can not only display the tags that have been set, but also items that have the same tag, even from different categories. More information on how to use this will be covered in a future guide.

Template Assignment

Ordinarily, a K2 template over ride can be selected from within the category parameter.
These templates can be either in the component (not recommended) or in the Joomla template (recommended).
You can also select a K2 template via a K2 menu link, more on this later.

The Problem

A tag can link items from different categories.
Each category could have could have been assigned a different template.
Which template should be loaded?
The answer = the default template.

So if you have styled your tag.php in your template and you cant get it to display when a tag link in an item is clicked, you now know why.

An Alternative

Your tag over ride can still be used and displayed, but to see it requires a K2 tag menu link to be created.
Go ahead, create a menu link, select K2, then select the tag type.
In the basic parameters you can then select your K2 template over ride. Complete the rest of the required menu link settings, don't forget to select a tag and to publish it.
Now on the frontend, refresh and click on your newly created tag menu item, hey presto, your over ride style is loaded.

A solution

So how are we going to get the tag.php file from your template to display when a tag is clicked in an item?
Well, for now you will have to move your tag.php and replace the one in the default template.
Its also worth considering, that you will have to add any new css changes to k2.css in the component too.
Even if you use CSS4K2, it wont work on this view. I even tested this by creating a "default" template over ride in the Joomla template, but the component k2.css will still be loaded.

A Suggestion

I think the following would be great if it could be implimented.
In the backend, we can edit tags, so why not allow the ability to select a K2 template which is loaded on a per tag basis, or assign a global template.
Assigning a global template would be essentially the same as saying hey, dont use the default, use this one on every view, but still allow the default to kick in if the view has not been included in the over ride.

Conclusion

Template over rides in K2 allow for some fantastically flexible layouts to be created, but you have to have some understanding on how best to use them, even after all these years, I am having to learn new tricks.

I hope this guide provides a little insight for you, creates some questions or gets you interested in diving into templating.

 

Published in K2Joom Blog
Thursday, 30 June 2011 15:42

Adding on Hover Flares

This is something that I have done in subtle ways in various templates in the past, but on our new site, I have added some glow effects to some container images. After being asked how I did it, I thought I would show you how simple this is.

For a working example, check out our Templates page and hover over one of the images.
In the example, we have added some shadow to the image and a glow effect when you hover over the image.
Note, these images have a white border, which was added in the jpg file, but this can easily be done with css instead, we have done this elsewhere on the site.

For this example we modified the css for .itemIntroText img. In its normal state, we just have a small drop shadow and to do this, we used the following css:

.itemIntroText img {
-moz-box-shadow: 2px 2px 2px #bbb; /* FireFox */
-webkit-box-shadow: 2px 2px 2px #bbb; /* Safari / Chrome */
box-shadow: 2px 2px 2px #bbb; /* CSS */

To create the on hover effect, we created a class as follows:

 .itemIntroText img:hover	{
-moz-box-shadow: 0 0 20px #74869C, 0 0 60px #74869C; /* FireFox */
-webkit-box-shadow: 0 0 20px #74869C, 0 0 60px #74869C; /* Safari /Chrome */
box-shadow: 0 0 20px #74869C, 0 0 60px #74869C);} /* CSS */

If you want box shadows in IE, then you will need to use something like pie.htc so pop over to http://css3pie.com.

Published in K2Joom Blog
Thursday, 30 June 2011 11:49

Fancy Social Icons

I have been playing a little bit with some cool css3 examples recently and will be listing some further little tricks you can incorporate in to your K2 templates. In fact, your not just limited to K2, but even Joomla or any other media comprising HTML and CSS.

In this example, I am going to apply an effect to the social media icons, which will cause them to spin 360 degrees when you hover over them.
This is simple and is cross browser compatible for FireFox 4/5, Opera 10.5+, Safari 3.1, Chrome, IE9 Tested!! Open up your k2.css file and search for .digg and you will find this section of css.

Existing Image Code

a.delicious {background-image: url(images/social/delicious_16.png);}
a.digg {background-image: url(images/social/digg_16.png);}
a.facebook {background-image: url(images/social/facebook_16.png);}
a.googlebuzz {background-image: url(images/social/googlebuzz_16.png);}
a.myspace {background-image: url(images/social/myspace_16.png);}
a.reddit {background-image: url(images/social/reddit_16.png);}
a.stumble {background-image: url(images/social/stumbleupon_16.png);}
a.technorati {background-image: url(images/social/technorati_16.png);}

Now we dont actually need to make any change to this code, just simply extend it a little. The following is the additional css code to add in, simply copy and past it below the a.technorati.

The New Code

/* Transitions */
a.delicious, a.digg, a.facebook, a.googlebuzz, a.myspace, a.reddit, a.stumble, a.technorati {
-moz-transition: all 0.4s ease-out; /* FF4+ */
-o-transition: all 0.4s ease-out; /* Opera 10.5+ */
-webkit-transition: all 0.4s ease-out; /* Saf3.2+, Chrome */
-ms-transition: all 0.4s ease-out; /* IE10? */
transition: all 0.4s ease-out; }

/* On Hover Transform */
a.delicious:hover, a.digg:hover, a.facebook:hover, a.googlebuzz:hover, a.myspace:hover, a.reddit:hover,
a.stumble:hover, a.technorati:hover {
-moz-transform: rotate(360deg); /* FF3.5+ */
-o-transform: rotate(360deg); /* Opera 10.5 */
-webkit-transform: rotate(360deg); /* Saf3.1+, Chrome */
-ms-transform: rotate(360deg); /* IE9 */
transform: rotate(360deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
zoom: 1;}

Save your k2.css, upload it to your server and navigate to a relevant k2 page and then test.
All being well you should see your social icons rotate, just like on this page!!

How it Works

I wanted the transition to happen on the icon, so as they are all individual atags it was easy to just group them together to add the transition and the transform with its behavourial property :hover could also be extended with :active.

Looking at the transform code first, this is end position of where the icon to be and in this case we are spinning it around 360 degrees around the Z-axis which is the axis that extends away from the screen.

Without this transition, nothing is going to happen. Rotating by 360 degrees is going to make the icon spin ‘full circle’, back to the same position it started from but the browser recognises it as a separate position. By adding the transition property, we’re telling the browser to essentially animate between two points. The default starting point for the rotation is 0 degrees and the second point on hover is 360.

transition: transform 0.4s ease-out;

The first part of the transition is what property we want transitioned which of course is the transform. You can also define all or separate properties with commas. The 0.4s is the duration in seconds and the ease-out is the timing function.

If you only want to rotate the icons 180 degrees, then just change all the (360deg) to (180deg) or any other value you want.
For IE support, it works, but you will need to do some additional research and calculations to get the right matric values needed.You can check Microsoft or Wikipedia for some further information.

Published in K2Joom Blog
Friday, 06 May 2011 10:40

Nooku Pre Event Party

So after finally making it to the most amazing venue ROLDUC, a 1000 year old monestory, we dropped of our bags and met a few of the other attendess then headed off to the Pre Party.

This was organised by the Nooku team and did a great job of selecting a venue and organising it.

The venue is Europes largest indoor down hill ski slope SKIWORLD which could be seen from miles away as we approached the city.
Up close, the place is crazy, its huge.  
Speaking with those in the know about skiing, its exactly like a whole ski resort has just been placed in the city and is really authentic.  The down hill run looked great fun, but I kept well clear and stayed in the warmth of the bar where only my fingers got cold on the beer.  

Meeting the great members within Joomla, Nooku Team, Joomla Shack, Joomlart, Valanx, RedShop and so many more.
So many more to met, but certainly up on the Joomla and Beyond Challenge.

 

Published in K2Joom Blog
Thursday, 05 May 2011 10:39

The Hunt for the Holy Grail

Diesel and Unleaded fuel is expensive everywhere, period!
@alexbremer, part of the rally team, has had his car converted to run on LPG too, as the cost is half the price with similar performance. Thats all well and good for UK cars in the UK, but take it to Europe and you might struggle to get hooked up, as they use a differnt coupling to feed the fuel in as Alex soon found out at our first fuel stop.
Luckily, the fuel station had the right adaptor so they were able to fill up and we got on our way.
Purely due to the size of the LPG tank meant we had to make another stop later in the journey, this time, not so lucky.
The fuel station, that had LPG pumps, could not find the right adaptor!! Oh well, normal fuel it was.
We went to a further 2 stations on the hunt for LPG we could actually use and alas, none of these stations had the right adaptor also.
So the hunt for the Holy Grail - UK LPG adpators is on.
The Hunt for the Holy Grail.
Diesel and Unleaded fuel is expensive everywhere, period.@alexbremer has had his car converted to run on LPG too, as the cost is on.
Published in K2Joom Blog
Thursday, 05 May 2011 10:29

The Journey to JAB

The journey to JAB11 is well under way as @k2joom, @philiplocke, @joomkit, @jackbremer, @hughwilliams, @jordanworner touch French soil.
The two cars met in Dover at just before 7am this morning for a breakfast, at Cafe Flicks.
After filling up on tea, coffee and a selection of fried foods, we hit the road for a brief drive to the sea port of Dover for our P&O crossing to Calais.
Timings were perfect as we literally only had to wait a matter of a few minutes before we boarded, right at the front of the ship.
After a quick dancing session by the Bremer brothers, we hit the executive lounge for complimentary Champagne, well at least those of us that were not driving.  The crossing was calm and smooth and our engine still had power, unlike @brianteemans twin prop airplane which had to be changed at the last minute before departure.
Within a space of around 1.5 hours, we landed in the sea port of Calais and promplty departed for our road trip to Brugge where we planned to stop for a bite of lunch. All thats left to do now, whilst I sit in the back of Phils writing this entry, is to get some form of internet connection setup. Unfortunatly, as much as I love my HTC Desire HD, the battery life is shockingly poor and died already after just 5 hours use, good job I brought a variety of chargers.

The journey to JAB11 is well under way as @k2joom, @philiplocke, @joomkit, @jackbremer, @hughwilliams, @jordanworner touch French soil

The two cars met in Dover at just before 7am this morning for a breakfast, at Cafe Flicks.After filling up on tea, coffee and a selection of fried foods, we hit the road for a brief drive to the sea port of Dover for our P&O crossing to Calais.

Timings were perfect as we literally only had to wait a matter of a few minutes before we boarded, right at the front of the ship.
After a quick dancing session by the Bremer brothers, we hit the executive lounge for complimentary Champagne, well at least those of us that were not driving.  The crossing was calm and smooth and our engine still had power, unlike @brianteemans twin prop airplane which had to be changed at the last minute before departure.

Within a space of around 1.5 hours, we landed in the sea port of Calais and promplty departed for our road trip to Brugge where we planned to stop for a bite of lunch. All thats left to do now, whilst I sit in the back of Phils writing this entry, is to get some form of internet connection setup. Unfortunatly, as much as I love my HTC Desire HD, the battery life is shockingly poor and died already after just 5 hours use, good job I brought a variety of chargers.

Published in K2Joom Blog
Thursday, 05 May 2011 01:44

Stupid O Clock

I wasn't quite expecting my first blog about Joomla and Beyond to be produced quite so soon, as its only just 3am nd hence the name of this post.

Over the years, I have done a fair amount of over seas travelling through my previous job as a Field Service Engineer so I am used to getting preparing to go away, but for some reason, preparing for JAB has been a vastly different to all other occasions.

It's taken me much longer than normal to get my bags packed, no idea why as I have did my pre-pack list of what I need to take,  which has been doubled check more times than I have fingers.  I have packed less than I would have done normally, this trips less than a week instead of the usual month long stints I used to do.

Yet for some reason, I am up and dressed before my alarm clock has even had chance to think that it has a job to do.

With all this extra time, I am really going to kick myself when I later find out that despite all my check lists I still forgot something, I so hope not.

Time for some tea, whilst I awaiting Locke Taxis to arrive.

 

 

Published in K2Joom Blog
Wednesday, 27 April 2011 20:56

JAB11 See You There

Joomla & Beyond 2011, Kerkrade in the Netherlands takes place between the 6th and the 8th of May.

This year, I am pleased to be able to attend this event.
The best Joomla event in Europe and possibly the world!!

I will be travelling to the event with Phil Locke (OSM), Alan Sharpe (JoomlKit), Jack Bremer (3B Digital) on the JoomBall Rally and will be posting random goodies on route and during the event.

So keep up to date with my latest coverage of the show and more specifically, on K2 news and presentations as they happen, right here. Simply subscribe to this category and get emailed on each and every new item punblished.

As K2's biggest fan, I am also pleased to be able to spend a little time with Fotis from Joomlaworks to chat and have a little interview, which will be published on www.simon.getk2.org.

If you have a specific and interesting question you would like me to ask Fotis, then send me an email simon at k2joom dot com or post a comment below.

 

Published in K2Joom Blog
Sunday, 23 January 2011 15:02

WYSIWYG Editors

JCE has been our favourite WYSIWYG for years as it provide extra functions to the WYSIWYG editor, allowing extras such as tool tips and pop ups to be created on links and even an image manager to add extra control for imaging too, but now 1.6 is out, it is JCE is not quite ready and the default Joomla editor is basic.

 

So what do we use instead?

Well, I took a quick look on the Joomla Extension Directory and there is currently only 1 editor listed as being 1.6 Native, that is Artof Editor from Art of Joomla.
So I downloaded a copy and set about getting it installed.

Installation 

If you have not used 1.6 before, installation of extensions is done exactly the same way, simple and if installed correctly, you will get the following screen.

artof-cck-installed

This plugin, enables itself at install, so you dont have to manually edit it, but it is worth checking out the parameters.

artof-cck-plugin

All pretty self explanatory and great that there is a direct link to the developers guide too.

You then need to set Artof as your the default editor, which is again is done in the same was as 1.5, Global Configuration > Site.

Now go and edit or create a new article and you will see the new editor, here are screen shots of the 3 available skins.

artof-default-editor-v2

artof-editor-karma

artof-editor-2003

Initial Summary

Well, its a step ahead of the default editor and gives additional functions that are bonus when creating content, its even got some form building functions too. Many of the tools, when clicked, open up a pop up window which has a kind of clunky old school feel to it.artof-image-properties

 

More time is needed to play with it, but if JCE gets released any time soon or someone offers suggestions to test another, I certainly would move along.

Published in K2Joom Blog
Page 1 of 2