[TYPO3-content-rendering] Fancy Corners

JoH info at cybercraft.de
Tue Jun 13 04:55:17 CEST 2006


Hi list.

I currently uploaded a new extension to the repository, that will enable
content boxes with fancy corners.
The idea is using the built in TYPO3 functions for image manipulation to
create something like the famous nifty corners but with more flexiblity in
shapes and colors.

http://typo3.org/extensions/repository/search/fancycorners/1.0.0/

You can setup some default settings using the constant editor.
There you can decide if fancy corners will be enabled by default and setup
the default look and feel.
Additionally each content element has got it's own flexform to create
individual settings there.
Therefor I had to create an XCLASS of t3lib_tceforms to make the colorpicker
wizard work in flexforms. Maybe this could be a core patch for 4.x. (By
default it shows always the same wrong color after saving and some weird XML
stuff on mouseover.)

If you want to use fancy corners by TS only, you can use a postUserFunc with
lib.fancycorners as a basic setup. I added stdWrap properties so that you
can still use additional wraps and functions.

The basic principle is having a div-container with position:relative.
This container has got 3 main div parts: Top Middle and Bottom with
position:relative.
Middle contains the original content element plus some additional divs to
fix a bug of IMGTEXT elements, that are not properly clearing floated
elements.
Inside the Top and Bottom part you will find 3 span tags for Left, Middle
and Right, where left and right got position:absolute and middle is
positioned using margins.
While the corners are created using GIFBUILDER and a specially created
symbol font as CSS background images, the middle parts are colored using
pure HTML colors.
Each corner can get it's own shape, size, color, background and transparency
independently from the others.
Sizes for the span tags are calculated based on maximum values, so the
biggest X or Y value will determine the corresponding size of the other
spans in the same row/column.

Top Middle and Bottom Middle parts are boxes, while Middle Left and Middle
Right are created using borders on the div container.

If the extension works for you without any bugs, I will write some
additional documentation including screenshots and examples as an article
for the content rendering team pages.

Currently tested on: IE6, FF1.5, Opera8 Win and Safari Mac

Have a nice day.

Joey

-- 
Wenn man keine Ahnung hat: Einfach mal Fresse halten!
(If you have no clues: simply shut your knob sometimes!)
Dieter Nuhr, German comedian
openBC: http://www.cybercraft.de





More information about the TYPO3-project-content-rendering mailing list