♥ Bianca ♥

********
DATE: 21 May 2010
LOG IN: 08:15am
LOG OUT: 12:15nn

LOG IN: 12:30pm
LOG OUT: 05:00pm


TOTAL: 8hrs, 30mins

1. Making a Plone Theme: 5 Most Wanted Tips by Denis Mishunov, a Plone integrator from Ukraine [slideshare.net]
1. Centering the design
•Fixed width design CSS:
#visual-portal-wrapper{
width: 980px;
margin-left: auto;
margin-right: auto;
}
•Liquid design CSS
#visual-portal-wrapper{
margin-left: 20%;
margin-right: 20%;
}

2. Styles for different Internet Explorers
•IEFixes6.css, IEFixes7.css, IEFixes8.css

3. Styles Alteration
•Different sections: News, Products, About Us, Contact
•In XHTML:
o BODY Class: string:${here/getSectionFromURL}
o NEWS section: class=”section-news”
o PRODUCTS section: class=”section-products”
o CONTACT section: class=”section-contact”
o ABOUT US section: class=”section-about-us”

4. Dropdown Menus
•Suckerfish Dropdowns created by Patrick Griffiths and Dan Webb are accessible. Have valid CSS and obviously clean XHTML

5. Rounded Corners
•“Rounded corners in CSS has become sort of a holy grail.”
•Using a pure CSS solution:
•Image based solutions
o The more the radius the more the complex CSS
o Too ugly XHTML
o No hooks in Plone
o People don’t like dealing with Plone if they can change images
•Image based solutions
o You can use sliding doors
o Or the Adam Kalsey technique
o It is pretty simple but not trivial CSS
o Most of the cases use nested HTML elements
o Fixed set of images for the corners
o Inflexible for changes
•JS+CSS solution:
o The most flexible
o Does not require nested HTML elements to be put manually
o Does not require additional CSS

2. Watched a video by quintagroup about installation of an add on theme on Plone,
•Edit the buildout.cfg
Code:
eggs =
...
plonetheme.twinapex
zcml =
...
webcouturier.dropdownmenu
plonetheme.twinapex

•Run the buildout
.bin/buildout
•Restart the instance
./bin/instance restart
•On the administrative page of your Plone site, go to Site Setup > Add/Remove Products > select the theme > Save.
•you will now see the theme folder in the Plone/buildout-cache/eggs subdirectory.

3. To install an old style Plone theme,
•Download and unzip a skin folder.
•Move the skin folder to the products subdirectory of Plone.
•Re-run buildout with the following command:
.bin/buildout
•Restart Zope server.
•Go to http://localhost:8080/Plone/Control_Panel/manage and click restart or by using the code: ./bin/instance restart
•On your administration page of your Plone site, go to Site Setup > Add/Remove Products > enable the new theme > Save.

4. To change the default logo and images of a downloaded theme,
•Go to Site Setup > Zope Management Interface > portal skins > folder of you template > locate the folder of the images < select the image you want to change > click Customize > Browse for thenew image you want > Save changes.
•Repeat these steps for all the images you wish to edit.