Features
So what's new in Boxes Pro? Well, in a nutshell, lots!
I have summarised some of the changes on this page, but for more information on the major new features like the Twitter snippet, Extra Content and so on, please look at the sub-menus for this page.
Enjoy!
Colours
Boxes Pro uses RapidWeaver "Colour Picker" functionality to allow you to customise your site.In the "Styles" palette of the "Page inspector", you can now choose your own colours for the:
- Page background
- Page header title
- Sub-headers
- Links
- Body text
- Content headers etc
Menus
The Boxes Pro menu runs along the top of the page. Submenus are now fixed and run neatly underneath the main menu.The menus are animated using a modified version of Will Woodgate's JQuery code. So thanks to Will and you can womble up one of Will's fine themes from Themeflood here.
Page Width
With this theme I have gone for width, so Boxes Pro comes in standard width (700px), wide (800px), super-wide (900px) and mega-ultra-super-wide (variable), so you can let your pictures rip.
CPLF goes all "ExtraContent"
When I first designed Boxes, I was pleased as punch with my "logo image in the header area" feature which I dubbed the "Clever-pants Logo Feature" or the CPLF for short.Now a year or so on, the CPLF in Boxes Pro is powered by ExtraContent and is now the simple drag and drop feature that I had always hoped for - but just did not know how to implement.
Find out more about how ExtraContent is implemented in the theme here.
Page Header Background
In addition to a simple image-less page header Boxes Pro now comes with a range of Page Header images and 2 blank Page Header images that you can replace wit your own custom images a plugin like Multitool.If you want to add an image to the "Page Header", but you don't have Multitool, you need to follow these steps:
- Create an image that will fit your selected page width and height (ie. 800px for a page set to 800px wide). Save the image as a PNG file.
- Add the image to the page's "Assets" on the "Header" page of the "Page Inspector".
- Paste the following code in the "CSS" panel of the "Header" page in the "Page Inspector", replacing your image's name tag in the code.
#pageHeader {
background: url(assets/MYHEADERIMAGE.png) no-repeat;
}
background: url(assets/MYHEADERIMAGE.png) no-repeat;
}
