Macrotone Blogs

Macrotone blogs upon Joomla, our products and other matters.
Categories
Tags
Archives
Calendar
Categories:   All Categories
Suggested keywords
x

CSS

Subscribe to this list via RSS
Geoffrey Chapman

Speeding up site loading

Came across this small post about improving the speed of a web site which I thought might be of interest to some.

It mentions the compression of JavaScript files using gzip by entering the following command in the .htaccess file.

AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript text/javascript
This doesn’t apply to our particular site since we already make use of the feature which is automatically inserted into the .htaccess file by Akeeba Admin Tools Pro by turning on "Automatically compress static resources" in the .htaccess maker
Tags:
htaccess CSS Javascript website performance
Geoffrey Chapman

CSS: Text wrapping in a table cell. Part 2

CSS logoWe previously made an entry about long text strings overlapping table cells.  It was time to relook at the problem again after we saw a few more instances on our site.

The problem is quite common and has been mentioned in various articles upon the web for many years.  Solutions have ranged from the use of code to add extra spaces into the text fields, sometimes using ‘hidden’ characters, to various suggested CSS additions, many of which have browser dependencies.

This article on Stackoverflow summaries the suggestions quite adequately, but unfortunately didn’t provide a suitable solution.

Finally I discovered an article which describes the problem perfectly with examples. It is quite old (2007) but still holds true even today, with many revisions of browsers later.

In our case the final table cell was overlapping the right hand side menu and module displays, with the modules on top obscuring the table cell contents. We resolved it by using the suggestion in the article by changing to a fixed width table. Now the word-break could work.  It does mean that some of the other columns are slightly larger but it does produce a more professional output on the site.

This change will be implemented in latter releases of the Issue Tracker component.

Template Override

Whilst investigating this problem we had forgotten that we had implemented a CSS table override for the component so it is perhaps worth mentioning that here as well.  The CSS override is created by creating a file in the templates directory under template_name/media/com_issuetracker/css/ named issuetracker.css.  A copy of the distributed CSS file would serve as a starting point.  When changes are made to this file they take effect and override those in the media/com_issuetracker/css/issuetracker.css file.  This means that any changes you make would still apply even when/if the component is upgraded.  It is a convenient place to test out small CSS changes.

Tags:
CSS Issue Tracker joomla tables
Geoffrey Chapman

Experiences with JQuery and Dialog boxes

jqueryWe recently started work on a plugin enhancement that was intended to add a ‘button’ to an existing form programmatically which when pressed would open a ‘popup’ window where the user could review a generated ‘parameter value’ and either accept it or regenerate the value until an acceptable value was obtained, before returning to the calling screen, where the value is inserted into an existing form field.

With the design intent decided upon, the fun part of making the change started.  Firstly the existing form is an already existing Joomla form which for obviously reasons we do not want to modify, other than programmatically.  We looked at using Mootools  initially, but this is gradually being replaced by the use of JQuery, so it seemed sensible to start using JQuery.  An additional consideration is that the JQuery UI tools, specifically the Dialog boxes look very useful.

After much testing and frustration we discovered that there are some specific ‘id’ specifiers that JQuery does not like using. For example we could place the ‘button’ using the id field on the JForm label tag, but not on the JForm input tag.  No error messages were ever seen, just that the instruction was silently annoyed.  This seems to be related to the specific ‘append’ function we are using. There is the possibility to use ‘append’, ‘prepend’, ‘after’ and before (ignoring ‘appendto’ which is the same thing only with the arguments transposed). The input tag does not accept the use of append (or prepend). Very strange.  Investigation isn’t helped by the fact that viewing the web page, doesn’t show ‘our’ added button etc in the HTML code, presumably since this is not the ‘source’ web page but one we have modified. Not sure, or indeed found a solution to this particular problem yet.

Since we were using an existing (base form) we not only had to add the button to the form but also add a place holder for the JQuery UI Dialog box, otherwise the dialog box is never displayed.

Another challenge is the CSS involved with the additional strings. To get the popup box, one has to have  the CSS included in the page usually with one of the JQuery Template CSS types such as smoothness. Unfortunately this also changes the CSS of the newly inserted button used to call the popup. This is not really desirable since we want the calling page to ‘look’ like the existing form page with the exception of our added button. [Note this applies even if instead of a button, we use a simple anchor link to the popup, so is not specific to the use of a button.] So it is necessary to also include code to remove the CSS from the button that we had inserted to call our ‘Dialog box’.

Creating the generated popup window contents was relatively easy, as was also inserting the generated values back into the main form once the user has accepted them.

Since we want also to pass in certain parameters to the generated ‘parameter’ creation  code behind the ‘Dialog box’ we decided to add the Java via a PHP routine call. In this way we could also ensure that the appropriate language strings were also passed in, thus ensuring that the plugin was ‘multi-lingual’.

We do not consider ourselves Java experts by any means, but have little difficulty in generally getting what we want working.  We still a little bit of tweaking to perform on the java code itself, but we are pleased to say that it is working very much as intended so will be included in the next release of out Password Control plugin.

It was ‘fun’ although somewhat complicated by the apparent inconsistences of getting the initial button placement working in the desired position, and the need to modify the CSS on our original form for our newly placed button. The jury is still out on whether it is better than Mootools, but since Joomla is heading towards greater use of JQuery and phasing out Mootools it is a route that more and more will have to follow.

Tags:
JQuery joomla Javascript Plugin PHP CSS
Geoffrey Chapman

CSS: text wrapping in a table cell. word-wrap

The subject of wrapping text in a cell with CSS is reasonably well documented, and we recently investigated a specific case where the use of the standard ‘options/commands’ didn't seem to be having the desired effect. This was complicated by the fact that the target cell was a variable width.

The obvious commands are:

word-wrap  - which can take the one of two optional parameters:  ‘normal’ which will break words only at allowed break points; and ‘break-word’ which allows unbreakable words to be broken.

word-break – which has three possible values: ‘normal’ which breaks non-CJK scripts according to their own rules; ‘break-all’ where lines may break between any two characters for non-CJK scripts; ‘hyphenate’ where words may be broken at an appropriate hyphenation point.

Despite ‘playing’  with these the text was not breaking at the end of suitable values.

Continue reading
Tags:
website tables CSS
Geoffrey Chapman

CSS Sprites

For those that have been using our Issue Tracker component, they are aware that we have invested a certain amount of time improving the look of the front end screens of the component.   With the emphasis now turning to the changes required for Joomla3.x we recently looked at using CSS sprites.

If you are not familiar with Sprites, they can be thought of as one ‘large’ image containing lots of smaller images.  The theory being that loading one image is a lot quicker than loading a lot of small images and save bandwidth.  The individual images enclosed within the large ‘image’ are accessed by specifying its position within the larger file.

There is a simple article which explains this is slightly more detail, so it is not worth repeating it here. In actual fact there are a lot of articles scattered over the web that go into the use of Sprites, of mixed usage.

One might think that it is a lot of work creating the ‘combined image’ and its references, but there are a number of sites on the web that perform most of the work for you.  We have tried a number of them with varying success.  One of the better ones (in our opinion) is Zero Sprites which creates quite a nice compact combined image and generates the required CSS lines for one to customise and use in ones application.

We have got this all working ourselves, but observe that on a number of web sites we visit that even if we use sprites ourselves the impact on the site as a whole is often minimal since there are so many other ‘components/modules’ etc.  in use that our images are often only a fraction of those in use.  Having said that there is a saying that ‘every little bit helps’ so with that in mind the work involved must be worth it.

Tags:
developers CSS joomla
Geoffrey Chapman

Experiences with CSS and a table style

Whilst working on presenting a sample table style for our Issue Tracker component one particular colour combination was creating a few problems. The main problem was the colour of the links in the table header.  These would be used to sort the list and due to the choice of colour scheme the link colours were taking the settings from an earlier (in the tree)  DIV style.

This resulted in us temporarily shelving the table style until such time as we had to investigate further.  With the release of 1.3 of Issue Tracker we have now turned our attention back to the style sheet. The investigation was interesting and it is likely that others might benefit from our experiences hence the decision to make it a Blog post.

The resolution was to make use of the  !important declaration which been around since CSS1 but should still be used with caution.

Continue reading
Tags:
Tools tables joomla Issue Tracker CSS
Go To Top

Joomla! Debug Console

Session

Profile Information

Memory Usage

Database Queries