Skip to main content

Custom CSS and Javascript in Plone

Project description

**************************
collective.customoverrides
**************************

.. contents:: Table of Contents

CSS and JS overrides for Plone
------------------------------

This product allows content managers to inject custom stylesheets and
Javascript by adding a file to a folder. On that folder and its descendants,
these will be added to the existing CSS/JS.

If you want to style a section of the site, Plone already provides ways to do
that. Please read
http://plone.org/documentation/kb/create-a-different-look-and-feel-for-different-sections-of-your-web-site-without-creating-new-skins
for more info on that, and decide if you have a use for this product.

How to use
^^^^^^^^^^

The main thing is to place a file called `custom.css` or `custom.js` ("custom
files") in a folder. These files will then be inserted in a special viewlet in
the HTML HEAD section.

There are two ways to manage custom files:

Add a custom file using Plone
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Add a Plone File (ATFile).

* Prepare a `custom.css` or `custom.js` file
* In Plone, go to the desired folder
* Click the "Add item" menu
* Select "File"
* Upload the prepared file

The advantage of this method is that the familiar Plone interface can be used
to upload the file. Its disadvantage is that the file can't be modified: You'd
prepare a new file locally and replace the existing one instead.

Also be aware that:

* Plone files may be workflowed, depending on your site. If a custom file is
private, it won't be visible to visitors who aren't logged in.
* Plone files may show up in your navigation, depending on your site's
navigation settings.

Add a custom file using the ZMI
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Add a Zope File.

* Either:

- In Plone, go to the desired folder and append `manage_main` to the URL, or
- Go to the ZMI straight away, and go to the desired folder

* Add a File, name it either `custom.css` or `custom.js`

- You may choose to upload a locally prepared file.

* Edit the file.

This method is more flexible: it is possible to edit the file through the web.
However, the ZMI is more complex to use, and requires higher permissions, so
this method is for power users.

Tested on
---------

Plone 3, Plone 4

Warning
-------

* Incorrect CSS/JS may mess up your site.

Contributors
============

Note: place names and roles of the people who contribute to this package
in this file, one to a line, like so:

- Huub Bouma, Original Author
- GWW, moved to gihub

Changelog
=========

1.0-dev (unreleased)
--------------------

- Package created using templer

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

collective.customoverrides-1.0.1.zip (27.6 kB view details)

Uploaded Source

File details

Details for the file collective.customoverrides-1.0.1.zip.

File metadata

File hashes

Hashes for collective.customoverrides-1.0.1.zip
Algorithm Hash digest
SHA256 3e9719754ed399d530d5d6517ef0e0146d3f3abc7e4f0fe3bf727cea72ba49de
MD5 44fb98062d5c755f8443ff4b83f7bf45
BLAKE2b-256 53f07265165aa95c9bf5567f31c9bf5b2e9636381b9c4cf020373cd8d4f224df

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page