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.

VIRTUEMART: vmMainPage – Where the heck is it?

A pesky little div class, that took me a while to track down.
In my project there were some styles attributed to it, which were breaking my layout – and I still haven’t been able to find where those styles are..

But I did find the PHP page that generates the div (So I just renamed the div, and applied my own styles)

components/com_virtuemart/virtuemart.php
Line 154

VIRTUEMART: Styling the left side bar cart

The PHP file can be found here:

/components/com_virtuemart/themes/default/templates/common/minicart.tpl.php

VIRTUEMART: Styling the ADD TO CART button

The following will remove the ADD To CART text entirely (This could be used if the button was an image):

components/com_virtuemart/themes/default/templates/product_details/includes/addtocart_form.tpl.php

Other modifications can be made using this line of code.
class: Gives the button a CSS class
value: gives the button text (ie: Add To Cart)

PHP files that create the Blog pages.

** CATEGORIES **

PHP file that creates the products:
components/com_content/views/category/tmpl/blog_item.php

PHP that creates the page
components/com_content/views/category/tmpl/blog.php

** SECTIONS **

PHP file that creates the products:
components/com_content/views/section/tmpl/blog_item.php

PHP that creates the page
components/com_content/views/section/tmpl/blog.php

** BROWSE PAGINATION **
components/com_virtuemart/themes/default/templates/browse/includes/browse_pagenav.tpl.php

** FLYPAGES **

PHP file that creates the products:
components/com_content/views/article/tmpl/default.php

Removing the text heading on the frontpage

There is a text heading wrapped in a componentheading_ div class. To get rid of this, and display an image instead, look up this file:

components/com_content/views/frontpage/tmpl/default.php

Look for the div class componentheading, and wrap that div in a container div.

In your CSS file, set componentheading to display: none – and set a background image in your newly created container div.

Adding a unique CSS class to contentheading on the frontpage

Items in the frontpage are made up of a table with 2 rows, but Joomla has given both rows the same class: contentpaneopen
In my site I wanted my article headings to be contained in a div with a coloured background, and the text within that div needed to have its own unique class (Which it currently does not with joomlas default file)

To access the php file to create your own unique class, head over to this file:

components/com_content/views/frontpage/tmpl/default_item.php