Adventures in Theming: CSS and Hiding Viewlets

This is the fifth post in a short series about the ideas, trials and tribulations of my first theme product. I’ll be posting the whole story in one place when the series is complete.

A Touch Of Style

I’m going to continue using the Zope 3 resource approach with my style sheet. I don’t need DTML, I’m not overriding any specific stock Plone CSS file, and I like keeping all of my browser-related stuff in the browser directory of my product.

Doing things this way requires an additional step. For Plone to incorporate the style sheet(s), they have to be registered with the portal_css tool. This is accomplished via GenericSetup.

First, it’s a good idea to turn on “Debug/development mode” under portal_css in the ZMI of your plone instance (http://localhost:8080/plone/portal_css/manage_cssForm). This will ensure that your css will be refreshed in the browser as it’s updated on disk.

Then you need to create a css file, for example main.css in browser/stylesheets

To get the CSS registered, you need to add a tag to profiles/default/cssregistry.xml

What do you know! A quick glance at the profiles/default directory and we see that ZopeSkel has already done this for us. :). For the sake of illustration, here’s what that file looks like, after ZopeSkel has generated the skeleton:

src/my.theme/my/theme/profiles/default/cssregistry.xml

<?xml version="1.0"?>
<object name="portal_css">
 <stylesheet title=""
    id="++resource++my.theme.stylesheets/main.css"
    media="screen" rel="stylesheet" rendering="import"
    cacheable="True" compression="safe" cookable="True"
    enabled="1" expression=""/>
</object>

You can add additional style sheets in the same manner.

You can verify that the css is active by checking the portal_css tool (it will be second-to-last in the list), and making sure http://localhost:8080/plone/++resource++my.theme.stylesheets/main.css doesn’t throw any errors.

Now that the style sheet is registered, it needs to be populated with styles.

src/my.theme/my/theme/browser/stylesheets/main.css

/* Stylesheet for the 'MY Theme' Plone theme */

#my_header #main {
    height: 90px;
}

#my_header #left_side {
    float: left;
    clear: left;
}

#my_header #right_side {
    float: right;
    clear: right;
}

#my_header #personal_bar_sections {
    clear: both;
}

#my_header #personal_bar {
    float: right;
    clear: right;
}

#my_header #sections {
    float: left;
    clear: left;
}

#my_header #crumbtrail {
    clear: both;
}

I had to add another id to my template, and re-arrange things a bit to get it all to work. Here’s the modified template:

src/my.theme/my/theme/browser/myheader.pt

<div id="my_header">
    <div id="main">
        <div id="right_side">
            <div tal:replace="structure view/plone.logo/render" />
        </div>
        <div id="left_side">
            <div tal:replace="structure view/plone.site_actions/render" />
        </div>
    </div>
    <br />
    <div id="personal_bar_sections">
        <div id="sections">
            <div tal:replace="structure view/plone.global_sections/render" />
        </div>
        <div id="personal_bar">
            <div tal:replace="structure view/plone.personal_bar/render" />
        </div>
    </div>
    <br />
    <div id="crumbtrail">
        <div tal:replace="structure view/plone.path_bar/render" /> 
    </div>
</div>

To explain a bit, what I’ve done is used <div>‘s to separate everything out, and then used float and clear to create the sort of layout I wanted. float moves the block-level elements to one side, and clear controls where float-ing elements are allowed to go. Here’s what it looks like at this point:

We're Almost There!

We're Almost There!

As you can see from the screen shot, I’ve achieved my primary goal of re-arranging the stock plone viewlets into the orientation that I specified in my initial design.

So now, I’ve just got to add in styles to handle the more looky-feely elements (background images, colors, fonts) and override bits of Plone style that either don’t look good in my theme or are counter to it (like the padding around the personal_bar)

Ousting The Doppelgängers

Now’s a good time to get rid of the superflous viewlets that I’ve re-implemented in my viewlet manager. This is accomplished through the <hidden> tag, in our GenericSetup profile’s viewlets.xml file.

src/my.theme/my/theme/profiles/default/viewlets.xml

<?xml version="1.0"?>
<object>
    <hidden manager="plone.portaltop" skinname="My Theme">
     <viewlet name="plone.header" />
     <viewlet name="plone.personal_bar" />
     <viewlet name="plone.path_bar" />
   </hidden>
</object>

The <hidden> tag takes two attributes, manager and skinname. manager is the name of the viewlet manager that you want to hide viewlets in. In this case, it’s plone.portaltop. You can figure out where the viewlets you want to hide are by using GloWorm or @@manage-viewlets.

Inside of the <hidden> tag are <viewlet> tags, each specifying the name of a viewlet you’d like to hide.

You’ll need to re-install your theme product to see the change.

Advertisements
This entry was posted in Uncategorized and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s