First step in learning plone skinning

Go to
http://plone.org/documentation/tutorial/where-is-what/tutorial-all-pages
and learn where to edit all the stuff. Short summary for plone 3.
The logo

• Image: logo.jpg
  
  
  
  • Located: [site]/portal_skins/plone_images
  
  
  
  


• Template:
  
  
  
  • Located: [site]/portal_view_customizations
  
  
  
  


• CSS: #portal-logo and #portal-logo a


• 
  
  
  
  • Located:
    [site]/portal_skins/plone_styles/public.css
  
  
  
  

The search box

• Template: plone.searchbox
  
  
  
  • Located:
    [site]/portal_view_customizations
  
  
  
  


• CSS: #portal-searchbox and
  input.searchButton
  
  
  
  • Located:
    [site]/portal_skins/plone_styles/public.css
  
  
  
  

The navigation tab

• Template: navigation.pt
  
  
  
  • Located:
    [site]/portal_view_customizations
  
  
  
  


• CSS: #portal-globalnav, #portal-globalnav
li, #portal-globalnav li a,
  #portal-globalnav li.selected a, and
  #portal-globalnav li a:hover
  
  
  
  • Located:
    [site]/portal_skins/plone_styles/public.css
  
  
  
  

The personal bar

• Template: plone.personal_bar
  
  
  
  • Located:
    [site]/portal_view_customizations
  
  
  
  


• CSS: #portal-personaltools,
  #portal-personaltools .portalUser,
  #portal-personaltools .portalNotLoggedIn,
  #portal-personaltools li, and
  #portal-personaltools li a
  
  
  
  • Located:
    [site]/portal_skins/plone_styles/public.css
  
  
  
  

The path bar

• Template: plone.path_bar
  
  
  
  • Located:
    [site]/portal_view_customizations
  
  
  
  


• CSS: #portal-breadcrumbs
  
  
  
  • Located:
    [site]/portal_skins/plone_styles/public.css
  
  
  
  

The middle

• Template: main_template
  
  
  
  • Located:
    [site]/portal_skins/plone_templates
    (tabled skin)
  
  
  
  


• CSS: ploneColumns.css
  
  
  
  • Located:
    [site]/plone_skins/plone_styles (tabled
    skin)
  
  
  
  

Portlets

Portlets are the parts of the page that get displayed in the
left (left_slot) and right (right_slot) columns. Each portlet has
its own template.

• Templates: portlet_calendar,
  portlet_events, portlet_favorites,
  portlet_login, portlet_navigation,
  portlet_news, portlet_recent,
  portlet_related, and portlet_review
  
  
  
  • Located: [site]/portal_skins/plone_portlets
  
  
  
  


• CSS: .portlet, .portlet b,
  .portlet h5, .portlet h6,
  .portletBody, .portletDetails,
  .portletMore, .portletContent,
  .portletClose, .portlet .even,
  .portlet .odd, .portlet input,
  .portlet ul, and .portlet li
  
  
  
  • Located:
    [site]/portal_skins/plone_styles/plone.css
  
  
  
  

Note:

The Calendar slot has additional CSS

• CSS: .dayPopup, .date,
  .ploneCalendar, .ploneCalendar a,
  .ploneCalendar a:hover, .ploneCalendar
th, .ploneCalendar td, .ploneCalendar
.weekdays td, .ploneCalendar .event,
  .ploneCalendar .todayevent, and .ploneCalendar
.todaynoevent
  
  
  
  • Located:
    [site]/portal_skins/plone_styles/plone.css
  
  
  
  

Document Actions

• Images: extedit_icon.gif,
  mail_icon.gif, print_icon.gif,
  site_icon.gif, and rss.gif
  
  
  
  • Located: [site]/portal_skins/plone_images
  
  
  
  


• Template: see: "http://plone.org/documentation/manual/upgrade-guide/version/2.5-3.0/products/document-actions-now-use-zope-3-viewlets">
  Document Actions Now Use Zope 3 Viewlets


• CSS: .documentActions, .documentActions ul,
.documentActions li, and .documentActions a
  
  
  
  • Located:
    [site]/portal_skins/plone_styles/public.css
  
  
  
  

Content Tabs

• Template: plone.contentviews
  
  
  
  • Located: [site]/portal_view_customizations
  
  
  
  


• CSS: .contentViews, .contentViews li,
  .contentViews li a, .contentViews .selected
a, .contentViews li a:hover, and
  .actionItems li


• 
  
  
  
  • Located:
    [site]/portal_skins/plone_styles/authoring.css
  
  
  
  

Content Menu

• Template: plone.contentactions
  
  
  
  • Located: [site]/portal_view_customizations
  
  
  
  


• CSS: .contentActions, .contentActions
ul, .contentActions li, .contentActions
ul, .contentActions li,
  .menuPosition, .actionMenu li,
  .actionMenu li a, .actionMenu li a:hover,
  .actionMenu, .actionSeperator a,
  .actionSingular, and .actionItems li


• 
  
  
  
  • Located:
    [site]/portal_skins/plone_styles/authoring.css
  
  
  
  

The Footer

• Template: plone.footer
  
  
  
  • Located: [site]/portal_view_customizations
  
  
  
  


• CSS: #portal-footer
  
  
  
  • Located:
    [site]/portal_skins/plone_styles/public.css
  
  
  
  

The Colophone

• Template: plone.colophon
  
  
  
  • Located: [site]/portal_view_customizations
  
  
  
  


• CSS: #portal-colophon, #portal-colophon
ul, #portal-colophon ul li,
  #portal-colophon ul li a, and #portal-colophon
ul li
  
  
  
  • Located:
    [site]/portal_skins/plone_styles/public.css
  
  
  
  

The Header

• Template: plone.header




• Located: [site]/portal_view_customizations