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

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.

Anonymous's picture

chentingting0731
air max 90 hyperfuse blackAir Jordanwhite huarachesLouis Vuitton Outletmichael kors salemichael kors outlet onlinekate spade pursesair jordan saleNike OutletNike Air Maxhttp://www.michaelkorsmkoutlet.orgLouis Vuitton Handbagshttp://www.mkmichaelkorspurses.comnike air max theacoach outletcoach outlet storenike roshe menlouis vuitton outlethttp://www.michaelkorsmksale.comnike flyknit 4.0nike air huarache blackhttp://www.2015coachoutlet.comcoach coupon codelouis vuitton bagsLouis Vuittonhttp://www.nikefreetrainer50.netcheap air max 90michael kors factory storemichael korscoach bags on salenike free 5.0nike 4.0 flyknitcoach outlet 80% offnike roshe run blackLouis Vuitton Outlethttp://www.nikeairmax-90.in.netkate spade diaper baghttp://www.airjordan5forsale.comcoach outletmichaelkorsair max zerokate spade outletcoach outlet store onlinekate spade outletnike air max 1 http://www.nikeairmaxthea.in.nethttp://www.usalouisvuittonoutlet-stores.comnike huarache womenhttp://www.rosherunwomen.orghttp://www.airmax90ice.orghttp://www.louisvuittonclutchs.commichael korshttp://www.coachoutletstoreinc.orgmichael kors bags outletkate spade factoryLouis Vuitton Pursesmk purses coach outlet store onlineflyknit roshemichael kors handbagshttp://www.2015michaelkorsoutlet.nethttp://www.katespade2015.orglouis vuitton storemichael kors outletLouis Vuittoncoach couponscoach factory outletroshe runshttp://www.airmax90ice.in.nethttp://www.nikeairmax1in2014.comair jordan shoesNike Outlet OnlineAir Jordan 11 Retrokate spade diaper bagmk saleLV handbagshttp://www.nikeairhuarache.netNike Air Max 90 Classicair max 90katespadeair max theacoach bags usahttp://www.nikeairmax90classic.comlouis vuitton store 2015http://www.nikehuarachewomens.comroshe run flyknitmichael kors jet set walletkate spade outletmichael kors bagscoach online storemichael kors outletcoach outletcoach coupon codenike air maxnike free trainernike roshe womenkate spade factorycoach 80% off handbagsnike air max thea mensmk wallet outletcoach outlet promo codekate spade outlet onlinehttp://www.katespade-usa.orgmk factorykate spade handbagsroshe run womenLouis Vuitton pursesmichael kors outletnike air max thealouis vuitton bagkate spade outletlouis vuitton storesmichaelkorscoach bags outletair max shoeskate spade bags ushttp://www.nikeoutletstore-online.comLouis Vuitton SunglassesNike Air Jordan 4kate spade bagsnike.comhttp://www.louisvuitton-lv.us.commk outlet onlinehttp://www.louisvuitton--outletstore.netLouis Vuitton Outlet OnlineLouis Vuitton clutchhttp://www.louisvuitton-lvpurses.comkate spade oninenike air huarachecoach outlet storeAir Max 90rosheskate spade outlethttp://www.mkfactoryoutlet.netblack roshe runmk bagsnike air maxLouis Vuitton clutch bagair max zero salehttp://www.michaelkorsoutletonlinee.netNike LunarGlipseroshes womenhttp://www.nikeairmaxzero.netcoach outletLouis Vuitton Handbagsnike roshe womenair max theaair jordan 5 retrokate spade surprise salecoach bags

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.