By radiofranky on

HI,
can someone show me where to and the steps to make menu bar like one in onion.com? :) tks very much
very new to drupal...

Comments

agentrickard’s picture

agentrickard
he/him
Primary language English
Location Georgia (US)
commented

I looked at TheOnion's source.

If you mean the left menu raii, that's just CSS desiign applied to the defauilt Drupal menu.

Go steal their CSS code ;-)

If you don't mean the left menu rail, please be more specific.

--
http://ken.blufftontoday.com/

radiofranky’s picture

radiofranky commented

Hi,
Yes I do.. :)

what about the column formatting? which file should I change? tks

s

agentrickard’s picture

agentrickard
he/him
Primary language English
Location Georgia (US)
commented

They probalby have a custom front page running out of PHPTemplate with either FlexiBlock or some custom PHP (or simple HTML). (Which requires a front.tpl.php and a mod of page.tpl.php -- see the documentation of PHPTemplate in the Handbook).

We did something similar at www.blufftontoday.com by substituting the default Drupal front page with a custom PHP page that pulls straight from the Drupal database.

There is, btw, a great post by designer Khoi Vihn about how the new Onion design was put together.

Not Drupal, but very cool design stuff.

http://www.subtraction.com/archives/2005/0901_the_funniest.php

--
http://ken.blufftontoday.com/

Search first, ask questions later.

radiofranky’s picture

radiofranky commented

do u know how to format a page like this?
http://www.theonion.com/content/node/42814

pictures relate to the story? and plus right column of list of related stories?

do u know how to change the teaser length to a customized number? currently min is set to 200..

can I just set to show the titles instead? tks very much :)

agentrickard’s picture

agentrickard
he/him
Primary language English
Location Georgia (US)
commented

Actually, I don't. You can do the photos by inserting HTML into your posts (or using Inline, IMG Assist or similar modules).

Your teaser answer is over here.

And this thread might answer your side rail questions.

But I think trial and error is going to be the way to go (unless you can get the Onion devs to talk to you.)

--
http://ken.blufftontoday.com/
Search first, ask questions later.

Zethris1’s picture

Zethris1 commented

Well not sure if it's good to steal, but if I did how would I take css code? I am not sure where to find it if I was looking at the page source. Then, once I have it, how would I implement it within the drupal code?

agentrickard’s picture

agentrickard
he/him
Primary language English
Location Georgia (US)
commented

One of the great things about the Web is that source code is visible.

That's how we _all_ learned what we know. Trust me.

View source on their home page shows this:

<link href="misc/drupal.css" media="screen" rel="stylesheet" type="text/css" />
<link href="themes/onion_live/style/onion.css" media="screen" rel="stylesheet" type="text/css" />
<link href="themes/onion/style/pages/home.css" rel="stylesheet" type="text/css" />
<link href="themes/onion/style/pages/home_av.css" rel="stylesheet" type="text/css" />

The first is the default drupal.css file (woo hoo!). The others are custom css files that they added to overwrite drupal defaults.

You'll need to study the HTML and the CSS to see which classes and ids match up, do a little reading online (Google helps, search "CSS Help"), and test with a simple HTML/CSS page (not Drupal at first).

Crawl, then walk.

Don't steal their code wholesale, just learn what they are doing and copy the method.

--
http://ken.blufftontoday.com/
Search first, ask questions later.