The design of the website frontend included with Onpub is easy to customize due to its use of standard CSS code.

The Onpub frontend style sheets and layout are built using the YUI 3 CSS framework. See the following links for more information:

• CSS Grids
• MenuNav CSS Reference

The included frontend/css/onpub-menu.css file contains the CSS code that controls the look and feel of the horizontal drop-down navigation menu. The frontend/css/onpub.css file contains the styles that are used throughout the rest of the frontend layout.

When the onpub.css and onpub-menu.css files are copied to your onpub/local/ directory, your CSS file edits in the onpub/local/ directory will automatically override the code in the default style sheets located in the onpub/frontend/css/ directory.

In order to customize the default CSS included with Onpub, perform the following steps in your Onpub installation directory:

1. Copy the onpub.css and onpub-menu.css files from the onpub/frontend/css/ directory to the onpub/local/ directory.
    
2. Open onpub/local/onpub.css and onpub/local/onpub-menu.css in the text editor of your choice and make the desired changes to any of the included CSS classes.
    
3. Reload your Onpub website in your web browser and your style changes will be loaded automatically.

Be sure to always work on your custom CSS changes in your onpub/local/ directory so that when you upgrade to newer versions of Onpub your style changes are preserved. When upgrading to newer versions of Onpub, files in the onpub/local/ directory will never be overwritten.

By customizing the included CSS files, you can easily create your own personalized, custom Onpub frontend layouts and designs.

If you are not familiar with how CSS works, W3Schools is an excellent place to start learning.

See the Onpub Demo Site for an example of an Onpub-powered site with customized style sheets.