HOWTO Create Zen 7.x-3.x Subtheme in Step-by-step (Part 2)

Error message

Image resize threshold of 10 remote images has been reached. Please use fewer remote images.

This is the Part 2 of the HOWTO, and you should interested with:

You may hope to stylize your Drupal 7.x blog by yourself; you may have a eyes-catching open source design and would like to implement as Drupal 7.x theme; you may hope to contribute something to Drupal community. Yes, you may have a lot of reason to start your own Drupal theme development.

In Part 1 we cover the basic of GIT command, setup a new subtheme from Zen STARTERKIT, backup original version as reference, preform some basic hack in overall Zen skeleton, and finally update the css/html-reset.css (Oh! It looks so many changes; But actually this is the the beginning!). Up to this point your theme should at least "a bit" looks similar as your design, and now we can go ahead.

This Part 2 will give you some hints for basic Drupal elemenets themeing, e.g. node, comment, block and so on; then we will handle some design-specific implementation, e.g. header, background, sidebar, footer, navigation and so on. Onec finish your theme should be 80% similar as your original design. Ok let's start :D

Clone design for blocks, nodes and comments

These setting are located under css/blocks.css, css/comments.css and css/nodes.css. You may also reference to my contented7-7.x-3.x-CHANGES.diff. Some key points which should be careful with:

  • Most likely you would like to customize the title style, and you should only handle the related title design within these files. The overall styling should be found from css/pages.css and css/html-reset.css.
  • Other else changes should be safe for clone "directly", e.g. ".node .user-picture'"

Here is the quick checklist about my changes:

  • Reference to contented7-7.x-3.x-CHANGES.diff, update css/blocks.css (special handling for "h2.block-title"?)
  • Reference to contented7-7.x-3.x-CHANGES.diff, update css/nodes.css (special handling for "h2.node-title"?)
  • Reference to contented7-7.x-3.x-CHANGES.diff, update css/comments.css (usually I will clone "h3.comment-title" as like as "h2.node-title")
  • Reference to contented7-7.x-3.x-CHANGES.diff, update css/pages.css "h1.title" ONLY (again clone "h1.title" as like as "h2.node-title")

(CHECK POINT) commit changes and check with 7.x-3.x-STARTERKIT, also compare and reference with contented7-7.x-3.x-CHANGES.diff:

git commit -a -m '- update css/blocks.css, css/comments.css and css/nodes.css (css/pages.css for title style only).'
git diff 7.x-3.x-STARTERKIT 7.x-3.x | colordiff | less -R

Let's check the layout again, which should look like as below:



Clone design for pages

Next we should update css/pages.css, which contain most page common elements styling. The changes of this file is quite strict forward. Besides some general styling for header region elements, I also give a horizontal border to both #header, #triptych and #footer so it will looks much similar as original Contented5 design.

Ok, I update the logo.png, too. Usually I would like to choose an eye-catching icon for each of my contribute theme. It is not a must but why not have some fun with it ;-)

Here is the quick checklist about my changes:

  • Reference to contented7-7.x-3.x-CHANGES.diff, update css/pages.css

(CHECK POINT) commit changes and check with 7.x-3.x-STARTERKIT, also compare and reference with contented7-7.x-3.x-CHANGES.diff:

git commit -a -m '- update css/pages.css, plus some misc fix to other css.'
git diff 7.x-3.x-STARTERKIT 7.x-3.x | colordiff | less -R

Let's check the layout again, which should look like as below:



Clone design for navigation bar

Well, the works now looks good, isn't it? And I guess you should know about the next step: the navigation bar still need some love! OK let's go ahead for it. Some tips here:

  • "#main-menu" should "float: right;" under site logo and slogan, where "width: 100%;", too. This can prevent overlap of main menu with site logo and slogan, if main menu coming with too many items (This is just my best practices of implementation; you need not to follow my style).
  • "#header .section" be "position: relative;", so the inner "#secondary-menu" can be "position: absolute; top: 15px; right: 10px;". Without the parent position in relative, top/right/bottom/left will not effective.
  • Don't just copy css from your original design directly without analytic. Just copy sometime you DO needed for, and forget the remaining.

Here is the quick checklist about my changes:

  • Reference to contented7-7.x-3.x-CHANGES.diff, update css/navigation.css

(CHECK POINT) commit changes and check with 7.x-3.x-STARTERKIT, also compare and reference with contented7-7.x-3.x-CHANGES.diff:

git commit -a -m '- update css/navigation.css, plus some misc fix to other css.'
git diff 7.x-3.x-STARTERKIT 7.x-3.x | colordiff | less -R

Let's check the layout again, which should look like as below:



Any else missing?

Yes, you have ask a very good question. The progress up to this point looks fine and should able to function in most situation; BTW, refer to 80-20 rule, we just complete around 80% of conversion and most detail polishing and finishing is not yet completed, for example:

  • The different between original block design.
  • The main menu looks different in position.
  • Font size is larger than expected.
  • ... etc.

Anyway, above issues will not be solved within this HOWTO. I seems this as YOUR duty, and I am waiting for your contribution :-)

What's next?

You should have your new Zen subtheme which looks elegant now. So the next target would be RTL support and cross browser compatibility issues. I will also provide some basic guideline about how to upload your code to drupal.org GIT as public contribution.

Also keep in mind that most open source design are NOT target for CMS usage, which means usually it will miss out something that looks important in Drupal 7.x Zen 3.x development. My best practice is: DON'T clone everything BLINDLY! You should have your own changes, you should have your own styling, that's often. If you get lost about next step, please reference with my contented7-7.x-3.x-CHANGES.diff to get some hints and idea :D

Comments

admin's picture

Great zen subtheming article serie. Thanks.
Are you planning to continue this with part 3?

admin's picture

Really clear and detailed. We can understand and do as follows easily. Thanks a lot.

admin's picture

Good job, good detail. You've inspired me to give it a try.

admin's picture

I was planning on moving http://bestdoublejoggingstroller.org/ over to drupal. Your piece is giving me the ambition to attack it, awesome.

admin's picture

I think this is nice. But I don't have any idea of this yet. Thank you for the information that you post.

admin's picture

I need some help, i want to move my site http://www.maxandcleodresses.org from wordpress to Drupal, but not sure what i have to do. Will i lose all my data? Is it as simple as converting wordpress to Drupal or do i have to start from scratch when i install Drupal?

admin's picture

Thanks for that, so easy to follow I am amazed, keep up the good work you are an inspiration.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <h4> <h5> <h6>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.
  • HTML tags will be transformed to conform to HTML standards.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.