Moving Portal SiteActions From Top To Bottom

To start with, the default Plone site always has a set of hyper-links in the upper right corner of the website, and these are controlled by something called siteactions.

The cool thing about the siteactions is that they can be changed easily in the ZMI, so you can make a set of hyper-links without hard-coding any HTML (in the footer for example) if you reuse the siteactions.

Our design sketch calls for these to be moved down to just above the footer.

This step is going to involve some CSS changes, but first we are going to do some more ambitious "surgery" to the layout of the website, by altering what is called the main_template.

While you can do some pretty radical visual changes to a site using CSS, sometimes it is required that changes to the underlying HTML code be made to position site elements, add new features, or change the physical layout or positioning of the site. The part of the Plone system that controls the overall site's HTML is called the main_template. You will be making changes to a copy of it, after we customize it into our skin folder (just like we did with the ploneCustom.css file).

• Go to the portal_skins folder of the site in your ZMI, and click on the plone_templates (towards the bottom of the list):

Now look down the plone_templates listing. You will see all sorts of files called templates, each of which controls what HTML shows up on various parts of the web pages in a Plone site (e.g. contact-info controls what shows up on when you press "contact", footer controls what shows up on the footer, etc).

• Look down toward the bottom of the list and click on main_template:

Now we are going to customize the main_template. Just like we did with the logo.jpg and the ploneCustom.css file, customizing will bring a copy of the main_template into our skin folder.

Choose our "a_first_skin" from the menu and click on customize:

After you customize the main_template:

Take a look at the code in the main_template, and you may notice some familiar and unfamiliar things in there, depending on your experience level with HTML. Plone uses a creative combination of HTML and several other non-HTML coding schemes (one is called TAL, another is called METAL) to create your website. Remember, every page is generated by Plone as it is visited by a site user (on the fly). Things can't all be hard-coded, so a system of macros and mark-up languages are used to place menus, tabs, hyper-links, images, and content all over the page. That is what the TAL and METAL codes are all about.

We don't need to know how to write TAL or METAL or even know what they do, as we are basically just taking the siteactions section and moving it from one part of the main_template to another, thereby forcing it to move position on our site.

Commenting Out Part Of The main_template

Locate the siteactions code in the main_template. It looks like:

             <div metal:use-macro="here/global_siteactions/macros/site_actions">

               Site-wide actions (Contact, Sitemap, Help, Style Switcher etc)

             </div>

Add some comment lines, as well as one opening comment using <!-- followed by a closing comment --> as this will comment out the code itself.

It should look as follows:

<!-- This effectively removes site_actions from top of the site -->

<!--

             <div metal:use-macro="here/global_siteactions/macros/site_actions">

               Site-wide actions (Contact, Sitemap, Help, Style Switcher etc)

             </div>

-->

<!-- End of site_actions removal section  -->

Note that you could have just deleted the siteactions code from the main_template; however, it is then more difficult to know what changes you made at a later time, like when you are upgrading from one version of Plone to another (sometimes you need to redo your changes in a newer, more powerful template file in order to upgrade a site design).

Adding siteactions Above The Footer In main_template

The following is the code that will need to be pasted into the main_template, right before the footer code, almost at the bottom of the file.

The footer section to locate is:
      <hr class="netscape4" />
        <metal:footer use-macro="here/footer/macros/portal_footer">
          Footer
        </metal:footer>
Insert the following before that:

<!-- add new site actions code down here so that they are just above footer -->

             <div metal:use-macro="here/global_siteactions/macros/site_actions">

               Site-wide actions (Contact, Sitemap, Help, Style Switcher etc)

             </div>

<!-- end of the site actions code -->

Now check the results

I have found that changes to template usually seem to take affect right away, without having to clear the cache, but to be on the safe side, do your cache clearing process, so we can take a look at the site. The following is a screenshot of the new siteactions nested right above the footer:

You will notice that it is not centered or otherwise formatted the way we want. That is all done in the CSS that follows.

Other Visual Changes To siteactions Using ploneCustom.css

Now that we have the siteactions section showing up in the correct location on the website, we will need to make CSS adjustments to make it fit in visually with our colors and layout.

Add the following to the ploneCustom.css after the byline section. Note that this is the last CSS change we will make in this lesson:

/********************************************************************/



/* portal-siteactions are the hyperlinks or "buttons" that appear */

/* at the top of a default plone site we have moved these to under */

/* the content, in only main template change in this lesson */



#portal-siteactions {

background-color: #CAE4F1; /* light blue to give it a lift feeling */

float: none; /* this is VERY important, otherwise you won't be */

             /* able to position these */

text-align: center;  /* to center in the site */

padding: 1em; /* to give it some space around each button */

}



#portal-siteactions li a{  /* site actions buttons at rest */

background-color: white;

color: black;

}



#portal-siteactions li a:hover { /* site actions mouse hovering */

background-color: #FFFF66;  /* light yellow to match tabs and menu */

                            /* color reactions to hover */

color: black;

}



/* end of our CSS modifications */

/********************************************************************/

Now check the results

Clear you cache and review the site to see the following changes:

• The background is set to the site's light blue color, to give it somewhat of a lift from the darker colors of the footer.
• They are centered.
• Hovering displays the light yellow color used in the menu and tabs.

Congratulations! You have made significant visual changes to the site, and now will wrap-up this lesson with some final tweaks to the portlets and footer.