1 .. _skinhowto: |
1 .. _skinhowto: |
2 |
2 |
3 |
3 |
4 How to create a new skin? |
4 How to create a new skin? |
5 ========================= |
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 Resource can include other resource already defined in 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 .. code-block:: python |
|
39 |
|
40 class ICustomLayer(ICustomLayer): |
|
41 """skin layer""" |
|
42 |
|
43 Define an utility providing ISkin with the custom label and the layer interface |
|
44 |
|
45 .. code-block:: python |
|
46 @utility_config(name='Custom skin', provides=ISkin) |
|
47 class CustomSkin(object): |
|
48 """custom root skin""" |
|
49 |
|
50 label = _("Custom: skin") |
|
51 layer = ICustomLayer |
|
52 |
|
53 |
|
54 3) Declare the layer adapter |
|
55 ---------------------------- |
|
56 |
|
57 .. code-block:: python |
|
58 |
|
59 @adapter_config(context=(Interface, ICustomLayer, Interface), provides=IResources) |
|
60 class CustomSkinResourcesAdapter(ContextRequestViewAdapter): |
|
61 """Custom skin resources adapter""" |
|
62 |
|
63 def get_resources(self): |
|
64 mycms.need() |
|
65 |
|
66 .. note:: |
|
67 In the ZMI website you can now change the default graphical theme by you custom skin |
|
68 |
|
69 .. image:: _static/select_skin.png |