Has anyone seen/made any unique asymetrical Drupal themes? The best I've seen so far is at http://neur0.com but I'd like to see some others for inspiration before I make my own. :)

Comments

Dublin Drupaller’s picture

what is a unique asymetrical drupal theme?

I'm Not sure what you mean....the site you linked looks like a fairly standard drupal 3-column site.

Jason

Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate

Lineman-at-lineman.net’s picture

It's three columns but the outer columns aren't identical. Most "professional" sites don't look like content squeezed between two columns of blocks, or at least the nice looking ones.

Just looking for something different. :)

cel4145’s picture

I was trying to achieve something asymetrical with the OSDDP. I've always like the Wired News design of using a dark color scheme for the left column and then leaving the right col white so that it doesn't overpower the white background of the text in the middle. However, I'm not any good at working with graphics, so I never got back to making a decent banner for the header and finishing out the theme further.

andremolnar’s picture

It should be easy to do.

Neuro appears to be doing this by killing any style applied to blocks and just letting the background table column shine through. I would then assume that they have set a different background attribute to the two different columns.

andre

Lineman-at-lineman.net’s picture

Yeah, that works. You just have to create seperate styles for each.

charybdis’s picture

Link's underneath. Basically, the banner is styled up with CSS, and I have space for other blocks. Don't actually use it, but it's there.

I have a website. It's very blue indeed.

Dublin Drupaller’s picture

that is a very clever and stunning site Chary....nice one...good inventive design...and very functional..

question..how did you do the different sections?

Was that using the sections module? or another technique?

Cheers and thanks for sharing the link..

Jason

Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate

charybdis’s picture

What do you mean by sections? The menus or the changing header images?

I have a website. It's very blue indeed.

Dublin Drupaller’s picture

Hi Chary...

you asked: What do you mean by sections?

I meant the way the header images and layout change when you click through to different areas...

how did you do that?

Are you using 4.5 by the way?

Jason

Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate

andremolnar’s picture

You can load a different style sheet depending on what part of the site you are on.

I've done this at
http://becircle.com

andre

Dublin Drupaller’s picture

How did you achieve that?

Are you using drupal 4.5 for that...with sections.module or are u using something else to change the style sheets ?

Cheers

Jason

Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate

andremolnar’s picture

I'm not using any special modules. My site runs with the CVS version of drupal, but it shouldn't make a difference if you use 4.5.

I am using phpTemplate.

I wrote a little php file called stylechoice.php and I include it into my theme template.

I have url aliasing on.

    global $base_url;
    $base = parse_url($base_url);
    $session = session_name() .'='. session_id();
    $url = str_replace(array($base['path'], '?'. $session), '', request_uri());
    $url = ereg_replace('^/(\?q=)?', '', $url);

	$url_pattern_admin = "/admin/i";
	$url_pattern_about = "/about/i";
	$url_pattern_news  = "/news/i";
	$url_pattern_resources = "/resources/i";
	$url_pattern_search = "/search/i";
//etc.

	if(preg_match($url_pattern_admin, $url)){

		$mystyle = "<link rel=\"stylesheet\" href=\"$base_url/themes/themename/stylesheetnameforadmin.css\"  type=\"text/css\" />";
	}


	if(preg_match($url_pattern_about, $url)){

		$mystyle = "<link rel=\"stylesheet\" href=\"$base_url/themes/themename/stylesheetnameforabout.css\"  type=\"text/css\" />";
	}
//other if statements - could use select case - but its your choice

Which basically checks where in the site you are - and depending on what part of the site you are in loads a slightly different style sheet to handle the look.

There is a bit more too it, but this should give you some ideas.

andre

Dublin Drupaller’s picture

Hiya..

Cheers..thanks a million for posting that...and excuse the ignorance..am a newbies with this stuff..but...

do I simply paste that php code into my php template theme at the top (without the opening and closing php tags) and tweak the path/sections linking to tweaked style sheets - with corresponding stylesheets setup to match links ?

is it as simple as that?

or is there more to it?

Appreciate you taking the time to help out....and if you have the time to answer this post...one very very quick question..

have u discovered a snippet that will over-ride and switch off all blocks for a page/section?

Cheers

Jason

Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate

andremolnar’s picture

"have u discovered a snippet that will over-ride and switch off all blocks for a page/section?"

YES - changes to block handling are in the current CVS version right now - and I suspect will be availabe in the 4.6 release. It does exactly what you are asking for.

re: how to implement this solution - yes - that's pretty much it. I personally keep this code in a seperate file in the template directory - and I include it at the top of the template page.

as bèr points out however, if you expect a lot of traffic this may slow things down a bit as caching won't work.

andre

Bèr Kessels’s picture

Not really anyway. It breaks with caching, and does a lot of redundant if checkings.

You should best use sections module in the contributions. it does exaclty what you want.

And if this solved you problem, would you be so kind to report back that it helped? This will help others whom are looking for the same solution.

[Ber | Drupal Services webschuur.com]

Dublin Drupaller’s picture

Cheers Bér

Will the sections.module (CVS version) work with 4.5.0 (which is what I'm using or do I need to tweak it myself?

Jason

Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate

andremolnar’s picture

Redundant ifs - yes in that example.

Just as easily done putting everything in a function, calling if elseif's and breaking out of the function on a match.

function stylechoice(){

    global $base_url;
    $base = parse_url($base_url);
    $session = session_name() .'='. session_id();
    $url = str_replace(array($base['path'], '?'. $session), '', request_uri());
    $url = ereg_replace('^/(\?q=)?', '', $url);

	$url_pattern_admin = "/admin/i";
	$url_pattern_about = "/about/i";
	$url_pattern_news  = "/news/i";
	$url_pattern_resources = "/resources/i";
	$url_pattern_search = "/search/i";
	$url_pattern_clients = "/clients/i";

	$mystyle = "<link rel=\"stylesheet\" href=\"$base_url/themes/themename/defaultstylesheet.css\"  type=\"text/css\" />";
	
	if(preg_match($url_pattern_admin, $url)){
		$mystyle = "<link rel=\"stylesheet\" href=\"$base_url/themes/themename/stylesheetforadmin.css\"  type=\"text/css\" />";
		return $mystyle;
	}
elseif(preg_match($url_pattern_about, $url)){ 
//dostuff 
return $mystyle;}
//etc.
return $mystyle;

Breaks Caching - how so? I have caching enabled, and everything loads perfectly well. The page is already pulled from cache by the time it gets themed anyway (or am I completely off base on my understanding of the drupal mechanism).

Besides, this is the only solution that works efficiently if you have a properly designed theme and set of css files. i.e. you don't use a single file to handle all your styles. The styles I pull in for my example only handle the changes in the page. Other files handle layout and positioning.

The $mystyle variable is only the stylesheet that handles the differences between pages (all the similarities are handled by different style sheets).

Why add the overhead of maintaining multiple themes just to have different looks for different sections, when all you need is a different stylesheet to handle partial changes. (a background image, a couple of colour changes).

sections.module has its place, but for something as simple as a site with a handful of sections, this it is overkill and makes more work for the designer and maintainer of the site.

Now if you are right about the caching breaking, then I'll be quiet ;-)

andre

Bèr Kessels’s picture

It is not adminstratable if you add a new page you have to open the PHP file.

> Breaks Caching - how so?
Your styled pages are not cached. the code is ran every pageview.

> Besides, this is the only solution that works efficiently if you have a properly designed theme and set of css files.
No, see sections.modules. Tjis is definetly not the /only/ one.

> The $mystyle variable is only the stylesheet that handles the differences between pages (all the similarities are handled by different style sheets).
So you are not able to do anything else then change CSS. Sections. modules works on all themes, styles and even theme engines.

> Why add the overhead of maintaining multiple themes just to have different looks for different sections, when all you need is a different stylesheet to handle partial changes. (a background image, a couple of colour changes).
Thats why Drupal has styles. They are there for exactly that: you have to amintain only a single css file , and a folder where that file lives.

> sections.module has its place, but for something as simple as a site with a handful of
> sections, this it is overkill and makes more work for the designer and maintainer of the
> site.
Your solution is far harder to implement, and even far heavier in server demand.
sections. module is very light, nad even useable by non PHP programmers.

Did you try it? if you like it, please help me with the lsited todos. I need some bugs and small issues solved with that module.

[Ber | Drupal Services webschuur.com]

andremolnar’s picture

Bèr: I created some issues in the sections.module project area along with two small patches. I'll look more at the regular expression building, but the one patch makes it workable - where before it wasn't working (but this is in CVS not 4.5).

re: my solution. You are right, the solution provided is not administerable - but custom themes themselves are not administerable - they require the developer to get their hands dirty. This is a custom -one off- theme solution... not meant for mass distribution. Since the file resides in the theme folder it simply works with the theme to produce the desired effect. As for any questions about seperation of logic from presentation in the theme template - this is partially achieved by seperating this into its own file - but if you really want to seperate the logic from presentation, you could simply put the function into common.inc and call it from the phpTemplate template (but that is MUCH WORSE - so I went this route).

Yes code is run with every page view. 50 extra lines of code with only 7 or 8 executable functions is not going to slow a site down significantly.
But, I was wrong about how I thought caching worked. I thought that the cache stored a non-themed page - and that the theme hooks were still called. I can see why that doesn't make sense now. So, if ALL the code required to produce a page has to run just so my 50 lines can run - this is a BAD idea if my site were to get swamped with traffic.

The alternative you are suggesting to make this better would be a 400 line module for myself. I think I will have to.

Re: Sections module. I still have a problem with the fact that you can only assign a FULL THEME to a section. This would require maintaining N number of themes for every site.

So I suppose that this is a design/maintenence/administration trade off. You can have slightly more administration ability and cached pages, but must maintain a large number of complete individual themes OR you can maintain 1 theme and have less administration ability and non cached pages.

Its a choice.

andre

andremolnar’s picture

"They are there for exactly that: you have to amintain only a single css file , and a folder where that file lives."

That is the problem. One CSS file is NOT enough for a properly designed site (or template). Just like you don't want presentation mixed with logic in the code - you don't want layout styles mixed with content styles in one stylesheet.

andre

Dublin Drupaller’s picture

Hi guys..

Interesting debate.

As a complete newbie can I suggest something?

As an aside..I tend to agree with Andre re: Style sheets....thats why they call them cascading style sheets..i.e. one isn't enough...layering style sheets is what was intended..

Which leads me to my suggestion..what if sections.module had multiple fields in it for each section ?

....so a savvy site administrator has the ability to set what styles go in the main drupal.css file...what styles go in the section[name] style and maybe even a third or fourth level style sheet for the very high traffic sites that requires fast load times for pages...

I think, either way, the site administrator is going to have to get his or her hands dirty modifying style sheets for each section...and let's face it..if the site administrator is thinking about different styles for different sections..they probably know about getting their sleeves rolled up and getting stuck into modifying style sheets anyway..

My logic is based on the idea that for load times & cache issues...if the drupal site is loading the same drupal.css and same main_style.css file..with a smaller specific_section_styles.css each time a page loads, it would reduce the load time and weight on cache. Wouldn't it? isn't that the whole point of cascading style sheets?

maybe not...I stand corrected.

By the way..has anyone got sections.module working for 4.5?

Jason

Currently in Switzerland working as an Application Developer with UBS Investment Bank...using Drupal 7 and lots of swiss chocolate

media girl’s picture

It's a lot easier (for me, anyway) to keep track of everything if one can maintain an array of css files ... blogstyle.css, storystyle.css, etc. ... and (important for admin convenience) keep them all in the overall theme's subdirectory.

I'm very excited about this topic, though, and look forward to the opportunity to try out sections.module on 4.5.1 (but it will have to wait until after the holidays).

--
mediagirl.org

charybdis’s picture

But I knew I'd only need to update one piece of page furniture.

I have a website. It's very blue indeed.

charybdis’s picture

The boxes down the side are all hand-coded HTML (well, if you call a href coding ;-)), wrapped in one of two CSS classes to determine if they're blue or yellow. Journal posts are simply the Blog, with a few tweaks in Local to change the name, which everything else is a straight Page - giving me the ability to style it all up however I like (for example, there's no trick behind getting the anime reviews to look like that - I just edit the entire page and copy and paste a new review template block into the HTML wherever I want it. Not neat, and I'd never dream of doing it like that for a commercial site, but it works fine for a personal egopage - especially such a rarely updated part of it).

As for the headers, they're actually very easy - just a matter of planning for it at the HTML stage.

The image isn't built into the page itself, but rather the background of a div called 'header', which has a fixed size in the template. This means that I can stick whatever I want into it using the style tag.

If something's on a single page, it just goes into the code before I type anything else, if a section has more than one page (anime, for instance), it's written into the submenu. You occasionally get a flash of the blue and red diary default when going to a new page as the two contradictory statements fight it out, but most of the time it's seamless enough. Worst case scenario, I can bootstrap a quick bit of CSS into a module via Locale, or create a 'Return to Main Page' block to hide the necessary code. I used to do that for Search, but haven't bothered since introducing trip.

The main catch with doing it this way is that for automated parts of the site, like blogs and comments, things can get very confused - you've got to set things up to handle /comment/ /node/ /blog/ or whatever else, and making different bits look right. That's why I use Beehive rather than the built-in forum - I just couldn't get things looking the way I wanted to. There's often ways around it (hiding the CSS stuff in text using Locale), but it was becoming too much of a pain - and hackish beyond belief. There's a few rough edges that I haven't gotten around to dealing with yet (try posting an anonymous comment without filling in the boxes - double-header whammy that I haven't tracked down yet), but mostly it seems to work. For my limited needs, anyway.

And yes, running 4.5.

I have a website. It's very blue indeed.

Bèr Kessels’s picture

The negen theme on drupal theme garden (http://webschuur.drupaldevs.org/) has somewhat the thing you are looking for.
I have not yet received the details on this theme, so the theme page, with info about it gives a 404.

[Ber | Drupal Services webschuur.com]