-1

Very new Drupal user and I'm building a theme for my site on Drupal 8, I've setup everything, the site works locally. Now I would like to know how do I make my regions look like the schema (see Image). What files do I edit and which values to add, edit. enter image description here

Edit: The theme is under construction, so now it has only 4 files: .info.yml, .libraries.yml, styles.css and page.html.twig.

Below their contents: page.html.twig:

    <div id="page">

  {% if page.headline %}
    <section id="headline">
    <div class= "container">
      {{ page.headline }}
    </div>
    </section> 
    {% endif %}

  <header id="header">
    <div class="container">
        {{ page.header }}
    </div>
  </header>

  {% if page.navigation %}
  <navigation id="navigation">
    <div class="container">
        {{page.navigation}}
    </div>
  </navigation>
  {%endif%}

  <section id="main">
    <div class="container">
        <div class="row">
            <div id="content" class="col-md-9 col-sm-9 col-xs-12">
                {{ page.content }}
            </div>
                {% if page.sidebar %}
            <aside id="sidebar" class="sidebar col-md-3 col-sm-3 col-xs-12">
                 {{ page.sidebar}}
            </aside>
                 {% endif %}
        </div>
    </div>
  </section>

  {% if page.footer %}
    <footer id="footer">
      <div class="container">
        {{ page.footer }}
      </div>
    </footer>
  {% endif %}
</div>

mytheme.info.yml:

name: MyTheme
type: theme
base theme: classy

Description: "Theme moderne et responsif pour Drupal 8"
package: custom
core: 8.x

regions:
      headline: headline
      header: header
      navigation: navigation
      content: content
      sidebar: sidebar
      footer: Footer

style.css :

global-styling: css: theme: includes/bootstrap/css/bootstrap.css: {} css/style.css: {}

The .libraries.yml file has nothing yet.

Improve this question
  • 1
    Hi and welcome. Please be aware that we do not provide tutorials or step-by-step instructions for achieving functionality from a description, screenshot or other website, as explained in the help center. Instead edit the question to include your attempt(s) to achieve the desired functionality and be as complete as possible. What have you tried so far? The more complete you are, the better we can formulate an answer. – Neograph734 Sep 12 '17 at 18:13
  • 1
    Be aware that we cannot see your site. Regions and their placement are often controlled via CSS. But without your template file and CSS files it is hard to tell what to change exactly. Could edit some more details into your question? – Neograph734 Sep 12 '17 at 18:18
  • 1
    There are a lot of different ways to control the properties of HTML with CSS, but we wouldn't get into them here as none of them are specific to Drupal. Fire up dev tools in a browser, inspect the markup, and write CSS to target the elements you want. I'm afraid we can't advise how to do that here, as I mentioned there's not really anything specific to Drupal about it, it's all HTML + CSS at the end of the day, and there's no single way to do it. – Clive♦ Sep 12 '17 at 18:31
  • 1
    @esQmo_ Opinion based was probably the wrong close reason, apologies, but I closed this when you just had a screenshot and a request to make an unknown site look that way....we can't really do anything with that, I'm sure you'll appreciate. With the extra information there's a much better chance, but I think you could probably provide some more details about what's wrong with your current attempt. Is it sort-of working? Not working at all? Are missing styles the problem? If so are all the styles you'd expect missing or just some of them? That sort of thing. – Clive♦ Sep 12 '17 at 18:50
  • 1
    I undeleted/reopened, feel free to remove it again if you prefer, but please do realise we're just employing the same quality control I'm sure you're used to seeing on the other SE sites you're an experienced user of. The question was just on hold to stop people giving wild guesses until the problem scope was narrowed down to something more easily addressable (and the downvote was an automatic one from the system, now also auto-removed) – Clive♦ Sep 12 '17 at 18:52
1
  1. You can edit that only by using CSS.
  2. You can add a theme like Boostrap that have predefined classes for that (and you only add the classes, like col-md-6), or you can add your classes in page.html.twig (you search the region in your template file, add a class to the wrapper and then define a size for it via CSS).
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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