Missing styles.less file after creating new theme that inherits from Barceloneta

I am trying to change some of the styles for a Plone 5.2.5 site. In particular, I want to add max-width: 100% to the site Logo image so that it resizes to fit on cell phones.

Following the Exercise 1 - Create A New Theme That Inherits From Barceloneta directions, I created a new theme. Step 5 in the directions says that this should create four files including styles.less.

Have I done something wrong? Would using the "File" > "New File" command to create a styles.less file and using the contents of the sytles.less file show in step 9 of the directions work?

Also, the theming/_static/theming-new-theme.png and theming/_static/theming-new-theme2.png images do not load in the Exercise 1 - Create A New Theme That Inherits From Barceloneta directions. Here is what I see.

Thanks, Michael

After some more work, I figured out that I do not need to create a custom theme and then modify it to remove the “Log in” option at the top, make wide logo image resize on small screens, or customize heading styles.

I am able to do all of these things with the default Barceloneta theme. I used Site Setup => Actions to “Hide” the “Log in” by clicking on “Hide” on “Log in” in the “User actions” section. I also used Site Setup => Actions to “Hide” the “Accessibility” and “Contact” links in the “Site actions” section that shows up at the bottom of the pages.

By going to Site Setup => Theming => Advanced settings tab => Custom Styles tab, I was able to customize the CSS to resize the logo image for small screens and change my H1 and H2 heading styles by adding:

/* Resize the logo image and other images so that they will
   fit on small screens such as phones.  2021-12-05 */
img {
    max-width: 100%;
}

/* Add a line under the H1 and H2 headings.  2021-12-05 */
h1, h2 {
    border-bottom: 1px solid #8cacbb;
    font-weight: normal;
}

The more I learn about Plone and how to use it, the more impressed I am with Plone. Thank you Plone Development team for such a powerful content management system.

Michael

1 Like

Did you build the css and cleared the browser cache?

No, all I did after adding my custom CSS was click on "Save" at the bottom of the Site Setup => Theming => Advanced settings tab => Custom Styles tab and my new styles took effect. Very nice.

If you want to theme TTW, it can sometimes be useful to go to:

http://yoursite/@@manage-viewlets

There you can hide one reorder a little