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.
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?
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.
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.