[Plone-UI] Plone RTL Fixes / Hacks - logo, sitemap & overlapping icons

Ben Osman ben at smoothify.com
Wed Feb 15 16:13:40 UTC 2006


Hi All

Lastnight Ofer Weisglass asked me to have a look at the RTL.css
problems. Despite knowing nothing about RTL i decided to give it a go....

The fixes covered here are: too wide logo/page, sitemap alignment &
overlapping icons.

I've made progress and it looks a lot better in Firefox now but the
changes only work on 2.1.2

See a demo site here : http://smoothify.net/hebrew/

I've attached the two files i've updated for the RTL fixes to this post.
There is also a minor change that needs to be made to public.css.dtml
(see below).

The changes i made to RTL.css.dtml: (search for Ben Osman to see my fixes)

*Logo Fix*

i've added an explicit width value (using dtml) to set the logo to the
correct width and almost completely fix the wide page problem.

*Sitemap Fixes*

      * Added #portal-sitemap declarations to the generated part to set
        icons to be over to the right (missed off)
      * Set the borders and margins for  #portal-sitemap items to match
        right alignment.

There does seem to be a bug in IE with item below the members folder
showing an incorrect border. There is an empty
<ul class="navTree navTreeLevel2"> tag and this seems to be affecting
the item below despite being closed.

http://smoothify.net/hebrew/sitemap

*Icon workarounds / hacks*

I found that the browser bugs that cause the overlapping icons can be
worked around by setting the containers display : block (folder
listing)  or display:table/display:table-cell (personalbar).

This does impact the page somewhat so i had to use floats to remedy
this. The changes aren't perfect but i hope this will at least give
others things to work on if they want to fine tune it. Some of the
padding and margins may need to be changed and possibly hide/override
some of these declarations for internet explorer.

One problem i found was not being able to reference containers well
enough - for the folder listing hacks i needed to reference the
description (to clear it)and all i could use was:

#content dl dd {
      clear: both;
}

This is pretty vague and could .break other things so ideally a change
should be made in the template to give more of a handle.

For the personaltool bar the only way i could do it was to add a div
with the id of portal-personaltools to the global-personalbar.

As far as i can see this won't affect the visual apperance of LTR if the
following is set in public.css.dtml:

#portal-personaltools ul {
    margin : 0;
    padding : 0;
}


Hope this is all of some use.

Any queries feel free to contact me


Ben






-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.plone.org/pipermail/plone-ui/attachments/20060215/6697f684/attachment.html>
-------------- next part --------------
An embedded and charset-unspecified text was scrubbed...
Name: RTL.css.dtml
URL: <http://lists.plone.org/pipermail/plone-ui/attachments/20060215/6697f684/attachment.ksh>


More information about the UI mailing list