Continuing the discussion from Brand header theme component:
How can i access HTML codes of that bar? I can access CSS codes but i can’t see HTML code with Google Chrome’s “show source” feature. I want to use that bar on Wordpress side, o i need HTML template.
Just do a view source or use the Chrome inspector. The HTML code is generated in a script so it’s not something you will be able to copy paste from the component.
I get the HTML.
<header class="b-header clearfix"><div class="wrap"><div class="contents clearfix"><div class="title"><a href="http://www.example.com"><h2 id="brand-text-logo" class="text-logo">Site</h2></a></div><nav class="links"><ul class="nav nav-pills"><li><a class="widget-link" href="https://www.example.com" title="Link1"><span class="d-label">Link1</span></a></li></ul></nav><div class="panel clearfix"><ul class="icons clearfix"><li><a class="widget-link" href="https://twitter.com" title=""><i class="fa fa-twitter d-icon d-icon-twitter" aria-hidden="true"></i> <span class="d-label"></span></a></li></ul></div></div></div></header>
But how i compile SCSS? I tried compile that on Codepen but i think @import “theme_variables” line causes error.
@import "theme_variables";
.b-header {
width: 100%;
background-color: $tertiary;
height: 48px;
margin-bottom: 0; }
I want to create pure HTML CSS JS codes that component.
CodePen is fine. Delete that first line with the import.
Then, redclare all the variables at the top of the SCSS. You will get these values from Admin -> Customize -> Color Schemes.
If your secondary color is black, for example, you would declare it like this:
$secondary: #000000;
Put that at the top for every variable you see in that SCSS.
Hi,
I added that variables. Just, i can’t find $lightness variable in theme_variable.scss
$primary: #222222 !default;
$secondary: #ffffff !default;
$tertiary: #0088cc !default;
$quaternary: #e45735 !default;
$header_background: #ffffff !default;
$header_primary: #333333 !default;
$highlight: #ffff4d !default;
$danger: #e45735 !default;
$success: #009900 !default;
It does not work corretly yet. Can you check it?
Instead of using Discourse scss methods like dark-light-diff, scale-color and lightness you can just replace your desired colors directly in those places.
Thank you. @vinothkannans I added these variables. But i have problem HTML side i think.
I edited HTML side. There are some problems about styling.
<header class="b-header clearfix">
<div class="wrap">
<div class="contents clearfix">
<div class="title">
<a href="#">
<h2 id="brand-text-logo" class="text-logo">Title</h2>
</a>
</div>
<!-- NAV -->
<nav class="links">
<ul class="nav nav-pills">
<li>
<a href="#" class="widget-link">
<span class="d-label">
Link1
</span>
</a>
</li>
<!-- LINK 2 -->
<li>
<a href="#" class="widget-link">
<span class="d-label">
Link2
</span>
</a>
</li>
</ul>
</nav>
<!-- RIGT SIDE -->
<div class="panel clearfix">
<ul class="icons clearfix">
<li>
<a href="#" class="widget-link" title="">
<i class="fa fa-twitter d-icon d-icon-twitter" aria-hidden="true"></i><span class="d-label"></span>
</a>
</li>
<li>
<a href="#" class="widget-link" title="">
<i class="fa fa-facebook d-icon d-icon-facebook" aria-hidden="true"></i> <span class="d-label"></span>
</a>
</li>
</ul>
</div>
<!-- RIGHT SIDE -->
</div>
</div>
</header>
@bekircem here’s a fork of your CodePen that’s almost all the way there. It just needs some work on the font.
https://codepen.io/colin-marshall/pen/qyWYoN
I added the missing styles from nav.scss and also added a few CSS resets so the nav links would be properly positioned.
Thank you so much! I will check it when I moved my laptop 
for using hamburger menu should I add js codes?
No problem!
Yes, you will want to add some JS for the hamburger menu.
Can you provide JS side too?
I don’t think I can just copy the JS Discourse uses for that since it looks like it’s tied into their plugin system.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.