I am beginner to Drupal-8, I don't know how to create custom template file for particular design for particular page.
For Example,
If I have created bellow pages in Drupal-8 and I want each of the page's custom template,
Like :
Home
About Us
Services
Contact Us
So for this how can I create custom template? Please anyone help me out to how can I achieve this?
Heyo!
So, Drupal page templating is managed through TWIG templates in your theme. You should first create a custom theme, which you can do following this guide:
https://www.drupal.org/docs/8/theming
Once you have a theme, you can create .twig files that will provide you with the means to control the html structure of the pages. Specific instructions are in this guide here:
https://www.drupal.org/docs/8/theming/twig/working-with-twig-templates
For example, creating a custom front page involves creating this file page--front.html.twig in your /templates folder. Different pages will require ovverides based on their name or node which is detailed in the above guide. However, it most likely is best practice to use a page.html.twig file to set a default style for the pages of your site and not have custom overrides for each node.
If you're new to twig, here's a link to twig tutorials. It's very simple and nice-and-easy to use!
https://symfonycasts.com/screencast/twig/basics
Drupal Website Design is Theme Based. There are plenty of themes to install in the Drupal.org. Seeing the particular theming documentation you can know how to customise your design.
You can look into some theming tutorials available in youtube also.
I am working on a drupal website that has a theme installed to it.
I would like to set the Front/Home page of the website to a .html.twig template I have in a custom module I am busy working on.
How would I go about doing this? I have done some googling and it likes like the answer lies somewhere with page--front.html.twig, but I am not sure where to go from here.
Inside my themeFolder/templates there are page--front.html.twig & page.html.twig
I have tried creating my own page--front.html.twig and storing it inside myModule/templates but this did not help me.
Also, how would I go about applying .html.twig templates to different regions of my website?
Any advice would be greatly appreciated
Enable debug and check which template is using in front page. To enable the debug go to sites/default/development.services.yml
You will need to locate core/modules/system/templates/page.html.twig file. This is a base page template that you can extend. Copy this file into your theme templates folder (Look for tpl or templates folder - it depends on the theme you are using). Rename this file to page--front.html.twig and finally flush caches for the change to take effect. This can be done by executing drush cr in your terminal or in the UI (admin/config/development/performance).
If you are planning to work on custom layout for your homepage I would suggest creating a dedicated content type (for example Landing page) and setting up your layout with the help of Paragraphs module. This would allow you to avoid hardcoding functionality in you template files.
Normally, I would create the file:
single-{post-type}.php
header-{template}.php
page-{template}.php...
in my folder theme.
But I want to all template files into one folder "templates", What is the solution, somebody can help me?
There are many ways to do this. Perhaps one of the most common is to use get_template_part().
Also, it's worth noting that WordPress will search all sub-directories for page templates, by default, since WordPress 3.4. This only refers to custom page templates, however, and does not include specialized page templates.
I'm trying to get clean output of fields in order to obtain semantic code.
In the default template generated by the Views module the snippet which outputs the field is:
<?php print $field->content; ?>
But a lot of markup is generated along with the value of the field.
Is there a way to get the field value directly?
I'm using Drupal 7, It seems like the old method:
$fields['field_name']->content;
is not functioning anymore.
Thank you in advance for your help.
Semantic views is the answer. But it is still in dev for Drupal 7.
Semantic Views is a great module which gives a great control over the views output markup. But I realized that my problem was related to the field markup.
I found a video tutorial. It helped me a lot and hope could help others too.
Theming Fields video tutorial.
To customize output of Views you'll need to edit appropriate Views templates. You can find templates in modules/views/theme directory. Copy the ones you need to your theme directory and edit to your liking. You can have custom templates for different views, check out "Advanced->Theme: Information" in View options to see what file names are recognized by Views module. You might need original view template for customized template to work. Be sure to press "Rescan template files" button in "Theme: Information" after adding new custom view templates or removing them.
I am trying to migrate my site to Drupal and I am confused about themes and templates. The look and feel of the pages in my current site are completely controlled by template files and CSS. How does it work in Drupal?
In drupal, a theme handles the appearance of the site and a template handles how your content is rendered.
Think of it like this: the template is used to render the content, then the theme is applied on that content.
Edit: So, your css files live with the theme in drupal, and have nothing to do with the templates.
In Drupal, a "theme" is just a special type of plugin that bundles together any number of templates (to control how a given piece of data gets rendered to HTML), CSS, JS files, images, and so on.
So, there is a single "template" for your oveevral page markup, a single "template" for how a sidebar block is rendered as HTML, and so on. All of them, bundled together and named, are referred to as a theme.
Look at it this way: It's possible to create a theme that has no templates. Such a theme would have CSS files that override drupal's default CSS files. Using such a theme would create a website that looks almost exactly like Drupal's default site, except it would have different colors, fonts and so on.
But if you want to change the positions of items on the page, what kinds of items are on the page and so on, you have to override the default templates by adding some of your own to your theme. These new templates let you alter what information Drupal displays and what kind of HTML Drupal will use to display it.
For example, say I want to clone StackOverflow, but I want to do it with Drupal. First thing I would do is create a new content type (call it a "question") that is just like a story but has extra fields to track voting and so on. Drupal's default templates won't know about these extra fields, so they won't display them.
So, what I do is I go into my theme and I add a new node.tpl.php file. This new template is just like the standard one, except I can add code that says "if this node is of type 'question', insert the voting gadget to the left of the body."
Does this help?
A theme is made up of a collection of template files. block.tpl.php, node.tpl.php, page.tpl.php are all template files which when combined with your CSS, JS and images produces a theme. In addition a themes can be inherited. A theme can be created with just CSS and no additional template files by inheriting from an existing theme, in which case the template files from the parent theme are used.
Another way to look at it is a theme is what you see and the template files are responsible for generating the markup.
I hope this makes it a little bit clearer.
I'm confused...
The first answer says that templates and themes have nothing to do with each other, while the second one says themes are just collections of answers.
Which one is right?
Drupal is having a template based theming system. You can define your own regions in page and can arrange the content according to that . There are some default template file such as page.tpl ,block.tpl ,node.tpl which are displaying different kind of contents .
You can write your own template file as needed for eg if you need to alter the display of user registration form or login page you can create a tpl file for that and have to redirect the data to that tpl file. You can add the css or js to these templates using drupals apis. This redirection has to be done in the themes template.php file
A theme is comprised of css, js, images, and template files. Each theme may include multiple template files.
Additionally, themes can be inherited, and a subtheme's template files could override the template files of its parent theme.