New Templates - My Beautiful Laundrette | CSS Templates

[Till]

"My Beautiful Laundrette" is actually a set of two templates: one template with a monitor resolution of 800px x 600px and higher, the other one a bit wider with a resolution of 1024px x 768px and higher. The latter one contains two columns in the content area - one of which can hold a newsbox, a clock, a calendar or what ever you want.
The templates are not thought to be right out of the box templates, but offer room for own design ideas. They can easily be changed. And to facilitate this option, the templates come with their original Fireworks PNG and Photoshop PSD files.
It comes with a new CSS driven drop down menu holding now up to 4 menu levels. It has a fancy graphical search function and comes with a nice sitemap design, which can hold now also up to 4 menu levels ( this was not possible before).

Download of: My Beautiful Laundrette
Download of: My Most Beautiful Laundrette
Download page
Demo

[ external image ]


[ external image ]

The search function is located on top of the horizontal menu level. If you need the space for additional H1 menu buttons, you can turn a little screw which moves the search function up or down to free space. Read the readme.txt file which comes with the template, if you want to know how it works

[ external image ]


Till


1) Template name: My Beautiful Laundrette.

2) Template resolution: 800px x 600px and higher / 1024px x 768px and higher.

3) Features: Drop Down menu up to 4 menulevels. Nice search box. Styled sitemap.

4) This template is meant as a guideline for your own template developement. The graphical work can easily be adapted according to your own needs. You just add your own top image and change the color of the buttons. For the horizontal menulevel 1 menu there exist already hover buttons in red, blue, and green. You just exchange them. The hover colours of the lower menu levels have to be changed in the stylesheet. Here we have only coloured fields.

In order to facilitate graphical work, we have added the original template graphics as Fireworks PNG and Photoshop PSD-files. You find them in the "ORI" subfolder.

5) The search button is located in the menulevel 1 area. If you need the space for menu buttons, you can move the search function up or down. To do this, open the stylesheet.css file. In line 21(23) you find an outcommented instruction starting with: /*div#searchbox {position:absolute;top:-25px;........................ */
Remove the outcommenting signs (/* and */) and add them to the instruction just one line above in order to deactivate the unwanted location (or delete the line). Now you can move the search function up or down by changing the instruction "top:-25px". Just use different numbers.

6) In order to use 4 menu levels you have to set "menu_levels:" to "4" in CMSimple's configurations.

7) We suggest to set "menu_sdoc:" to "parent" in CMSimple's configurations. This is not a prerequisite to use this template, but it looks better.

8) This template has been positively tested with: IE5.5, IE6, IE7, IE8, FF3.x, Chrome1.x, Safari4.x

9) Licence: This template underlies the AGPL3 conditions.

copyright: NMuD|2009

[CMSimple-Styles.com]

Hi Till, this Template looks really great, i like it very much! Especially the attention to small details like the magnifier icon mouse over.

[Till]

Especially the attention to small details like the magnifier icon mouse over.

Thanks a lot. However, most of the work was to find out, how to extend the drop down menu to 4 levels. It was a client's question. Now I know how to extend it up to 10 menu levels who ever it wants And it runs even in IE 5.0 - who ever it runs .

Till

[Till]

Because of four CSS mistakes and spelling errors in both templates they have been updated. In addition the search modul is a bit more fancy.

Till

[wosee]

I like this template a lot. Ever thaught about making a fluid version that resizes between 800 and e.g. 1600 px width?
I've noticed that laundrette puts main2_bg.jpg into tables created by FCKeditor. Bug or feature?
Moreover, Firefox puts a border around picturelinks. Is it possible to remove it? I cannot find any link attributes in the stylesheet.

BTW: In my opinion all your work is very great!

[Till]

Ever thaught about making a fluid version that resizes between 800 and e.g. 1600 px width?

I think this is not such a good idea with templates having a horizontal menu. If you shrink the size of the window, the buttons may start popping around which looks rather funny. With vertical menus (drop down menus too) I generated flexible templates already.

I've noticed that laundrette puts main2_bg.jpg into tables created by FCKeditor. Bug or feature?

The template does not have a single table. If you edit content text using FCKeditor, the editor cannot change the template. So I don't understand what you mean.

Moreover, Firefox puts a border around picturelinks. Is it possible to remove it? I cannot find any link attributes in the stylesheet.

Edit ste stylesheet.css file and add to the bottom of the file:

Code: Select all

img {border:none;}

or better:

Code: Select all

a img {border:none;}

BTW: In my opinion all your work is very great!

Thanx


Till

[wosee]

I'm sorry, a picture says more than thousand words. I meant tables in the content written by FCKeditor.
[ external image ]
That's the code:

Code: Select all

<table width="95%" cellspacing="1" cellpadding="1" border="0">
    <tbody>
        <tr>
            <td> 
            <p style="text-align: center;"><img alt="" style="width: 312px; height: 234px;" src="/beispiel/images/auto_rot.jpg" /></p>
            </td>
            <td>
            <p style="text-align: center;"> </p>
            <p style="text-align: center;"><strong>Rotes Auto</strong></p>

            <p style="text-align: center;">Unser rotes Auto ist ausgestattet mit</p>
            <ul>
                <li style="text-align: center;">roter Farbe</li>
            </ul>
            </td>
        </tr>
        <tr>
            <td> 
            <p style="text-align: center;"><img width="300" height="167" alt="" src="/beispiel/images/auto_blau.jpg" /></p>

            </td>
            <td>
            <p style="text-align: center;"> </p>
            <p style="text-align: center;"><strong>Blaues Auto</strong></p>
            <p style="text-align: center;">Unser blaues Auto ist ausgestattet mit</p>
            <ul>
                <li style="text-align: center;">blauer Farbe</li>

            </ul>
            </td>
        </tr>
        <tr>
            <td> 
            <p style="text-align: center;"><img alt="" style="width: 299px; height: 198px;" src="/beispiel/images/auto_bunt.jpg" /></p>
            </td>
            <td>
            <p style="text-align: center;"><strong>Buntes Auto</strong></p>

            <p style="text-align: center;">Unser buntes Auto ist ausgestattet mit</p>
            <ul>
                <li style="text-align: center;">schöner Farbe</li>
            </ul>
            </td>
        </tr>
    </tbody>
</table>

http://wosee.ath.cx/beispiel/?Unsere_Autos

Thx for the hint, but how do you make links red? I thaught I'd find that color in the stylesheet. However, I didn't...

Ad horizontal menu: Couldn't you integrate that maxwith for the menu too?

[Till]

I'm sorry, a picture says more than thousand words. I meant tables in the content written by FCKeditor.

This is the done by the editor. It does not have anything to do with the template. I don't use FCKeditor, so I don't know.

Thx for the hint, but how do you make links red? I thaught I'd find that color in the stylesheet. However, I didn't...

I think it's this here:

Code: Select all

div#TSmainContent a {color:#c00;text-decoration:none;}

Till

[wosee]

Yeah... looked for the wrong color, thx!

Of course FCKeditor creates the table, but your template places it's background into it. Moreover, the function <?php echo editmenu();?> has got the template's background. I guess making a table with every other random editor or by hand would result in the same background.

I changed

Code: Select all

body,td,th {font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;font-size:small;background:#fff;}

to

Code: Select all

body{font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;font-size:small;background:#fff;}

and the table's background is correct for me. So i think either td or th or both are "too much". I don't know what these expressions do, but to me the template looks better without it.

[Till]

Maybe, you are right! I should change the template and remove the th,td. This is old CSS stuff for old browsers, anyway.

Till