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++.
Related
I inherited an already built Drupal 7 site. I have been able to figure out many things. But I am unclear on the CSS. A found a folder full of long-named CSS files but the code is all minified and hard to read. The previous developer had to be using some tools or services to alter and change the code in a more readable way. Does any know what the deal is ?
Also, I cant seem to find any way inside Drupal to enter CSS. I do not even see any classes or ID assigned to the blocks, views, nodes, or fields. So I have no clue how they were able to customize this site at all even though they obviously did. It uses Bootstrap 3 as a theme. Can anyone help explain how this works?
I will try to figure out the essence of the informations you given.
First: You have a Drupal 7 installation with compressed css files based on Bootstrap. That sounds the theme use less or sass precompiler for the theme css and you have the production (builded) instance of the project. Without the uncompressed less/sass/scss files it will be hard to edit the css. if you have no way to get the source files, the best way you can try is to add a extra css file and write you own css in it.
Second: Drupal strictly separates the code from the administration interface. Your PHP, HTML, CSS and other codes (except the WYSIWYG output) should not be entered via the administration interface. That's the best practice way. But anyway, there is a couple of modules that allows to write code inside the Drupal backend like this https://www.drupal.org/project/extra_css_js
Third: As information for you, Drupal 7s End of life is on November 28, 2022 so the best and recommanded way for you is: Freeze the Drupal 7s Instance as is (only Sercurity Updates and Hotfixes) and relaunch the Project with Drupal 9.
Drupal theme css files are mostly located in theme folder like "theme folder/css/style.css". As above mentioned, it might be used css minify tool or module for theme performance aspects. If it is created by drupal tools/module then once cache clear it will delete automatically and regenerate with new one with updated new css code on after page visit. You can also add custom css file by hook alter.
A skin.css file has been updated on a DotNetNuke website, but the updated change to the file has not yet come through on the main css file.
Tried clearing the cache within DNN and no luck...
I'm not overly familiar with DNN and how it works, but isn't it supposed to get merged into the rest of the CSS files with the DependencyHandler.axd. This does not seem to have happened.
Anyone any ideas?
When you say it isn't showing up in the Main.CSS file, I am going to assume you are using the CDF functionality in the platform. If so, you can go to the Host/Host Settings page, and look for the Client Dependency Framework portion of the settings.
In those settings you can "increase" the version number, which should cause the files to be regenerated, you can also turn off CDF to allow DNN to just load the CSS and JS files normally which generally makes debugging things a little bit easier.
I need to edit a css file that manages the position of certain buttons for a block.
Using Google Chrome to inspect the element, Drupal only gives me this information about the css file name: DSFJHjdfkvwvSDFVSFbvnhsdjnvjsdnfjbvw.css
Wonderful... that doesn't exist. How am I suppose to pinpoint the exact location of a css file? I've torn apart the css files within the styles folder in themes.
So basically finding the source code for everything in drupal requires you to find the needle in the haystack. Is there a way to find exactly what css files my webpage is using by using the admin panel??
Drupal, for performance reasons , aggregates all CSS files into one generated file so only 1 request Is needed to load all necessary styles.
You can disable this (not recommended on a prd site) by going to the performance settings in drupal config and disabling js and CSS optimizations.
Clear the cache and now you will see the specific file the CSS rule lives in when inspecting in chrome tools.
As a side note, it is not recommended to edit anything in a contributed module unless you contribute it back. Otherwise, when you need to upgrade to the next version of the module, you will lose your previous changes. I would just apply CSS rules in your custom theme that override the modules CSS.
Sorry if there are typos. This was written on my phone and I will clean it up when I am at my desk.
I think in your drupal configuration you have enabled the "Aggregate and compress CSS files" settings. Try disabling it by going to Configuration > Development > Performance. It might solve you problem.
You can revert back the setting after you have made changes.
Turn of the caching and then clear the cache. You should then get the correct location of the CSS rules. Once you are done with this, enable caching again.
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.
My work has recently deployed Sharepoint and I'm currently trying to get to grips with it.
I'd like to be able to completely customise the way my blog looks but I have no idea where to start. I had a look through Microsoft's developer site and it does look like they have a lot of stuff there but it all seems to be pitched at a much higher level than I'm at.
I'd consider myself pretty experienced with CSS and web development, does any of this translate into sharepoint? Can I make a new CSS file and upload a bunch of images into a store and change the look of my 'site' that way, or is it a lot more complicated?
I realise this is a little vague, but I'd really appreciate some pointers to a "getting started with making sharepoint not look sucky" guide or an example of the sort of thing I can actually hope to achieve. Hopefully my question isn't too high-level.
Thanks
Use SharePoint Themes, their installation is tricky at first but once you get a good development environment you'll be able to test modifications in the traditional "save css file, press F5".
Themes have these pros:
Do not need sharepoint designer
Do not need to change masterpages and deal with (un)ghosting (the sum of all fears)
Can be applied to one subsite and have other subsites with different themes (see gl-applytheme in google for mass application of themes thru many subsites)
and these cons:
You have no access to HTML changes, for that you need masterpage love (I dont think thats a con, its a limitation that usually exists in different scenarios and also makes you improve your css skills so much in the css-zen-garden way)
Themes once applied, go to the server memory -- meaning that if you change your theme folder you need to recycle the application pool, apply a different theme and apply your theme back to see that one pixel border you forgot to put in the footer. But for that specific problem I have a solution below:
After you do your "theme setup" you'll be able to only work with CSS and images and be free to overwrite any class in SharePoint using your favorite Developer Toolbar/Firebug addon to find what you want to change.
In the folder c:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES create a folder named THEMEDEV
Inside the new folder, create a file called theme.css and another called THEMEDEV.INF
Inside the .INF file, paste this:
[info]
title=THEMEDEV
codepage=65001
version=3.00
format=3.00
readonly=true
refcount=0
[titles]
1033=THEMEDEV
now open the c:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033 folder (1033 is your language code, thats the default for english installations)
edit the SPTHEMES.XML file
below <SPThemes ...> insert:
<Templates>
<TemplateID>THEMEDEV</TemplateID>
<DisplayName>Development Theme</DisplayName>
<Description>Development Theme.</Description>
<Thumbnail>images/thnone.gif</Thumbnail>
<Preview>images/thnone.gif</Preview>
</Templates>
now edit your theme.css file, add an import to your favorite CSS development folder:
#import url('file:///C:/SharepointThemes/Theme1/theme.css');
Save everything, open your sharepoint: Site Actions => Site Settings => Look and Feel => Site theme => choose your Development Theme and hit Apply
If everything worked, you can now edit your C:\SharepointThemes\Theme1\theme.css in your favorite editor, save it with something like
* { color: red !important }
and see the changes on your site.
Something also important when developing themes: do not create folders to store, say, your images, use everything in the same folder and in the code itself use a relative fashion, like background: url('image.png')
ps1: Only you can see changes you are making to your sharepoint site due to the file://c:/ folder, if you need more people to see the changes during development, setup a network path that they all have access, the rest is the same.
ps2: Keep in mind this is a development environment, to make your theme a live theme you need to create another one to store all the content used to change your site's visuals.
The process is similar to the one creating the THEMEDEV one, just put a pretty and consistent name across all configurations (Folder name, .INF name, .INF contents, SPThemes.xml node contents), paste all your images in the Theme's folder and replace the theme.css file with your content.
Edit1: Reading your comment above, now you have a "editing + uploading to FTP" type of setup :) this works for MOSS and WSS by the way (even if you don't know the difference). For more info on customizing sharepoint, I made a post yesterday about more options:
Sharepoint: How to remove default core.css reference?
I like to always use this post as a starting point for SP branding: http://erikswenson.blogspot.com/2008/10/functional-sharepoint-branding-style.html
It depends on whether you're talking about a WSS 3.0 site or a MOSS site. WSS 3.0 sites can be customized using themes. Customizing MOSS sites is a little trickier, although you can add a SINGLE custom CSS style sheet via Central Admin - in this case, your custom files, images, etc., would be deployed as a Feature.
The best explanation of how this works that I have come across is the six part series on the cleverworkarounds.com site.