Customizing the Acquia Prosper Theme

Acquia Prosper Theme for Drupal 6 from Fusion Drupal Themes

In the process of searching for a theme for the first Fashion Belle site in 2010, Dries Buytaert's company Acquia emerged at the top with its free provision of the Acquia Prosper Theme developed by Fusion Drupal Themes. The original Fashion Belle website was live until 2011 with the Fusion Acquia Prosper Theme for Drupal 6 (see screenshot at right). Finding the lines of code that controlled various elements took days of work. In time, it became evident that the free Acquia Themes were not being upgraded quickly enough to match the release of Drupal 7. So, for the new Drupal 7 website that you see now, a modified Bartik theme is in use, the new core theme for Drupal 7.

For Drupal 8, expected to be released in 2014, changes are being led by Kris Vanderwater to implement core theming that duplicates what is currently the Panels module to control layout. For those willing to spend the time to learn and install Panels as a separate module prior to the release of Drupal 8, it is already a powerful option for theming in Drupal 7, though this site is not currently using the Panels module. We are focusing our efforts on other tasks and waiting until the release of Panels functionality in Drupal 8. Layout, font and decoration will be the key theming concerns for Drupal 8, and themes as we know them now will become less important.

For those who are still working with the Acquia Prosper Theme for Drupal 6, you may view my commented code here to help save time in determining which aspects control which elements of the CSS and Typography. Rather than spending much time with this code, I would encourage you to shift your efforts toward working with theming for Drupal 7 and upgrading your website to the current core version as soon as possible. Below is the code along with my posts from this topic on Drupal.org.

The Menu Bars Are Images

The Acquia Prosper Theme's Header and Primary Menu Bar colors are controlled by Fireworks PNG Images in the Images folder of the Design Packs. These are bitmap images, so they can only be changed using the bitmap tools such as the brush (NOT the vector tools) in Fireworks. Of course, you can always switch to the Blue Design Pack if you like the Blue look better. You change this in the acquia_prosper.info file. It works better to save the images in PNG 32 (rather than PNG 8 which is what the original solid colors utilize). Be sure to use the "Export" option rather than "Save" to prepare files for FTP to your server. "Export" results in a far smaller file size. "Image Preview" will help you see the difference in file sizes. Below is a copy of some of the most important lines from my CSS file that I named "Pink" with comments about what CSS code controls which elements. Also, I created a new design pack and redirected this in my acquia_prosper.info file because trying to use local.css didn't allow all the images to load properly. I made a number of changes in a typography file, too . . . .

More Tips on Customizing Acquia Prosper

I've been getting several requests for the customized files I've used for the Acquia Prosper Theme, so I'm going to go ahead and post them at my site . . . note that I've done quite a bit of re-arranging of the primary menu CSS to eliminate extra border spacing, which you may not want to do. So, it would be best if you start with your own design pack, coping the Gray for the most neutral base of colors (but borrowing only the menu images from the Blue if you want color menu bar backgrounds, as they are pre-formatted for color), using the instructions I've written in these posts. . . . The theme functions perfectly, but you'll have to be willing to spend time on the customization if you want special colors. Remember, use bitmap tools on the menu bar images to create gradient colors, and soften them out with several repetitions of the gradient blur filter in Adobe Fireworks.

Selected Code from pink.css

/* $Id: pink.css,v 1.1.2.1 2010/01/11 00:09:05 sociotech Exp $ */

/* Basic Typography & Colors
-------------------------------------------------------------- */

/* This controls color in a section of the footer area */
html {
background: #ffccff;
}

body {
background: #fbf5ff;
}

/* Links */
a:link {
color: #0000cc;
}

a:visited {
color: #551a8b;
}

a:hover,
a:focus,
a:active {
color: #0000cc;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
color: #535353;
}

/* Site Info
-------------------------------------------------------------- */
#site-name a:link,
#site-name a:visited {
color: #800080;
}

#slogan {
color: #800080;
}

/* Header Regions
-------------------------------------------------------------- */
/* Header Group */
.header-group-wrapper {
background: #ffccff url(images/pink-header.png) repeat-x top left;
}

.header-group-wrapper a:link,
.header-group-wrapper a:visited {
color: #0000cc;
}

/* Header Top */
.header-top-wrapper {
background: #ffccff url(images/secondary-menu-bg.png) repeat-x top left;
}

/* Header top region */
.header-top-region {
color: #ffccff;
}

.header-top-region a:link,
.header-top-region a:visited,
.header-top-region a:hover,
.header-top-region a:focus {
color: #0000cc;
}

/* Header Wrapper controls text color of search this site box was #535353 for a dark gray */
.header-group .inner {
color: #800080;
}

/* Postscript & Footer Regions
-------------------------------------------------------------- */

/* This controls the color of the top footer area */
.postscript-bottom-wrapper {
background: #ffccff;
color: #343434;
}

.postscript-bottom h2.block-title,
.footer-message-wrapper h2.block-title {
color: #800080;
}

/* The following two classes were combined, but I separated them to allow a different link and hover color */
.postscript-bottom a:link {
color: #800080;
}

.postscript-bottom a:hover {
color: #0000cc;
}

.footer-message a:hover {
color: #0000cc;
}

.postscript-bottom a:visited {
color: #800080;
}

/* This is a border at the top of the footer area */
.footer-wrapper {
border-top: none;
}

.footer-wrapper,
.footer-message-wrapper,
.store-footer,
.footer-wrapper h2.block-title {
color: #800080;
}

/* This controls color between the first footer above and the html background color below */
.footer-wrapper,
.footer-message-wrapper {
background: #ffccff;
}

/* This controls link text color below the upper footer area */
.footer-message a:link,
.footer-message a:visited,
.footer a:link,
.footer a:visited {
color: #800080;
}

/* Added this to get a blue hover color in the footer text */
.footer-message a:hover,
.footer a:hover {
color: #0000cc;
}

#store-footer {
background: #343434;
}

#store-footer a:link,
#store-footer a:visited {
color: #0000cc;
}

#store-footer {
color: #727171;
}

/* Primary Menu
/-------------------------------------------------------------- */
.header-primary-menu-wrapper {
background: #ffccff url(images/primary-menu-bg.png) repeat-x top left;
border-bottom: none;
border-top: none;
}

/* visited pseudo selector so IE6 applies text colour - this controls the side borders of link blocks and the main text in the bar menu prior to hover and active - alternate border option is 1 px solid #ffccff; */
.primary-menu-inner ul.menu li a:link,
.primary-menu-inner ul.menu li a:visited {
border-left: 1px solid #800080;
color: #800080;
}

/* styles for standard and Superfish primary menu */
.primary-menu-inner ul.menu li a:focus,
.primary-menu-inner ul.menu li a:hover,
.primary-menu-inner ul.menu li:hover a,
.primary-menu-inner ul.menu li.hover a,
.primary-menu-inner ul.menu li.active-trail a,
.primary-menu-inner ul.sf-menu li a:hover,
.primary-menu-inner ul.sf-menu li:hover a,
.primary-menu-inner ul.sf-menu li.hover a {
background: #ffebff;
color: #800080;
}

.primary-menu-inner ul.menu li.active-trail a.active {
color: #800080;
}

/* Alternate option would be 1 px solid #ffccff; */
.primary-menu-inner ul li.last a,
.primary-menu-inner ul.sf-menu li.last {
border-right: 1px solid #800080;
}

/* 2nd Level */
.primary-menu-inner ul.sf-menu li ul {
background: #ffebff;
border-left: 1px solid #dadada;
}

/* This controls the dropdown from primary menu */
.primary-menu-inner ul.sf-menu li ul.menu {
border-bottom: 5px solid #939393;
border-left: 1px solid #dcdcdc;
border-right: 1px solid #dcdcdc;
}

.primary-menu-inner ul.sf-menu li ul.menu li {
border-bottom: 1px solid #dcdcdc;
}

.primary-menu-inner ul.sf-menu ul li.last {
border-right: none;
}

.primary-menu-inner ul.sf-menu li ul.menu a:link,
.primary-menu-inner ul.sf-menu li ul.menu a:visited {
border-left: none;
color: #800080;
}

.primary-menu-inner ul.sf-menu li:hover ul li a:link,
.primary-menu-inner ul.sf-menu li:hover ul li a:visited,
.primary-menu-inner ul.sf-menu li.hover ul li a:link,
.primary-menu-inner ul.sf-menu li.hover ul li a:visited {
color: #800080;
}

.primary-menu-inner ul.sf-menu li.last a:link,
.primary-menu-inner ul.sf-menu li.last a:visited,
.primary-menu-inner ul.sf-menu li.last ul li a:link,
.primary-menu-inner ul.sf-menu li.last ul li a:visited {
border-right: none;
}

/* Was color: #343434, next two groups */
.primary-menu-inner ul.sf-menu li.sfHover ul.menu li a:visited {
background: #ffebff;
color: #800080;
}

.primary-menu-inner ul.sf-menu li.sfHover ul.menu li a:focus,
.primary-menu-inner ul.sf-menu li.sfHover ul.menu li a:hover {
background: #fff;
color: #800080;
}

/* 3rd Level */
.primary-menu-inner ul.sf-menu li ul.menu li ul.menu {
border-top: 1px solid #dcdcdc;
}

/* Primary menu - nolink */
.primary-menu-inner ul.menu li .nolink {
border-left: 1px solid #5b5b5b;
color: #aeaeae;
}

.primary-menu-inner ul.menu li .nolink:hover,
.primary-menu-inner ul.menu li .nolink.hover {
color: #fff;
}

.primary-menu-inner ul.menu li.active-trail .nolink,
.primary-menu-inner ul.sf-menu li:hover .nolink,
.primary-menu-inner ul.sf-menu li.hover .nolink {
background: #fff;
color: #8b8b8b;
}

/* Tables
/-------------------------------------------------------------- */
thead th,
th {
background: #e8e8e8;
border-bottom: 1px solid #cfcfcf;
}

tbody th {
border-bottom: 1px solid #cfcfcf;
}

tr.even,
tr.odd {
background: transparent;
}

/* Changed background to background-color per online notice that this could be interfering with advanced forums. You don't need to override the background completely, just the background color. */
tr.even td,
tr.odd td {
background-color: transparent;
border: 1px solid #dbdbdb;
}

tr.drag td,
tr.drag-previous td {
background: #ffd;
}

/* Skinr styles
/-------------------------------------------------------------- */
/* Rounded Titles */
.prosper-rounded-title h2.block-title {
background: #aeaeae;
color: #fff;
}

/* Gray Rounded - Plain */
.prosper-gray-rounded-plain .content {
background: #fff;
border-bottom: 2px solid #bfbfbf;
border-left: 1px solid #ededed;
border-right: 1px solid #ededed;
color: #686868;
}

/* Next two items were together, but I separated to add a visited link color */
.prosper-gray-rounded-plain a:link {
color: #0000cc;
}

.prosper-gray-rounded-plain a:visited {
color: #551a8b;
}

.prosper-gray-rounded-plain a:hover,
.prosper-gray-rounded-plain a:focus,
.prosper-gray-rounded-plain a:active {
color: #0000cc;
}

.prosper-gray-rounded-plain ul.pager li.pager-current {
background-color: #fff;
}

/* Breadcrumbs
/-------------------------------------------------------------- */
.breadcrumbs .inner {
background: #fff;
border-bottom: 1px solid #929292;
border-left: 1px solid #e2e2e2;
border-right: 1px solid #929292;
border-top: 1px solid #efefef;
color: #8e8e8e;
}

Typography.css

/* $Id: pink.css,v 1.1.2.1 2010/01/11 00:09:05 sociotech Exp $ */

/* Basic Typography & Colors
-------------------------------------------------------------- */

/* This controls color in a section of the footer area */
html {
background: #ffccff;
}

body {
background: #fbf5ff;
}

/* Links */
a:link {
color: #0000cc;
}

a:visited {
color: #551a8b;
}

a:hover,
a:focus,
a:active {
color: #0000cc;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
color: #535353;
}

/* HTML Elements
-------------------------------------------------------------- */
/* Lists */
ul li {
list-style-image: url(images/list-level-1.png);
}

ul li ul li {
list-style-image: url(images/list-level-2.png);
}

ul li ul li ul li {
list-style-image: url(images/list-level-3.png);
}

/* Blockquotes */
blockquote {
background: #ececec url(images/blockquote-quote.png) no-repeat 8px 8px;
border-top: 1px solid #d8d8d8;
color: #6a6a6a;
}

/* Site Info
-------------------------------------------------------------- */
#site-name a:link,
#site-name a:visited {
color: #800080;
}

#slogan {
color: #800080;
}

/* Header Regions
-------------------------------------------------------------- */
/* Header Group */
.header-group-wrapper {
background: #ffccff url(images/pink-header.png) repeat-x top left;
}

.header-group-wrapper a:link,
.header-group-wrapper a:visited {
color: #0000cc;
}

/* Header Top */
.header-top-wrapper {
background: #ffccff url(images/secondary-menu-bg.png) repeat-x top left;
}

/* Header top region */
.header-top-region {
color: #ffccff;
}

.header-top-region a:link,
.header-top-region a:visited,
.header-top-region a:hover,
.header-top-region a:focus {
color: #0000cc;
}

/* Header Wrapper controls text color of search this site box was #535353 for a dark gray*/
.header-group .inner {
color: #800080;
}

/* Header Regions - Secondary menu
-------------------------------------------------------------- */
.secondary-menu-inner ul.links li a:link,
.secondary-menu-inner ul.links li a:visited {
border-left: 1px solid #ffccff;
color: #000;
}

.secondary-menu-inner ul.links li.last a {
border-right: 1px solid #ffccff;
}

.secondary-menu-inner ul.links li a:hover,
.secondary-menu-inner ul.links li a:focus {
background: #ffebff;
}

.secondary-menu-inner ul.links li a.active {
background: #ffebff;
}

/* Header Regions - Search
-------------------------------------------------------------- */
.search-box-inner form#search-theme-form {
background: url(images/search-bg.png) no-repeat top center;
}

.search-box-inner input#edit-search-theme-form-header {
background: none;
color: #333;
}