By olyma on

Hello,

I am very new to Drupal and not an advanced programmer, so I am working on creating an extremely simple Drupal 8 Twig theme, but I keep getting error messages in the admin area, and after creating a node with some content, none of the content is showing up. The one thing that is working is that Drupal is inserting code into the “head” area, but nothing else seems to be working other than that. Here’s what I have so far:

My theme consists of four very basic files: my-theme.info.yml, html.html.twig, screenshot.png, and css/layout.css. I’ve plopped them in a folder titled, “bluejay” and placed it in the “themes” directory of my test site.

For the file “bluejay.info.yml” I have the following code:

name: Bluejay
type: theme
description: This is my super simple admin theme.
package: Bluejay
version: 0.1
core: 8.x
stylesheets:
  all:
    - css/layout.css
regions:
    header: 'Header'
    content: 'Content'
    sidebar_first: 'Sidebar first'
    footer: 'Footer'
settings:
    shortcut_module_link: '0'
engine: twig
screenshot: screenshot.png

For the file “html.html.twig” I have:

{#
/**
* @file
* Default theme implementation to display an html page.
*/
#}
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
{{ head }}
</head>
<body bgcolor="black">
<table border=3 cols=3 width="990" height="100%" cellspacing="3" cellpadding="3" bgcolor="white">

<tr>
<td style="padding:11px;" align=left valign=top colspan="2" height="40" bgcolor="lightblue">
{{ header }}
</td>
</tr>

<tr>
<td style="padding:11px;" align=left valign=top width="160" bgcolor="burlywood">
{{ sidebar_first }}
</td>
<td style="padding:11px;" align=left valign=top width="830" bgcolor="#DDD1BA">
{{ content }}
</td>
</tr>

<tr>
<td style="padding:5px 11px;" align=left valign=center colspan="3" height="35" bgcolor="#603F3C">
{{ footer }}
</td>
</tr>

</table>
</body>
</html>

The theme is activated and displays the theme when I go outside of the admin pages, but no content, menus, or site title are displayed. And in the Blocks administration area, only the “Sidebar first” is displayed, with only the standard Tools, Login, and Admin, but even those are not displayed in the “Sidebar first” block when the theme loads. Also, by looking at some discussions, it looks like maybe it’s possible to display the content, title, etc. without using blocks in my theme -- which is actually what I’m eventually seeking to do too, if it is possible with Twig.

What should I do differently?

⋅ Categories: Drupal 8.x

Comments

KSiS’s picture

KSiS commented

http://savepic.org/4104277.png (i don't know how to upload screenshots on this site)
I tried install drupal 8 on local machine, but i have some issue.
Before start installation, i created dir sites/default/files and created file sites/default/settings.php.
This is critical bugs.

olyma’s picture

olyma commented

I don’t usually install on a local machine, so I’m not sure what your settings ought to be, nor do I know much of the how to report a bug, but it’s my understanding that Drupal 8 has a new feature in the initial setup in which it will create a database for you. Your error screen image appeared to be due to a problem with Drupal setting up a database. I didn’t go that route, I pre-setup a database. You might try that, and then to enter the database info to progress through the installation.

You also might try using a different browser, the setup was so messed up in the first browser I used that I ended up doing the setup on a different browser. Anyway, it’s still in alpha, so I wasn’t counting on everything working perfectly, you may have to do some fiddling.

Also, with D8, unlike previous versions, it is my understanding that you don’t need to set up any files before running the installation pages (as you said you had done). So perhaps try omitting that step, too.

If you are seeking to report a bug, I’m not quite sure where to report that, but this specific forum area I don’t believe is it.

olyma’s picture

olyma commented

About the issues I originally wrote the post above about: I finally got some content to display!!!! Yay! I searched the Drupal directory, found the Stark files for html.html.twig, node.html.twig, and page.html.twig, copied them to my theme directory and then have been shaving off superfluous stuff. I was hoping to avoid abstraction as much as possible, but it looks like I may have to wade through just a bit of it.

The structure so far appears to be: node.html.twig, goes inside page.html.twig, which then goes inside html.html.twig!

My central problems now are relegating everything to a proper locale on the page. Since there haven’t been any direct replies to my original post, I suppose I’ll just keep posting back again on this thread until I’ve got my super simple D8 theme finally working! Plus, I’ll report my Twig code that seems to work.

olyma’s picture

olyma commented

Okay, I’ve made some major progress on my little D8 Twig theme. Here’s what I’ve got that works: I’ve stripped down the bluejay.info.yml file to some barest bones:

name: Bluejay
type: theme
description: This is my super simple theme.
package: Bluejay
version: 0.1
core: 8.x
regions:
    content: 'Content'
    sidebar_first: 'Sidebar first'
settings:
    shortcut_module_link: '0'
engine: twig
screenshot: screenshot.png

As you can see, I’ve dropped the header and footer, since I’ve hardcoded them into the theme. Also, because the theme is so simple, I’ve dropped the:

stylesheets:
  all:
    - css/layout.css

from the file, since I’ve decided to hardcode the stylesheet link into the theme, too. Also, all styling is done in the theme itself, and thus the css file is actually technically empty — but if I wanted to add some css, the option is still there to put it right into the css file.

For the html.html.twig I have:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
  <head>
    <title>{{ head_title }}</title>
    <link rel="stylesheet" href="../themes/bluejay/css/layout.css" />
  </head>
  <body bgcolor="black">

    {{ page }}

  </body>
</html>

The code above, simply, creates the html page, drops in the page title, and pulls in {{ page }} – being the contents of page.html.twig. The hardcoded css link works without bringing in any of the default stuff, so I can style everything any way I want. For my page.html.twig I have:

<table border=3 cols=2 width="990" height="100%" cellspacing="3" cellpadding="11" bgcolor="white">

<tr>
<td align=left valign=top colspan="2" height="40" bgcolor="lightblue">
    <a href="{{ front_page }}" target="_top">My Website! :)</a>
</td>
</tr>

<tr>
<td align=left valign=top width="160" bgcolor="burlywood">
    {{ page.sidebar_first }}
</td>

<td align=left valign=top width="830" bgcolor="#DDD1BA">
    {{ page.content }}
</td>
</tr>

<tr>
<td align=left valign=center colspan="2" height="35" bgcolor="#603F3C">
    My Footer! :)
</td>
</tr>

</table>

Above, as one can see, I have left out {{ page.header }} and {{ page.footer }} simply because I’ve typed the header and footer info directly into the file. Also, if one really desired to simplify and paste in one’s own admin links — if you remove the Tools, User login, and Administration from the Structure > Block in the Admin area, you could then add the following bit of code after {{ page.sidebar_first }} to make administering even less abstracted:

{% if logged_in %}
&bull; <a href="../admin" target="_blank">Administration</a><br>
&bull; <a href="../user" target="_blank">My Account</a><br>
&bull; <a href="../user/logout" target="_blank">Logout</a>
{% else %}
&bull; <a href="../user/login" target="_blank">Login</a>
{% endif %}

With the above, one can see “commands” at work in twig! :) It’s very simple, but gets it done. And lastly, for the node.html.twig file, I have:

    <p><font size="+2" color="green"><b>{{ label }}</b></font></p>
    {{ content.body }}

The above is really short, but it puts in the title of the contents using {{ label }}, and the contents are as {{ content.body }}. If one wanted to allow for comments, after {{ content.body }}, add:

  {% if content.comments %}
    {{ content.comments }}
  {% endif %}

Also if one wanted, one could simply use {{ content }} alone, without the “if comments” parts, and the system would output inclusion of the comments in the theme when they were enabled in the admin areas. {{ content.body }} itself grabs precisely the body text alone and puts it in.

Also, I’m using a super old style of coding for this and leaving out many heaping tons of functionality that could be added, but it gets the job done for an extremely rudimentary site running on Drupal 8. Twig really simplifies things, too, which I am very happy about. As well, finally going through these steps to make such a rudimentary site makes Drupal feel far less intimidating to me!!!! I’m glad I’m putting myself to it. As I’ve studied Drupal literature, it seemed like I had to learn so many technical things (like GIT, Drush, Views, Sass, PHP, Javascript, JQuery, JSON, RESTful, etc.). But now I know I can build a site in Drupal 8 without learning any of that. Yay!

Probably next is getting the charset put in and working.

olyma’s picture

olyma commented

My latest goal was getting character sets to work in a D8 theme. What a chore, I tried a mountain of things, and even still, I’m a bit stuck.

Generally, I needed to do this because under the default format of UTF-8 in the theme code, it would spit out weird characters whenever I had stuff like: “ ” ‘ ’ – — •. Each one of these isn’t really box standard on a keyboard; they are what many would call curly quotes or special characters that under some conditions need special html to code them such as &ldquo; &rdquo; &lsquo; &rsquo; &ndash; &mdash; &bull;. For me, I have my text editor actually macroed to spit these out instead of the html special code versions of these. I have eventually gotten the character set for the page to change, but then the content which Drupal/Twig spits out still produces weird characters.

To get the character set though for the page to change, I had to create a file titled: bluejay.theme -- in which sits the functions called for a theme. And then, in that file I placed the following bit of code:

<?php
function bluejay_preprocess_html(&$variables) {
  drupal_add_http_header('Content-Type', 'text/html; charset=iso-8859-1');
}

With the above, special characters in the theme itself come out perfectly, and the browser tells me now that the page is in iso-8859-1 format, but now such characters which are output as content now appear as weird characters. Getting them both to display correctly together is the my theme goal now.