Left Navigation Menu And Some Other Minor Adjustments

Left Navigation Menu

Cut and paste the following into the ploneCustom.css , after the part about the portal tabs (not shown below):

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



/* left side navigation menu */



/* to change the highlighting effect when hovering over menu item */

dd.portletItem .navTreeItem a:hover {  /* when hovering with mouse */

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

color: #00578A; /* dark blue text */

}



/* to change the effect of the currently selected menu item */

dd.portletItem .navTreeItem a.navTreeCurrentItem { /* selected item */

background-color: #0588BC;  /* medium blue */

color: white; /* text */

font-weight: bold; /* to emphasize text */

}



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

You should see following changes:

• The selected button will have white text and a medium blue background
  
• The button you are hovering on with the mouse will go the same light yellow as the tabs.
• That is really it on the left menu, since we already set up the content earlier on.

Note: There are many options to set for the menu, under Plone, Site Setup, Navigation Settings.  I suggest you read up on these options and try them out after we finish the site.

Logo

Cut and paste the following into the ploneCustom.css , after the part about the left navigation menu (not shown below):

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



/* the logo image at the top of the site */

#portal-logo {

/* following sets spaces between the image and the other site */

/* objects, in pixels */

margin: 0px 0px 0px 5px; /* top right bottom left */

}





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

You should see following changes:

• Even though we changed the logo image earlier in the process, it is often not clear how the proportions of a site look until other elements are complete. In this case, there was some wasted space along the header part of the page, so by reducing the margin settings on the top, right, and bottom, it was possible to make the site fit better in the browser.
• The left margin is just to push the image out a bit from the side of the screen.
• Play with these types of settings when positioning a different sized logo image.

Portlet Headers

Cut and paste the following into the ploneCustom.css , after the part about the logo (not shown below):

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



/* portlet headers */



/* make the headers or title section of every portlet have the */

/* correct site color scheme */

.portletHeader {

background-color:#CAE4F1; /* light blue */

}



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

You should see following changes:

• This changes the area behind the titles on all the portlets to a light blue to match the site. They were already the "Plone" blue, which was close, so don't expect dramatic changes here.

Document Byline

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



/* document byline, author and date modified info on the content */



/* This is the only change we are making to the CSS related to */

/* content items and this is personal preference driven. While the */

/* byline would be important to a community site or group */

/* collaboration effort, it gives info about who and when content */

/* was put on a site, not always good or relevant info to release, */

/* especially if a webmaster is the only user */



/* gets rid of the by and last modified byline on each content */

.documentByLine {

display: none;

}



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

You should see following changes:

• Author and Date Modified should not be visible