blog documentation FAQ followers forum marketplace services youtube

solved How to get an Header bar under the logo and menu?

The Jamroom Network » Forum » Using Jamroom » Page » How to get an Header bar under the logo and menu?
pch
@pch
9 years ago
328 posts
Hello,

I am having a tough time to add a long text (h1 or h2) line just under the logo and the menu that will cross the header (from left side of the header to its right side - the full width) . It will be part of the header but it will have its own background color and and text color. (A kind of header bar)

The text I am planning to put there is:

            <b>{jrCore_lang skin=$_conf.jrCore_active_skin id="63" default="Header Text"}</b> - 
            <a href="?set_user_language=en-US"><img src="{$jamroom_url}/skins/{$_conf.jrCore_active_skin}/img/flags/us.png" alt="US" title="English US"></a>
            <a href="?set_user_language=es-ES"><img src="{$jamroom_url}/skins/{$_conf.jrCore_active_skin}/img/flags/es.png" alt="ES" title="Spanish"></a>
        </div>

I have already created the language string and I have been trying to add the code to the header.tpl but I can't get the text right under the logo and the menu. Either is getting displayed next to the logo or either under menu, not under both as a line break.

Also I can't find where in the Skin "Style" Tab of the Clone skin (from Elastic), I can edit the style.

Can someone help me achieve this. Where exactly in the header.tpl should I add the code and what css code (style) should I add?

I would like to show the same bar/text on mobile/tablet device. (I am not using the site Builder)

Thanks in advance.
updated by @pch: 09/30/16 12:31:44PM
douglas
@douglas
9 years ago
2,806 posts
Since the header is set to a certain height, you'll probably want to create another div under the header div in your header.tpl. Right after this:

<div id="header">
    <div id="header_content">

        {* Logo *}
        {if jrCore_is_mobile_device()}
            <div id="main_logo">
                {jrCore_image id="mmt" skin="jrElastic" image="menu.png" alt="menu"}
                {jrCore_image image="logo.png" width="170" height="40" class="jlogo" alt=$_conf.jrCore_system_name custom="logo"}
            </div>
        {else}
            <div id="main_logo">
                <a href="{$jamroom_url}">{jrCore_image image="logo.png" width="191" height="44" class="jlogo" alt=$_conf.jrCore_system_name custom="logo"}</a>
            </div>
            {jrCore_include template="header_menu_desktop.tpl"}

        {/if}

    </div>

</div>

maybe something like this:

<div class="header_bar">
     <div class="header_bar_content">
        Your code here...
    </div>
</div>

and in your header.css file add this:

.header_bar {
background-color: #333333;
background-image: url("{$jrElastic_img_url}/bckgrd.png");
padding:5px;
margin-top:-12px;
}
.header_bar_content {
max-width: 1140px;
margin-left: auto;
margin-right: auto;
}

of course you may need to adjust the CSS to suite your needs.

Hope this helps!


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

Tags