0

While trying to convert a HTML responsive theme to Drupal 7 theme, it's responsive is not working!!!

Can anyone help me with this to sort the issue? We have copied Bartik theme and removed the CSS and pasted the HTML5 theme CSS and JS that we created. changed the index.tpl into page --front.tpl.php and copied it into the template folder. In the page-- front.tpl.php we give all the path for CSS and JS as: 

<?php $path="http://".$_SERVER['HTTP_HOST']; ?>
<link rel="icon" href="$path.">
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="<?php echo $path.base_path().path_to_theme()?>/css/style.css">.

"As specified we gave path for all CSS and JS files, but don't know where we went wrong!!"

Improve this question

3 Answers 3

Reset to default
1

To create or convert a Drupal 7 responsive theme, it is not a good idea to start with stripping down and modifying a fully developed, non-responsive theme such as Bartik.

Instead you start out with a responsive starter theme or base theme framework, where the css is already reset for you and where the the framework is already prepared for you to add your own classes to construct whatever look and feel you're after. Basically, you install your framework, then create a sub-theme, and use that you build your own responsive theme.

Good foundations for this is IMHO Zen, Omega or AdaptiveTheme (suggested by @Kojo in a comment), but many other alternatives exist.

Improve this answer
1
  • And from the most complete responsive theme frameworks I would name also adaptive theme :)
    – Kojo
    Commented Mar 11, 2014 at 12:37
0

For converting HTML templates into Drupal templates you have to follow the given steps :

Starting your page

If you're using Drupal 5:

" xml:lang="">

If you're using Drupal 6:

language ?>" xml:lang="language ?>" dir="dir ?>">

If you're using Drupal 7:

If you are using Drupal 7, your page.tpl.php file starts after the tag and end before the tag, so you do not need to worry about the doctype, html, or head tags. If you'd like to override these, copy the html.tpl.php file from your modules/system folder and make whatever changes you'd like.

The section of your site

In the above section given how we can convert HTML template into Drupal theme templates please refer this link for more info https://drupal.org/node/313510

Improve this answer
6
  • Thank you for your response sir..we need to know the how to delete or remove the css file permenanently from a theme and add our created css into the theme and where to add this code i.e in which file?as stated below we used hook_css_alter to unset that css ,but its not working...function will_css_alter(&$css) { if () { //Unset CSS file if the current page is your custom page $path = drupal_get_path('theme', 'will'); unset($css[$path . '/css/main.css']); } } "As we are beginners to drupal and trying to create a responsive single page website"
    – Niji Monachan
    Commented Mar 10, 2014 at 7:34
  • For adding css into theme you can use theme .info file and add css here if you want to replace any css just add the css into info file with same name whatever you want to replace ex. stylesheets[all][] = theStyle.css into info file and if you want to add css dynamically you can use function drupal_add_css() see drupal.org/node/171209 and api.drupal.org/api/drupal/includes%21common.inc/function/…
    – user27114
    Commented Mar 10, 2014 at 8:05
  • Even after doing that the responsive is not working ,responsive is set for first page,but rest 4 pages there's no effect,without getting responsive right we can't proceed further.Any idea why is it not working for other 4 pages!!
    – Niji Monachan
    Commented Mar 10, 2014 at 8:10
  • Can you please describe what version of Drupal you are using and what procedure you have followed for converting html templates to drupal theme templates?
    – user27114
    Commented Mar 10, 2014 at 8:14
  • we are using drupal 7 and for converting html to drupal we first renamed the index.html as page--front.tpl.php and we removed the css of the existing theme using hook_css_alter in template.php.Next we copied the css and js files from the created html folder and in .info file we added all the css and js files ..after that in the page--front.tpl.php we added our css as: <?php $path="http://".$_SERVER['HTTP_HOST']; ?><link rel="stylesheet" href="<?php echo $path.base_path().path_to_theme() ?>/css/style.css" > the issue is header part has become responsive but other pages stil remain unaffected
    – Niji Monachan
    Commented Mar 10, 2014 at 8:25
0

You can probably start with whatever theme you like, certainly some require more work then others if you're looking for a sensible set of base styles and a nice grid system.

However, I suspect, your main issue is the them you're starting with is missing the meta tag to set the zoom level on a device. If you're checking this on a computer's browser then it's something in the css. What does dev tools tell you? Something has to have a fixed width applied to it if it is overflowing your desktop browser window.

Improve this answer
1
  • We added meta tags earlier as stated below: <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> ....Even after using this the font sizes is getting reduced but in case of mobile devices the width is not getting adjusted.
    – Niji Monachan
    Commented Mar 12, 2014 at 6:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.