How to create a fixed TOPBAR

Schermata 09-2456176 alle 18.04.14.png

Hello I would like to add a change to the template TWN2.
I state that I have already changed the userarea putting in its place two new modules (banner) with the help of Norman .
Now I want to insert a fixed topbar above the position of the logo and put in the login and registration area.
Norman await you by the hand .
Thank you very much

Hi

Please show me Your site. Maby it's possible already with the added code and only awaits some css changes.

Hi norman as required I send you the link to access my site (annonaria.com) still under construction and I am currently completing the creation of templates for vbulletin.
Now my intention is to put an identical topbar fixed in joomla that vbulletin similar to that found in gavickpro but with the log style vbulletin.

In fact, I really like the animations of the social buttons.

Hi

I'm not norman Anyway I do not see this modules mentioned in userarea position. Please send me an access to joomla panel and ftp to Your website so I'll make You this topbar.

Sorry Teitbite but to do some testing I disabled the module in (ex) userarea.
Sorry but I wanted to see if the procedure was the same as this or different:
https://www.gavick.com/documentation/jo ... -position/

Hi

Procedure is exackly the same, but some additional not mentioned at instruction css styles are requires. So when You place this modules back I'll check it and let You know what is missing.

ok aspect your reply

Hi

Ok. I need You help now. Can You please show me which element is the one which should go into top bar ? I was thinking it's gonna be in a userarea layer, but I do not see anything like that.

In topbar I would like the login and registration (userarea)

Hi

Ok. Looks like we didn't understood each other I was thinking that You already got a new position where this login / register are located and that all I have to do is to make this new position a topbar. But looks like this position do not exists, so I will need an access to FTP to create it first. An access to joomla panel to put modules inside.

Normally we do not support such customizations requests, but we are talking for so long on this that it would be just not cool to leave You without it, so I'm gonna make an exception.

Hi

Ok. Done. A list of changes:

in /layouts/default.php I've added this code:

Code: Select all

   <?php if($this->modules('topbar')) : ?>
   <div id="fixedTopbar">
      <jdoc:include type="modules" name="topbar" />
   </div>
   <?php endif; ?> 


Than in joomla panel, I've created a menu module and set it into "topbar" position.

Next I've checked if override.css file was allowed to use in template parameters (it was, but if someone wants to copy this it's an important to have it ON) and added this code to put topbar in place and style to look fine.

Code: Select all

#fixedTopbar {
    background-color: #444444;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    position: fixed;
    width: 100%;
    z-index: 10000;
}

#fixedTopbar li {
    display: inline;
    margin: 0 10px;
    line-height: 40px;
}

#fixedTopbar li a {
    color: #ffffff;
}

#gkPage {
    padding-top: 40px;
}


Of course this is just a beginning. For any new module a new style will be reguired.

Hi again

Forgot to add a screenshot of how it looks like.

Hello Teitbite and thank you for your work.
I ask just one more thing, I saw that you created position called topbar menu, and you've created a menu called topbar (mainmenu) and have placed them. Now I was trying to insert in the topbar log in but as soon as I activate the topbar is blank? I tried to put other types of login forms (Horizontal VM login module and JFusion login module) but nothing happens even the topbar becomes empty ....

In fact I would like to create a topbar similar to yours, putting even the buttons for social networks (such as your icons) plus two icons only a small house and a small cloud (home and forum) like these:

more the login form similar these

It may be that the login form is not displayed because I did this change?
https://www.gavick.com/forums/the-world ... 17262.html
If so, how can I reactivate it but putting it in the topbar and without the effect of popup original?

Hi

No everything is ok. The case is that topbar is only 40px height and everything outside this value is not visible. I've only make a style for a menu to be displayed in topbar any other elements will require additional styling. Once again this is outsite our support duties but please decide on one login and I'll tell You the style to make it visible.

Ok and thanks again. I just have to put the login JFusion them and the problem is that the login JFusion only works if there is a default login enabled, which I removed because I did not want the popup window.
How do I restore the login form native joomla? Technically I think that would be enough to copy the code that I removed (see the post at the link) I just reset the login / register with the buttons and pop-up while I would like a simple login horizontal type the example most the only link to the page recording. And the problem there is that I'm in height ....

Sorry I thought the JFusion login module to work only with the native form joolma. In fact, by publishing it in another location I get. I guess I'll have to ask for help at the forum in JFusion to know what and where to change to make it horizontal and height desired.
Instead to put the icons instead of menu items as you do?

Hi

You do not have to ask them, I can make it too. Please just let me know when only this one will be published in this new position.

Teitbite Hello, I downloaded 2 extensions for logging and timer recording (jquery jquery login and register) to pfare some tests and I only views that being dropdown not seen the fields below.
Now publish the JFusion login (horizontal) in the topbar.

Hi

If You want to use this jQuery modules than looks like all You need to do is to change in override.css file:

Code: Select all

#fixedTopbar {
    overflow: visible;
}


Teitbite Hello, I'm still trying to finish my topbar and saw that the one you use on the site is that of the template Gamenews, but I also want to enter the same positions.
If I'm not mistaken you've implemented a single location called topbar, and if I try to publish more than one module in that position I do not put them next to each other but one below the other ... So if you do not ask too much I'd use the same positions and put the same modules (except where there is a menu I would put the buttons of social networks - as the third picture).
If you need you still have access akl open my site.

And I would also like topbar modules have the same width of the site (1000 px) ie that begin and end in line with the site, just like that of the template GameNews

As you can see when I make the login recognize me and put the logo only that the greeting (Hi, Admin) is almost the same color and the logout button is before the name.
Do you know how can I intervene to change the font color and put the button after the username? And all centered (not attached to the top)

the topbar image has been highlighted to show the font

Hi

I haven't copied it from anywhere, just made it with the less code possible. Now You just need to style this modules to fit in this narrow space and to be displayed next to each other. Unfortunately I cannot assist You more with this, because this kind of customizations are not supported by our team. Sorry.

Teitbite Hello, I'm still trying to finish my topbar and saw that the one you use on the site is that of the template Gamenews, but I also want to enter the same positions.
If I'm not mistaken you've implemented a single location called topbar, and if I try to publish more than one module in that position I do not put them next to each other but one below the other ... So if you do not ask too much I'd use the same positions and put the same modules (except where there is a menu I would put the buttons of social networks - as the third picture).
If you need you still have access akl open my site.

Ok thank you anyway (I'll try to fix the login form of JFusion), but instead to create the same positions as provided by the template GameNews? That is now in my template over the logo and banner èstata put the position topbar, okay? But to create the same positions, Social, and topbar usermenu what should I change?
So then I arrange myself on what to put inside, and of course depart with the same width of the template.
is it possible?

Hi

Are You talking about adding new positions to topbar ? You do not need such. One is enought. Simply when You will add any module into this position, add some style to make it appear on left or right. For example:

Code: Select all

.(moduel_layer_name) { float: right; }


Hello,
Ok but I have to put that code in override.css?
If yes, after I can put more modules in the same position (topbar) without that are displayed one above the other?
Decide the order from the menu of the form, right?

And to do so that the bar has the width of the template, that is, add to that the bar is for the whole screen only the modules that begin and end at the edges of the template.
I hope I made clear.

Hi

Module will be visible one under the other if You will not use float:left / float:right attribute in css. And yes all modifications should be in override.css file.

Small modification to tobbar code to fill Your additional request to keep it's content in a templates width:

Code: Select all

   <?php if($this->modules('topbar')) : ?>
      <div id="fixedTopbar">
             <div class="gkWrap">
            <jdoc:include type="modules" name="topbar" />
         </div>
      </div>
   <?php endif; ?> 


.(moduel_layer_name) { float: right; }

This codice se volessi utilizzarlo per il modulo di login di JFusion diventa:
.(Jfusion login module) { float: right; }

I copied the name in the list of installed modules. It's ok?

Small modification to tobbar code to fill Your additional request to keep it's content in a templates width:

Code: Select all

   <?php if($this->modules('topbar')) : ?>
      <div id="fixedTopbar">
             <div class="gkWrap">
            <jdoc:include type="modules" name="topbar" />
         </div>
      </div>
   <?php endif; ?> 


Of course, this code is copied to the file override.css

This codice se volessi utilizzarlo per il modulo di login di JFusion diventa:

This code if i use it for the JFusion login module becomes:

.(Jfusion login module) { float: right; }

I just tried it and if you go to look at my website you can see that it has been moved in line with the left margin (but I put the code attribute float: right)?

Next I've checked if override.css file was allowed to use in template parameters (it was, but if someone wants to copy this it's an important to have it ON) and added this code to put topbar in place and style to look fine.

Code: Select all

#fixedTopbar {
    background-color: #444444;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    position: fixed;
    width: 100%;
    z-index: 10000;
}

#fixedTopbar li {
    display: inline;
    margin: 0 10px;
    line-height: 40px;
}

#fixedTopbar li a {
    color: #ffffff;
}

#gkPage {
    padding-top: 40px;
}


Of course this is just a beginning. For any new module a new style will be reguired.

Ok I just changed the background color of the topbar, and I would add a line at the bottom, surely you will know how to do, can you help?

Looking around the web I found an article where there was this code:

Code: Select all

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

Can i use it to get the required result?

I'm doing all the tests possible but the login does not move to the right, I added the code you posted and the only thing that has changed is that now the left margin

.(moduel_layer_name) { float: right; }

This codice se volessi utilizzarlo per il modulo di login di JFusion diventa:
.(Jfusion login module) { float: right; }

I copied the name in the list of installed modules. It's ok?

Hi

No. You NEED to use a LAYER name. Layer name is a HTML value under class or id.

I think You should hire a developer, because the kind of customizations You require are beyond our support and You clearly are not a programmer I can take care of it in my private time, but I will not be free sooner than after the weekend. If You're interested please mail me.

Small modification to tobbar code to fill Your additional request to keep it's content in a templates width:

Code: Select all

   <?php if($this->modules('topbar')) : ?>
      <div id="fixedTopbar">
             <div class="gkWrap">
            <jdoc:include type="modules" name="topbar" />
         </div>
      </div>
   <?php endif; ?> 


Of course, this code is copied to the file override.css

Hi

I have implemented this code yesterday already so it's within Your website, but this is a PHP code please rempve it from CSS file.

Next I've checked if override.css file was allowed to use in template parameters (it was, but if someone wants to copy this it's an important to have it ON) and added this code to put topbar in place and style to look fine.

Code: Select all

#fixedTopbar {
    background-color: #444444;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    position: fixed;
    width: 100%;
    z-index: 10000;
}

#fixedTopbar li {
    display: inline;
    margin: 0 10px;
    line-height: 40px;
}

#fixedTopbar li a {
    color: #ffffff;
}

#gkPage {
    padding-top: 40px;
}


Of course this is just a beginning. For any new module a new style will be reguired.

Ok I just changed the background color of the topbar, and I would add a line at the bottom, surely you will know how to do, can you help?

Hi

Finally something from my reach

Code: Select all

#fixedTopbar {
border-bottom: 1px solid #dddddd;
background-image: linear-gradient(bottom, #36A103 31%, #51C21D 66%, #72E938 83%);
background-image: -o-linear-gradient(bottom, #36A103 31%, #51C21D 66%, #72E938 83%);
background-image: -moz-linear-gradient(bottom, #36A103 31%, #51C21D 66%, #72E938 83%);
background-image: -webkit-linear-gradient(bottom, #36A103 31%, #51C21D 66%, #72E938 83%);
background-image: -ms-linear-gradient(bottom, #36A103 31%, #51C21D 66%, #72E938 83%);
}