Making and modifying styles

1. Midcom-style vs pagestyle
2. Creating elements that should not be viewed when the user is in the admin-interface.
3. Default variables
4. Troubleshooting / simple errors
1. Missing WYSIWYG-editor
2. The WYSIWYG editor has a very small editing-window
5. Customising componentstyles

How to create midcomstyles using the midcom-template.

When you start making a new style with Midcom, you should usually start out with the midcom-styletemplate.This ensures that you got some standard style-elements you want to use.

Midcom-style vs pagestyle

If you have created a style using the Midcom-sitetemplate you have the interesting solution that the style you're working on only defines the styles for stuff outside midcom. The stuff on the inside is defined by the parameter midcom-style that is set on the topic in question.

If this parameter is not set, midcom falls back to using the default style that you find in the _style snippetir of the component in question. Se the chapter "customizing component styles" further down in this article for more information.

Creating elements that should not be viewed when the user is in the admin-interface.

Sometimes you want to create elements that should only be viewable when the page is viewed in normal form or only when in AIS.

To check if the page is in "AIS mode" or in normalmode, check if midgard->self equals the midcom'uri' variable like this:

<?php if ( $_MIDGARD'self' == $GLOBALS["midcom_site"]["uri"] ) { ?>  

<(include_non_ais_element)>  

<?php } ?>

Default variables

In the $GLOBALS array you get links to the following:

$GLOBALS'midgard'  -> pointer to a [Midgard object][1].  

$GLOBALS'midcom_site' = array (  

                                    'host'=> [Midgard hostobject][2]  

                                   'sitegroup' => [Midgard sitegroupobject][3]  

                                  'rootpage' => [Midgard pageobject][4]  

                                        'root_topic_guid' => the [guid ][5]of the roottopic  

                                        'root_topic' => the [topicobject][6] of the root_topic  

                         ); // note: these are just the most important variables!  



$GLOBALS'midcom' = Midcom application object.

Troubleshooting / simple errors

Missing WYSIWYG-editor

If you're missing the fancy WYSIWYG editor for editing pages that is probably because you've removed the bodytag-extra and header-extra stylelements from your style. They need to be included as follows:

• The <(bodytag-extra)> element includes the JavaScript onLoad call that invokes the HTMLAREA editor. Because of browser access control rules,it has to be called inside the tag
• The <(head-extra)> element has to be called inside the block. it will include some metadata elements on the website, and the required JavaScript libraries for the WYSIWYG editor

The WYSIWYG editor has a very small editing-window

This is because you're missing the <(css-extra)> styleelement from your style.

Customising componentstyles

It is possible to modfy how you show individual components, for example how the article is shown in de.linkm.taviewer.

First you need to check which component is running your content (probably de.linkm.taviewer). Then you log in as System Admin and take a look at Snippets at:
/de/linkm/taviewer/_style

You can customize the output of your taviewer component by creating child styles to your style as follows.

/YOURSTYLE/de.linkm.taviewer/<(show-article)>

I'd recommend that you copy-paste the code from the snippet:
/de/linkm/taviewer/_style/show-article
And then edit it as you see fit.

Important: REMOVE the <(ROOT)> element from the CHILD style.

Similarly you can customize the output of any component.
If you need some special style (i.e. for the frontpage)
you can write a child style /YOURSTYLE/frontpage and
use MidCOM AIS to edit the root topic and set the style to
/YOURSTYLE/frontpage.