I want to change some of the built-in styles contained in a Plone 4 installation, and a reading of the docs tells me that the best way to do this is to copy the base_properties.props file to SOMEWHERE in the file tree, and then to modify it.
A thorough search of this Plone system shows two base_properties.props files, neither of them in the file tree of my custom skin. So, I guess the first problem is to figure out WHICH of these files is active. I am not sure - how to tell easily?
The next problem is WHERE to copy this file into my custom skin file tree. The existing folders are: Skins\custom_images, Skins\custom_js, Skins\custom_styles, Skins\custom_templates. Should the base_properties file then go in the Skins\ root?
I want to change the defaults for things like evenRowBackgroundColor - without modifying the main base_properties file, as I gather that will make site maintenance a bit more difficult down the road.
Sorry if this is rudimentary, but I find myself spending lots of time figuring out how Plone works - and not too much time actually doing any styling...
In a default Plone 4 installation neither of the base_properties.props files is active, because the default "Sunburst" theme doesn't use base properties.
If you're using the Classic theme, then you want to copy base_properties.props from the classic_styles skin layer in the plonetheme.classic egg.
As for the question of which folder to copy into, I would probably put it in custom_styles, since it is related to the styles applied. It doesn't really matter though as long as these custom skin layers are ordered above the layer that you are copying the file from. To check on the order of the layers, go to portal_skins in the ZMI and click on the Properties tab. This lists the layers of each skin, in order of precedence.
As David Glick says:"To check on the order of the layers, go to portal_skins in the ZMI and click on the Properties tab. This lists the layers of each skin, in order of precedence."
But you want to select the default skin for which you are using basic properties and save it at the bottom. I couldn't get the Sumburst Theme to work so I went classic and used that as default and modified it's basic properties.
What are the full paths of the files that you found? That should give you a clue as to which one you should use.
skins/custom_styles is the preferred location although all of them will work.
Related
I would like to make a custom dark theme for a web client.
I tried everything but no matter what I changed I cannot get any changes to take effect. I found out this page in the documentation but I cannot get it to work:
https://afterlogic.com/docs/webmail-lite-8/developers-guide/creating-new-skin
Does anyone have some experience with this webmail client?
The recommended option for creating a new skin is to clone and rename one of the existing skins, and upon making changes to it, run gulp styles --themes YOUR_THEME_NAME command. Once this operation is performed, check static/styles/themes/YOUR_THEME_NAME and see if you get your changes reflected there. If the changes are in place, then it's probably browser cache causing it, try clearing it and see if that helps.
In fact, it's not required to deal with .less files, you can simply create a copy of an existing theme under static/styles/themes directory - but in either case, you need to make sure the new theme is listed in ThemeList section of data/settings/modules/CoreWebclient.config.json configuration file.
Note: I'm open to other solutions if this is the wrong approach
I want to used https://github.com/twitter/css-flip for rtl support on
my project
The documentation is sparse and seems to make a lot of assumptions. I can successfully run the CLI against a .css file but not a scss file as I suspected.
I was thinking about adding a step that ran the css-flip on the compiled styles like so:
css-flip app/assets/stylesheets/application.css > app/assets/stylesheets/application.rtl.css
One, I'm not sure this is the best approach, and Two, if it is reasonable, how could I run the css-flip command on the assets after they've been compiled?
I'm not sure if this is the right approach, but I'd say you can use css-flip to generate your css files, and afterwards, I see 2 different solutions. (In the case you don't want to use Pete suggestion about the direction property, but I assume you may want some custom style depending of the orientation of the language.)
1 - depending on the version of your site, you change the asset being loaded.
2 - Or, I'd say you concat your two css files generated to put both behind a class (probably with the help of a preprocessor such as sass), and you put this class on your body, and change it whenever the user changes their language settings.
solution 1 creates lighter css file, but your user need to reload the page when they change language, whereas solution 2 creates bigger css file, but user won't need to reload their page when they change language.
Hope this helps.
I'm trying to upgrade a Plone 3.3.5 server to 4.3.6. However, when I update the site, I find that the CSS for the site is not carried over. If I go to my CSS Registry, I find that almost all of my CSS is producing the (resource not found or not accessible) error.
My confusion seems to be in how Plone locates and links/imports stylesheets in general as Plone seems to be loading virtually none of my CSS and pretty much giving me raw HTML in the browser. I'm assuming the CSS registry is loading CSS from the buildout-cache. With this assumption, an example stylesheet that I'm targeting is located under:
Plone/buildout-cache/eggs/Products.NuPlone-1.0b3-py2.7.egg/Products/NuPlone/skins/nuplone_styles/base.css
When the CSS Registry failed to load this, I noticed that some CSS was being loaded in via handles like this:
++resource++tinymce.stylesheets/tinymce.css
But this format doesn't work with base.css and others.
So my question is, given I've got a new product installed with some CSS included in it, how do I get Plone to target said CSS?
For resources inside "skins" FS folders, the way to register on portal_css tool is to simply provide the filename, so simply put there base.css.
If this is not working probably the nuplone_styles skin folder is not registered properly in the portal_skins tool.
So go to ZMI --> portal_skins --> click on "Properties" and check the following:
what theme is used? You must probably switch back to NuPlone (but I'm not sure if it works on Plone 4)
is the nuplone_styles folder in the list of CMF layers of the used theme?
Please note also that adding the nuplone_styles layer to another theme is not a good idea. Please think about copying CSS you need in the custom directory.
This is not an answer, but some additional explanation, not fitting in a comment:
The "old" way to include style-sheets via skin-folders, requires to specify only the file-name, not a full path, and will be found by traversal, meaning the first found file with the according name, will be taken. In case of several files with the same name, the order of skins matters.
The other way is to register style-sheets via a browser-package, to have an unambiguous path to a certain file, they must start with +++resource++.
I am making a website with concrete 5.7. and to edit some things i have copied the Elemental theme and created my theme. But there are two things i don't know how to edit:
1)Is there a way to define how the elements are going to be disposed in mobile version or at least at which size the autonav is going to be changed by the menu button?Also in small screens the logo becomes really small and all the elements appear disordered.(attached file shows those problems)
2) When i change the colors of my website,(settings->design->customize) where does this changes store, because for me it would be easier to use a text editor rather than doing it with the tool. I don't want to create a new color preset, only to know where these changes are stored.
Thanks for everything.!
Photo: https://plus.google.com/photos/109724001772064952270/albums/6114581190555851105 The first one is the original and the other is the mobile version.
That's actually a bit complex. In the elemental folder, there's a css folder. Inside that folder there's a bootstrap-modified.css file that is responsible for many things including the grid. As the name suggests, it is minified so hard to read and modify.
You also have a file called main.less and several folders containing a lot of other less files.
main.less gets processed and compiled into a css file on the fly, meaning when the site is visited and the css file was not generated yet or when less files were modified.
Anything you want modified you should modify in the less files.
Look for media queries "#media" to find styles specific to certain screen sizes.
how elements are disposed in mobile version is really something you need to deal with through the use of CSS. It is not really something Concrete5 has control over.
The changes to design made through settings->design->customize are saved in the database.
BUT the things you can modify are defined in the site's css file. You could simply modify the css file directly using any text editor instead of customizing design through the dashboard.
I recently setup django-grappelli on my first django app. While I like the way it looks I want to customize the colors, and other CSS.
From my research, it looks like I will have to use Compass but I've never used Compass before and want to double check that this is the best method before I embark on that path!
Is Django-grapelli even the right choice for some one that wants to customize the color theme?
Things I tried
Modify the CSS in the Grappelli stylesheets but they are formatted in a way that makes it tedious.
Extend the style sheet but I am not sure where to do this for the admin.
Create a custom.css but could not figure out where to put the path
Thanks for your advice!
It seems to me like Compass is just a tool to write CSS. I've never used it, but at the moment I don't see how it could make modding the admin interface any easier than doing it manually!
Whenever I make changes to the admin (I've made changes to Grappelli, like you're trying to do), I always use what you've listed as number 2. I've never had any troubles! I can try to help you out, if you'd like to try again.
What I do first is go to my Python install directory and copy the Grappelli source from Lib/site-packages. I put this code in my project directory as a project-level app. So, if you're using Django 1.4, you'll have a folder that has your project folder as well as manage.py in it. Put the code there.
Then, using your favorite web developer tools (I prefer Chrome's), figure out which stylesheet you need to modify and which css file it's in. I do this by right-clicking the element and selecting Inspect Element. This brings up the dev tools, and at the right it tells you the css file its referenced from as well as which line its on. If you open up that css file in your favorite text editor and make changes to it, it should work!
Let me know if you're having any trouble with this. I can try to help you out further.
(and, P.S., I wasn't trying to be pedantic with a basic overview of the use of Chrome's developer tools. I was just trying to be helpful by not assuming anything. I hope you don't take it as an insult.)