JOOMLA: Adding a header image to the Jforms extension

The default PHP file for Jforms can be found at:
joomla/components/com_jforms/views/form/tmpl/default.php

Take a look at the code, and you will see the following towards the start of the code:

You may need to get rid of the margin and padding for Jforms. this can be found in the CSS file:
joomla/components/com_jforms/views/form/default.css

setTimeout – Creating a pause in the script.

So I had a bunch of actions, that I want to be executed after a small delay..

In this example, I have a button that will do 2 things: create a tween on a movieclip, and then (after a small 1 second delay) move to a specified place on the time line. Here’s how to do it:

** please note: I’ve used the TWEENER class to create the tween **


myButton.onRelease = function() {
import caurina.transitions.*;
Tweener.addTween(_root.site.myMovieClip, {_x:0, _y:0, transition:"easeOutQuad", time:1});
setTimeout(testTimeOut,1000);
};
function testTimeOut(){
_root.site.gotoAndPlay("home");
};


Here is how it works:

myButton.onRelease = function() {
/* INSERT FIRST ACTION TO BE PERFORMED HERE */

setTimeout(testTimeOut,1000); /* THIS CREATES A FUNCTION CALLED setTimeout. 1000 = 1 second */
};

/* THE FOLLOWING LINE CALLS THE FUNCTION */
function testTimeOut(){
/* INSERT SECOND ACTION TO BE PERFORMED AFTER THE DELAY HERE */
};

v1.5.14 TinyMCE editor not displaying flash SWF

Seems that the tinyMCE editor in joomla version 1.5.14 is a little buggy. I’ve already encountered 2 problems with it, which after a few sleepless nights I’ve finally solved..

First problem:
The wysiwyg editor doesn’t have an icon to embed media.
Solution:
Open the plugin Editor – TinyMCE in the Plugin Manager (Extensions -> Plugin Manager) and set the parameters as follows:
- Functionality to Extended

Second problem:
After inserting a swf (Using the insert media button), the swf doesn’t display at all when viewing the site. On closer inspection of the code, you will notice that it’s magically changed from OBJECT to IMG
Solution:
Open the plugin Editor – TinyMCE in the Plugin Manager (Extensions -> Plugin Manager) and set the parameters as follows:
- Code Clean Up = Always

JOOMLA: Install problem with configuration.php

In the pre-installation checklist, you might get configuration.php marked with a NO. Just ignore this and continue with the installation.

Once the installation is complete, copy all the text inside the file configuration.php-dist, and save it to a new file called configuration.php. Open up your new file and copy in the server and ftp information that is shown in the final screen of the joomla installation. Upload the file to the root directory of your joomla installation.

Access phpMyAdmin on Plesk

> login to copanel
> Go to desired domain
> Go to databases.
> Click on desired database – Then you will find a link called “Web Admin”, click on that. It will redirect you to the PhpMyadmin tool.

Full browser width div in IE

To create a div the full width of the browser – and have it working in properly IE:

html, body {
width: 100%;
margin: 0;
}

#myDiv {
min-width: 100%;
}

CSS: Sticky Footer

To make a footer stick to the bottom of the page, even when there isn’t enough content for the footer to normally reach the bottom of the page:

NOTE: you must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser.

MORE INFO: http://www.cssstickyfooter.com/

HTML

CSS
html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;} /* must be same height as the footer */

#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}

/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

CSS: Making a DIV height the same as the browser height

html, body {
height: 100%;
}

#div {
min-height: 100%;
}

Horizontal Navigation list with CSS rollovers

Ok we want to create a horizontal Naviagtion bar, by creating a list containing images for buttons instead of text. Pretty simple stuff.

Here’s the HTML code:

Here’s the CSS code (X = your numerical value):
#myList {
list-style-type: none;
padding: 0;
margin: 0;
}
#myList li{
display: inline;
}
#myList span{
display: none;
}
.item1 a {
display: block;
background-repeat: no-repeat;
background-image: url(../images/sprite.jpg);
background-position: -Xpx -Xpx;
width: Xpx;
height: Xpx;
float:left;
}
.item1 a:hover {
width: Xpx;
height: Xpx;
background-position: -Xpx -Xpx;
}


VIRTUEMART: Login breaks CSS

Problem: Everytime a user logs in/out the page CSS breaks

On further investigation, I noticed that when I logged in or out, I was automatically taken back to the sites front page, and it was infact only the front page that was breaking. When naviagting to other pages on the site they all behaved correctly..

Simple fix: In the modules backend admin, I just changed the login redirection to stay on the same page that the user log’s in/out on, and everything has seemed to work fine since.