[TYPO3-english] Style the default login box

Marcus 'biesior' Biesioroff vsbies at wp.pl
Sun Feb 22 11:21:42 CET 2009


Marco Couperus pisze:
> Hello all,
> 
> I'm trying to change the width of the felogin password input area. I checked
> out the sysext felogin directory and found a beautiful template. However,
> when I apply some css there my felogin does not change.. Checking the
> browser source I get all these csc*   label and stuff assigned as the id,
> class. 
> 
> Can anyone tell me what the correct procedure is to editing the style of the
> felogin? For some reason I'm mssing something here..
> 


First of it all make a copy of template into own location (ie.: 
fileadmin/template/felogin/template.html). Keep in mind that every 
template from extension should be changed in own location, cause when 
you'll update the TYPO3 core or some extensions all your changes will be 
overwriten.

Later you can assign the template to your felogin trough the field in 
the Content Element -> plugin: felogin or via TypoScript (check 
felogin's manual)

CSS styling: fastest way: give some class names to elements you want to 
control for example:

   <input class="felogin_user" name="user" type="text" value=""  />
          ^^^^^^^^^^^^^^^^^^^^

and later place in your MAIN CSS file just one line:

   input.felogin_user { width: 500px; }

that's all of the magick and it always works.

In the other hand I prefer to close all template in some container ie: 
<div class="felogin_container"> html template... </div> and later use 
CSS in it's context cause it works at whole group of elements:

   div.felogin_container input { width: 500px; }

you can also include additional css file trough TS: page.includeCSS, but 
believe me it make no sense (in this case) :)

PS. I always use FireFox with FireBug for CSS adjusting. Thanks to them 
I can check problems and test other values for CSS properties 
immediately at the live page.


-- 
Marcus 'biesior' Biesioroff
a.k.a. Marek Krawczyk (original)

Polish TYPO3 Community Proud Member
http://typo3.pl


More information about the TYPO3-english mailing list