Jump to content
Eihwaz

Fluid rounded corners with sprites

Recommended Posts

While working on "bistork" module, that should allow any column width, I wrote a tiny script that allows to create cross-browser rounded corners for your div.blocks.

And because it can be used separately from the module, I've decided to share it.

Blocks on right and left columns in Prestashop are 191px by default, but you may want to have blocks of different widths on different pages. Here's how you can avoid redrawing blocks' headers and footers every time their width change and without changing your mark-up:

$(function(){
var blocks = $('div.block');

if (blocks.length > 0)
{
	blocks.each(function(){
		$(this).find('h4:first').wrapInner($(document.createElement('u')));

		$(this).append($(document.createElement('div')).addClass('block-footer').append($(document.createElement('u'))));
	});
}
});

 

This script wraps everything in block's "h4" (which is your block header) in a "u" tag. And then it also appends a div with class "block-footer" to your block with another "u" tag inside it, so your block structure now looks something like this:

<div class="block">
<h4>
	<u>My Block</u>
</h4>
<div class="block_content"></div>
<div class="block-footer">
	<u></u>
</div>
</div>

 

Now using two sprites attached we can style blocks to have rounded corners like this:

div.block h4 {
/* Moved all the rules from h4 to h4 u, here we only need the background */
background: transparent url('../img/headers_sprite_endings.png') no-repeat 0 right;
}


div.block h4 u {
display: block; /* u is an inline element */
text-decoration: none; /* and it adds an underline, so we reset that */
text-transform: uppercase;
font-family: Arial, Helvetica, Sans-Serif;
font-weight: bold;
font-size: 1.2em;
padding-left: 0.5em;
margin-right: 8px; /* The width of our sprite "ending" */
padding-top: 2px;
line-height: 24px;
color: #374853;
height: 24px;
background: transparent url('../img/headers_sprite.png') no-repeat 0 left;
}

div.block .block-footer  {
background: transparent url('../img/headers_sprite_endings.png') no-repeat -24px right;
}


div.block .block-footer u {
background: transparent url('../img/headers_sprite.png') no-repeat -24px left;
}

div.block .block_content {
background: #fff;
/* Add left and right borders of the matching color and width */
border-left: 4px solid #d2edf4;
border-right: 4px solid #d2edf4
}

 

And now your blocks should have a nice blue rounded corners, that stretches to fill the block if necessary.

post-15892-0-07671600-1333274909_thumb.png

post-15892-0-07728800-1333274919.png

Share this post


Link to post
Share on other sites

Hi Eihwaz,

 

Thanks for sharing it!

 

I moved your topic in the free section. It would be more visible this way :).

Share this post


Link to post
Share on other sites

I'm an old ASP programmer who never really got around to learning PHP.

This is exactly what I'm looking to do but I don't know where this code should be included at.

 

It looks like it should go into one of the .tpl files, but which one?

Any help??

Edited by cybermatrix (see edit history)

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More