Part 4. How to add portlets

Read the following tutorial and learn how you can add social media actions to Vivid Plone theme.

Plone features three possible placements of portlets: left-column, left-column, and footer.

Both "Plone Rightcolumn" and "Plone Leftcolumn" portlets are displayed on the right side of the page.

Vivid theme portlets

"Plone Foooterportlets" are displayed in the footer but will be opened with the appropriate icon in the footer panel. Each icon in the footer panel opens new footer portlet.

Plone footer panel

Plone site actions portlet

Plone colophon

To change footer icons go to Site Setup > Theming > Advanced settings tab and find appropriate parameter in "Parameter expressions" textbox: icons_# (where # is the ordinal number of your portlet). Then insert string:\ and icon’s Unicode. You can find icon’s unicode on the http://fontawesome.io/ website in the Icons section (use up to 4.7 fontawesome icon version). Example:

icon_4 = string:\f003

Social media icons portlet

Social media buttons can be inserted into any place on the page using portlets. Go to the desired location and click on the “Manage portlets” item on the toolbar. Choose location for the portlet (Plone Leftcolumn, Plone Rightcolumn, or Plone Footerportlets). Choose Static Text Portlet from the “Add portlet…” drop down on the page. Add portlet title, e.g. Find Us On. Add the following HTML code (replacing '#' signs with your URLs):

  <ul class="social-icons">
<li><a class="btn-facebook" href="#"><em class="fa-facebook fa">.</em></a></li>
  <li><a class="btn-twitter" href="#"><em class="fa-twitter fa">.</em></a></li>
    <li><a class="btn-linkedin" href="#"><em class="fa-linkedin fa">.</em></a></li>
    <li><a class="btn-google-plus" href="#"><em class="fa-google-plus fa">.</em></a></li>
    <li><a class="btn-pinterest" href="#"><em class="fa-pinterest fa">.</em></a></li>
    <li><a class="btn-reddit" href="#"><em class="fa-reddit fa">.</em></a></li>
    <li><a class="btn-dropbox" href="#"><em class="fa-dropbox fa">.</em></a></li>
    <li><a class="btn-youtube" href="#"><em class="fa-youtube fa">.</em></a></li>
  </ul>

You can use ready-made icons from Bootstrap. Go to http://lipis.github.io/bootstrap-social and copy classes of social icons you want to see.

Add only those social media buttons you need, in any order. Save portlet. Your visitors can now follow you on social media platforms of their choice.

Plone social icons portlet

Connect with our experts Let's talk