2 replies [Last post]
TonyT's picture
Offline
Joined: 01/23/2010

Here are a couple of changes for the css/style[0-5].css files to make them pass the http://jigsaw.w3.org/css-validator/ CSS validator:

style1.css line 273:

#search .form-text {
background: ffffff; <<<<<<<<<<<< should be #ffffff
padding: 2px;
font-size: 1.2em;
font-weight: bold;
color: #999999;
vertical-align: middle;
border: 1px solid #000000;
width: 200px;
}

style1.css line 1115:

div.ddblock-cycle-galapagos div.custom-pager img {
height:30px;
margin:0 10px !important;
padding:0 !important;
vertical-align:middle;
width:40px;
border: 1px solid #000000;
_margin-top: 7px; <<<<<<<<<<<<<<< should be margin-top: 7px;
}

admin.css line 8:

.help {
margin-bottom: 10px;
padding: 10px 10px 0 10px;
font-size: 1.0; <<<<<<<<<<<<<<<<<<<< should be font-size: 1.0em;
color: #333333;
background: #ffffff;
border: 1px solid #eeeeee;
}

admin.css line 23:

.messages {
margin-bottom: 10px;
padding: 10px;
font-size: 1.0; <<<<<<<<<<<<<<<<<<<< should be font-size: 1.0em;
background: #fffdc0;
border: 1px solid #bbbbbb;
}

admin.css line 101:

dl.multiselect dd {
margin: 0;
padding: 10px;
display: block;
font-size: 0.85em;
background: 0;
border: 1; <<<<<<<<<<<<<<<<<<<<<<< should be border: 1px;
border-top: 0;
border-bottom: 0;
border-width:0 0;
}

There is also a typo on the page.tpl.php template. The DIV for the top banner region has the wrong ID preventing it from being styled.

page.tpl.php line 72:

<?php if ($top_banner) { ?>
<div id="top-banner clear-block"> <<<<<<< should be <div id="top-banner" class="clear-block">
<?php print $top_banner ?>
</div>
<?php } ?>

One suggestion is to add the printing of the $footer_message message which can be specified in the Drupal admin page at /admin/settings/site-information and is intended to be text displayed at the footer of every page. To make that happen I changed:

page.tpl.php line 317:

<!-- The All Knowing All Seeing Footer Block -->
<?php if ($footer) { ?>
<div id="footer" class="clear-block">
<?php print $footer_message ?>
<div style="text-align: center; padding: 10px; font-size: 0.8em; color: #ffffff;">
<a style="text-decoration: none; color: #ffffff;" href="http://www.themeshark.com/">
<img src="http://www.ThemeShark.com/files/tslogo.png" alt="ThemeShark.com - Drupal Themes with Bite!" /><br />Drupal Themes</a> with Bite!
</div>
</div><!-- /footer -->
<?php } ?>

changed to:

<!-- The All Knowing All Seeing Footer Block -->
<?php if ($footer_message || $footer) { ?>
<div id="footer" class="clear-block">
<?php print $footer_message . $footer ?>
<div style="text-align: center; padding: 10px; font-size: 0.8em; color: #ffffff;">
<a style="text-decoration: none; color: #ffffff;" href="http://www.themeshark.com/">
<img src="http://www.ThemeShark.com/files/tslogo.png" alt="ThemeShark.com - Drupal Themes with Bite!" /><br />Drupal Themes</a> with Bite!
</div>
</div><!-- /footer -->
<?php } ?>

Another suggestion is to add <div class="clear-block> ... </div> around the Galapogos2 regions so that if they contain floated blocks, they do not protrude out the bottom, and possibly overlap, following regions. For example

page.tpl.php line 160:

<div id="main-content-inner-inner"><div id="squeeze-2">
<?php print $tabs ?>
<?php print $breadcrumb ?>
<?php print $contenttop ?>
<?php print $help ?>
<?php print $messages ?>
<?php print $content; ?>
<?php print $contentbottom ?>
</div></div>

could change to:

<div id="main-content-inner-inner"><div id="squeeze-2">
<?php print $tabs ?>
<?php print $breadcrumb ?>
<div class="clear-block"> <?php print $contenttop ?> </div>
<?php print $help ?>
<?php print $messages ?>
<div class="clear-block"> <?php print $content; ?> </div>
<div class="clear-block"> <?php print $contentbottom ?> </div>
</div></div>

Also, I noticed that the Drupal secondary tabs are not being printed in Galapogos2. Here is the corresponding code from the Drupal Garland theme showing the clear-block DIVs and the printing of both $tabs and $tabs2:

<?php print $breadcrumb; ?>
<?php if ($mission): print '<div id="mission">'. $mission .'</div>'; endif; ?>
<?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block">'; endif; ?>
<?php if ($title): print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2>'; endif; ?>
<?php if ($tabs): print '<ul class="tabs primary">'. $tabs .'</ul></div>'; endif; ?>
<?php if ($tabs2): print '<ul class="tabs secondary">'. $tabs2 .'</ul>'; endif; ?>
<?php if ($show_messages && $messages): print $messages; endif; ?>
<?php print $help; ?>
<div class="clear-block">
<?php print $content ?>
</div>
<?php print $feed_icons ?>
<div id="footer"><?php print $footer_message . $footer ?></div>

Just wanting to contribute back to a great theme which I am using on our site:-) Thanks,

-Tony

Rob D.'s picture
Offline
Joined: 04/09/2008

Wow, very comprehensive, thanks! This template was built using Galapagos v1 as a base, and I think some of those issues may have been carry overs.

A note about line 1115, though...this:

_margin-top: 7px;

Is actually sort of intentional and should be removed entirely from the stylesheet instead of corrected. It's actually there as an IE6 hack - IE reads the line though the other browsers won't.

CSS validation efforts has become lower priority because I've been incorporating CSS 3 (mostly for rounded corners) which doesn't validate anyway, so I might have even forgotten check it.

TonyT's picture
Offline
Joined: 01/23/2010

Thanks. I was wanting our site to validate so these were the only issues I encountered.

Another suggestion I incorporated into style1.css was to change the styles for .alert, .info etc. to also work for DIVs:

p.alert, div.alert { ... }

I wanted to make multiple paragraphs into an alert so being able to apply the style to a DIV did the trick.

-Tony

Support hours: 9AM - 5PM EST, Mon - Fri

Follow us on: