0

I successfully created a custom theme and a custom module. Right now the module just outputs "Hello World" in the header panel of my shop. Now, I want to apply some styling to my block inside my module. The default_head_blocks.xmlof my theme (located at myTheme/Magento_Theme/layout/default_head_blocks.xml) looks like this:

<?xml version="1.0"?>
<!--
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/ 
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
    <css src="css/navbar-style.css"/>
</head>
</page>

The default.xml inside my module (located at Test/Navbar/view/frontend/layout/default.xml looks like this:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/navbar-style.css"/>
</head>
<body>
<referenceContainer name="header.panel">
<block class="Test\Navbar\Block\Navbar" name="test.navbar" template="Test_Navigation::default/navbar.phtml"/>
</referenceContainer>
<referenceBlock name="register-link" remove="true"/>
<referenceBlock name="authorization-link" remove="true"/>
<referenceBlock name="wish-list-link" remove="true"/>
<referenceBlock name="my-account-link" remove="true"/>
</body>
</page>

My navbar.phtml (located at Test/Navbar/view/frontend/templates/default/navbar.phtml) looks like this:

<?php
/**
* Test navbar template
*
* @var $block TestNavbarBlockNavbar
*/
?>
<div class="r23-navbar">Hello World</div>

and finally the .css located at app/design/frontend/test/testtheme/web/css/navbar-style.css

looks like this:

@charset "UTF-8";
/* CSS Document */

.r23-header {
margin: 0 auto;
width: 100px;
color: red;
}

body {
background-color: green;
}

The result is, that the body color of my whole Magento site is green. So the css is working. But how can I apply styling to my navbar.phtml? Because nothing happens there when I reload my site. I always clear the var and pub/static folder (except for the .htaccess file). What am I doing wrong?

  • did you run php bin/magento setup:static-content:deploy – Krishna ijjada Sep 17 '16 at 12:02
  • Yes, always. I mean the css works on the body. So adding head per default_head_blocks.xml works. But adding it to my .phtml doesn't. – Pixell Sep 17 '16 at 12:09
2

Okey I solved it myself. I made the most rookie mistake ever. I named the .css class differently inside my PHTML and inside the actual CSS file. Now everything works. One was "r23-header" and the other one was "r23-navbar". I guess the longer you stare at something the less you see.

  • Rookie? Every developer i know does that about once a week........ – circlesix Sep 17 '16 at 17:46

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.