Hi,

I have created a custom user template (user.html.twig) and added some CSS class for only that template to change the display format/layout only when the user check the profile details. I have added this template in Drupal/core/themes/bartik/templates. It seems to be working fine in the case when loading user profile page, but the other templates (contents / articles etc) got affected by this code change.

I would like to know, if there is any mechanism to change the layout only for the user.html.twig? Please note that I am working on Drupal 8.x version.

Thanks,

Comments

Jeff Burnz’s picture

First thing - don't hack core! You should not be doing anything in /core/, if you want to modify Bartik create a sub-theme, or copy it and rename stuff (lots of docs on creating sub-themes). Next time you update Drupal you will overwrite Bartik and your changes are gone - otherwise you are forever maintaining a hacked version of Drupal - not fun in the long run.

OK, you're actual issue. Do you have user pictures? Do you think it's the user picture stuff that is messing up the articles?

anoopmohan’s picture

Hi Jeff,

Thanks for the reply.

The current "user.html.twig" template in core/modules/user/templates/user.html.twig just displays all the content without any specific layout.

Code:


{% if content %}
{{- content -}}
{% endif %}

So, I have created a new custom template with same name "user.html.twig" and placed it in the location "/core/themes/bartik/templates/" and modified the code in it to add new layout for the page. Yes, I have a user picture which needs to be displayed along with user profile details.

Here I would like to know
1) If there is any alternate way to add a new layout for the user profile page (if editing the /core/ is not a proper way) ?
2) If there is any mechanism to change the layout only for a single template without affecting other templates?

Thanks,

Jeff Burnz’s picture

1) If there is any alternate way to add a new layout for the user profile page (if editing the /core/ is not a proper way) ?

I already answered this - create a sub-theme of bartik in /themes/

2) If there is any mechanism to change the layout only for a single template without affecting other templates?

Yes, template suggestions and overrides. I don't want to go further before one more question: can you paste in the output of the user template (the source code from your browser when viewing a user profile) and the output of an article (again, from the browser source) that is messed up, please use the code tags so it's properly formatted.

anoopmohan’s picture

Hi Jeff,

Please find the page source from browser below.

User profile page:

<!DOCTYPE html>
<html lang="en" dir="ltr" prefix="content: http://purl.org/rss/1.0/modules/content/  dc: http://purl.org/dc/terms/  foaf: http://xmlns.com/foaf/0.1/  og: http://ogp.me/ns#  rdfs: http://www.w3.org/2000/01/rdf-schema#  schema: http://schema.org/  sioc: http://rdfs.org/sioc/ns#  sioct: http://rdfs.org/sioc/types#  skos: http://www.w3.org/2004/02/skos/core#  xsd: http://www.w3.org/2001/XMLSchema# ">
  <head>
    <meta charset="utf-8" />
<meta name="Generator" content="Drupal 8 (https://www.drupal.org)" />
<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta about="/user/6" property="schema:name" content="qbuser2@gmail.com" lang="" />
<link rel="shortcut icon" href="/core/misc/favicon.ico" type="image/vnd.microsoft.icon" />

    <title>qbuser2@gmail.com | mysite</title>
    <link rel="stylesheet" href="/sites/default/files/css/css_P41bTW4UvXRjkHb-Vppk6Htny1gvZumPoAg2vZ-Scjc.css?oak8y3" media="all" />
<link rel="stylesheet" href="/sites/default/files/css/css_Va4zLdYXDM0x79wYfYIi_RSorpNS_xtrTcNUqq0psQA.css?oak8y3" media="screen" />
<link rel="stylesheet" href="/sites/default/files/css/css_rZEEECOlsyKegw6xWqXuC8Mr9XII3Zr48Lj0b5V6YNI.css?oak8y3" media="all" />
<link rel="stylesheet" href="/sites/default/files/css/css_8fj0DunKO36a8YkRDc2_XYSZkdrTDwy_xGAk1Um06ys.css?oak8y3" media="all" />
<link rel="stylesheet" href="/sites/default/files/css/css_Z5jMg7P_bjcW9iUzujI7oaechMyxQTUqZhHJ_aYSq04.css?oak8y3" media="print" />
<link rel="stylesheet" href="/sites/default/files/css/css_veOj8MygZ_O5oDPX2z3T-lQFhcpUx1diKXsydxKqBlY.css?oak8y3" media="all" />

    
<!--[if lte IE 8]>
<script src="/sites/default/files/js/js_VtafjXmRvoUgAzqzYTA3Wrjkx9wcWhjP0G4ZnnqRamA.js"></script>
<![endif]-->
<script src="/core/assets/vendor/modernizr/modernizr.min.js?v=3.3.1"></script>

  </head>
  <body class="layout-one-sidebar layout-sidebar-first user-logged-in path-user">
    <a href="#main-content" class="visually-hidden focusable skip-link">
      Skip to main content
    </a>
    <div id="toolbar-administration" role="group" aria-label="Site administration toolbar" class="toolbar">
  <nav id="toolbar-bar" role="navigation" aria-label="Toolbar items" class="toolbar-bar clearfix">
    <h2 class="visually-hidden">Toolbar items</h2>
                <div class="hidden home-toolbar-tab toolbar-tab">
        <a href="/" title="Return to site content" class="toolbar-icon toolbar-icon-escape-admin toolbar-item" data-toolbar-escape-admin>Back to site</a>
        <div><nav class="toolbar-lining clearfix" role="navigation"></nav></div>      </div>
                <div class="toolbar-tab">
        <a href="/admin" title="Admin menu" class="toolbar-icon toolbar-icon-menu trigger toolbar-item" data-drupal-subtrees="" id="toolbar-item-administration" data-toolbar-tray="toolbar-item-administration-tray" aria-owns="toolbar-item-administration-tray" role="button" aria-pressed="false">Manage</a>
        <div id="toolbar-item-administration-tray" data-toolbar-tray="toolbar-item-administration-tray" class="toolbar-tray"><nav class="toolbar-lining clearfix" role="navigation" aria-label="Administration menu"><h3 class="toolbar-tray-name visually-hidden">Administration menu</h3><div class="toolbar-menu-administration"><ul class="clearfix toolbar-menu"><li class="menu-item menu-item--collapsed"><a href="/admin/content" title="Find and manage content." id="toolbar-link-system-admin_content" class="toolbar-icon toolbar-icon-system-admin-content" data-drupal-link-system-path="admin/content">Content</a></li><li class="menu-item menu-item--collapsed"><a href="/admin/structure" title="Administer blocks, content types, menus, etc." id="toolbar-link-system-admin_structure" class="toolbar-icon toolbar-icon-system-admin-structure" data-drupal-link-system-path="admin/structure">Structure</a></li><li class="menu-item"><a href="/admin/appearance" title="Select and configure themes." id="toolbar-link-system-themes_page" class="toolbar-icon toolbar-icon-system-themes-page" data-drupal-link-system-path="admin/appearance">Appearance</a></li><li class="menu-item"><a href="/admin/modules" title="Add and enable modules to extend site functionality." id="toolbar-link-system-modules_list" class="toolbar-icon toolbar-icon-system-modules-list" data-drupal-link-system-path="admin/modules">Extend</a></li><li class="menu-item menu-item--collapsed"><a href="/admin/config" title="Administer settings." id="toolbar-link-system-admin_config" class="toolbar-icon toolbar-icon-system-admin-config" data-drupal-link-system-path="admin/config">Configuration</a></li><li class="menu-item menu-item--collapsed"><a href="/admin/group" title="Find and manage groups, group types and group settings." id="toolbar-link-entity-group-collection" class="toolbar-icon toolbar-icon-system-admin-group" data-drupal-link-system-path="admin/group">Groups</a></li><li class="menu-item"><a href="/admin/people" title="Manage user accounts, roles, and permissions." id="toolbar-link-entity-user-collection" class="toolbar-icon toolbar-icon-entity-user-collection" data-drupal-link-system-path="admin/people">People</a></li><li class="menu-item menu-item--collapsed"><a href="/admin/reports" title="View reports, updates, and errors." id="toolbar-link-system-admin_reports" class="toolbar-icon toolbar-icon-system-admin-reports" data-drupal-link-system-path="admin/reports">Reports</a></li><li class="menu-item"><a href="/admin/help" title="Reference for usage, configuration, and modules." id="toolbar-link-help-main" class="toolbar-icon toolbar-icon-help-main" data-drupal-link-system-path="admin/help">Help</a></li></ul></div></nav></div>      </div>
                <div class="toolbar-tab">
        <a href="/admin/config/user-interface/shortcut" title="Shortcuts" class="toolbar-icon toolbar-icon-shortcut trigger toolbar-item" id="toolbar-item-shortcuts" data-toolbar-tray="toolbar-item-shortcuts-tray" aria-owns="toolbar-item-shortcuts-tray" role="button" aria-pressed="false">Shortcuts</a>
        <div id="toolbar-item-shortcuts-tray" data-toolbar-tray="toolbar-item-shortcuts-tray" class="toolbar-tray"><nav class="toolbar-lining clearfix" role="navigation" aria-label="User-defined shortcuts"><h3 class="toolbar-tray-name visually-hidden">User-defined shortcuts</h3><ul class="toolbar-menu"><li><a href="/node/add">Add content</a></li><li><a href="/admin/content">All content</a></li></ul><a href="/admin/config/user-interface/shortcut/manage/default/customize" class="edit-shortcuts">Edit shortcuts</a></nav></div>      </div>
                <div class="hidden contextual-toolbar-tab toolbar-tab">
        <button class="toolbar-icon toolbar-icon-edit toolbar-item" role="button" aria-pressed="false">Edit</button>

        <div><nav class="toolbar-lining clearfix" role="navigation"></nav></div>      </div>
                <div class="tour-toolbar-tab hidden toolbar-tab" id="toolbar-tab-tour">
        <button class="toolbar-icon toolbar-icon-help toolbar-item" role="button" aria-pressed="false">Tour</button>

        <div><nav class="toolbar-lining clearfix" role="navigation"></nav></div>      </div>
                <div class="toolbar-tab">
        <a href="/user" title="My account" class="toolbar-icon toolbar-icon-user trigger toolbar-item" id="toolbar-item-user" data-toolbar-tray="toolbar-item-user-tray" aria-owns="toolbar-item-user-tray" role="button" aria-pressed="false">admin</a>
        <div id="toolbar-item-user-tray" data-toolbar-tray="toolbar-item-user-tray" class="toolbar-tray"><nav class="toolbar-lining clearfix" role="navigation" aria-label="User account actions"><h3 class="toolbar-tray-name visually-hidden">User account actions</h3><ul class="toolbar-menu"><li class="account"><a href="/user" title="User account">View profile</a></li><li class="account-edit"><a href="/user/1/edit" title="Edit user account">Edit profile</a></li><li class="logout"><a href="/user/logout">Log out</a></li></ul></nav></div>      </div>
      </nav>
  
</div>

    <div id="page-wrapper">
  <div id="page">
    <header id="header" class="header" role="banner" aria-label="Site header">
      <div class="section layout-container clearfix">
          <div class="region region-secondary-menu">
    <nav role="navigation" aria-labelledby="block-bartik-account-menu-menu" id="block-bartik-account-menu" class="contextual-region block block-menu navigation menu--account">
            
  <h2 class="visually-hidden" id="block-bartik-account-menu-menu">User account menu</h2>
  <div data-contextual-id="block:block=bartik_account_menu:langcode=en|menu:menu=account:langcode=en"></div>

      <div class="content">
        <div class="menu-toggle-target menu-toggle-target-show" id="show-block-bartik-account-menu"></div>
    <div class="menu-toggle-target" id="hide-block-bartik-account-menu"></div>
    <a class="menu-toggle" href="#show-block-bartik-account-menu">Show &mdash; User account menu</a>
    <a class="menu-toggle menu-toggle--hide" href="#hide-block-bartik-account-menu">Hide &mdash; User account menu</a>
    
              <ul class="clearfix menu">
                    <li class="menu-item">
        <a href="/user" data-drupal-link-system-path="user">My account</a>
              </li>
                <li class="menu-item">
        <a href="/user/logout" data-drupal-link-system-path="user/logout">Log out</a>
              </li>
        </ul>
  


  </div>
</nav>

  </div>

          <div class="clearfix region region-header">
    <div id="block-bartik-branding" class="contextual-region clearfix site-branding block block-system block-system-branding-block">
  
    <div data-contextual-id="block:block=bartik_branding:langcode=en"></div>
        <a href="/" title="Home" rel="home" class="site-branding__logo">
      <img src="/core/themes/bartik/logo.svg" alt="Home" />
    </a>
        <div class="site-branding__text">
              <div class="site-branding__name">
          <a href="/" title="Home" rel="home">mysite</a>
        </div>
                </div>
  </div>

  </div>

          <div class="region region-primary-menu">
    <nav role="navigation" aria-labelledby="block-bartik-main-menu-menu" id="block-bartik-main-menu" class="contextual-region block block-menu navigation menu--main">
            
  <h2 class="visually-hidden" id="block-bartik-main-menu-menu">Main navigation</h2>
  <div data-contextual-id="block:block=bartik_main_menu:langcode=en|menu:menu=main:langcode=en"></div>

      <div class="content">
        <div class="menu-toggle-target menu-toggle-target-show" id="show-block-bartik-main-menu"></div>
    <div class="menu-toggle-target" id="hide-block-bartik-main-menu"></div>
    <a class="menu-toggle" href="#show-block-bartik-main-menu">Show &mdash; Main navigation</a>
    <a class="menu-toggle menu-toggle--hide" href="#hide-block-bartik-main-menu">Hide &mdash; Main navigation</a>
    
              <ul class="clearfix menu">
                    <li class="menu-item">
        <a href="/" data-drupal-link-system-path="&lt;front&gt;">Home</a>
              </li>
        </ul>
  


  </div>
</nav>

  </div>

      </div>
    </header>
          <div class="highlighted">
        <aside class="layout-container section clearfix" role="complementary">
            <div class="region region-highlighted">
    
  

  </div>

        </aside>
      </div>
            <div id="main-wrapper" class="layout-main-wrapper layout-container clearfix">
      <div id="main" class="layout-main clearfix">
          <div class="region region-breadcrumb">
    <div id="block-bartik-breadcrumbs" class="contextual-region block block-system block-system-breadcrumb-block">
  
    <div data-contextual-id="block:block=bartik_breadcrumbs:langcode=en"></div>
      <div class="content">
        <nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb">
    <h2 id="system-breadcrumb" class="visually-hidden">Breadcrumb</h2>
    <ol>
          <li>
                  <a href="/">Home</a>
              </li>
        </ol>
  </nav>

    </div>
  </div>

  </div>

        <main id="content" class="column main-content" role="main">
          <section class="section">
            <a id="main-content" tabindex="-1"></a>
              <div class="region region-content">
    <div id="block-bartik-page-title" class="contextual-region block block-core block-page-title-block">
  
    <div data-contextual-id="block:block=bartik_page_title:langcode=en"></div>
      <div class="content">
      
  <h1 class="js-quickedit-page-title title page-title">qbuser2@gmail.com</h1>


    </div>
  </div>
<div id="block-bartik-local-tasks" class="contextual-region block block-core block-local-tasks-block">
  
    <div data-contextual-id="block:block=bartik_local_tasks:langcode=en"></div>
        <nav class="tabs" role="navigation" aria-label="Tabs">
        <h2 class="visually-hidden">Primary tabs</h2>
  <ul class="tabs primary"><li class="is-active"><a href="/user/6" data-drupal-link-system-path="user/6">View<span class="visually-hidden">(active tab)</span></a></li>
<li><a href="/user/6/shortcuts" data-drupal-link-system-path="user/6/shortcuts">Shortcuts</a></li>
<li><a href="/user/6/oauth2-tokens" data-drupal-link-system-path="user/6/oauth2-tokens">OAuth2 Tokens</a></li>
<li><a href="/user/6/edit" data-drupal-link-system-path="user/6/edit">Edit</a></li>
<li><a href="/user/6/contact" data-drupal-link-system-path="user/6/contact">Contact</a></li>
<li><a href="/devel/user/6" data-drupal-link-system-path="devel/user/6">Devel</a></li>
</ul>

    </nav>
  </div>
<div id="block-bartik-content" class="block block-system block-system-main-block">
  
    
      <div class="content">
      <section class="clearfix"  data-quickedit-entity-id="user/6" typeof="schema:Person" about="/user/6">
    <h1 class="full-width-item admin-view-heading">Qbuser</h1>
    <aside class="profile-details">
      <figure class="profile-pic"><img src="/core/themes/bartik/images/avatar.png" alt="Qb"><figcaption></figcaption>
      </figure>
    </aside>
    <ul class="ul-reset admin-list common-details" id="user-details"><li class="list-item">
          <span class="list-head">
            Email Id
          </span>
          <span class="list-detail">qbuser2@gmail.com</span>
        </li><li class="list-item">
            <span class="list-head">
              Mobile No
            </span>
            <span class="list-detail">1234567890</span>
          </li><li class="list-item">
          <span class="list-head">
            Occupation
          </span>
          <span class="list-detail">Doctor</span>
        </li><li class="list-item full-width-item">
          <span class="list-head">
            Roles
          </span>
          <span class="list-detail">authenticated, resident</span>
        </li><li class="list-item">
          <span class="list-head">
            group
          </span>
          <span class="list-detail">Test</span>
        </li><li class="list-item">
          <span class="list-head">
            Status
          </span><span class="list-detail">
              Active
            </span></li></ul>
  </section>
    </div>
  </div>

  </div>

          </section>
        </main>
                  <div id="sidebar-first" class="column sidebar">
            <aside class="section" role="complementary">
                <div class="region region-sidebar-first">
    <div class="search-block-form contextual-region block block-search container-inline" data-drupal-selector="search-block-form" id="block-bartik-search" role="search">
  
      <h2>Search</h2>
    <div data-contextual-id="block:block=bartik_search:langcode=en"></div>
    <div class="content container-inline">
        <form action="/search/node" method="get" id="search-block-form" accept-charset="UTF-8" class="search-form search-block-form">
  <div class="js-form-item form-item js-form-type-search form-type-search js-form-item-keys form-item-keys form-no-label">
      <label for="edit-keys" class="visually-hidden">Search</label>
        <input title="Enter the terms you wish to search for." data-drupal-selector="edit-keys" type="search" id="edit-keys" name="keys" value="" size="15" maxlength="128" class="form-search" />

        </div>
<div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions"><input class="search-form__submit button js-form-submit form-submit" data-drupal-selector="edit-submit" type="submit" id="edit-submit" value="Search" />
</div>

</form>

  
  </div>
</div>
<nav role="navigation" aria-labelledby="block-bartik-tools-menu" id="block-bartik-tools" class="contextual-region block block-menu navigation menu--tools">
      
  <h2 id="block-bartik-tools-menu">Tools</h2>
  <div data-contextual-id="block:block=bartik_tools:langcode=en|menu:menu=tools:langcode=en"></div>

      <div class="content">
        <div class="menu-toggle-target menu-toggle-target-show" id="show-block-bartik-tools"></div>
    <div class="menu-toggle-target" id="hide-block-bartik-tools"></div>
    <a class="menu-toggle" href="#show-block-bartik-tools">Show &mdash; Tools</a>
    <a class="menu-toggle menu-toggle--hide" href="#hide-block-bartik-tools">Hide &mdash; Tools</a>
    
              <ul class="clearfix menu">
                    <li class="menu-item">
        <a href="/node/add" data-drupal-link-system-path="node/add">Add content</a>
              </li>
        </ul>
  


  </div>
</nav>

  </div>

            </aside>
          </div>
                      </div>
    </div>
        <footer class="site-footer">
      <div class="layout-container">
                          <div class="site-footer__bottom">
              <div class="region region-footer-fifth">
    <nav role="navigation" aria-labelledby="block-bartik-footer-menu" id="block-bartik-footer" class="contextual-region block block-menu navigation menu--footer">
            
  <h2 class="visually-hidden" id="block-bartik-footer-menu">Footer menu</h2>
  <div data-contextual-id="block:block=bartik_footer:langcode=en|menu:menu=footer:langcode=en"></div>

      <div class="content">
        <div class="menu-toggle-target menu-toggle-target-show" id="show-block-bartik-footer"></div>
    <div class="menu-toggle-target" id="hide-block-bartik-footer"></div>
    <a class="menu-toggle" href="#show-block-bartik-footer">Show &mdash; Footer menu</a>
    <a class="menu-toggle menu-toggle--hide" href="#hide-block-bartik-footer">Hide &mdash; Footer menu</a>
    
              <ul class="clearfix menu">
                    <li class="menu-item">
        <a href="/contact" data-drupal-link-system-path="contact">Contact</a>
              </li>
        </ul>
  


  </div>
</nav>
<div id="block-bartik-powered" class="contextual-region block block-system block-system-powered-by-block" role="complementary">
  
    <div data-contextual-id="block:block=bartik_powered:langcode=en"></div>
      <div class="content">
      <span>Powered by <a href="https://www.drupal.org">Drupal</a></span>
    </div>
  </div>

  </div>

          </div>
              </div>
    </footer>
  </div>
</div>

    
    <script type="application/json" data-drupal-selector="drupal-settings-json">{"path":{"baseUrl":"\/","scriptPath":null,"pathPrefix":"","currentPath":"user\/6","currentPathIsAdmin":false,"isFront":false,"currentLanguage":"en"},"pluralDelimiter":"\u0003","ajaxPageState":{"libraries":"bartik\/global-styling,classy\/base,classy\/messages,contextual\/drupal.contextual-links,contextual\/drupal.contextual-toolbar,core\/drupal.active-link,core\/html5shiv,core\/normalize,group\/toolbar,quickedit\/quickedit,shortcut\/drupal.shortcut,system\/base,toolbar\/toolbar.escapeAdmin,tour\/tour,user\/drupal.user.icons","theme":"bartik","theme_token":null},"ajaxTrustedUrl":{"\/search\/node":true},"toolbar":{"breakpoints":{"toolbar.narrow":"only screen and (min-width: 16.5em)","toolbar.standard":"only screen and (min-width: 38.125em)","toolbar.wide":"only screen and (min-width: 61em)"},"subtreesHash":"huOj7oeVGMxlAx629JxTqZ1-4gzdXiVc395iamgTz9U"},"user":{"uid":"1","permissionsHash":"7af6ddf39ef0b05462857e04253447780cff729b168946eacc91f1ce0a29b793"}}</script>
<script src="/sites/default/files/js/js_BKcMdIbOMdbTdLn9dkUq3KCJfIKKo2SvKoQ1AnB8D-g.js"></script>

<!--[if lte IE 9]>
<script src="/sites/default/files/js/js_VhqXmo4azheUjYC30rijnR_Dddo0WjWkF27k5gTL8S4.js"></script>
<![endif]-->
<script src="/sites/default/files/js/js_7S532aP5rN-LSHtBCPLdSGtomEKeEKqHvBuRPR-4KK0.js"></script>

  </body>
</html>

Content page:

<!DOCTYPE html>
<html lang="en" dir="ltr" prefix="content: http://purl.org/rss/1.0/modules/content/  dc: http://purl.org/dc/terms/  foaf: http://xmlns.com/foaf/0.1/  og: http://ogp.me/ns#  rdfs: http://www.w3.org/2000/01/rdf-schema#  schema: http://schema.org/  sioc: http://rdfs.org/sioc/ns#  sioct: http://rdfs.org/sioc/types#  skos: http://www.w3.org/2004/02/skos/core#  xsd: http://www.w3.org/2001/XMLSchema# ">
  <head>
    <meta charset="utf-8" />
<meta name="Generator" content="Drupal 8 (https://www.drupal.org)" />
<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/core/misc/favicon.ico" type="image/vnd.microsoft.icon" />
<link rel="canonical" href="/node/5" />
<link rel="shortlink" href="/node/5" />
<link rel="delete-form" href="/node/5/delete" />
<link rel="edit-form" href="/node/5/edit" />
<link rel="version-history" href="/node/5/revisions" />
<link rel="revision" href="/node/5" />
<link rel="devel-render" href="/devel/node/5/render" />
<link rel="devel-load" href="/devel/node/5" />

    <title>Test notice for manage | mysite</title>
    <link rel="stylesheet" href="/sites/default/files/css/css_P41bTW4UvXRjkHb-Vppk6Htny1gvZumPoAg2vZ-Scjc.css?oak8y3" media="all" />
<link rel="stylesheet" href="/sites/default/files/css/css_Va4zLdYXDM0x79wYfYIi_RSorpNS_xtrTcNUqq0psQA.css?oak8y3" media="screen" />
<link rel="stylesheet" href="/sites/default/files/css/css_rZEEECOlsyKegw6xWqXuC8Mr9XII3Zr48Lj0b5V6YNI.css?oak8y3" media="all" />
<link rel="stylesheet" href="/sites/default/files/css/css_1IoE53_ITL7WAophg5Iq6rZdpqzXgr2xtN9eUlv_6Xo.css?oak8y3" media="all" />
<link rel="stylesheet" href="/sites/default/files/css/css_Z5jMg7P_bjcW9iUzujI7oaechMyxQTUqZhHJ_aYSq04.css?oak8y3" media="print" />
<link rel="stylesheet" href="/sites/default/files/css/css_veOj8MygZ_O5oDPX2z3T-lQFhcpUx1diKXsydxKqBlY.css?oak8y3" media="all" />

    
<!--[if lte IE 8]>
<script src="/sites/default/files/js/js_VtafjXmRvoUgAzqzYTA3Wrjkx9wcWhjP0G4ZnnqRamA.js"></script>
<![endif]-->
<script src="/core/assets/vendor/modernizr/modernizr.min.js?v=3.3.1"></script>

  </head>
  <body class="layout-one-sidebar layout-sidebar-first user-logged-in path-node page-node-type-notice-management">
    <a href="#main-content" class="visually-hidden focusable skip-link">
      Skip to main content
    </a>
    <div id="toolbar-administration" role="group" aria-label="Site administration toolbar" class="toolbar">
  <nav id="toolbar-bar" role="navigation" aria-label="Toolbar items" class="toolbar-bar clearfix">
    <h2 class="visually-hidden">Toolbar items</h2>
                <div class="hidden home-toolbar-tab toolbar-tab">
        <a href="/" title="Return to site content" class="toolbar-icon toolbar-icon-escape-admin toolbar-item" data-toolbar-escape-admin>Back to site</a>
        <div><nav class="toolbar-lining clearfix" role="navigation"></nav></div>      </div>
                <div class="toolbar-tab">
        <a href="/admin" title="Admin menu" class="toolbar-icon toolbar-icon-menu trigger toolbar-item" data-drupal-subtrees="" id="toolbar-item-administration" data-toolbar-tray="toolbar-item-administration-tray" aria-owns="toolbar-item-administration-tray" role="button" aria-pressed="false">Manage</a>
        <div id="toolbar-item-administration-tray" data-toolbar-tray="toolbar-item-administration-tray" class="toolbar-tray"><nav class="toolbar-lining clearfix" role="navigation" aria-label="Administration menu"><h3 class="toolbar-tray-name visually-hidden">Administration menu</h3><div class="toolbar-menu-administration"><ul class="clearfix toolbar-menu"><li class="menu-item menu-item--collapsed"><a href="/admin/content" title="Find and manage content." id="toolbar-link-system-admin_content" class="toolbar-icon toolbar-icon-system-admin-content" data-drupal-link-system-path="admin/content">Content</a></li><li class="menu-item menu-item--collapsed"><a href="/admin/structure" title="Administer blocks, content types, menus, etc." id="toolbar-link-system-admin_structure" class="toolbar-icon toolbar-icon-system-admin-structure" data-drupal-link-system-path="admin/structure">Structure</a></li><li class="menu-item"><a href="/admin/appearance" title="Select and configure themes." id="toolbar-link-system-themes_page" class="toolbar-icon toolbar-icon-system-themes-page" data-drupal-link-system-path="admin/appearance">Appearance</a></li><li class="menu-item"><a href="/admin/modules" title="Add and enable modules to extend site functionality." id="toolbar-link-system-modules_list" class="toolbar-icon toolbar-icon-system-modules-list" data-drupal-link-system-path="admin/modules">Extend</a></li><li class="menu-item menu-item--collapsed"><a href="/admin/config" title="Administer settings." id="toolbar-link-system-admin_config" class="toolbar-icon toolbar-icon-system-admin-config" data-drupal-link-system-path="admin/config">Configuration</a></li><li class="menu-item menu-item--collapsed"><a href="/admin/group" title="Find and manage groups, group types and group settings." id="toolbar-link-entity-group-collection" class="toolbar-icon toolbar-icon-system-admin-group" data-drupal-link-system-path="admin/group">Groups</a></li><li class="menu-item"><a href="/admin/people" title="Manage user accounts, roles, and permissions." id="toolbar-link-entity-user-collection" class="toolbar-icon toolbar-icon-entity-user-collection" data-drupal-link-system-path="admin/people">People</a></li><li class="menu-item menu-item--collapsed"><a href="/admin/reports" title="View reports, updates, and errors." id="toolbar-link-system-admin_reports" class="toolbar-icon toolbar-icon-system-admin-reports" data-drupal-link-system-path="admin/reports">Reports</a></li><li class="menu-item"><a href="/admin/help" title="Reference for usage, configuration, and modules." id="toolbar-link-help-main" class="toolbar-icon toolbar-icon-help-main" data-drupal-link-system-path="admin/help">Help</a></li></ul></div></nav></div>      </div>
                <div class="toolbar-tab">
        <a href="/admin/config/user-interface/shortcut" title="Shortcuts" class="toolbar-icon toolbar-icon-shortcut trigger toolbar-item" id="toolbar-item-shortcuts" data-toolbar-tray="toolbar-item-shortcuts-tray" aria-owns="toolbar-item-shortcuts-tray" role="button" aria-pressed="false">Shortcuts</a>
        <div id="toolbar-item-shortcuts-tray" data-toolbar-tray="toolbar-item-shortcuts-tray" class="toolbar-tray"><nav class="toolbar-lining clearfix" role="navigation" aria-label="User-defined shortcuts"><h3 class="toolbar-tray-name visually-hidden">User-defined shortcuts</h3><ul class="toolbar-menu"><li><a href="/node/add">Add content</a></li><li><a href="/admin/content">All content</a></li></ul><a href="/admin/config/user-interface/shortcut/manage/default/customize" class="edit-shortcuts">Edit shortcuts</a></nav></div>      </div>
                <div class="hidden contextual-toolbar-tab toolbar-tab">
        <button class="toolbar-icon toolbar-icon-edit toolbar-item" role="button" aria-pressed="false">Edit</button>

        <div><nav class="toolbar-lining clearfix" role="navigation"></nav></div>      </div>
                <div class="tour-toolbar-tab hidden toolbar-tab" id="toolbar-tab-tour">
        <button class="toolbar-icon toolbar-icon-help toolbar-item" role="button" aria-pressed="false">Tour</button>

        <div><nav class="toolbar-lining clearfix" role="navigation"></nav></div>      </div>
                <div class="toolbar-tab">
        <a href="/user" title="My account" class="toolbar-icon toolbar-icon-user trigger toolbar-item" id="toolbar-item-user" data-toolbar-tray="toolbar-item-user-tray" aria-owns="toolbar-item-user-tray" role="button" aria-pressed="false">admin</a>
        <div id="toolbar-item-user-tray" data-toolbar-tray="toolbar-item-user-tray" class="toolbar-tray"><nav class="toolbar-lining clearfix" role="navigation" aria-label="User account actions"><h3 class="toolbar-tray-name visually-hidden">User account actions</h3><ul class="toolbar-menu"><li class="account"><a href="/user" title="User account">View profile</a></li><li class="account-edit"><a href="/user/1/edit" title="Edit user account">Edit profile</a></li><li class="logout"><a href="/user/logout">Log out</a></li></ul></nav></div>      </div>
      </nav>
  
</div>

    <div id="page-wrapper">
  <div id="page">
    <header id="header" class="header" role="banner" aria-label="Site header">
      <div class="section layout-container clearfix">
          <div class="region region-secondary-menu">
    <nav role="navigation" aria-labelledby="block-bartik-account-menu-menu" id="block-bartik-account-menu" class="contextual-region block block-menu navigation menu--account">
            
  <h2 class="visually-hidden" id="block-bartik-account-menu-menu">User account menu</h2>
  <div data-contextual-id="block:block=bartik_account_menu:langcode=en|menu:menu=account:langcode=en"></div>

      <div class="content">
        <div class="menu-toggle-target menu-toggle-target-show" id="show-block-bartik-account-menu"></div>
    <div class="menu-toggle-target" id="hide-block-bartik-account-menu"></div>
    <a class="menu-toggle" href="#show-block-bartik-account-menu">Show &mdash; User account menu</a>
    <a class="menu-toggle menu-toggle--hide" href="#hide-block-bartik-account-menu">Hide &mdash; User account menu</a>
    
              <ul class="clearfix menu">
                    <li class="menu-item">
        <a href="/user" data-drupal-link-system-path="user">My account</a>
              </li>
                <li class="menu-item">
        <a href="/user/logout" data-drupal-link-system-path="user/logout">Log out</a>
              </li>
        </ul>
  


  </div>
</nav>

  </div>

          <div class="clearfix region region-header">
    <div id="block-bartik-branding" class="contextual-region clearfix site-branding block block-system block-system-branding-block">
  
    <div data-contextual-id="block:block=bartik_branding:langcode=en"></div>
        <a href="/" title="Home" rel="home" class="site-branding__logo">
      <img src="/core/themes/bartik/logo.svg" alt="Home" />
    </a>
        <div class="site-branding__text">
              <div class="site-branding__name">
          <a href="/" title="Home" rel="home">mysite</a>
        </div>
                </div>
  </div>

  </div>

          <div class="region region-primary-menu">
    <nav role="navigation" aria-labelledby="block-bartik-main-menu-menu" id="block-bartik-main-menu" class="contextual-region block block-menu navigation menu--main">
            
  <h2 class="visually-hidden" id="block-bartik-main-menu-menu">Main navigation</h2>
  <div data-contextual-id="block:block=bartik_main_menu:langcode=en|menu:menu=main:langcode=en"></div>

      <div class="content">
        <div class="menu-toggle-target menu-toggle-target-show" id="show-block-bartik-main-menu"></div>
    <div class="menu-toggle-target" id="hide-block-bartik-main-menu"></div>
    <a class="menu-toggle" href="#show-block-bartik-main-menu">Show &mdash; Main navigation</a>
    <a class="menu-toggle menu-toggle--hide" href="#hide-block-bartik-main-menu">Hide &mdash; Main navigation</a>
    
              <ul class="clearfix menu">
                    <li class="menu-item">
        <a href="/" data-drupal-link-system-path="&lt;front&gt;">Home</a>
              </li>
        </ul>
  


  </div>
</nav>

  </div>

      </div>
    </header>
          <div class="highlighted">
        <aside class="layout-container section clearfix" role="complementary">
            <div class="region region-highlighted">
    
  

  </div>

        </aside>
      </div>
            <div id="main-wrapper" class="layout-main-wrapper layout-container clearfix">
      <div id="main" class="layout-main clearfix">
          <div class="region region-breadcrumb">
    <div id="block-bartik-breadcrumbs" class="contextual-region block block-system block-system-breadcrumb-block">
  
    <div data-contextual-id="block:block=bartik_breadcrumbs:langcode=en"></div>
      <div class="content">
        <nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb">
    <h2 id="system-breadcrumb" class="visually-hidden">Breadcrumb</h2>
    <ol>
          <li>
                  <a href="/">Home</a>
              </li>
        </ol>
  </nav>

    </div>
  </div>

  </div>

        <main id="content" class="column main-content" role="main">
          <section class="section">
            <a id="main-content" tabindex="-1"></a>
              <div class="region region-content">
    <div id="block-bartik-page-title" class="contextual-region block block-core block-page-title-block">
  
    <div data-contextual-id="block:block=bartik_page_title:langcode=en"></div>
      <div class="content">
      
  <h1 class="js-quickedit-page-title title page-title"><span data-quickedit-field-id="node/5/title/en/full" class="field field--name-title field--type-string field--label-hidden">Test notice for manage</span>
</h1>


    </div>
  </div>
<div id="block-bartik-local-tasks" class="contextual-region block block-core block-local-tasks-block">
  
    <div data-contextual-id="block:block=bartik_local_tasks:langcode=en"></div>
        <nav class="tabs" role="navigation" aria-label="Tabs">
        <h2 class="visually-hidden">Primary tabs</h2>
  <ul class="tabs primary"><li class="is-active"><a href="/node/5" data-drupal-link-system-path="node/5">View<span class="visually-hidden">(active tab)</span></a></li>
<li><a href="/node/5/edit" data-drupal-link-system-path="node/5/edit">Edit</a></li>
<li><a href="/node/5/delete" data-drupal-link-system-path="node/5/delete">Delete</a></li>
<li><a href="/devel/node/5" data-drupal-link-system-path="devel/node/5">Devel</a></li>
</ul>

    </nav>
  </div>
<div id="block-bartik-content" class="block block-system block-system-main-block">
  
    
      <div class="content">
      
<article data-history-node-id="5" data-quickedit-entity-id="node/5" role="article" class="contextual-region node node--type-notice-management node--promoted node--view-mode-full clearfix" about="/node/5">
  <header>
    
        <div data-contextual-id="node:node=5:changed=1468924280&amp;langcode=en"></div>
          <div class="node__meta">
        <section class="clearfix"  data-quickedit-entity-id="user/1" typeof="schema:Person" about="/user/1">
    <h1 class="full-width-item admin-view-heading"></h1>
    <aside class="profile-details">
      <figure class="profile-pic"><img src="/core/themes/bartik/images/avatar.png" alt=""><figcaption></figcaption>
      </figure>
    </aside>
    <ul class="ul-reset admin-list common-details" id="user-details"><li class="list-item">
          <span class="list-head">
            Email Id
          </span>
          <span class="list-detail">test@gmail.com</span>
        </li><li class="list-item full-width-item">
          <span class="list-head">
            Roles
          </span>
          <span class="list-detail">authenticated, administrator</span>
        </li><li class="list-item">
          <span class="list-head">
            Status
          </span><span class="list-detail">
              Active
            </span></li></ul>
  </section>
        <span>
          Submitted by <span data-quickedit-field-id="node/5/uid/en/full" class="field field--name-uid field--type-entity-reference field--label-hidden"><a title="View user profile." href="/user/1" lang="" about="/user/1" typeof="schema:Person" property="schema:name" datatype="" class="username">admin</a></span>
 on <span data-quickedit-field-id="node/5/created/en/full" class="field field--name-created field--type-created field--label-hidden">Tue, 07/19/2016 - 10:30</span>
        </span>
        
      </div>
      </header>
  <div class="node__content clearfix">
    
  <div data-quickedit-field-id="node/5/field_notice_category/en/full" class="field field--name-field-notice-category field--type-entity-reference field--label-above">
    <div class="field__label">Category</div>
              <div class="field__item"><a href="/taxonomy/term/8" hreflang="en">Classified</a></div>
          </div>

  <div data-quickedit-field-id="node/5/field_notice_content/en/full" class="field field--name-field-notice-content field--type-string-long field--label-above">
    <div class="field__label">Content</div>
              <div class="field__item">test</div>
          </div>

  <div data-quickedit-field-id="node/5/field_notice_co_ordinator/en/full" class="field field--name-field-notice-co-ordinator field--type-string field--label-above">
    <div class="field__label">Co-ordinator</div>
              <div class="field__item">anoop</div>
          </div>

  <div data-quickedit-field-id="node/5/field_notice_coordinator_phone/en/full" class="field field--name-field-notice-coordinator-phone field--type-string field--label-above">
    <div class="field__label">Phone</div>
              <div class="field__item">8787878787</div>
          </div>

  <div data-quickedit-field-id="node/5/field_notice_attachment/en/full" class="field field--name-field-notice-attachment field--type-file field--label-above">
    <div class="field__label">Attachments</div>
          <div class="field__items">
              <div class="field__item">
<span class="file file--mime-application-pdf file--application-pdf"> <a href="http://qbtest.com/sites/default/files/2016-07/Calender2015_1.pdf" type="application/pdf; length=709302">Calender2015.pdf</a></span>
</div>
              </div>
      </div>

  </div>
</article>

    </div>
  </div>

  </div>

          </section>
        </main>
                  <div id="sidebar-first" class="column sidebar">
            <aside class="section" role="complementary">
                <div class="region region-sidebar-first">
    <div class="search-block-form contextual-region block block-search container-inline" data-drupal-selector="search-block-form" id="block-bartik-search" role="search">
  
      <h2>Search</h2>
    <div data-contextual-id="block:block=bartik_search:langcode=en"></div>
    <div class="content container-inline">
        <form action="/search/node" method="get" id="search-block-form" accept-charset="UTF-8" class="search-form search-block-form">
  <div class="js-form-item form-item js-form-type-search form-type-search js-form-item-keys form-item-keys form-no-label">
      <label for="edit-keys" class="visually-hidden">Search</label>
        <input title="Enter the terms you wish to search for." data-drupal-selector="edit-keys" type="search" id="edit-keys" name="keys" value="" size="15" maxlength="128" class="form-search" />

        </div>
<div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions"><input class="search-form__submit button js-form-submit form-submit" data-drupal-selector="edit-submit" type="submit" id="edit-submit" value="Search" />
</div>

</form>

  
  </div>
</div>
<nav role="navigation" aria-labelledby="block-bartik-tools-menu" id="block-bartik-tools" class="contextual-region block block-menu navigation menu--tools">
      
  <h2 id="block-bartik-tools-menu">Tools</h2>
  <div data-contextual-id="block:block=bartik_tools:langcode=en|menu:menu=tools:langcode=en"></div>

      <div class="content">
        <div class="menu-toggle-target menu-toggle-target-show" id="show-block-bartik-tools"></div>
    <div class="menu-toggle-target" id="hide-block-bartik-tools"></div>
    <a class="menu-toggle" href="#show-block-bartik-tools">Show &mdash; Tools</a>
    <a class="menu-toggle menu-toggle--hide" href="#hide-block-bartik-tools">Hide &mdash; Tools</a>
    
              <ul class="clearfix menu">
                    <li class="menu-item">
        <a href="/node/add" data-drupal-link-system-path="node/add">Add content</a>
              </li>
        </ul>
  


  </div>
</nav>

  </div>

            </aside>
          </div>
                      </div>
    </div>
        <footer class="site-footer">
      <div class="layout-container">
                          <div class="site-footer__bottom">
              <div class="region region-footer-fifth">
    <nav role="navigation" aria-labelledby="block-bartik-footer-menu" id="block-bartik-footer" class="contextual-region block block-menu navigation menu--footer">
            
  <h2 class="visually-hidden" id="block-bartik-footer-menu">Footer menu</h2>
  <div data-contextual-id="block:block=bartik_footer:langcode=en|menu:menu=footer:langcode=en"></div>

      <div class="content">
        <div class="menu-toggle-target menu-toggle-target-show" id="show-block-bartik-footer"></div>
    <div class="menu-toggle-target" id="hide-block-bartik-footer"></div>
    <a class="menu-toggle" href="#show-block-bartik-footer">Show &mdash; Footer menu</a>
    <a class="menu-toggle menu-toggle--hide" href="#hide-block-bartik-footer">Hide &mdash; Footer menu</a>
    
              <ul class="clearfix menu">
                    <li class="menu-item">
        <a href="/contact" data-drupal-link-system-path="contact">Contact</a>
              </li>
        </ul>
  


  </div>
</nav>
<div id="block-bartik-powered" class="contextual-region block block-system block-system-powered-by-block" role="complementary">
  
    <div data-contextual-id="block:block=bartik_powered:langcode=en"></div>
      <div class="content">
      <span>Powered by <a href="https://www.drupal.org">Drupal</a></span>
    </div>
  </div>

  </div>

          </div>
              </div>
    </footer>
  </div>
</div>

    
    <script type="application/json" data-drupal-selector="drupal-settings-json">{"path":{"baseUrl":"\/","scriptPath":null,"pathPrefix":"","currentPath":"node\/5","currentPathIsAdmin":false,"isFront":false,"currentLanguage":"en"},"pluralDelimiter":"\u0003","ajaxPageState":{"libraries":"bartik\/global-styling,classy\/base,classy\/file,classy\/messages,classy\/node,contextual\/drupal.contextual-links,contextual\/drupal.contextual-toolbar,core\/drupal.active-link,core\/html5shiv,core\/normalize,group\/toolbar,history\/mark-as-read,quickedit\/quickedit,shortcut\/drupal.shortcut,system\/base,toolbar\/toolbar.escapeAdmin,tour\/tour,user\/drupal.user.icons","theme":"bartik","theme_token":null},"ajaxTrustedUrl":{"\/search\/node":true},"history":{"nodesToMarkAsRead":{"5":true}},"toolbar":{"breakpoints":{"toolbar.narrow":"only screen and (min-width: 16.5em)","toolbar.standard":"only screen and (min-width: 38.125em)","toolbar.wide":"only screen and (min-width: 61em)"},"subtreesHash":"huOj7oeVGMxlAx629JxTqZ1-4gzdXiVc395iamgTz9U"},"user":{"uid":"1","permissionsHash":"7af6ddf39ef0b05462857e04253447780cff729b168946eacc91f1ce0a29b793"}}</script>
<script src="/sites/default/files/js/js_BKcMdIbOMdbTdLn9dkUq3KCJfIKKo2SvKoQ1AnB8D-g.js"></script>

<!--[if lte IE 9]>
<script src="/sites/default/files/js/js_VhqXmo4azheUjYC30rijnR_Dddo0WjWkF27k5gTL8S4.js"></script>
<![endif]-->
<script src="/sites/default/files/js/js_6Z2chEawc-O1sUlIPv6zPQpdeDQKqAJ1nahw6fETRfk.js"></script>

  </body>
</html>

Thanks,

onejam’s picture

He meant your *.twig template, not the source of your webpage. :-D

Also, i repeat.. create a sub theme, don't modify a core theme (ie, Bartik). https://www.drupal.org/theme-guide/8/creating-a-sub-theme

-----------------------------------------------------------------
We build engaging websites and intuitive designs that will benefit your business.
Duvien

anoopmohan’s picture

:-D

Thanks for the support.
Let me check it after adding a sub-theme.

Thanks,

Jeff Burnz’s picture

This is good, I wanted to see the source from the browser - because there can be lots of stuff hiding in a variable, I want to see whats actually going on after the page has rendered - so perfect, this is great.

anoopmohan’s picture

Thanks Jeff for your support.

Jeff Burnz’s picture

Yeah, I haven't given an answer because the answer is rather complicated, and I was going to write a blog post on it as others will get bitten by the exact same issue.

anoopmohan’s picture

Great !. Please share the link, once you finish your blog. Thanks Jeff.