I have an HTML template. What are the steps to convert it into a Drupal 6 theme?
Create a copy of a theme you want to modify - usually a blank theme like zen works well. You'll need to rename the files and fix the .info file.
Then you can edit the .tpl.php files. node.tpl.php is the main skeleton one. Start copying content from your html template into that file, replacing dummy content with placeholders (which you can find here.
Make sure caching is off, and you can refresh to see the changes.
If you provide me image if your theme, I could tell you some common plan for that.
Thanks for image.
my advices are
I suggest not realy zen theme implementation, because it suggest just to change css. and you already have html and css that was done not in drupal way.
Install any theme to your sites/all/themes. I will use for example zen theme. So path will be sites/all/themes/zen
Copy files from sites/all/themes/zen/zen sub-theme to sites/all/themes/zen/mytheme
Rename sites/all/themes/zen/mytheme/zen.info to sites/all/themes/zen/mytheme/mytheme.info
Change theme name in mytheme.info
Copy all your css and js files to sites/all/themes/zen/mytheme (better to create subdirs for css and js)
Remove zen default zen css files
stylesheets[all][] = html-elements.css
stylesheets[all][] = tabs.css
stylesheets[all][] = messages.css
stylesheets[all][] = block-editing.css
stylesheets[all][] = wireframes.css
stylesheets[all][] = zen.css
stylesheets[print][] = print.css
Add your css files to mytheme.info. Using this construction
stylesheets[all][] = mycss.css
Add your js files to mytheme.info. Using this construction
scripts[] = myjs.js
More info about theme.info file look here http://drupal.org/node/171205
Look at this image
This is how I think better to split page.
Menu under header looks like primary menu. To theme them add
function mytheme_menu_links ($items, $type = 'free') {
if (!empty($items)) {
foreach ($items as $index => $link) {
$output = l($link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment']); /* insert your html*/
}
return $output;
}
Right block looks like block. So check block.tpl.php and block theming manual http://drupal.org/node/104319
Content area theming depends of what we are showing as content. Usually it is view or node.
so views = http://drupal.org/node/352970
node = http://drupal.org/node/11816
All other html place into page.tpl.php. But you should do this befor theming blocks, menu or content areas.
http://drupal.org/node/11812
There is no automatic way to convert your HTML to drupal theme. Easiest way to create your own drupal theme is to start with Zen theme then customizing the CSS.
Here's a link to Zen theme
http://drupal.org/project/zen
There's no quick easy solution. I would suggest reading the documentation for theming at Drupal.org. After getting familiar with that information, hit up the Tools, best practices and conventions section specific to theming.
When it comes time to do the conversion from HTML to Drupal, I think you will find Firebug or the development tools of Chrome to be indispensable, inspect element in either tool will be very helpful.
I would recommend to avoid the zen theme (which is great, of course) if you already have your own HTML template. It's 10 minutes job:
Create your theme.info file as per drupal.org/node/171205
Now create you page.tpl.php file. Just rename your HTML template to this name. Put these in your header (replace actual link tags for css, js...):
<?php print $head; ?>
<?php print $styles; ?>
<?php print $scripts; ?>
Now use the variables $menu, $left, $right, $content, etc... where you want to put the appropriate page segments. Do not forget to put this
<?php if ($tabs): print '<div class="tabs">'.$tabs.'</div>'; endif; ?>
<?php if ($help) { ?><div class="help"><?php print $help ?></div><?php } ?>
<?php if ($messages) { ?><div class="messages"><?php print $messages ?></div><?php } ?>
above the content, so you will get the tabs, help and messages as well.
Style it. That's it. You can have a look at this article, however it is in slovak language. But from the code pieces it should be quite clear what is going on, if not, use the Google Translate to get more familiar.
Good luck!
Related
Title says it really. Basic pages created in Drupal don’t seem to use the page.tpl.php file as a template.
If I edit the html.tpl.php file, those changes apply to every page, and it causes errors when I load a basic page.
I have also tried to copy the page.tpl.php file and name it page—basic-page.tpl.php to no avail.
Any idea what’s going on?
Also, how do I go about changing the page_top variable to include more content?
Lastly, the default page.tpl.php file has $page variables and things like $page_top and the like.
How would I call the title from the page only and the body text of a page only?
I’m using Drupal 7 and a custom sub theme.
The aforementioned files are in the template folder of the theme and I did clear caches when I added them.
Add $conf['theme_debug'] = TRUE; in settings.php and clear cache, reload page and check view source.
It will display the template file suggestions.
page.tpl.php file common for all pages. Just print anything to the tpl and run any node of basic page as well as other content type page and check if its working or not. If page.tpl.php not working for basic page only, then check your template.php file.
For print a page title just need to use following code:
<?php print $title; ?>
For print body text you need to use following:
<?php print render($page['content']); ?>
This may depend on the theme you are using. But I guess you are actually meaning page--page.tpl.php (double dashes). Which will be taken into account after you added the following snippet to your theme's template.php. Replace MYTHEME with your theme's machine name.
function MYTHEME_preprocess_page(&$variables) {
if (isset($variables['node']->type)) {
// If the content type's machine name is "my_machine_name" the file
// name will be "page--my-machine-name.tpl.php".
$variables['theme_hook_suggestions'][] = 'page__' . $variables['node']->type; // (double underscores)
}
}
See Template (theme hook) suggestions, where I also got above snippet from.
active theme debug for inspecting the template source and you get a different suggestions to user it (just avoid using node/nid).
commend drush to enable theme debug drush vset theme_debug 1
I have looked at several themes, and I see that "the loop" often works something like this:
while (have_posts()) {
the_post();
get_template_part('content');
}
The code that I developed for my theme looks like the following:
while (have_posts()) {
the_post();
the_content();
}
My code works as well, and it was something I came up with before I looked at the code for the other themes. I understand that there must be a reason why get_template_part('content') is used, rather than the_content(). I think the reason has something to do with the ability to customize things in a child theme, but I have scrutinized the documentation and the WordPress code, and I can't really figure out what the difference is exactly.
So what is the advantages of using get_template_part('content') overthe_content()?
get_template_part('content') & the_content() both are very different thing for use.
the_content() -> this will directly take only content of the editor area of your page from admin to front.
get_template_part('content') -> this will call to a file named content.php in your theme folder & take out put from that file, this file may can include html tags too after & before content of editor area.
in general case for all theme content.php has basic output code of editor, but when you are using any custom template then you may can use the_content() for easiness.
I have a file called page--advertsindex.tpl.php.. Now what i want to do is display that page inside the content region of page.tpl.php..
page--advertsindex.tpl.php contains the HTML which need's to be rendered in the content region of page.tpl but what it does currently when i navigate to my_drupal_site/advertsindex it only show's the html of page--advertsindex, not the page.tpl.php file and the page--advertsindex in the content region..
How can i do this? or is there a different way to achieve my goal?
Any page--<identifier>.tpl.php will be used instead of page.tpl.php for the url /identifier. That is by design and the entire purpose of this system. This can be extended for deeper paths too: page--foo-bar-baz.tpl.php for /foo/bar/baz.
If you want certain content to appear on /identifier, you have two options: Conditionally include the content or copy the content. What to choose depends on your situation.
Conditionally include: inside page.tpl.php:
<div class="footer">
<?php if (arg(0) == "advertsindex"): ?>
<?php print theme("advertsindex_disclaimer"); ?>
<?php endif; ?>
</div>
Overrides: introduce a page--advertsindex.tpl.php:
<div id="content">
<?php print $content ?>
</div>
When to choose what:
Only use conditional includes or conditional rendering when:
The content to be included or excluded is small and shared. Patterns like `[large 20+ line of frontpage HTML][normal HTML] are very bad.
The content to be included needs all sorts of fancy new variables pulled in. Patterns like are really bad. Drupals theme system is push (theme gets variables from modules) and never pull (theme requests parameters at modules).
In all other cases you'd use the overrides. And yes, that will include a lot of duplication, but that is by design and accepted as the default practice in Drupal. To avoid having to modify some HTML in 20+ files, "split" or "copy" them as late as possible.
A rule of thumb is that a conditional should be a few lines only and never require variables that are not available in the parent.
If advertsindex is would be one of your content type then you have to create node--advertsindex.tpl.php file instead of page--advertsindex.tpl.php. Or If you wont to display some content in the page.tpl.php page, then it is better to copy all code of page.tpl.php into YOUR-Custom_page.tpl.php and put your code inside the content section of YOUR-Custom_page.tpl.php.
I think it helps.
I have been trying to make my website on Wordpress. I am using Brave Zeenat as my primary and Grido as my blog theme.
I have read many tutorials in places, which discuss how to apply a customized flavour of the main theme on a static page, e.g. Blog. However, the main theme I am using does not appeal to me as a blog theme at all, so I wanted to do something entirely different, so I have tried two methods.
First, I tried to just create a page named Blog and force it to take a theme of my choice using the Page Theme plugin. That worked instantly, but the blog page is empty and would not accept articles of certain categories by default like this.
Second, I tried to not use any plugin at all, and use a custom PHP file instead, which sets some loops and calls a theme. This file blog.php had to be in the main theme directory, otherwise it would not be applicable as a template from the page settings in Wordpress dash.
So I put it with my main theme, but call to load the other theme, like this:
<?php
/*
Template Name: Blog
*/
$paged = get_query_var('paged');
query_posts('cat=0&paged='.$paged);
global $more;
$more = 0;
load_template(WP_CONTENT_DIR . '/themes/grido_v1.0.1/index.php');
?>
Eventually I only want to see category no.9, but for now, I left it as 0, which should display all categories. But when I run this with Page Theme plugin disabled, I get this error: Fatal error: Call to undefined function themify_get() in /var/sites/v/visualdeceptions.info/public_html/wp-content/themes/grido_v1.0.1/index.php on line 10.
Now, although this is a themify error, I am sure if I try to use other premium themes as well, I will encounter very similar errors, because I have only set a custom php file, and no style, header, footer, etc. But I am not sure how to do it.
Try to add getheader() and getfooter() in the code
<?php
/*
Template Name: Blog
*/
get_header(); //HERE
$paged = get_query_var('paged');
query_posts('cat=0&paged='.$paged);
global $more;
$more = 0;
load_template(WP_CONTENT_DIR . '/themes/grido_v1.0.1/index.php');
get_footer(); //HERE
?>
I am trying to accomplish the following. I need to use Drupal 6 as a project requirement, but I want to use it with my own HTML and CSS stylesheets for each node/view/panel etc.
The problem is, whatever the theme, I always found that Drupal applies to my HTML content both my CSS stylesheets and the CSS related to the theme chosen. I have also tried, without success, using the stylestripper module (installed in sites/all/modules). No matter what I do, additional CSS stylesheets are applied to my pages, completely destroying my layout.
What is the proper way to achieve this? Why stylestripper does not work at all? Is there a completely blank theme available? I have tried basic, mothership, zen etc, but I always see additional CSS stylesheets applied to my pages.
This is driving me crazy, Drupal was chosen by someone else for its flexibility.
Thank you in advance.
<?php
/**
* Helper function to allow easy CSS excludes + includes
*/
function _phptemplate_get_css($exclude = array(), $include = array()){
$css = drupal_add_css();
foreach ($css['all']['module'] as $k => $path) {
$file = substr($k, strrpos($k, '/') + 1);
if (in_array($file, $exclude)){
unset($css['all']['module'][$k]);
}
}
foreach ($include as $file){
$css['all']['theme'][path_to_theme() .'/'. $file] = true;
}
return drupal_get_css($css);
?>
Read more at drupal.org.
Update:
The proper place to put this function, is in the template.php file of your theme. Actually in your case you need to pass an array of css filenames which you want to exclude.
The call to drupal_add_css() with no arguments passed, will provide $css with an array of CSS files which are going to be attached to your theme. So this is the right time to get in!
As you see, In the first foreach loop we simply seek the $css array for filenames which are existed in the passed $exclude array, for style deletion. And we do the same job in the second loop for style insertion. And at the end of this, we return a themed representation of all styles that should be attached to the theme making use of drupal_get_css() function. (maybe nothing in your case)
Well, Where to call this function? You can call this helper function in _phptemplate_variables() for D5 or YOUR_THEME_preprocess() for D6. As we see this in action for D6 (untested):
function YOUR_THEME_preprocess(&$vars, $hook){
// Stylesheet filenames to be excluded.
$css_exclude_list = array(
'lightbox.css',
'lightbox_lite.css',
);
// Making use of previously defined helper function.
$vars['styles'] = _phptemplate_get_css($css_exclude_list);
}
I'm sure you know how to exclude 'em all ;)
If you define CSS and/or JavaScript files in your theme's .info file using filenames that match the core files then you override them, and if your overrides don't exist then they're not included.
See the .info file for the Tao theme for an example
I don't this will work but i think just remove the following line in your theme's page.tpl.php
<?php echo $styles ?>
and then drupal will not any of its own styles..
this may be work for you.
Nitz