PrestaShop has a really nice structure for handling all the CSS that will appear in a site. It starts by splitting the CSS so that the CSS is split up per modules. There is a global CSS sheet but this should only be used for things that genuinely appear on all pages.

Extending the CSS of a module in PrestaShop is easy. All you need to do is create a CSS file that matches the naming convention of the module you are looking to extend.

For example if you wanted to change the CSS of the “Wishlist block” module (a.k.a. blockwishlist) in your theme, you would create the file themes/mytheme/css/modules/blockwishlist/blockwishlist.css. This file will then be included on every page that the CSS from the blockwishlist module appears on.

This system is good because it minimises the amount of CSS the browser has to load and also splits the concern of CSS into separate files making it much easier to manage. It also makes adding to a modules CSS with in a theme much easier.

One problem with this method of handling CSS is that by default a PrestaShop site may want the browser to download ten or more individual CSS files which is quite a overhead. Fortunately since PrestaShop 1.4 it has supported CCS merging (referred to as CCC in the admin) which causes the CSS for a page to be merged into a single file on the server to prevent the client having to download tens of CSS files.

Okay, this is hacky but it really works, and saves a lot of time!

To copy the css selector of an element in chrome, you need your developer tools open popped-out of chrome, not docked but here is the trick :-

Inspect the element that you want, be sure it’s selected in developer tools, then press F12. This will open a second developer tools window inspecting the first developer tools.

Then, insert the following two lines of javascript magic, one at a time – the first pulls jQuery into the developer tools and the second runs a function to build the css path and output it into the console!

First jQuery :

var script = document.createElement('script');script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js";document.getElementsByTagName('head')[0].appendChild(script);

Then the path :

path=""; function addtopath(str) { if(typeof(str) != 'undefined') {path = str+' '+path} } jQuery('.crumbs span').each(function(){addtopath(jQuery(this).attr('title'))}); path;

You can try stringing them together into one command, but sometimes jQuery doesn’t seem to load fast enough.

The latest version of the less compiler in ruby has reduced the functionality of watching a file, so we wrote this little script (which we put in ~/bin/lessc-w) to restore the old functionality :

#!/bin/bash

LESSFILE=$1
CSSFILE=`basename $1 .less`.css

if [ "$2" != "-f" ]; then
    if [ "`file -b $LESSFILE`" != "ASCII text" ]; then
        echo "file $1 doesn't look like a less file...., looks like a `file -b $LESSFILE`";
        echo "usage: lessc-w lessfile.less [-f]";
        exit
    fi
fi

while true; do
    inotifywait -e modify $LESSFILE && \
    echo "Rebuilding styles" && \
    lessc $LESSFILE > $CSSFILE
done

As you can see it’s very simple to tweak this to any program that needs to be run when a file is changed.

I do a lot front end development with Magento, and one of the biggest time sinks for this is waiting for a page to load when you want to change a line of CSS.

Whilst you can use Firebug / Chrome to edit CSS rules on the page, you still need check that the file is saved correctly. As this is Magento, this can take some time due to caching being disabled.

Thankfully there is an extension for Chrome which will just reload you CSS files and not the entire page. You can install it here and save a lot of time during development!

I was recently asked by a client to create a scrollable, navigation menu for their site. However, they wanted it to have an onHover submenu that expanded to the side, over the top of the scrollbar.

The problem with this is that there is noway to do this using normal css, over the overflow:scroll hides the sub menu. If you put the submenus into a different div outside the scrollable area, then you can run into problems with the onHover thinking you’ve left the target.

To get round this I put together the following jQuery, HTML and CSS, which I hope will help someone.

<div class="categories">
	<ul>
		<li class="level0 first parent">
			<a href="path/to/link">
			<p>First Item</p>
			</a>
			<ul style="display:none">
				<li class="level1 first parent">
					<a href="path/to/link">
						<p>sublevel-1</p>
					</a>
					<ul style="display:none">
						<li class="level2 first">
							<a href="path/to/link">
								<p>sub-sublevel1</p>
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="level0">
			<a href="path/to/link">
				<p>Second Item</p>
			</a>
		</li>
	</ul>
	<div id="hoverMenu" style="display: none; ">
		<div id="subHoverMenu" style="display: none; "></div>
	</div>
</div>

.categories{background:white;height:310px;overflow:scroll;overflow-x:hidden;}
.categories .active{background:red;}
.categories ul{padding:9px 10px 0 10px;}
.categories ul li a{color:black;height:21px;line-height:21px;}
.categories ul li a p{font-size:13px;padding:0 0 0 0;margin:0 0 0 0;white-space:nowrap;}
.categories #hoverMenu{background:white;height:auto;position:absolute;width:auto;z-index:150;} 
.categories #hoverMenu .active{background:red;}
.categories #hoverMenu li{padding:5px 10px 5px 20px;}
.categories #hoverMenu p{color:black;font-size:13px;white-space:nowrap;}
.categories #hoverMenu #subHoverMenu{background:white;width:auto;height:auto;position:absolute;z-index:150;}
.categories #hoverMenu #subHoverMenu .active{background:red;}

	jQuery(document).ready(function() {
		jQuery(".categories li.level0").mouseenter(function() {
			jQuery(this).siblings().removeClass('active');
			jQuery(this).addClass('active');
			if(jQuery(this).hasClass('parent')) {
				jQuery('#hoverMenu ul').remove();
				var pos = jQuery(this).position(); 
				var mouseX = pos.left + 175;
				var mouseY = pos.top; 
				var subMenu=jQuery(this).children('ul:first')
				subMenu.clone(true, true).show().appendTo('#hoverMenu');
				jQuery('#hoverMenu').css({'top':mouseY,'left':mouseX});
				jQuery('#hoverMenu').show();
			} else {
				jQuery('#hoverMenu ul').remove();
				jQuery('#hoverMenu').hide();
			}
		})
		
		jQuery(".categories li.level1").bind('mouseenter', function() {
			jQuery(this).siblings().removeClass('active');
			jQuery(this).addClass('active');
			if(jQuery(this).children('ul').length) {
				jQuery('#subHoverMenu').empty();
				var subPos = jQuery(this).position();
				var subMouseX = jQuery(this).outerWidth();
				var subMouseY = subPos.top; 
				var subSubMenu=jQuery(this).children('ul:first')
				subSubMenu.clone(true, true).show().appendTo('#subHoverMenu');
				jQuery('#subHoverMenu').css({'top':subMouseY,'left':subMouseX});
				jQuery('#subHoverMenu').show();
			} else {
				jQuery('#subHoverMenu').empty().hide();
			}
		})
		
		jQuery(".categories li.level2").bind('mouseenter', function() {
			jQuery(this).siblings().removeClass('active');
			jQuery(this).addClass('active');
		})
		
		jQuery('#hoverMenu').mouseleave(function(){
			jQuery('#hoverMenu ul').remove();
			jQuery('#hovermenu').hide();
			jQuery('#subHoverMenu').empty().hide();
		})
		
		jQuery('#subHoverMenu').mouseleave(function(){
			jQuery(this).empty().hide();
		})
		
		jQuery('.categories').mouseleave(function() {
			jQuery('#hoverMenu ul').remove();
			jQuery('#hoverMenu').hide();
			jQuery('#subHoverMenu').empty().hide();
			jQuery(".col-left .category-list .categories li").removeClass('active');
		})
	})

Obviously, change styles and content as required

If you are having an issue with Magento and the optional Merge CSS Files (beta) turned on and it not updating with recent CSS changes, you may appreciate this.

Unlike other cached elements that are stored in var/cache, Magento stores the cached and minified CSS files in media/css

If you simply delete the contents of this folder, your CSS changes should kick in as Magento is forced to rebuild these files.

There is an option in cache management to flush CSS storage but for some reason this wasn’t working for me. Could be a permissions issue or something else I am not sure, we simply needed to get this change implemented (emergency live site fix) so flushing this folder manually did the trick.

Hope it helps someone else looking for Magento merged CSS clear not working, Magento CSS cache, Magento CSS Files beta

If you want to include a custom stylesheet for a particular category you can do this very cleanly by specifying custom layout xml in the category admin.

Simply find the category you want to apply this to and then hit the [display settings] tab

Then in the custom layout update box, paste something like this:

<reference name="head">
<action method="addCss"><stylesheet>css/extra_styles.css</stylesheet></action>
</reference>

clear your cache and this stylesheet should be included in the head section for this category.

You could of course do this in the layout XML files, however if you need somethign that the admin of the site can easily apply to any other new categories that needs the same treatment then this is a great solution.

Our last post on getting less css doesn’t work any more for installing less css on 10.10, due to changes in rubygems and ubuntu/debian, so here’s some updated instructions that work again!

sudo apt-get install rubygems1.8 ruby1.8-dev
sudo gem install rubygems-update
sudo gem update rubygems
sudo gem install less

And also remember that you have to either have your gems binaries in your path or symlink the lessc into somewhere that’s in your path, eg. like this

sudo ln -s /var/lib/gems/1.8/bin/lessc /usr/bin/

This project required a change in the design of the footer by grouping the links into four main categories, it also include adding the predominant credit card logos that appropriately fits with the theme of the site.

Came across this intriguing idea to create polygons using only CSS and basic HTML – very simple and practical.

Here is the code

 <html>
	<head>
		<style>
		div {
				width:0;
				height:0;
				border-left: 400px solid transparent;
				border-right: 400px solid transparent;
				border-top: 500px solid red;
				border-bottom: 0;
		}
		</style>
	</head>
	<body>
		<h3>The Triangle Below is a Single Div</h3>
		<div/>
	</body>
</html>

The original blog post is here.

Live example is here

More…

Ikreativ | cssWOW:: CSS Gallery
Stubbornella » Blog Archive » Object Oriented CSS, Grids on Github
1px Background Alignment Bug – Firefox/Safari/Chrome – Background …
Tools – CSS Image Sprites — phpgamespace.com
Pacweb Internet » Blog Archive » CSS Image Rollovers with No …
6 ways of styling a search form with css « CssFinest
CSS On-Hover Image Captions
Week 5: Advanced CSS: Part III, Site Outline, Production Schedule
Polygon and Sub-D Modeling in Maya | Free ebook download …
30 free online image editing softwares
Best Web Design 2.0 Business Web Site Custom Design Services
Los Angeles Seo Services Include Web Design
Offshore Web Design and Development – Use Great Opportunities …
Discover The Google Crush Method » Blog Archive » Custom Web …