How to move searchbar in Plone5

Question

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?

Answer 1

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