Customizing Plone 5's Theme [CSS & HTML]

Hello Community,

Working with Plone 5.02a has been fun! One aspect I would love to be able to change is the theming. I noticed there are some parts of the Plone that lack css. Today, I copied the css for barceloneta.css and placed them in the plone barceloneta.css file on chrome. The style completely changed. Parts that had not had formatting before did.

Use Chrome's Dev Tools, I made Plone 5 look like the following:

However, I can not save any of this work or make it to where the theme is this. I saved all of the files so I could potentially use my changes if I learn how to create a custom theme.

Any ideas or suggestions on how to edit the css would be excellent!

Because editing a theme right now looks like this:

Yes, I did create a ticket at dev.plone.org https://dev.plone.org/ticket/14198

You can not activate a theme that is copied either.

Hey,

We still need to solve integration issues but if you want to develop a theme the best way, or at least is how we thought is :

There is a index.html and less/js folders on top of barceloneta egg that have the static version of a plone site, so in case that you want to modify the less/js or create your own theme based on barceloneta beeing able to touch the less files you should copy the gruntfile.js/bower.json/packages.json/js/less/index.html into your egg, run

npm install
bower install
grunt

and you will be able to open the index.html on your browser to see how the theme is going to be shown.

1 Like

Ramon,

Thank you so much for some guidance on next steps! I had no clue where to start. This sounds amazing because I do want to work on top of barceloneta. It is a great theme I just want to add some custom things now on top of it for my project.

Hi Josh,
The problable reason because you see different CSS on your installation than the one on github is that on github you see the last version that differs from the packaged one just because it's under heavy development.

If you are a newbie on Plone I would suggest that you learn over a stable version (4.3.3) for allow you to learn without disruptances that bugs can cause (and you will likely may encounter) while developing your theme with Plone 5.0a2. The themes on Plone 5 are almost the same that on the stable version, so you can develop entirely your theme over 4.3.3 and then install it on Plone 5. Just a suggestion that maybe save you hours of struggle since Plone 5 is in its early ages of development.

Cheers,
V.

1 Like

Victor,

Thank you for the suggestions. I am working on a summer project for my internship. They have chosen to move forward with Plone 5.0a2. I am aware the stage of Plone 5. I am interested in using bareloneta and just making tweaks to step away from the clean to make it more personalized. Color, Logo, CSS here and there.

Victor & Ramon,

I figured it out! In my custom buildout, I included the github link under [sources] & developed it into my sources folder. This then made plone use my local copy of the theme. I went in and edited the static/barceloneta.css to my liking! :slight_smile: It know displays my css for the theme. I know have a custom verison of the beautiful Barceloneta Theme. Thank you guys for making this great theme. It is a tremendous theme to be able to customize.