Styling Magritte

[Keithy]

I am interested to know how people are managing to style Magritte Forms.
I don't know if attachments get through but I have attached an image of
what I have managed to achieve so far...

I dont know much about css, but I assumed that it was not possible to
take the tables of field key/values generated by magritte and to move
things around as much as I would like.

I produced my own renderer which renders the key/values, using divs.
However I still have some problems. For example, the "Confirm" "Cancel"
buttons are rendered outside of the form as a decoration. As such they
have no knowledge of the form that they are operating on, and so render
without any identifiable "class". Style applied to them applies to all
uses of "Confirm"/"Cancel" buttons.

It looks to me like some re-architecting is needed here, its not that I
dont like the use of the decorator in this instance. I am thinking that
this is another instance where the lack of child parent communication is
a problem.

regards

Keith



_______________________________________________
SmallWiki, Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki

[Lukas Renggli-2]

> I am interested to know how people are managing to style Magritte  
> Forms. I don't know if attachments get through but I have attached  
> an image of what I have managed to achieve so far...

Wow, that looks very interesting.

> I dont know much about css, but I assumed that it was not possible  
> to take the tables of field key/values generated by magritte and to  
> move things around as much as I would like.

Then it is probably easier to use MACssRenderer. In some situations it  
is really hard to use CSS to style a Magritte form as it is generated  
automatically. In such cases it might be easier to manually render the  
Magritte fields. For example the login form on www.seasidehosting.st  
instantiates a normal Magritte component, but then renders the  
individual fields manually by querying #childAt: for the child  
components.

> It looks to me like some re-architecting is needed here, its not  
> that I dont like the use of the decorator in this instance. I am  
> thinking that this is another instance where the lack of child  
> parent communication is a problem.

The latest version of Magritte-Seaside adds the class .magritte to  
<form> tags rendered by Magritte. This allows to distinguish Magritte  
forms much simpler from other forms. The standard MATableRenderer can  
now be styles like this:

        .magritte table th { /* the label styles */ }
        .magritte table td input { /* the control styles */ }
        .magritte .buttons input { /* the button-styles */ }
        etc.

You can find more examples of form styling in the default CSS of Pier.  
Pier doesn't use the new .magritte class yet.

If you want to differentiate multiple Magritte forms, you probably  
want to enclose them into DIVs with different clases or IDs, so that  
you can style them along:

        .minimal ... { }
        .sideways ... { }

Cheers,
Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch

_______________________________________________
SmallWiki, Magritte, Pier and Related Tools ...
https://www.iam.unibe.ch/mailman/listinfo/smallwiki