Theming contributed modules

bkat - August 12, 2007 - 05:44
Project:Ubiquity
Version:5.x-1.x-dev
Component:Code
Category:feature request
Priority:normal
Assigned:Unassigned
Status:postponed
Description

I just found ubiquity and love its look. I've only been working with it for a couple of days and I have a few tweaks that you may be interested in. When working with paged data like acidfree albums, there is not enough room to display prev, next, 9 items links, etc and have it fit within the alloted space in the template.

I modified template.php to override theme_page_list() so that we display 5 item links and not 9. 5 is the most that will fit when all the links are double digit (i.e. 10, 11, 12,13,14)

This is accomplished by adding the following function to template.php

/* kjh: ubquity can't display all 9 pager items plus first, previous, next,
*      & last in a single line.  So we'll limit to 5 items
*/
function ubiquity_pager_list($limit, $element = 0, $quantity = 5, $text = '', $parameters = array()) {
     $quantity = min($quantity, 5);
     return theme_pager_list($limit, $element, $quantity, $text, $parameters);
}

Some other tweaks I've done:

All my tables in the content space were sized at 100%, I added the following:

/* kjh: don't make tables in content 100% */
.content table {
  width: auto;
}

I didn't like the extra space in inline links like
Posted by kjh in $keyword

/* kjh:  remove the padding on the left of the first link in a links inline */
.links li:first-child a {
  padding-left: 0;
}

in acidfree inlines, I like the caption under the picture to be centered and italic.

/* kjh: caption under acidfree inlines */
div.filter-thumb-title {
   font-style: italic;
   text-align: center;
}

/* add a little space to the left of acidfree inlines.  Is there a way to only do this if float: right      is set for the span?
*/
span.filter-thumb {
  margin-left: 5px;
}

There was no vertical space between the pager and the acidfree images in the various modes:

.pager {
   margin-bottom: .75em;
}

div.acidfree-list {
   margin-top: .75em;
}

div.acidfree-item {
   margin-top: .75em;
   padding-left: 0;
}

#1

melon - August 14, 2007 - 21:51

Thanks for the submission, I'll go and test it.

#2

bkat - August 16, 2007 - 02:30

Some more tweaks primarily to improve the look of certain modules in ubiquity

/* uieforum block */
.block-uieforum .lw1 {
   font-size: small;
}

.block-uieforum .lw1 .block-forum-title  {
   font-size: 13px;
}

/*
*  I want tables in user content to have a solid border color.  The default css, gives some o
* of the elements a faded border
*/
.content tbody {
   border-top-color: #000000;
}

.content th {
   border-top-color: #000000;
   border-bottom-color: #000000;
}

/* color the read more links the same as teaser titles.  This only looks good
* if the read more tweak module is active to relocate "read more" to the end
* of the teaser content.  Maybe this can moved into a separate css file and then
* conditionally use that file if the readmore module is activated?
*/
.read-more a {
   color: #9f0000;
}

/* Event module.  I'm still not 100% satisfied with this.  Look at http://womensfooty.com/node/1071 and http://womensfooty.com/node/20 for examples of
how they look
*/
.event-nodeapi div {
    padding-top: 0em;
}

div.field {
   margin-top: 1em;
   padding-bottom: 1em;
}
div.locations-list {
   -moz-border-radius: 20px;
   border-radius: 20px 20px;
   padding: .5em;
   background-color: #e9eef4;
   border: solid 3px #dfecf4;
   float: right;
}

.locations-list h3 {
   margin-top: 0em;
}

/* If I have content that is float right and is taller than the body of the conent, the node links    
* were being rendered to the left of this conten.  We always want the node links to be below 
* the content even it has dangling
* floats
*/
.links {
   clear: both;
}

#3

bkat - August 16, 2007 - 03:07

These additions to template.php make some things look better (to me)

/**
* kjh: override theme_comment_wrapper to disable comment div when there are no
*      comments.  It looked silly to have a light blue empty box
*/
function ubiquity_comment_wrapper($content) {
  if ($content == '') {
      return '';
  }

  return theme_comment_wrapper($content);
}

/**
* the location module generates some crappy html.  I'm going to wrap it in a div so that I
* can apply a background color, border, and float right.  See links referenced in previous
* followup
*/
function ubiquity_locations($locations = array(), $hide = array()) {
    if ($locations) {
        return '<div class="locations-list clear-block">'
      .  theme_locations($locations, $hide)
      . '</div>';
    }

    return '';
}

#4

melon - August 21, 2007 - 08:30
Title:Acidfree albums» Theming contributed modules
Category:bug report» feature request

First of all, thanks for the submissions.
I evaluated some of your css codes and committed them.
As for the contributed modules, I am wondering what scheme should we follow.
- Include each and every contributed module overrides to the style.css?
- Add an extra css file which includes all contributed css overrides?
- Add an extra css for each contributed module css override.

To me at the moment, the second option seems best, but for any direct import from css would add one more http request even if css aggregator is on, since it cannot aggregate and compress directly imported files AFAIK.

Any suggestions?

#5

bkat - August 23, 2007 - 06:14

Your second option seems like the best. I've often thought about having a local.css file where we can keep our local overrides. Makes upgrading a theme easier.

#6

goo110np - April 26, 2008 - 22:59

Hi
I got a fatal error when I tried to add some code to the template.php file to enable the page_title module. I gather the code to add is either all or just part of:

<?php
function _phptemplate_variables($hook, $vars) {
  if (
$hook == 'page') {

   
// These are the only important lines
   
if (module_exists('page_title')) {
     
$vars['head_title'] = page_title_page_get_title();
    }

  }
  return
$vars;
}
?>

In fact I tried adding these section:
if (module_exists('page_title')) {
$vars['head_title'] = page_title_page_get_title();
}

}
return $vars;
}

Not being familiar with PHP I've probably got it wrong - may be just left out a space of something. Is there any chance you could post up the whole text for the template.php file including this addition for the page title module for me to copy? - that would be great! As you can see I am rather assuming you are using this module, If you don't and there is an alternative - you could let me know?
Many thanks
Julian

#7

melon - April 27, 2008 - 13:54

You probably inserted the code to the wrong place. Ubiquity 5.x-0.2 inserts the needed variable correctly for page_title module.

#8

melon - September 14, 2008 - 08:10
Version:5.x-0.x-dev» 5.x-1.x-dev
Status:active» postponed

Currently I am rethinking the direct support of contrib modules. Please post new issues after 1.0-beta is released.

 
 

Drupal is a registered trademark of Dries Buytaert.