Estate Classic Plone Theme Customization

In this Plone tutorial you can learn how to customize Estate Classic Plone Theme: change its default logo, slogan, footer & portlets, configure horizontal drop-down global navigation settings, edit Telephone Number, and how to set up Site actions & Personal Tools.

Estate Classic Plone Theme changes the look of the default Plone website to approximately the following:

estate-classic

where company logo is a replaceable object, as well as its slogan or telephone number. Horizontal drop-down global navigation can also be referred to the theme features. This Plone tutorial consists of several parts, in which you will find explanations about how to customize Estate Classic Plone Theme to meet your needs:

  1. How to change Estate Classic Logo
  2. Horizontal drop-down global navigation settings
  3. How to change site Slogan
  4. How to edit Telephone Number
  5. How to set up Site actions and Personal Tools (Personal Bar)
  6. Estate Classic Plone Theme portlets
  7. Gallery view
  8. How to edit Footer

1. How to change Estate Classic Theme logo

You may replace the default logo with yours. For that switch to Zope Management Interface and  go to portal_skins/qplonethemeestate/logoEstate.gif. Then press Customize button:

customize-logo

Select a new logo to be uploaded and press Upload:

upload-image

Return to Plone interface to see the new image applied. In case new logo is higher than default one - site content will be lowered down.

2. Horizontal drop-down global navigation settings

global-navigation

Estate Classic Plone Theme uses custom global navigation. This navigation menu was developed on the basis of Plone default navigation. Horizontal drop-down navigation displays two navigation levels, beginning from the site root. Second navigation level has center alignment.

Default Plone global navigation can also be used in this theme. To switch to default navigation you need to customize it via /manage-viewlets.

3. How to change site slogan

slogan

 

 

 

You can change site slogan to your own, to do it - edit the document ARE YOU LOOKING FOR (with slogan shortname), located in the site root. Slogan first line is taken from Title, the second one - from Description, and the third one - from Body Text field of the ARE YOU LOOKING FOR page. Slogan area width is 450px.

are-u-looking-for

4. How to edit Telephone Number

telephone-number

 


Telephone number can be edited on Telephone number (shortname telephone-number) page, located in the site root. To have a shadow effect, write the same number in both Description and Body Text fields.

tel-number

5. How to set up Site actions and Personal Tools / Personal Bar

  • Site actions

    site-actions
    You can add/remove/rename site actions items via ZMI. Go to portal_actions -> site_actions. Add new CMF Action, give it a certain ID. Go to this newly created tab and fill in its title, description and URL (Expression) of the document, the item is linked to. It should be typed in string format: $portal_url/my-short-name-of-document.

  • Personal Tools / Personal Bar
    personal-tools

    You can add/remove/rename personal tools items via ZMI. Go to portal_actions -> user. Add new CMF Action, give it a certain ID. Go to this newly created tab and fill in its title, description and URL (Expression) of the document, the item is linked to. It should be typed in string format: $portal_url/my-short-name-of-document.

6. Estate Classic Plone Theme portlets

  • Select a Category portlet
    category-portlet.gif
    This portlet title is taken from Select a category (shortname category) folder title. This folder contains several pages. Pages' titles make up the first level of the navigation in this portlet, the second level is created on the basis of Body Text of the Pages. Body Text of pages should be built as <ul> construction, so that it is correctly reflected in the portlet.
  • Our Best Proposal portlet
    best-proposal-portlet.jpg
    Portlet's title comes from Our best proposal (shortname best-proposal) folder title. Our best proposal folder contains an image house.jpg (width: 155px, height 74px), that is displayed in the portlet. There is also our best proposal page, with the information displayed in the portlet. Page format should be preserved as long as you want to have a correct view of the portlet. All portlet area is clickable like a link.
  • Bottom portlets
    commercial-portlet credit-portlet residental-portlet
    Second-column portlets are placed at the bottom of the content area. There are three theme default portlets placed below site content area. Content for these portlets is taken from three folders Residential PropertyCredit Problems?, and Commercial Property, located in the site root. Each of these three folders contains a page and an image (estateimage.jpg). Image serves as a background for the portlet. Page title is a title of the portlet. Page description (if available) is displayed in the portlet main area. Page body text is displayed at the bottom of the portlet, it is a link by default. It is possible to add default Plone portlets below these three bottom portlets. Then default portlet width will be taken from base_properties -> columnTwoWidth property.

7. Gallery view

Special gallery view was designed for Estate Classic Plone Theme. It allows you to display your property images in a nice manner. Image title is displayed above the image. It can be several lines long. Despite image title size, image row is justified by the bottom margin.

Select act_album_view to have your gallery displayed in the way described above.
gallery-view

8. How to edit footer

  1. Go to ZMI (add /manage to site URL) and select portal_view_customizations (Manages view customizations) in either left or right navigation column
  2. Select plone.footer (plone.app.layout.viewlets.interfaces.IPortalFooter) in the right main area
  3. Press Customize button.
  4. In the opened HTML window, make necessary edits, and save your changes.
  5. Get back to Plone site, reload the page to see your changes applied.

Connect with our experts Let's talk