1 .. _skinhowto: |
|
2 |
|
3 |
|
4 How to create Skin? |
|
5 =================== |
|
6 |
|
7 A Skin is a tagging interface for associating media, javascript and CSS resources to a **renderer** |
|
8 |
|
9 1) Configuring resource library |
|
10 ------------------------------- |
|
11 |
|
12 |
|
13 .. code-block:: python |
|
14 |
|
15 from fanstatic import Library, Resource |
|
16 from pyams_default_theme import pyams_default_theme |
|
17 |
|
18 #Library(name, folder_path) |
|
19 library = Library('mycms', 'resources') |
|
20 |
|
21 #Resource(library, path_to_static) |
|
22 mycms_css = Resource(library, 'css/mystyle.css',) |
|
23 |
|
24 |
|
25 mycms_js = Resource(library, 'js/pyams-default.js', |
|
26 depends=(pyams_default_theme, ) |
|
27 bottom=True |
|
28 ) |
|
29 |
|
30 |
|
31 :py:class:`Resource` can include others resources already defined with *depends* attribute, here `pyams_default_theme`. |
|
32 |
|
33 |
|
34 2) Create a new Layer to your skin |
|
35 ---------------------------------- |
|
36 |
|
37 Build a new interface inherit from `ICustomLayer` |
|
38 |
|
39 .. code-block:: python |
|
40 |
|
41 class ICustomLayer(ICustomLayer): |
|
42 """skin layer""" |
|
43 |
|
44 Define an utility providing ISkin with the custom label and the layer interface |
|
45 |
|
46 .. code-block:: python |
|
47 |
|
48 @utility_config(name='Custom skin', provides=ISkin) |
|
49 class CustomSkin(object): |
|
50 """custom root skin""" |
|
51 |
|
52 label = _("Custom: skin") |
|
53 layer = ICustomLayer |
|
54 |
|
55 |
|
56 3) Declare the layer adapter |
|
57 ---------------------------- |
|
58 |
|
59 .. code-block:: python |
|
60 |
|
61 @adapter_config(context=(Interface, ICustomLayer, Interface), provides=IResources) |
|
62 class CustomSkinResourcesAdapter(ContextRequestViewAdapter): |
|
63 """Custom skin resources adapter""" |
|
64 |
|
65 def get_resources(self): |
|
66 mycms.need() |
|
67 |
|
68 |
|
69 We have defined a Multiadapter with context=(context, request, view). |
|
70 |
|
71 .. note:: |
|
72 |
|
73 In the ZMI website you can now change the default graphical theme by you custom skin |
|
74 |
|
75 .. image:: _static/select_skin.png |
|