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.
Related
I'm new to template designs and I'm trying out altering some things in the parent theme from the child theme.
My problem is that there are some files that are not recognized, for example the style.css from the child theme does work for me, but there are other files that I need to load in the child theme instead of the parent theme that I am not able to get them to work.
I am trying to get the /inc/core/shortcodes.php file recognized in the child theme, as there is an html <h4> tag that I want to replace with an <h3>.
The file structure is as follows:
Any help would be appreciated, best regards.
Child theme implementation isn't a universal thing in WordPress - each theme implements it in its own way (some very poorly), and not everything is necessarily overwritable through a child theme. Usually, only actual template files are overwritable. The specific file you're referencing (shortcodes.php) likely contains shortcodes added by the theme, not template data, so wouldn't generally be overwritable in that way.
The better way to handle what I suspect you're trying to accomplish (modifying how a specific shortcode works) would either be to use hooks in the shortcode (assuming the developer added them) to manipulate the shortcode output, or copy the shortcode(s) you want to modify into a file in your child theme, change the name (and function name) of the shortcode, and load it from the functions.php file. This also gets more complicated if you're using a theme with a page builder (Gutenberg, Visual Composer, Elementor, Cornerstone, Avia, Avada, Beaver Builder, etc). Most page builders use some form of shortcode under the hood to actually generate the displayed data. If your theme uses a page builder like this, and the shortcode in question has a corresponding element in the page builder, you'll also have to add a button for your modified version (or insert is using the "HTML" or "Code" element) to actually use it - the existing button wouldn't incorporate your changed code. All of the page builders mentioned above can be (and have been) extended in this way.
I'm a WordPress developer who's been tasked to create a temporary one-pager to a Drupal site. The client would like to have a simple front page with a logo and 4 external links until their new site is ready. Normally I'd just make a simple index.html page with some CSS and call it a day. But in this case they need some of the sub-pages from the Drupal site to continue to work.
Had it been a WordPress site, I would have just created a new template file and a new page inside WordPress, and made that the front page. But as I have zero experience with Drupal, I don't know if you can do the same thing here.
What is the easiest (quickest) way to make a simple splash-page as the front page, while having the rest of the drupal site continue to work? The splash-page should ignore all CSS and JS from the original theme — preferably have a completely independant section fromt the rest of the site.
In Drupal 7 you have few "levels" of templates. First you have "most outer" template html.tpl.php It contains html head and it is usually common for all pages.
Then inside that html.tpl.php you'll include page.tpl.php. That one should again contain some common page elements, as header and footer, but again, if your design requires that, you can have more than one page template.
Page template will include node template. In drupal you have 2 basic content (node) types but you can create many more of them. Basically for every different page layout you can create new content type (but there also are lot of different ways to achieve the same thing).
Basically you should create new content type called i.e. "splash" (machine name!). Add fields to it if they need to be back-end editable.
Then you should create new template file for your content type. Name matters, so you should call it node--splash.tpl.php . You can find and copy to your theme existing node.tpl.php and change it to your needs.
Keep in mind that when ever you add/remove new template file you have to clear the cache so drupal would scan theme directory, notice and start using new templates.
And if you need also different page template for you page you'll have to put some code into you tamplate.php file:
https://www.digett.com/insights/overriding-page-templates-content-type-drupal-7
Drupal template engine design an specific file name for override front page.
You can create the file html--front.tpl.php, and this will be used only for the front page without touch any other page. You can page here your custom HTML and reference css/js.
If the page you need share common styles with the rest of the site, I would recommend to instead override page--front.tpl.php which is basically the content of the page without the tags
For more information here is a link https://www.drupal.org/docs/7/theming/howto/customize-the-front-page-template
So I'm getting into theming in drupal 8. It's my first drupal version I have worked with. I know WordPress pretty good, and all programming languages.
Here's my question now:
Is it true when making a custom theme in drupal, you don't have to code that much?! I don't really understand, I've made my basic theme, added some twig files, modded them, ... but the most of my work is (/will be) in the block, view, structure, ... department. Am I doing something wrong?
I've been trying to catch up with reading tutorials, but this question isn't really answered anywhere...
For example, if I wanted to add a header image to my theme, I just have to make a custom content type and edit the view, block, ... to add this? No coding required?
Thanks for clearing this up for me!
Drupal uses kind of nested templates. Like most outer is "html" template, which contains page head, includes js/css files and similar. It also includes next inner level, called "page" template. It usually contains common elements for all pages, like header (logo, menu, language switcher...) and footer. Then yet inner is template file specific for every page. If page is a node then it's node template or if it's a view, then view template... You can also have more inner templates, i.e. for specific block...or field.
https://www.drupal.org/node/2354645
Of course if you have different content types or block you can also have different templates for every one of them. They are set by following naming convention. So if you name it correctly, clear the cache and Drupal will star using your template instead of default one. So you can, but you don't have to override default templates.
Also when you crate your theme you can start from scratch, but you can also inherit some existing theme and just override some files.
How to style existing module in drupal 6 for a specific view? where to place files? in the module directory or in the views dierectory. I just need to override the style of the node.
Thanks!
The second question: where do you place hook_form_alter functions? thanks!
To override the style of a node, the default templates suggestions allow you to create a node-[type].tpl.php file in your theme directory. The [type] is the name of a specific content type you are overriding or theming. For instance, you could create a custom template for "Page" nodes in a node-page.tpl.php file. If you need more flexibility, you can create custom "suggestions". See Working with template suggestions for more details.
When creating new template files, make sure your theme already contains the base template file (see the note at the top of the Core templates and suggestions page, for more detail). Also, be sure to clear your theme cache, in order for any new template files to be detected.
Views can be styled separately from the nodes they contain. Views allows for a variety of template files to be customized, depending on what level you need to customize (view as a whole, row styles, field styles, etc). For more details, click on the Edit tab of a view you'd like to theme, look under the Basic Settings section and next to Theme, click on Information.
Like other hook functions, implementations of hook_form_alter are placed in a .module file. If your module is called "customized" your customized_form_alter function would typically be found in a customized.module file, in a /customized folder, under /sites/all/modules.
I cannot change the css theme of my Drupal View. This is a screenshots of the settings:
http://dl.dropbox.com/u/72686/viewTheme.png
I've tried all buttons, I cannot save the new theme (BlueMarine) in the preferences. It is stuck on Zen (which is my front-end theme).
thanks
That dropdown in the image you link to is only showing you what the appropriate template files are in each theme. If you want advanced theming you could use something like http://drupal.org/project/themekey, or customise an existing theme.
What you see there is not a setting to change the theme of the view, but a tool to see what template files views can find and will use. You can use it to figure out what to name your template files you want to use for overrides. Views let you select which theme you want to see what template files will be used. The label also explains what it is used for very well: Theming infomation. It also states that
This section lists all the possible templates...