2

I'm new to Plone 5 and I'm actually following the plone training. However, I'm not used to the way that all is build. I would like to do simple things but I don't know where to start. For example:

  • How can I move the search bar from the header to the navbar menu?

  • How can I add an image to the header next to the logo?

  • Is there any tutorial that can help me?

Ida
  • 3,994
  • 21
  • 40
Jonathan Dias
  • 49
  • 5
  • It's always best to ask Plone questions directly in our forum https://community.plone.org – T. Kim Nguyen Mar 21 '18 at 15:58
  • This quest resembles https://stackoverflow.com/questions/37163468/how-to-make-footer-to-show-items-from-main-menu-automatically-in-plone/37180542#37180542 – Ida Mar 23 '18 at 06:51

2 Answers2

1

Most of your questions can probably be answered with techniques from the official tutorials and documentation. See:

Tiberiu Ichim
  • 641
  • 7
  • 7
0

You can install the add-on Products.ContentWellPortlets and replace the top-viewlets with portlets, by adding a portlets.xml in one of your add-on's profiles.

This example adds a logo and an image next to it:

<?xml version ="1.0"?>
<portlets>

 <!-- Assign Logo-portlet to site-root (key='/'): -->
 <assignment name="top" category="context" key="/"
    manager="ContentWellPortlets.InHeaderPortletManager1"
    type="plone.portlet.static.Static" visible="True">

  <!--
   Give this portlet a name, so we can recognize it easily in the
   portlet-management-UI via `[PLONESITE_URL]/manage-portletsinheader`:
   -->
  <property name="header">Logo</property>

  <!-- But don't show its header and footer when viewing the portlet: -->
  <property name="omit_border">True</property>

  <!-- Replace 'Plone' with your site-id here, in case it differs: -->
  <property name="text">
     &lt;a href="/Plone">
       &lt;img src="logo.png" />
     &lt;/a>
   </property>

 </assignment>

 <!-- Assign another portlet in next column (InHeaderPortletManager2): -->
 <assignment name="top" category="context" key="/"
    manager="ContentWellPortlets.InHeaderPortletManager2"
    type="plone.portlet.static.Static" visible="True">
  <property name="header">Some image next to Logo</property>
  <property name="omit_border">True</property>

  <property name="text">
    &lt;img src="defaultUser.png"
        title="Dummy-user-avatar" />
   </property>

 </assignment>

</portlets>

And polish it with some styling.

For the search-box I'd may assign a search-portlet above the content (using ContentWellPortlets), give it a minus-margin-top and for the globnav a margin-right, but as there's many ways to Rome, I'd might replace the globnav with a navigation-portlet, too.

Here's an add-on for illustration-purposes (see its viewlets.xml on how to hide the top-viewlets): https://github.com/ida/adi/tree/master/adi.samplestructure

Ida
  • 3,994
  • 21
  • 40