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?
1 Answer 1
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– circlesix2016年09月17日 17:46:38 +00:00Commented Sep 17, 2016 at 17:46
default_head_blocks.xmlworks. But adding it to my .phtml doesn't.