Ubiquity Drupal theme

screenshot Ubiquity tries to implement a generic yet stylish look found or sought by many webpage owners. It tries to be completely valid XHTML Strict and CSS 2.0. Using the ’anyorder columns’ layout style it will make your pages search engine friendly as the main content column comes first in the html.

Please Send me your opinions about this theme and help the development with submitting issues to its project issue queue at drupal.org.

Feel free to download the theme’s graphic source files and customize it to fit your needs.

Update (Aug 21st, 2007)

There is a new development verision which fixes a couple of annoying bugs and adds handy little features. The new version number is 1.x-dev. You can get it from Drupal.org, or download it from this page (scroll down for files)

Update #2 (Apr 27th, 2008)

New release includes some fixes and minor enhancements, current recommended version is now 5.x-0.3.
Also released a development snapshot for 6.x (not for production use)

Compatibility

  • Drupal 5.x
  • Drupal 6.x (development snapshots only yet)

Preview

Currently this site is running it, look around.

Usage tips

This template is not intended to use on administration pages as wide rendered tables could break the floating layout. For administration backends use the built-in Bluemarine or Garland theme.

Graphic Sources

  • Graphics used to create this template were done by Adobe Photoshop CS2. I suppose it can be safely edited with the CS version as well.

License

Download

  • The theme itself is hosted on Drupal.org, you can also download it from here.
  • To download the graphic sources please find the following files below
AttachmentSize
Download Ubiquity Photoshop source files (zip archive)2.14 MB
Download Ubiquity Photoshop source files (7z archive)1.04 MB

submenu is not working

Hi,
I'm trying to make a menu and submenu, but it just won't work. I see all my main menu items, but no submenu anywhere.
I let drupal show a second menu on the left. I can see everything there. It also works with other themes. How can I make ubiquity show my submenus?

thanks
andi

Submenu not working

I'm having the same issue!

Anyone have a solution??

Awesome theme!

Thanks for the great theme! It worked extremely well for my site!

adding some region before footer

Hello
thanks for you template really one most finished for d5 !
i have tried to add some custom region before footer
footer_1 including 3 column
footer_2 including 2 column
footer_3 including 1 column
these region are needed to add some block to large to fit in the column like simplenews, request invitation...
i have now them working with some little succes but i'm really noob in css, so i just made some trick to get it almost working but still not what i would like.
you can see it here http://accedinfo.com

with firefox now footer1/2/3 display correctly the background colored in blue (wrapperbg-nosidebars-bgblue.png) but with ie7 footer_1 display only the sidebar color but does not display the wrapper (should it be only a cache problem ?)

thanks if you can help to add a nicest design to theese footer region

i have also a bug with request invitation module. if you make two request with the same email, then the footer are displayed over the sidebars

br
elarifr

Try Panels

melon's picture

elarifr,

I am happy to read you like the theme. I suggest you to try out Panels 2.x. It really does what you need.

Hello, how to create dhtml

Hello, how to create dhtml menu on top menu ?

Scroll Bar

I love the theme, but I have noticed that in the footer there is a Scroll Bar which I do not want there.

Any help on how to get rid of this would be appreciated.

Thanks

Dene

I'm glad you like the theme,

melon's picture

I'm glad you like the theme, but I'd suggest to open a support issue at the Drupal.org project page of the theme. http://drupal.org/project/ubiquity
Thanks.

how do I remove underline from links

Hi...........
I want to use your theme for one of mine site. But want to remove underline fron links.

How can I do this.

Thanks

text-decoration in css

melon's picture

You can format all links via css. Edit the style.css and look for any a declarations.
Set them to text-decoration: none;

IE6 woes with latest theme

Ubiquity is a very cool theme and thanks again for making it available.
I'm having an issue with it and IE6 for a left sidebar bar which is getting pushed to the left.

See http://www.mycashflowcommunity.com/content/melbourne-lcm-meeting-may for what I mean. Works fine in every other browser I've tried however IE6 is being a real pain. It only seemed to be the Events areas as well.

Any help or CSS mod or anything to rid me of this challenge would be most appreciated.

Martin

Got it

OK, I narrowed it down to some CSS weirdness inside the Event Manager module page in producing the actual registration button. Odd.
Once I configured it to text, the theme displayed as it should.

I'll look into further however there's nothing at all wrong with the theme which is great news.

Thanks again
Martin

Hi Martin, I am happy to

melon's picture

Hi Martin, I am happy to read you like the theme. But please use the drupal.org issue queue if you encounter any problems or if you are requesting any support. Thanks.

login|register block in header

Hi,

I am wondering how to add login|register block to header of ubiquity theme, like it can be seen on this page above?

p.s.:
I've tried adding block with custom login code to header, but it doesn't get shown.

Thanks,
Simon

minimenus

melon's picture

I am using the minimenus module here and applied some css to it. Feel free to peek into the css used here, and learn how I did it.

minimenus css

But your's minimenus/minimenus.css contains default values? Which one did you customize?

Thanks.

I will update the theme very

melon's picture

I will update the theme very soon with minor customizations and issues resolved since last -dev version. The updated theme will have support for minimenus. Stay tuned.

Thanks!

Thanks!

Problem with TinyMCE.

Hi, I really like your theme, that's why I'd like to use it for a website I'm working on.

I have found a little problem. I've installed the module called TinyMCE (a mysiwyg editor) and the textarea, instead of being white, gets bodybg.png as the background, and it's too dark. I'm not sure if the problem is with Tiny or the theme (I think it's Tiny). Anyway, how could I fix it? I tried editing bodybg.png by putting it to white, but the result looks awful. Any suggestion?

Thanks.
yersin

Your problem is common to

melon's picture

Your problem is common to many themes (at least which uses a background image in the body)
Simply set the css to the default or specify an alternate stylesheet in admin/settings/tinymce

Thanks for

Thanks for answering.

Forgive my ignorance, but how do you "set the css to the default or specify an alternate stylesheet in admin/settings/tinymce"?

yersin

TinyMCE

melon's picture

Go to default TinyMCE profile settings and see the 'css' section at the bottom of the page.

Thanks.

Thanks. It did the trick. It was so easy to solve.

Hi, problems with IE6

Hi,

First of all, it's a great theme! Thanks for providing it to the public ;)

Now, maybe I've missed something... but i am still having some problems with IE6. I have it configured for 3 column view and if I click on link to display user profile, the left column gets placed in the middle?

To reproduce, here's the URL: www[.]site-xyz[.]com -> click on any user profile using IE6 :-/

Thanks,
Simon

fyi, above comment invalid,

fyi, above comment invalid, i've already fixed that.

Breadcrumbs and page submitt

Cannot disable breadcrumbs on first page even when I deleted any instance on template.php.
Also when I try to enter a new page on any language, it won't show up on the menu unless I click on "You may also edit the advanced settings for this menu item". After submitting it again, then it shows up.

Can you please help.
Yours Sincerely
Orika

performance

I've noticed slower performance with this theme than some others. do you have a suggestion on how to improve performance? Am I the only one who experienced this?

Thanks

I've been going over some Drupal themes and Ubiquity is one of the finalists. And thanks for providing the Photoshop files. They really help get this started.

Nagyon szep. Koszonom szepen!

Very nice template. Thank you for the help!

great theme... how come IE6

great theme... how come IE6 does not display a 3 column template ...only shows 2 columns and when i try to edit the blocks on the right side it does not even appear...

Felipe

This is great folks, I can

This is great folks,
I can see a great effort wielded to produce this sleek theme,now can anyone tell me what are the necessary modules to install so as to allow the pictures to show.
Thanks for the time.
Sammie.Anonymous

How to implement

I have made all the necessary changes I needed to the PSD Sources but I'm not sure how to implement them into Drupal. Please forgive me if the answer is already written above or elsewhere.

Anybody tried with Module "Boost"

My left side bar is extended to the bottom but the body is not expanding. As a result the left side bar is "longer" than the body. I didn't notice until I install Boost module, basically, it created a static page .html pages in /cache folder rather than query the DB on every hit.

See it here.

http://www.powerq.com.my/telecommunication

Footer

I don't have a great deal of content (particularly on the front page) and so the footer displays below the main content, but over the left sidebar.

I've tried moving DIV tags around and changing some positioning values with varying results (none what I want)... basically, I want the footer to be at the very bottom, no matter what the length of the page or menu is...

From what I can ascertain, I may have to re-write the page to remove some (what I would consider) superfluous divs and re-create most of the positioning CSS from scratch.

Has anyone else had a similar experience?

Mathew

Use -dev version

melon's picture

Anyone with footer and css height problems, please use the -dev version until the next stable gets released.

Search Box Missing in MSIE

Here's an interesting one: The search box doesn't display in MSIE, but it's fine in FF. In fact, it doesn't even print. The 'print $search_box' line produces nothing in MSIE. I put a couple of HTML comments around it, and they print fine, but there's nothing in the middle. I noticed this with your theme, but it seems ubiquitous [;D]. Any ideas?

great theme..

Hello, I have been using this theme since last month or so. I don't know anything about programming and still learning about drupal, can you please tell me how to change to logo and put banner on the top of the page?
Thank you so much

Use the psd file

melon's picture

The Photoshop graphic source is available for download on this site. You can open it and replace the logo with any other logo of your choice.

The banner uses the 'head' region of blocks, so you have to configure a block to show in 'head'. Use the current -dev version to achieve this.

active class for primary links

When clicking on a primary link on your site, the link acquires the active class attribute and actually displays as such once the page is loaded. What do I have to do to achieve the same effect on my own site? (I am using Drupal 5.2 with Ubiquity).

Not displaying well in IE6

I really like this theme. In IE7, FF2 and Safari it is looking really well, but in IE6 the layout is completely messed up. The PNG's get a non-transparant background and when I go to my guestbook and want to post a new message the menu from the left is in front of the writing area. The same problem when I want to post a comment on a story. Everything is completely messed up. Because I spend quite some time changing the theme for the website I would like to keep using it, but how can I solve these problems for IE6?

Please read don't just

melon's picture

Please read don't just write. As in stated in the Readme, older Drupal versions textarea.js needs to be patched to fix the textarea overlapping issue.

For the PNG stuff, you should file an issue on drupal.org with an attached screenshot so I can investigate on it. BTW IE6 should look fine with this theme.

Trouble with Right Side Bar

Great Theme! I have modified it a bit, and it looks fantastic....

Now......

I am having trouble with the right side bar..

At the home page www.paramedicsofbc.com the search box is half way down the page..

When you click on the 'read more' link, the search box returns to where its supposed to be..

Any help would be appreciated, as I have tried changing every css setting with firebug..

Secondary links

The beautifoul theme you made and are makeing, have no place for secondary links after primary ().

Is there a short way solve this ?

Just one little thing more...

I haven't had the opportunity yet to inform you that the header issue is solved with the August build, thanks!

I have one (last, I think) little question: how do I make a larger space between paragraphs? Right now the whole page is bundled together, it would look absolulely perfect with a little white space here and there.

Anyway, the result can be viewed at http://ikwilemigreren.info, a Dutch site. Doesn't it look dandy with this theme? :)

It's very nice indeed

melon's picture

It's my pleasure you use my theme.

For the paragraph margins issue, look for the declaration
p, .book .body and give it: margin: 1em 0; That will make it the way you want.

Thanks

Thanks ever so much, it's purrfect now :D

Very nice!

this is a beautiful theme, so glad I found it. So far I have only one tiny little problem (for me): whenever I select a block that should go in the header, it refuses to show. All all regions are fine!

Anyway kudos on your great job and look forward to release 1 :)

Use 1.x-dev

melon's picture

Hi Sophia, I'm glad you like it and thanks for the nice words.
Use the 1.x-dev version, it has this issue fixed already.

Thanks, will do that!

Thanks, I will install the dev version today. It is a beautiful theme, one of the best I have seen so far.

Will do

I submitted a bug in the Drupal project with all my tweaks for ubiquity so far.

some changes needed ....

I just thought of making some adjustment, but could not find the answer ...

1. With JSTOOLS And than Activemenu, It added "+" and "-" for parent with sub-menu, it seems that many themes would have their own "+" and "-" images including yours. So it's redundant. Disabling in the theme's style.css can, but leave me some space between "+" and "-" and text created by activemenu.css. I found, abac theme handle this nicely. How to tackle this?

2. Have you try Admin menu?
I add nice pulldown administer menu on top (absolute). However, it seem that in your theme, the search box and body bg has absolute value and stays fixed. It would nice, if everything is shifted down when the admin login. otherwise, it's just fine.

3. Wanted to change the left column bigger(I only want 2 columns). Ok, done it. But the's a vertical line that keep the the left colum width at 192px. Where's that line come from?

1. Never played with Jstools

melon's picture

1. Never played with Jstools and Activemenu yet, though I am going to try them to see what's wrong.

2. I never tried admin menu before. I usually use dhtml_menu which keeps it the simple way of display but also reduces page loads.

3. This is called the 'faux columns' technique, it has conditional margins defined somewhere in the first 150 line of the css. You can find the slices in the Photoshop files as well. Slice and image names are names are

JStools and ActiveMenu

I use ActiveMenu as well as Collapsiblock. I love the whole AJAX-y idea about it, you don't have to load another page to expand or collapse a menu or a block.

Also, I just wanted to say, congrats on the theme, I vote it "+1 Sexy!" :)

Time to try it out!

Thank you

melon's picture

However I recommend staying tuned for the Drupal 6.x version.

This "kinda" fix the Activemenu

But still the menu with sub-menu is not vertically the same as others.


/* Block menu typo and styles */
ul {
margin: 0.5em 0 1em;
padding: 0;
}

ul li {
margin: 0.4em 0 0.4em .5em;
}

ul.menu, .item-list ul {
margin: 0.35em 0 0 -0.5em;
padding: 0;
}

ul.menu ul, .item-list ul ul {
margin-left: 1.2em;
}

// separate this li.leaf
li.leaf {
list-style-type: none;
list-style-image: none;
background: transparent url(images/menu-leaf.png) no-repeat;
}

ul li.expanded {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 8px; PADDING-TOP: 0px; LIST-STYLE-TYPE: circle; TEXT-DECORATION: none
}

ul li.collapsed {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 8px; PADDING-TOP: 0px; LIST-STYLE-TYPE: disc; TEXT-DECORATION: none
}

ul li.leaf a, ul li.expanded a, ul li.collapsed a {
display: block;
}

ul.inline li {
background: none;
margin: 0;
padding: 0 1em 0 0;
}

fieldset ul.clear-block li {
margin: 0;
padding: 0;
background-image: none;
}

1, 2 ,3 Column not working

Hi,

I keep getting 3-columns eventhough after disabled all blocks on certain page.

BTW, I experience this with other themes with flexible 1-2-3 column too.

I have Drupal 5-2, Using Firefox 2.0.0.6 and IE 7.

Hi I have the same problem

Hi

I have the same problem but didnt understand how you resolved this issue. Likewise I tested many modules and themes - is there a module affecting this - no left column shows? Or is it another configuration?

Thanks for sharing your experience :)

Are you sure?

melon's picture

On the admin/build/blocks page you always see all block regions. Try navigating to some other page where you know you disabled the blocks. See this site: 3 columns at the frontpage, and only two columns on this one and others. It should work, I suppose you just forgot something. Perhaps you could post a screenshot here to represent your problem exactly.

now I know ...

It's a module that break all 'fixed width' theme but not the fluid width. It's not just this. First, I didn't notice, after spending hours, changing different themes, enabling/disabling modules (10s of them!), I finally found out this particular module is the culprit. It's really troublesome. But no doubt the other Javascripts Tool are awesome!

Dynamicload 5.x-1.x-dev
Enables AJAX-based loading of selected page elements.
Depends on: Javascript tools (enabled), Page Array (enabled).

case closed.

Indeed a nice template

Thanks for sharing this nice template. Photoshop files are really helpful on customizing. Keep up the good work!

you have created very nice

you have created very nice looking theme. Thank you for that.

Great Theme

Best theme I have seen so far for Drupal.. very well done.

are there any issues w/ IE Vs Firefox?

I've seen headbg.png seems disproportionate(sp?) on IE

IE Issue..

ahh.. the readme file explains it all

KNOWN ISSUES
============

misc/textarea.js needs to be patched in Drupal 5.1
--------------------------------------------------
Since Ubiquity uses floated elements such as the resizable textarea element,
it suffers from the infamous wrapping bug when using IE6 (not sure about IE7)

See http://drupal.org/node/101305#comment-195002
and apply the patch attached in the comment.

If you have trouble patching, simply open misc/textarea.js and replace line
7 with the following two lines:

// When wrapping the text area, work around an IE margin bug.
$(this).wrap('')

Always read READMEs

melon's picture

OK, I'm glad you fixed it. Always read READMEs ;)

Very good but...

It might be just my site, but for some reason your theme doesn't handle linebreaks very well for me. I can't seem to get any space between text-blocks which makes the text somewhat hard to read.
Have a look at the site (same site as email) to see what I mean. There should be some spaces in the text, and there is in the text-box when I edit it.

But many thanks for a very nice looking theme. :-)

Filters?

melon's picture

Hi Oscar, thanks for your response.
I looked at your site, but I don’t really see what you mean. Linebreaks in your node content should be handled by filters. Please be a little more specific if possible.

The linebreaks

I didn't expect a response this quick. I'm very impressed. :-)
In my blog-post about linux and 3g there should be some space between the text and the wvdial.conf code. In other themes the space is there, and I can see it when editing the text, but when published to the site it isn't there with the current (yours) theme.
It's a very minor issue so it don't bother me much, but I thought you'd want to know. As I said, perhaps it's just my site since I can clearly see that you have spaces between text-blocks on this site.

Also, the captcha on this site is very nice. Is it the normal module from drupal.org?

Tips on highlighting

melon's picture

Try putting your conf file between blockquote and code tags and it will be more visible. Also try to upgrade to the dev version, or just leech the style.css from this site. I constantly make minor changes to the css code thus producing cleaner results.

This is the captcha-5.x-3.0 version with text captchas enabled. Get it from drupal.org if you find it useful.

I also noticed that with

I also noticed that with ubiquity there was really no vertical separating between paragraphs. This css was the culprit:

p, .book .body {
margin: 0 10px 10px 0;
margin: 0;
}

The 2nd margin is overwriting the first as setting all margins to 0 for paragraphs.

I changed mine to

p, .book .body {
margin: 0 5px 1.0em 0;
}

I have some other tweaks that I'll send in. They clean up things related to acidfree albums and the drupal pager.

Great, thanks. Please submit

melon's picture

Great, thanks. Please submit your patches to the Drupal issue queue if possible. If you cannot, no problem, you can send them right here.