I know that the Zen starting theme is very popular but I find it harder to edit a theme made by someone else (even if it's as simple as Zen) that to create my own in static html. Is it ever a good idea to start with a static html design and then port it over to drupal? Or am I just doing twice the work for no reason?
I'm interested in hearing what other, more experienced, drupal devs do when designing a new theme.
Personally, I would never hand-code all html and css and then port it to a Drupal theme. I don't agree with Kevin that "all themes start as html". Allow me to quote what I wrote before on the drupal.org forum:
Imagine writing your own html, complete with id's and classes. You also write css and adapt the css selectors to the html structure, id's and classnames you created yourself.
Next, when you have to turn that into a Drupal theme, you will find that Drupal adds it's own html structure, id's and classnames. This means that you will have to start making changes: either change the Drupal output to match the mockup you made earlier, or change the css selectors to match Drupal's html output. Either way, you're doing double work. It's just not efficient.
And in another topic I wrote:
One thing you have to understand about Drupal theming, is that not all xhtml/css/js output is generated by the theme, because modules provide their own default output. The theme is able to override that output, but in many cases there is no reason to do that because the default output is usually valid, functional and flexible. If you want the final xhtml output to be 100% identical to the xhtml you created, you will have to override every single theme function and template... now that would be a waste of time.
If you're used to writing static html, Drupal theming may require a change in mentality. If you want to be efficient in Drupal theming, you will have to learn to work with the default html output. Whenever possible, use only css. Starterthemes like Zen, Genesis and Fusion provide an excellent base to build your own custom theme.
Related
I have a regular and mobile theme for a site; there are currently a couple of duplicate functions in the template.php of each theme, which do some text munging on the same fields. That is, the markup is the same for these fields in both themes.
How can I impose DRY and only have the logic in one place?
I understand I could make the regular theme inherit the mobile theme, but this doesn't seem like a "proper" solution, since the themes are quite different at the end of the day. Even more so as this would require ex-post-facto manipulation of the preprocess functions, and overriding mobile CSS and JS files - seemingly creating as much work and future WTH as it solves.
Thanks!
I would love to see the proper answer for this.
All i can think of is making a module that holds the duplication of functionality. A library module if you will.
So I'm making this "answer" as a conversation starter.
in: (mobile)template.php
preprocess_page(&$vars){
mymodulename_pagepreprocess($vars,'mobile');
}
(desktop)template.php
preprocess_page(&$vars){
mymodulename_pagepreprocess($vars,'desktop');
}
You can have preprocess-functions in modules as well btw. But it might be nice to send witch template as an argument.(you could however extract this from the global $theme)
How about you make a base theme which holds the functions, and implement both as sub-themes of it.
Or just the mobile theme a sub-theme, and the PC theme is the base?
Creating a sub-theme
first approach to CMS and wordpress I'm wondering if there's any predefined html structure and classes/IDs "must-be" reference that I can refer for making my own theme willing to change in the future for another wordpress theme
thanks
Luca
There are a few other 'template' themes that could get you started - if Starkers isn't quite your thing, you might find WP Framework a good alternative. Or - just start stripping down the Twenty Eleven theme to give you a base (which is just what the Starkers theme does, using the Twenty Ten theme as a base).
There's also quite a handy first-time guide on the WordPress Codex around theme development if you'd prefer to start from scratch.
Wordpress doesn't require you to have any specific classes or IDs in your theme in terms of the HTML and CSS, the only things WP needs are things like the wp_head function inside your element on every page. Having said that themes such as Starkers were created to enable developers to have a starting point instead of starting from scratch.
Now the above applies only to whatever code you write, there are however some functions in WP that will return standard code, for instance if you don't specifically create the comment thread code, WP will generate it for you, and that is really the only code that many themes will share.
I would say that if you are intending on making a number of blogging themes for instance, having a set of standard code might be a good idea, for the article pages for example, so that you don't have to re-write code over and over. Aside from that the only code I ever reuse when making themes is the CSS to style comments if I don't hand-code the comments section, this is a good idea as it will save you a lot of time.
Wordpress provide some functions which add CSS classes depending of page type, templete, conditional tags . . .etc.
These functions are body_class() and post_class().
For more info check:
http://codex.wordpress.org/Function_Reference/post_class
http://codex.wordpress.org/Function_Reference/body_class
I am beginner to drupal and doesn't know more about it I am amazing about drupal theme works. And I would like know drupal theme's flow of execution. If i open theme folder..., there is a file like page.tpl, template.tpl,node.tpl and more... In which order the drupal reads all those theming file...
There is no easy answer, it really depends.
The thing with Drupal's theming system, is that it is very flexible, which means, that under certain situations you can make it use other templates, than the default.
The only thing you usually can be sure of, is that the page.tpl.php is used, it defines the main structure of the page. It usually defines different regions where you can put dynamic content. This content can be generated by a combination of templates and theme functions.
If you want to understand how this all works, you could try to read the theme guide, or for a more hands on approach, install the Theme developer module to inspect the different elements of a drupal page.
Nick Lewis, as always, has a well written piece about the theming internals here, here, and here. Not one of them gives you the complete overview, but the three of them together creates synergistic drupal awesomeness.
I've been coding in PHP for 4 years and even I find it so convoluted and hard to grasp. I have no idea how they expect designers to manage theming.
I know basic theming, theming with tpl files, views templates, contemplate templates etc. However I get lost whenever I enter the template.php file.
I needed to theme a node input form for a custom content type. I wracked my brain over it with like 7-9 tutorials and it's still not coming together. I understand why module building can be complicated - because most people who work with modules are developers anyway.
However, when even a developer can't understand theming, it's definitely over-engineered!
Maybe it's my fault, maybe I didn't learn Drupal properly. In that case, is there a step-by-step system to becoming a Drupal guru?
Theme is really not that difficult, if you only know basic php. You have 3 ways of altering the markup, the css and js, you should be able to handle.
Template files. By creating a template file in your theming and naming it correctly, it will take precedence over other template files, and you can thus create custom markup for views, nodes etc. By creating a template for a noce type, you can do stuff like printing out the cck fields in any other instead of using $content. All you need is on the node object.
Preprocess functions, which are placed in your theme, will give you the possibility to add or alter variables that will be used in your template. You name the functions like hooks: yourtheme_page for the page template yourtheme_node for the node template etc. Here you can create some custom logic, or modifications, to help make your templates more clean and just handle the printing of the variables.
Theme functions. You can overwrite theme functions to alter the markup that's used. You only need to create a function called yourtheme_[theme_function_name]. You don't need to understand much php to do this. Often, you can just copy the original theme function, and make a few alterations in it to get the markup you want.
With the above you can do 90-95% of what you need. Forms are a bit special since you in Drupal 6 can't alter them (easily) in your theme. Instead what you want is to create a small module and use hook_form_alter, which allows you to modify the form, text used on buttons etc. This is changed in Drupal 7, which will be even easier to theme.
So it really isn't all that complicated, just use the 3 basic tools described above. The tricky part can be to name your functions and templates, but devel themer can help you with that. Another tool you use is devel which can assist you in printing out variables so you can inspect them and see what you have available, fx CCK fields on the node.
Maybe you should get a copy of Front End Drupal.
In my opinion, Drupal theming is not difficult once you wrap your head around the concepts like templates, overrides, .info files and preprocess functions. Those things are not directly related to php skills, it's all about understanding the system.
It's interesting to see that you're a themer, yet you only talk about php, not CSS and HTML. In my experience, a lot of theming tasks can be accomplished with CSS, without even touching php.
Finally, I don't know if you are using a base/starter theme (like Zen or Genesis) already. I recommend using a base theme and realizing your own design as a sub theme.
Most people get an 'ahah!' moment when themeing suddenly starts to make sense.
I'd argue that this is probably tougher for experienced PHP developers, since you have to get past a lot of concepts that don't make sense in vanilla PHP ("the function is magically called at the appropriate time ... because of how it's named?!")
#googletorp's answers is pretty comprehensive, so I'll just add some practical tips that helped me along:
1) Try building a module that implements it's own themeable output and simple hooks. Hooks and theme functions make a lot more sense when you see how modules are actually calling them and using them.
2) Make liberal use of the devel module, especially the Theme Registry menu (note how it changes when you add a new theme function), the 'Render' tab, and the dpm() and dvm() functions
3) Buy a old-tyme dead-tree book on Drupal themeing. The online docs are really outstanding if you already know what you're doing, but can be extremely confusing if you're not sure what you're looking for.
4) Empty your cup. At the theme level, PHP is really just for simple logic and syntax -- almost everything of substance is getting handled by Drupal API functions. Try to think like a Drupal developer and not a PHP developer (i.e. don't assume you know how to do something just because you built a vanilla PHP site that does the same thing) and you'll have an easier time.
Keep with it! The theme system is actually really easy to use once you've figured it out.
to answer your question on why it is so hard:
Drupal themes may seem overwhelming, due to the sheer amount of possibilities, see #googletorps answer for a good overview.
Having "many ways to do one thing" brings power: power users can choose the best of all possibilities. But it also brings complexity: new users don't get a good lead, because there is no "you should do it this way. fullstop."
Alongside that amount of ways to get stuff done, there is the problem of nesting. Drupal has a concept of very deeply nested items. To take a random, yet simple example:
username<menuitem<menuitem<menuitem<menu<block<region<page.
Will render a menu-item, containing a username in a three level deep menu-item in a sidebar-block.
Where most templating-environments have concepts of a page, containing several "contents" that, at most, might contain some partials. the nesting is at most three levels deep. And each level has a clear, distinct area of expertise. Drupal does not have that: the nesting is fairly arbitrary. And each nested item is no different from its parents. This, again, offers power-users a great concept and power to work with, but is hard to grok for new developers/designers.
Lastly, another reason why it is hard to learn, is that the Drupal online documentation is more a wiki then a read-from-begin-to-end manual. There are great books that fill htat gap, you will have to buy them, though.
If you haven't seen it already, this is a great presentation on why Drupal 6 theming is difficult and how it is improved in Drupal 7. There is hope! The video made more sense to me a second time watching after more experience theming.
http://sf2010.drupal.org/conference/sessions/design-and-theming-whats-new-drupal-7
One of the biggest tricks is to override something that is normal rendered with a theme function into a template. This gives you much more control over the markup, and also lets you use the preprocess functions to manipulate the variables before handing it over to the template.
This is a huge boon to theming forms. See a short video that explains it better than I could here: http://drupaldojo.com/session/fine-tuning-ui-theming-forms-drupal-60
I'm terribly new to web development. I'm trying to make a pretty simple site with a friend. My friend has taken the time to design the layout for our site, and we have things looking how we want in a static HTML page.
What I'd like to do now is move over to a Content Management System like Drupal but keep the same design that we have all ready laid out.
Since I'm completely new to this field, I'm looking for some best-practices advice as to how to make this leap.
It's apparent to me that I could probably edit some existing Drupal Theme to make it give me the layout that I want, but is that the path I should go down?
Thanks!
Update: Also, is it more than just replacing my style.css with their style.css?
Update 2: The end goal is for people to be able to log in and create news entries, very similar to a blog that will then appear on the front page. There will be other items on the left- and right- but they don't need to be directly accessed by anyone, really. They'll stay pretty static.
The Zen theme is sort of a meta-theme that's designed to be fully standards compliant and make pretty much every aspect of theming readily customizable, with lots of informative commenting. It's the best place to start if you want to develop your own theme. Even if you find a theme that looks a lot like the one you want to create, it's probably still better to start with zen because it's extremely well laid out and instructive. That being said, I've never built a theme from scratch, but it sure looks like a lot of work.
Update
In general the best approach will likely end up being to use your designer's HTML and CSS as a reference, and to edit the Zen-based templates and CSS files to recreate that appearance. It's a bit magical.
You will end up breaking the styles used in your designer's layout into chunks that are part of various template files. The mostly-static stuff on the side columns will become what Drupal calls "blocks"; you'll likely use the top part of the page to refine the HTML for the header section of the main page template; and you'll use the central part to add any necessary tags to the content section of the main page template.
I tend to make liberal use of the Firebug extension for Firefox, or the developer tools built into Chrome. These tools let you quickly locate a given CSS element that you want to change, and edit it to see how the change will look. At first though it's probably better to just read through the whole CSS file to get a feel for how it works. Again, Zen's CSS is very easy to digest.
Pour your heart and soul into the Drupal Theming Guide for the next few days. Theming, like most things, is best done if followed by a gratuitous amount of time in the documentation.
Start with either Zen or Framework themes. They provide good starting points for working with the CSS to adapt to your design.
This helps too:
http://drupal.org/theme-guide
Whatever you do, don't take Garland theme as how a good drupal theme is done. I went down that path when I first started Drupal...