Yesterday I committed a first version of my new Drupal theme FriendsElectric. It is PHPTemplate-based and tableless, uses semantic XHTML and fully supports all theme options (slogan, logo, primary/secondary links, etc). You can check out a quick live demo on my site. The theme is designed for compatibility with the latest versions of the major browsers out there, but will not work on dinosaur browsers (most notably, IE5/Win and IE5/Mac).

The theme was mainly created to answer the repetitive questions about Drupal.org's own theme, Bluebeach. FriendsElectric is similar to Bluebeach under the hood, but is different visually. I've also kept a short log about the development of the theme which I intend to write out properly and put online when time permits. FriendsElectric will be used to illustrate various issues in my DrupalCon presentation about Theme development.

However, this is not just an example theme, I've tried to ensure it's one the highest-quality themes out there, with clever stylings for sidebar lists/menus, new comments, form items, blockquotes and more.

I noticed that most of the Bluebeach questions were about CSS and not about Drupal-specific issues. It is not my intention to teach people HTML/CSS, but simply show what particular things you need to worry about when theming Drupal. For the rest, refer to CSS-specialized sites like:
- http://www.positioniseverything.net/
- http://www.alistapart.com/

Comments

rkendall’s picture

Cheers Steven,

Looks good, I'll take it for a spin and see what it can do :)

I got so frustrated with CSS (layout) doing my last theme that I ended up using a table (arggh!), that was _after_ groking positioniseverything.net.

I bet you must have had a few frustrating moments working on BlueBeach.

Steven’s picture

Basically it's doable as long as you don't try to do everything in your theme: source ordering, fluid, robust. Pick 2.

Bluebeach introduced me to the ins and outs of the IE Peekaboo bug (which can be triggered in dozens of situations), so there was a lot of hair-pulling before I got that one figured out. In FriendsElectric the only real problem was where Mozilla would stretch fieldsets in the main content so every text inside it would fit on one line. I had to give up the source ordering partially to fix this, as I couldn't find any other way. Now the load order is left-mid-right (it was supposed to be mid-left-right).

--
If you have a problem, please search before posting a question.

rkendall’s picture

Since my laptop screen is only 800x600 max (yeh, time for an upgrade), I get all the layout problems accentuated.

My frustration was with column length (so both could be the longest, and not overlapping the footer), and keeping the other parts of the design working. It was just turning into an ugly hack with CSS.

I'm hopeing that there will be some good layout improvements to the CSS spec in future versions (of course that won't help much with IE).

I have installed your theme, and I like it. It looks like you have done a lot of work - and just for us! Thanks. Of course, not without problems on 800x600 :)

I like the small touches, like the menu bullets. Some fonts look a bit large, but I'm betting that your screen is pretty high resolution.

kbahey’s picture

As always, you are a master Steven!

Looks distinctive and great.

Few comments:

- Can we move off the greys for Drupal? I know that most of life is not black and white and there is a lot of greys ;-) , but visually, there are lots of greys in many themes for Drupal. A bit less grey would be nice.

- Can the Go button in the search block and the Login button (and all submit buttons) be the same style as the search button on the top? This would give a cleaner and more consistent look.

- The page margins give a visually appealing view. However, they eat some screen real estate. Perhaps they can be narrowed a bit.

- The search button on the top right is a bit dark, and can be missed. Don't know how to make it brighter though. Perhaps white letters on the present button background?

Few questions:

- Does it support a footer?
- Does it support a logo?
- Does it support blocks on the right as well as the left (I mean to be a three column theme?)
- Can a banner ad be added in the header? I think this is possible if the primary and secondary links are both on the right (say both below the search box).

--
Drupal performance tuning and optimization, hosting, development, and consulting: 2bits.com, Inc. and Twitter at: @2bits
Personal blog: Ba

Steven’s picture

Firstly, I sticked to a neutral color scheme as this theme is intended for a variety of sites. Too much distinction and it becomes too recognizable. Not all themes are gray, but then again, too much color can be distracting on a site with lots of content.

The button styling is difficult as this is a difficult problem across browsers. I could get away with the search button because it is a single button with a fixed width and a fixed location, but it would be impossible to do it like that for every submit button.

The page margins are part of the design, so you'll have to edit them yourself to get rid of them.

The search box looks quite alright here. Perhaps your screen has a low gamma, but I did intend for the search box not to attract too much attention.

The footer is supported, but not (yet) styled. Didn't get around to it. I said all theme features are supported, so that means yes on logos and yes on 1-2-3 columns. I hate banner ads, so I'm not going to implement anything of the sort.

--
If you have a problem, please search before posting a question.

tangent’s picture

Nice work. This theme has a friendly feel and is easy to look at.

It seems there are some issues to work out with 3-column mode though. Browsing with Firefox the right column "content" get pushed out of the visual column area on pages with unwrappable content. Maybe overflow:auto is the only solution?

tangent’s picture

The /admin/themes page in particular causes the problem mentioned above.

Steven’s picture

Overflow auto does not work properly in Mozilla in advanced CSS layouts like this, I tried.

--
If you have a problem, please search before posting a question.

nsk’s picture

The theme is nice but it causes problems with large fonts: The text input boxes go out of the column.

--
NSK, Admin of Drupal-based site http://www.wikinerds.org

Jaza’s picture

I vote this the best contributed theme that's been put on Drupal.org to date - I really love it Steven, great work!

You've managed to fill two things that all Drupal themes so far have been lacking:

  • some of the cool design elements of Drupal.org's own Bluebeach theme (e.g. those funky white-on-aqua CSS rollovers); and more importantly..
  • finally, a theme that doesn't use any table-based layout! A theme that will validate without any hacking needed! Chameleon has been regarded as the cleanest theme available up until now, but I think FriendsElectric will be earning that title very soon. Even Chameleon uses tables to lay out left and right sidebars.

The bar has just been raised for what constitutes a quality Drupal theme.

Jeremy Epstein - GreenAsh

Jeremy Epstein - GreenAsh

Steven’s picture

Due to the underscore hack which I used in the CSS (to make IE-only rules), at least that will not validate. But I don't consider this an error because the CSS specs explicitly say how parsers should deal with rules they don't understand.

Hence, the underscore hack, even though it throws a W3 validator error, is handled perfectly by CSS parsers that implement the specs.

By the way, the reason there are so few tableless themes is because the majority of tableless designs are oriented at static brochure or blog-like sites with limited contents. Most tableless layouts can't even handle clears inside them, which Drupal relies on. And I encountered a freaky bug in Mozilla where normal fieldsets inside a floated div would stretch out with no way to undo this behaviour except for getting rid of the float completely.

So for optimal flexibility, tabled is still the way to go. You could get around this with CSS tables, but IE doesn't support them. Also, keep in mind that the best Drupal designs out there are not public exactly because they are so good.

Graphical design cannot be re-used like code.

--
If you have a problem, please search before posting a question.

robertDouglass’s picture

solved it through brute force - nothing you'd want to see.

- Robert Douglass

-----
www.robshouse.net
www.webs4.com

maptheway’s picture

Steven,
I actually really like everything about this.
Excellent job!

Dries’s picture

Again, a wonderful theme! Two minor nits:

  1. The pink is a little too pink on my screen.
  2. I wonder if a slightly wider border would be better. The current border width feels a bit restless/narrow.

Where does the name 'FriendsElectric' come from? Does it have anything to do with this Gary Numan song?

Steven’s picture

I know the song through An Pierlé, she covered it ;).

--
If you have a problem, please search before posting a question.

dors’s picture

I experience problems with Opera 8 beta 1: the content column gets squeezed to approx. a quarter of the available width, and springs to 100% again, depending on what navigation item I highlight, and where I highlight it.

Steven’s picture

I've mailed Opera about this bug, as I have no idea how to fix it. Opera 7 does not suffer from the same issue. Oddly enough, the state of the main area simply depends on how many style /transitions/ there are in the sidebar, and is not tied to any particular thing.

For example, clicking the log-in box activates it and changes its border. This will toggle the main area squish. If you keep switching between the two form boxes, the width keeps on toggling. But it does not matter which box you select first. The same happens with the menu: by moving your mouse around carefully, you can get it to squish or stretch out repeatedly for every style transition.

I hope they fix it before Opera 8 final, because this is a really messed up bug.

--
If you have a problem, please search before posting a question.

Junyor’s picture

It looks like this problem will in fact be cleared up for 8.0 final, unless there are any regressions. :)

dors’s picture

I had hoped for a fix in beta 2, but alas, it's still behaving oddly. Now I hope for the final... :-)

PG-1’s picture

Did you found, which element cause this strange effect? How to solve this problem by changing CSS code?

Heine’s picture

It's an opera bug, still not fixed in 8.51 and TP1 of version 9.
Try resizing the viewport by making Opera's panel sidebar smaller/larger. See also http://drupal.org/node/39287
--
Tips for posting to the forums.
When your problem is solved, please post a follow-up to the thread you started.

tangent’s picture

Is this theme intended to support both a logo and a site name? When I enable a logo image it is displayed in the upper left corner under the site name text.

Steven’s picture

Logos typically already include a site name. The gradient on the headers means that any logo that is just plonked there will look like crap anyway. I did provide a template empty logo though.

--
If you have a problem, please search before posting a question.

nsk’s picture

If you look at my site you will see that I use both a site name and a logo and the logo does not include any site name. It is necessary to have both.

--
NSK, Admin of Drupal-based site http://www.wikinerds.org

Steven’s picture

Oh c'mon, changing the location of logo or slogan is nothing but editing a single CSS rule near the top of the stylesheet. Supporting any logo + site name would complicate the header layout a lot. Editing it for your own logo however is a piece of cake.

--
If you have a problem, please search before posting a question.

nsk’s picture

A CMS should allow admins to create and customise sites without coding. Some people don't know CSS. Others don't have enough time to code. That's why we use a CMS: to avoid coding.

--
NSK, Admin of Drupal-based site http://www.wikinerds.org

rkendall’s picture

Customising a web content management system, and using it are two different things.

If you can show me any web content management system that offers complete customisation of the presentation (ie. themeing) without some technical knowledge I would be very suprised.

Programs like Dreamweaver are intended for web page design, but - as I'm sure you are aware - it is not very good at managing content.

Steven’s picture

The very nature of CSS (and graphical design in general) means that is impossible to make a theme which caters to everyone. I've already had to jump through hoops to make it support the current theme options.

You can change the logo if you want, but because of the gradient on the header it will look very bad unless you do some proper customization with a graphical tool and a text editor for the CSS.

You're already getting a high quality theme for free and Free. If you want it to be different, you'll have to change it yourself or find someone who is willing to change it for you (probably at a price).

--
If you have a problem, please search before posting a question.

Tim@kickbot1523.com’s picture

Stephen, thank you so much for making this theme available to the public for free. Any developer who gives away their product has my support, and I am glad to see open source software thriving as through drupal in general and in your project.

Now, I personally think the other people who have been whining about not being able to have every combination of slogans and logos are pushing it, but thats not my place to be. I am grateful just to have the theme in the first place, especially because of the very limited selection of currently available themes. That was what took me so long to actually try out drupal was the number of pre-coded themes. I'm not a graphic designer, web developer, programmer, or a mix of any of the above, but I do enjoy trying to be.

Anyway, back on topic, I don't have any CSS skills, and very little PHP knowledge. I looked for this "easy edit" and I didn't see it. I tried searching the css and php pages for logo.png but to no avail. Just looking through the top I can see that its a top down coding, relative to the site. I understand that the headers and slogans are defined or whatever css calls it in style.css, around the header area. I don't see any limits for how wide the logo can be, and I cannot get the logo to blend with any changes whatsoever (even without changing the width or height of the image).

Basically, I am asking for help. I would personally greatly appreciate it if you could perhaps write a tutorial (wink wink, nudge nudge) on how to change it in your theme. If it is "not so complex" as you said before, I would love to know. Currently my site is using your theme, and I really like how it looks besides the logo image.

So if you could help me make that piece of cake be mine, everything would be a lot easier for me.

Thanks again for making such a great theme available to the public,
Tim

/rant (and sucking up)

<Short version> How do you do add a logo image?

rkendall’s picture

There are other people that may be willing to help out with such simple issues.
http://drupal.org/mailing-lists

Although, if you are customising a theme, it is generally expected that you know a bit of HTML and CSS (it's not that hard - buy a Visual Quickstart book to get started http://www.cookwood.com/ - that worked for me, 9 years ago!)

Here's a hint: you can easily edit the main page html in
themes/friendselectric/page.tpl.php
Look here for more info:
http://drupal.org/node/11810
http://drupal.org/node/11812

micha_1977’s picture

i looked into the theme and...

the theme is ready to use a logo..if you make the proper settings in the drupal-administration and erase the image from the following statement in the style.css

#header {
  background: #486e98 url(header-mid.png) repeat-x 0px 0px;
}

then go to
admin/themes - tab "configuration"

load up or set a path to your own logo, uncheck the "use default" box

...ready to go

if now the logo does not fit in your needs its time for css and/or the template

so i took a look into the theme+css and..well at least its not well documented ;-)

look at the theme code

  <?php if ($logo): ?>
    <a href="/<?php print url(); ?>" title="Index Page"><img src="/<?php print $logo; ?>" alt="Logo" id="site-logo" /></a>
  <?php endif; ?>
  <?php if ($site_name): ?>
    <h1 id="site-name" class="<?php print $site_slogan ? 'with-slogan' : 'without-slogan'; ?>"><a href="/<?php print url(); ?>" title="Index Page"><?php print $site_name; ?></a></h1>
  <?php endif;?>
  <?php if ($site_slogan): ?>
    <span id="site-slogan"><?php print $site_slogan; ?></span>
  <?php endif;?>

dont get frightened...look at the "keywords" like logo,title,slogan...

at a first glance all elements should be displayed one after another, well thats not the case, so css is guilty for it ;-)

lets look at all elements (copied together from the style.css) i marked
some important attribute-settings

#header {
height: 114px;
position: relative; /* Every loose position: relative is here to avoid the IE peekaboo bug */
}
#site-name {
position: absolute;
left: 26px;
top: 32px;

margin: 0px;
padding: 0px;
}
#site-name.with-slogan {
top: 15px;
}
#site-slogan {
position: absolute;
left: 27px;
top: 63px;

margin: 0px;
padding: 0px;
}
#header {
background: #486e98 url(header-mid.png) repeat-x 0px 0px;
}
#header .hw1 {
background: url(header-left.png) no-repeat 0% 0px;
}
#header .hw2 {
background: url(header-right.png) no-repeat 100% 0px;
}
#site-name {
font-size: 2.95em;
letter-spacing: -1px;
}
#site-name a {
font-family: "Trebuchet MS", Helvetica, Arial;
color: #fff;
font-weight: bold;
text-decoration: none;
}
#site-slogan {
font-size: 1.0em;
color: #8baec9;
font-weight: bold;
text-decoration: none;
}

maybe an issue, there is no class like "without-slogan" but its used in the template

back to the topic

as i dont have the time to give the "out of the box ready to go" solution its up to you to try something out
..e.g.

make the logo + title of your site / site slogan into one image
and change template by erasing/html-commenting the following

 <?php if ($site_name): ?>
    <h1 id="site-name" class="<?php print $site_slogan ? 'with-slogan' : 'without-slogan'; ?>"><a href="/<?php print url(); ?>" title="Index Page"><?php print $site_name; ?></a></h1>
  <?php endif;?>
  <?php if ($site_slogan): ?>
    <span id="site-slogan"><?php print $site_slogan; ?></span>
  <?php endif;?>

or adding { display:none} to the style.css for
h1/site-slogan

another possibility
....as far as i can see, you could play around with the top/left/right positions of the h1-element to fit into your logo-image, that
should make it for "simple" changes...

or try to learn a bit css and style the image directly

im happy to answer some questions after you visited some "css tutorial" sites :-)

-micha

wernst’s picture

I have solved the problem for http://www.rogue-gryffons.com/ in the following way:

I added the logo in the "logo" field in the Theme configuration screen. The result is that the Site Name and Site Slogan get superimposed over the logo.

Then edit style.css. Find #site-name and #site-slogan.

Change the left margins for each. I changed mine to:

left: 115px

This kicks the Name and Slogan over as many pixels as you specify.

I am generally very happy with this theme, and am modifying it as I need all over the place. When things settle down, I'll release it to the world. Early interest? Contact me directly.

-Warr

helsinki’s picture

Just a little note about using a png logo with FriendsElectric...IE doesn't render the colours properly, so if you want it to blend with the shaded background, then upload a gif logo in the admin/themes/settings/friendselectric, with site logo switched off. Then use the left margin adjustments suggested above. I used Photoshop to get the background to correspond, just did a printscreen and cut and paste into a new photoshop file, and then a little cut from the plain header to give the right shade on the background and then a new layer for the logo image over the top and save the whole thing as logo.gif. You can see it on my site to see how it's rendered.
___________________
http://www.wilba.org

michaelangela’s picture

Thanks for your note on this. We are developing a site and hadn't checked it in IE for a bit and then when we did it was a bit of a shock at first. Didn't even know this was a problem!

The way I got around it was by loading all the png files used in the header into Photoshop and saved them back out as high quality jpgs. Then in the CSS changed the files to jpgs.

Thanks!
--------------------
Michael
http://michaelangela.name

kbahey’s picture

I downloaded and tested this theme. I tested it on a 3 column web site (left and right side bars with blocks). I tested it with FireFox 1.0.

Again: Great work!

Here are some more comments:

- When decreasing the width of the browser, the theme does not impost a minimum width on the center column (the content) and hence text can be squeezed badly. Better impost a minimum width, if possible.

- I have a footer on this web site. One of the side bars is taller than the content of some pages. What happens is that the footer overlaps that side bar. Another issue is that the footer does not seem to be themed (font size is larger than the rest of the page).

Do you prefer that I open issues for these points?

--
Drupal performance tuning and optimization, hosting, development, and consulting: 2bits.com, Inc. and Twitter at: @2bits
Personal blog: Ba

Geary’s picture

That is great work, Steven! I liked it so much I'm using it for an internal site I'm setting up at work.

I hope you won't mind, but I started playing around with the theme and came up with a slight variation that I called FriendsLight and posted here:

http://drupal.mg.to/

(Not trying to compete with your work--heaven forbid! But I figure you want to encourage people to make variations on the theme like this. If there's anything you like in the changes I made, you're more than welcome to put them into the offical FriendsElectric.)

Thanks!

-Mike

Steven’s picture

I don't mind at all. But your changes are a bit 'untidy' ;). The top nav links are the wrong height which makes them lack the bottom rounded corners (not to mention they don't have any vertical padding anymore), while the lower block titles are not centered vertically. Also, the shades on the edges of the pages are still blueish, even though you removed the blue background.

It's all in the details ;).

As far as this goes:

Fixed a bug where short page content caused the sidebar shading to be lost.

Got a patch I can look at?

--
If you have a problem, please search before posting a question.

Geary’s picture

Thanks for taking a look at my untidy changes, Steven. :-) I really do appreciate it.

The top nav links are the wrong height which makes them lack the bottom rounded corners (not to mention they don't have any vertical padding anymore)

Oh, that text got bigger. Wasn't intentional - must have changed it by mistake somehow. Will fix!

the lower block titles are not centered vertically

Yeah, I tried to get that right but it was a bit tricky. The problem is that the topmost block title has those extra few pixels from the top shading bitmap, but the other block titles don't.

FriendsElectric has the opposite problem: all of the block titles except the topmost one are centered, but the topmost one has extra space at the top because of the shading bitmap. I tried to fix it by putting that bitmap on all of the titles, not just the topmost one, but I didn't get it to work yet. We'll get there... :-)

Also, the shades on the edges of the pages are still blueish, even though you removed the blue background.

I took out the white border around the page and this seems to look better now, in the case where there is no scrollbar. When there is a vertical scrollbar, there's still a nasty little edge thing on the right. (This was why I tried putting in the white border.) This still needs some work.

It's all in the details ;)

Ain't it true! It's funny, I didn't start out intending to change much in FriendsElectric. It looked fine to me with one exception: The negative character spacing. I took that all out and it looked a lot better to my eyes. Having done that, it was a natural temptation to tinker some more...

About the "bug" with short page content, I thought I saw that in FriendsElectric, but I can't duplicate it now! Not sure what I was seeing. (Note to self: Always take screen shots!) I will experiment and see if I can reproduce the problem. Then I will know if I "fixed" it or not! ;-)

Steven’s picture

FriendsElectric has the opposite problem: all of the block titles except the topmost one are centered, but the topmost one has extra space at the top because of the shading bitmap.

Actually, I fixed this by setting the class "first" on the first block titles and adding extra styles. It looked correct on Opera, Mozilla and Safari. The only one that messed up was Internet Explorer (predictably). But I just committed an IE-specific hack that should even make IE display them properly.

If you're using IE, try viewing the theme in a proper browser to see it the way it was intended.

--
If you have a problem, please search before posting a question.

Geary’s picture

It was Firefox where I saw the difference in vertical centering between the topmost block title and the others. But this is on my ThinkPad that I run at 120DPI instead of the Windows default of 96DPI, and also have set up Firefox with a minimum font size. That always helps shake things up a bit. Here are my settings.

I've also been testing with IE, and with both Firefox and IE in a virtual machine running at 96DPI.

I'll take a look at your latest patch; it should be helpful. Thanks!

Also, I changed FriendsLight a bit. I took out the white borders around the page completely, and removed the gradient fill in the header (it doesn't look good on my ThinkPad). I still need to look at the bugs you mentioned, but otherwise I'm pretty happy with it now.

Carl Ditzler’s picture

This looks great --- I changed the title and link colors to #c04949, just a tiny personal preference.

When doing a search, an open bracket appears on a new line after "Search Results." Looked through your template, with no success identifying the bracket.

Steven’s picture

I get no such bracket locally in any browser. Are you sure it's caused by my theme?

--
If you have a problem, please search before posting a question.

grabur’s picture

I don't know if it's my OS (W2k) but the fonts on the drupal site and the above theme are incredibly hard for me to read, maybe they use lots of anti-aliasing - that and the white background force me to use my own style sheet.

Also when I resize your demo site - text remains in place and it looks odd. It looks like a fixed width site - but doesn't behave such.

Steven’s picture

Read this:
http://www.acko.net/blog/windows-font-renderer-buggy

In short: the font problem is Windows' fault. Not many Windows machines will have Bitstream Vera, so I don't consider it a huge problem. If properly rendered, Vera looks a lot nicer than Verdana, so I prefer to use it if available.

As far as resizing goes, I have no problems here. Try text-resizing + refresh. If that fixes it, it's a weird browser issue on your side.

--
If you have a problem, please search before posting a question.

Carl Ditzler’s picture

Download page of all Bitstream Vera fonts [whole family in a single file at the bottom of the page], you're right - much nicer than Verdana.

tangent’s picture

Not on Windows. When BlueBeach was implemented Drupal.org became unusable for me until I got rid of that font.

rkendall’s picture

use linux :)

Carl Ditzler’s picture

Downloaded the fonts (found in the above link), extracted, copied to /windows/fonts, and bitstream vera is installed.

grabur’s picture

Well I have openoffice - so assume that I am viewing bitstream fonts. The fonts look blurry. On my linux box (suse 9.1) - the font looks far nicer on screen, and kde looks like it uses it. In w2k though, the fonts look blured, i can tell the'd look nice in print - but on screen.... - sadly the days of aliased fonts have passed by - and I guess it's purely subjective, but I think they are easier to read. And although verdana is a boring font - it's quite easy to read on screen.

grabur’s picture

I was viewing in opera 7, and when resizing the browser the text isn't contained in the right content space.

Trying the site in Mozilla firefox - the site looks okay - but when resizing the browser window - the site title moves into the left hand column (same in opera)

I didn't bother trying in ie.

Steven’s picture

I noticed this bug. Opera7 doesn't seem to adjust the content when you make the window smaller. It does work when you make it larger. However, refreshing causes it to correct itself, so it's not a big problem. Few people resize their browser while visiting.

--
If you have a problem, please search before posting a question.

adrian’s picture

should be working with cvs now
--
The future is so Bryght, I have to wear shades.

tangent’s picture

It is now working but primary and secondary links are not working. There are no items returned unless they are specifically overriden in the theme settings.

adrian’s picture

meaning modules don't populate the default links anymore.

PHPTemplate was the only theme / engine actually still making use of that functionality.
--
The future is so Bryght, I have to wear shades.

kbahey’s picture

I think what this means is that modules will not be able to add their links to the primary or secondary links automatically.

The site admin will still be able to enter primary or secondary links manually using the admin/themes pages.

Am I correct Adrian?
--

Consulting: 2bits.com
Personal: Baheyeldin.com

--
Drupal performance tuning and optimization, hosting, development, and consulting: 2bits.com, Inc. and Twitter at: @2bits
Personal blog: Ba

bertboerland’s picture

In case anyone edited the CSS / theme, you are welcome to post a working example site in this thread to show off the theme (and plug your site)
--
groets
bertb

--
groets
bert boerland

kbahey’s picture

To take this idea a step further ...

Does phptemplate allow for configurable styles from the admin menus yet? If so, I can't find it. I know that theme.inc allows for configurable stylesheets, but there is no way in the current admin menus to use a different style.

If this can be added, then all the contributed styles can be included under a contrib directory and people will have infinite looks from the same theme.

Ideally, there would be a screen shot for every new style as well.

--
Drupal performance tuning and optimization, hosting, development, and consulting: 2bits.com, Inc. and Twitter at: @2bits
Personal blog: Ba

Steven’s picture

See the Theme development overview. This is how marvin is implemented.

--
If you have a problem, please search before posting a question.

kbahey’s picture

Thanks. I knew Clean Slate and Box Grey were related, but did not know how. I did not notice this part:

You can also make CSS-only themes by making a subdirectory in any theme directory and placing a new style.css file in it. Drupal will combine the new stylesheet with the template it belongs in, and make it available as a new theme. This is how the Marvin and Box Cleanslate themes work.

--
Drupal performance tuning and optimization, hosting, development, and consulting: 2bits.com, Inc. and Twitter at: @2bits
Personal blog: Ba

grabur’s picture

Do I need the !important css flags when doing this?

Steven’s picture

You can override CSS rules simply by having equal or higher specificity (more classes, id's and tags in the selector).

But with a style.css-based theme, the original template's stylesheet is not loaded, so you don't need to override.

--
If you have a problem, please search before posting a question.

Steven’s picture

By the way, theme styles may be contributed in the repository under the template it belongs in. We do not use the theme-styles directory anymore, so that people can download a theme and its styles together.

--
If you have a problem, please search before posting a question.

marlowe’s picture

Great!!

Your theme and those from negen are the best drupal themes I've ever seen. I do some hacks to feet my taste, boxing images, titles sizes, you could test it in www.nodigas.com.ar. In the future I would like to close top and botom like Kubrick theme.

Thanks for your great work..

bernie’s picture

seems like it has some DIV bloat?

What is the benefit of having the two nested divs in the header (hw1 -hw2) and EIGHT nested Divs (cw1 - cw8) in the content?

Not knocking you, I couldn't figure it out and was just wondering....

Steven’s picture

Until the CSS3 property :outside is implemented in all common browsers, you need wrapper divs to stack backgrounds. The central content area has faux columns, but with variable width and optional sidebars (2). It has a shadow at the top (1), a shade at the left and right edge (2) and a piece in every corner to blend the side and top shades (2). Then there's needs to be padding/margin in a way that browsers don't mess up.
Total: 8 ;)
--
If you have a problem, please search before posting a question.

NickHBO’s picture

UPDATE: This is strange, I guess I found what is the first ever, to me, Mozilla/Firefox only bug - at least between Firefox and IE. The issue I discuss below does not happen on IE 6 at all.

This is one of the best theme's I've seen contributed for Drupal sites. I get one very nagging problem that is a show stopper though. On FireFox (and maybe other browsers, haven't checked) the theme abruptly ends where the end of the center content column ends.

I have about 6 blocks on the left of my site and 3 on the right, when I go to a page like polls or something that has only a line or two of content, I see the theme just cut off after the end of the content and copyright message (footer). The right column keeps going on down the page backed only by a white background.

Somebody has submitted this as a bug report and I've seconded it on the tracker, but I just wanted to bring it up here in case anybody had any idea of what the problem could be and how to fix it. I really want to try out this theme and get to customizing it but this bug totally kills the theme's usability.

Thanks,
Nick

Steven’s picture

I thought I got rid of this issue, but some of the last-minute CSS changes must've messed it up again. I'll fix it as soon as I can!

--
If you have a problem, please search before posting a question.

NickHBO’s picture

Thanks for getting on it so fast, it's great to see such a quick response.

Nick

dreed47’s picture

I'm still seeing this problem with FireFox and the latest CVS code. Has this been fixed yet?

bernie’s picture

Is anyone else having problems with the search box in the header not returning results with this theme?

FOr some reason, the search box in the header doesn't work, but the search PAGE does. - odd.

Steven’s picture

If you're trying to use the theme on 4.5, you'll have to change the theme's search box. I'll see if I can upload a 4.5-compatible release later. The current one is CVS-compatible.

--
If you have a problem, please search before posting a question.

Tim@kickbot1523.com’s picture

I think because I replied to a parent message that was fairly high up, my question has been over looked. I would appreciate it if you (Stephen) would read it.

Here is the link
http://drupal.org/node/17569#comment-29926

Thanks,
Tim

rivena’s picture

I really not sure how to explain things like this. ^.^:

What happens is the top links (blog article etc) get funky. For example, the link to the home page is ?q=?q=, and articles is ?q=?q=article. Naturally, these come up with file not found errors. Only with this theme, although I don't have any other phptemplate themes, so I couldn't check that. Looked through the code, but I couldn't figure out why it would do that. (no obvious little q's hanging around.)

I would imagine with how carefully ya'll checked it, something like this would be caught, so perhaps it's something I did. But if it was something I did, wouldn't it happen with other themes?

Regular menu links work fine.

Anisa.

Steven’s picture

You should not include the ?q= when specifying the links yourself, as Drupal will add this when clean URLs are disabled. This is not a FriendsElectric issue.

--
If you have a problem, please search before posting a question.

rivena’s picture

The links were automagically generated. Touched nothing, promise. I thought I might have accidently done something with the set node as home page, but it's still at node.

I am going to go ahead and try to build off 4.6, but this might be a problem with others. Except, I would think people would say so. *shrug*?

Anisa.

adrian’s picture

I don't think it's a factor in 4.6 anymore, and i am no longer actively developing 4.5 any more.

--
The future is so Bryght, I have to wear shades.

altano’s picture

When validating my XHTML I noticed these errors

Line 28, column 16: end tag for "ul" which is not finished
Line 31, column 16: end tag for "ul" which is not finished

in regards to

 26:   <div id="top-nav">
 27:           <ul id="primary">
 28:             </ul>
 29:     
 30:           <ul id="secondary">
 31:             </ul>
 32:       </div>

So I edited:
/themes/friendselectric/page.tpl.php

and changed:

  <div id="top-nav">
    <?php if (is_array($primary_links)): ?>
      <ul id="primary">
      <?php foreach ($primary_links as $link): ?>
        <li><?php print phptemplate_wrap_links($link, 2); ?></li>
      <?php endforeach; ?>
      </ul>
    <?php endif; ?>

    <?php if (is_array($secondary_links)): ?>
      <ul id="secondary">
      <?php foreach (array_reverse($secondary_links) as $link): ?>
        <li><?php print phptemplate_wrap_links($link, 2); ?></li>
      <?php endforeach; ?>
      </ul>
    <?php endif; ?>
  </div>

to:

  <div id="top-nav">
    <?php if (is_array($primary_links) && !empty($primary_links)): ?>
      <ul id="primary">
      <?php foreach ($primary_links as $link): ?>
        <li><?php print phptemplate_wrap_links($link, 2); ?></li>
      <?php endforeach; ?>
      </ul>
    <?php endif; ?>

    <?php if (is_array($secondary_links) && !empty($secondary_links)): ?>
      <ul id="secondary">
      <?php foreach (array_reverse($secondary_links) as $link): ?>
        <li><?php print phptemplate_wrap_links($link, 2); ?></li>
      <?php endforeach; ?>
      </ul>
    <?php endif; ?>
  </div>

and now it (www.dubi.org) validates (http://validator.w3.org/check?verbose=1&uri=http%3A//www.dubi.org/)... errr, well once the cache flushes for you unauthed people.

Thanks for this amazing theme, Steven. Your work is truly appreciated.

P.S. I would make a patch file if I had any idea how... anyone want to point me in the right direction?

sepeck’s picture

Create the patch. Open a bug report against the project and attach the patch to the issue you create
Project
http://drupal.org/project/friendselectric
Handbook link with more info
http://drupal.org/node/10259

Welcome to Drupal.

-sp
---------
Test site...always start with a test site.
Drupal Best Practices Guide

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide

altano’s picture

Thanks for the info. Issue can be found here now: http://drupal.org/node/23018

Mahatma’s picture

You know we at Cyberocity get around a lot. Your theme looks a lot like the official http://www.xoops.org theme, which is a very nice theme too.

I couldn't help but wonder about the rss icons being the same or nearly identical. Is that an icon that some rss organization allows people to put on their rss feeds or are they nearly identical out of pure coincidence? It's a nice rss icon.

I like your theme, it has very nice colors and combinations. I couldn't help but wonder if it was based on that http://www.xoops.org theme though? If so, it made a very good base for a phptemplate theme and I think it's the best theme I've ever seen on Drupal. Wonderful.

Rick Cogley’s picture

I'm using FriendsElectric, and I can't see even a remote resemblance between it and the default Xoops page's theme. Perhaps you could describe it better?

Regarding the RSS icon - if you are talking about the button at the bottom of the Xoops site, these are typical, and there are many kinds that look like that for various apps.

Rick Cogley :: rick.cogley@esolia.co.jp
Tokyo, Japan

sepeck’s picture

It has a blue header and 3 column layout. Hmmm..... beyond generic design 101 I don't see the resemblance. I mean, there are no buttons in the header, the left/right columns arn't grey.... Your comments confuse me.

As to the rss icons, well google for them. There are many gpl'd ones and they all look alike.

-sp
---------
Test site...always start with a test site.
Drupal Best Practices Guide

-Steven Peck
---------
Test site, always start with a test site.
Drupal Best Practices Guide

Steven’s picture

The RSS icon you talk about is not part of the theme, it is something I use on my own site (acko.net). Depending on what page you are browsing, more RSS feeds are available (e.g. per taxonomy term).

In any case, the button design is very classic: that style of buttons became popular a year or two ago. The site Steal these buttons has many of them which you can use and modify as much as you want. There are even Drupal buttons. I contributed some buttons on there too. It's a good, unintrusive way to show support for other projects.

About the Xoops resemblance, I didn't know what the Xoops site looked like until now, so I did not copy from it. While there are some vague resemblances (blue header, light sidebars), the rest is overwhelmingly different. FriendsElectric was developed specifically as a Drupal theme, so it has special styling for forms, fieldsets, tables, comments, etc. Most of it is demonstrated on the demo page on my site. The Xoops theme doesn't seem to have much in the way of content styling, it's mostly a chrome/layout theme.

Thanks for the comment in any case, I made FriendsElectric for everyone to enjoy.

--
If you have a problem, please search before posting a question.

azote’s picture

thanks steven!...

you can see that I'm using it on our SuperGroup website http://globalheroics.com

kenwen’s picture

Hi all,

Just found this theme and I'm battling through a few things to get it to work neatly. I love it thogh so will be trying until I lose what's left of my hair before giving up

Firstly:

How can i keep the footer at the bottom of the page. Its following directly on after the nodes on display.

Secondly:

There's sometimes overflow when text exceeds the width of a box, such as here on a gallery page. http://www.ukcrossfit.com/image

Thirdly and I'm almost certain its related to the second thing, if you check the gallery out the images seem to be misaligned.

Any help appreciated

Thanks
Ken