Minor theme editing (basics)

Plone Support
1

I'm trying to make some minor changes to the default Plone 5 theme but am having difficulty with seemingly trivial things.

For example, I'm trying to edit/change the large grey box just below the navigation bar, and also the text in the footer area.

After a hell of a lot of Googling, I found my way to:

root@plone:/opt/plone/buildout-cache/eggs/plonetheme.barceloneta-1.6.18-py2.7.egg/plonetheme/barceloneta/theme/less#

I found the footer.plone.less file but I don't see any relevant text in the file to replace/edit. Am in looking in the wrong place?

2

The "less" files are sources for "CSS" declarations. While "CSS" can be used to generate text, text usually comes from a template - especially text which likely needs localisation.

I suppose that the text in the footer you want to change comes from a localization (i.e. translation) file. I would use an operating system level search tool to locate this file in the Plone source tree. If my assumption is right (and the file is a localization file), then you will find nearby the text the corresponding message id and you can search for it (the same way) to find the template where it is used. You can then decide whether a template change or a localization change is more appropriate.

3

To change the design I'd recommend taking a look at the [Plone Theming Training]
(Plone 6 Classic UI Theming — Plone Training 2022 2022 documentation).

That is the hero unit which is only available on the fronpage. If you edit the frontpage and look at the source code (in TinyMCE editor select Tools and then Source code), you can see this at the top:

<div class="hero">
<h1>Welcome!</h1>
<p><a class="context" href="http://plone.com" target="_blank">Learn more about Plone</a></p>
</div>

There is a diazo rule in the barceloneta theme which moves this part into the hero unit:

  <!-- move hero to top -->
  <replace css:theme-children="#hero .gigantic" css:content-children=".hero"/>
  <drop css:theme="#hero" css:if-not-content=".hero" />
  <drop css:content=".hero" />

The footer in Plone 5 is created out of portlets. To change it (while logged in into the Plone site):

  1. Go to the the front page of your Plone site
  2. Click on Plone Footerportlets in the Manage portlets section in the edit bar
  3. Click the go here link to get to the Plone root (otherwise you edit the portlets for the frontpage only)
  4. Hide the footer portlet.
  5. Add a new Static text portlet
  6. Add your custom footer content
  7. Make sure the option Omit portlet border is selected (otherwise you have to write some CSS to hide the portlet header)
  8. Click Save.
  9. Move the new portlet to the position were you want it to be.
  10. Done :slight_smile:
1 Like
4

Which text in the footer do you want to change?

5

[quote="tkimnguyen, post:4, topic:3319, full:true"]
Which text in the footer do you want to change?
[/quote]All of it. I want to be able to change it as I please.

6

I ended up duplicating the default theme, and noticed the 'new' theme allows for modification, but not the original (default) theme. Strange.

plone-theme-modifications.png875×425 41.7 KB

7

That's because the original is set on the file system and is read only. The theming section of docs.plone.org explains that and all about theming in more detail.

Different things in what you may be referring to as the footer may be changeable differently so if you still want suggestions please provide a screenshot of the parts you have in mind specifically

8

go to url: https://docs.plone.org/develop/plone/functionality/portlets.html