How to create a fixed TOPBAR

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%);
}


Perfect, beautiful green ... but now I edit for my style

.(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.

.(mod_jfusion_login) { float: right; }

This should be the correct string ... but nothing changes

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.

Unfortunately, no. I try to do things to make my site (up to where I can), I have another job

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.

Just deleted the code from override.css

nuova barra.png

And now my new topbar in style to the template

Finally missing "only" :
- Understand how to put the form on the right
- Move the login button after user and pass and remove it from the top of the topbar (center it as the box user and pass)

prelogin.png

- Do the same thing over, even after login.

after login.png

Unfortunately, not being a programmer, I do not know if it is a problem of the form JFusion or Topbar

Fortunately,
I found a great site that also create templates, extensions and more for joomla (and now for wordpress) has at its base a fabulous and quick support in order to meet the needs of small people like me who does not understand anything programming.
thank you very much

Hi

I'm trying to help whatever I can, but please understand that this requests are taking more time than other and I have dozens of users I need to help daily. This is why we have a policy that bigger customizations are not supported.

Anyway try add this code to override.css :

Code: Select all

#fixedTopbar form#login-form {
    float: right;
}


This should move this form to the right.

WOW, is perfect!
Thank you so much time that you're dedicating.

WOW.png

It seemed too good to be true ... is ok after login, but without having had access to:

Nooooo.png

the login button is below ....
I publish my override.css maybe see if there is an error.

Code: Select all

/*
#------------------------------------------------------------------------
# The World News II - July 2011 template (for Joomla 1.6/1.7)
#
# Copyright (C) 2007-2011 Gavick.com. All Rights Reserved.
# License: Copyrighted Commercial Software
# Website: http://www.gavick.com
# Support: [email protected]
*/

/* Here you can include your override CSS styles */
/* Move logo to left side */
#gkLogo {float:left;}
/* Move new position to right side, push it down 30px to level it with logo */
#gkTopPosition {float:right;width:468px; height:60px;margin-top:30px;}
#gkMainMenu > div > ul > li > a {
padding: 0 17px 0 17px;
}

#fixedTopbar {
    background-color: #F6F6F6;
    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;
}
#fixedTopbar {
    overflow: visible;
}
.(mod_jfusion_login) { float: right; }
#fixedTopbar {
border-bottom: 1px solid #474747;
background-image: linear-gradient(bottom, #FAFAFA 98%);
background-image: -o-linear-gradient(bottom, #FAFAFA 98%);
background-image: -moz-linear-gradient(bottom, #FAFAFA 98%);
background-image: -webkit-linear-gradient(bottom, #FAFAFA 98%);
background-image: -ms-linear-gradient(bottom, #FAFAFA 98%);
}
#fixedTopbar form#login-form {
    float: right;
}

In addition, a layman, I think to solve my problem of hitting the button, the logo and welcome message I modify the "margin"? right?

Hi

Please also add this code to override.css:

Code: Select all

#fixedTopbar form#login-form input.button {
    float: right;
    margin-left: 5px;
    margin-top: 6px;
}


Hi

Please also add this code to override.css:

Code: Select all

#fixedTopbar form#login-form input.button {
    float: right;
    margin-left: 5px;
    margin-top: 6px;
}


Hello, I just added the code that you have brought and improved the position of the button only after logging in (as you can see it is after but below)

logout_1.png

Instead i do not understand why the login and password box are centered in the bar but after the login are attached to the top margin ....

login_1.png

Hi

What browser are You checking it with ? I see it like on the screenshot below in every browser.

Hi
usually use chrome, but I checked with safari gives me the same error in chrome. Firefox is ok. I.e. I do not have now within reach, but I'll see if it's wrong ...
But I do not understand why you do not rather of the error?

Hi

Ok. Small adjustment to the code so rest of the browsers should show it better. In override.css line 55 change class :

Code: Select all

#fixedTopbar form#login-form {
float: right;
}


to

Code: Select all

#fixedTopbar form#login-form {
float: right;
width: 35%;
}


This is what I had before with chrome

chrome.png

chrome2.png

(Opera and Firefox OK)
Ok now go well with chrome.

chrome3.png

There is some change only this, but I'm happy however

miaccontento.png

on ever browser
A problem now, i see, it's only with safari

Safari_pre.png

Safari_post.png

I have not checked Internet Explorer ....

Hi

Safari looks like old style file was loaded from cache because the width is different. Anyway please try play with the width value in the class I posted as last. I believe there will be a width suitable for all browsers.

Ok thank you very much, I will do the tests

I did a bit of testing I found that it is bringing its width: 35% to 40% even Safari is set up.
Have You perhaps a trick for removing this space (which was not there before)?

spazio.png

Hello, I wanted to know how to make links in Topbar, to make it in this way:

Schermata 10-2456217 alle 12.01.05.png

Hi

Can You please remind me Your web url ? I cannot find it in this long thread Please make new threads for new problems, so it will be easier for me to handle. Ok?

i send you a PM

Hi Teitbite, have you a solution for me?

Hi Teitbite, in vbulletin I put this code in the topbar, and I would have the same effect in joomla.

I await your response, thank you.

Code: Select all

<div class="Topbar">
<span class="tophome">
<li><a id="uno" href="/">HOME</a></li>
<li><a id="due" href="/forum">FORUM</a></li>
<vb:if condition="$show['guest']"><li><a id="tre" href="/forum/register.php">Registrazione</a></li></vb:if>
</span>

Hi

For links use mod_custom with <a></a> links, that add this to css:

Code: Select all

#fixedTopbar a {
font-family: BebasNeue,Arial,sans-serif;
color: #ffffff;
text-decoration: none;
line-height:40px;
padding: 0 10px;
display: block;
float: left;
}

#fixedTopbar a:hover {
color: #99FF00;
text-decoration: none;
}


about vbulletin, I do not even know what is this, so I cannot help ;/

That's ok...
But now, how to insert this?

Schermata 10-2456221 alle 11.32.37.png

Can i create a new module?
i see this code,

Code: Select all

#gkTopBar .social-icons {
   float: left;
}
#gkTopBar .social-icons a {
   float: left;
   display: block;
   width: 19px;
   height: 20px;
   margin: 11px 0 0 0;
   padding: 0 12px;
   border-left: 1px solid #444;
   background: url(/images/social_icons.png) no-repeat 18px 2px;
   text-indent: -9999px;
   -webkit-transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
      -moz-transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
        -o-transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
           transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}
#gk-gnew h2 {
   top: 0px;
   position: absolute;
   left: -6511px;
}
#gkTopBar .social-icons a.gkFb:hover {
   background-position: 18px -50px;
}

#gkTopBar .social-icons a.gkTwitter {
   background-position: -22px 2px;   
}

#gkTopBar .social-icons a.gkTwitter:hover {
   background-position: -22px -50px;
}

#gkTopBar .social-icons a.gkGplus {
   background-position: -68px 2px;
}

#gkTopBar .social-icons a.gkGplus:hover {
   background-position: -68px -50px;
}

#gkTopBar .social-icons a.gkRss {
   background-position: -115px 2px;
   border-right: 1px solid #444;
   margin-right: 32px;
}

#gkTopBar .social-icons a.gkRss:hover {
   background-position: -115px -50px;
}


1. I put a social_icons.png inside a /images? OK?
2. I copy this code in css override (changing the #gktopbar with my value #fixedtopbar)? ok?
3. now i think that i create a joomla module/position or?

i see this code with firebug

Code: Select all

<div>
    <div class="social-icons">
       <div class="custom">
         <p>
         <a href="http://www.facebook.com/pages/........./........" class="gkFb">Facebook</a>
         <a href="https://twitter.com/............" class="gkTwitter">Twitter</a>
         <a href="https://plus.google.com/......................" class="gkGplus">Google+</a>
         <a href="http://feeds.feedburner.com/..................." class="gkRss">RSS</a>
         </p>
       </div>
    </div>

Where i put this? in default.php?

There are almost succeeded alone:

1. I created the form and assigned to the topbar
2. I copied the html code inside
3. I copied the code in css override, replacing the prefix

But now I have 2 small problems, as you can see:

Schermata 10-2456221 alle 12.15.19.png

a) I would like the icons before links
b) I would like the icons "centered" than the height of the bar

a) ok, I changed the display order of topbar

nuovo.png

b) I tried to change the css override adding vertical-align: middle, but nothing? Solutions?

For links use mod_custom with <a></a> links, that add this to css:

Hi, I put the links in a custom module in this way

<a href="/" style="color:#909090;">HOME</a>
<a href="/forums/forum.html?quot;_style=&quot;color:=#909090;">FORUM</a>
<vb:if condition="$show['guest']"><a href="/forums/register.php" style="color:lime;">REGISTRAZIONE</a></vb:if>

but I realized that a "REGISTRAZIONE" link above appears the same, why?
I wish it was only visible to those who are not a registered user / guest

a) ok, I changed the display order of topbar

nuovo.png

b) I tried to change the css override adding vertical-align: middle, but nothing? Solutions?

Hi

Please try with this code:

Code: Select all

.social-icons p {
    margin: 0;
}


For links use mod_custom with <a></a> links, that add this to css:

Hi, I put the links in a custom module in this way

<a href="/" style="color:#909090;">HOME</a>
<a href="/forums/forum.html?quot;_style=&quot;color:=#909090;">FORUM</a>
<vb:if condition="$show['guest']"><a href="/forums/register.php" style="color:lime;">REGISTRAZIONE</a></vb:if>

but I realized that a "REGISTRAZIONE" link above appears the same, why?
I wish it was only visible to those who are not a registered user / guest

Hi

I still do not know what is this VB, but can tell You how to make it visible for registered using PHP and joomla classed:

Code: Select all

<?php
$user = JFactory::getUser();
$userID = $user->get('id');
if ($userID != 0) {
?>
<vb><a href="/forums/register.php" style="color:lime;">REGISTRAZIONE</a></vb>
<?php
}
?>


For links use mod_custom with <a></a> links, that add this to css:

Hi, I put the links in a custom module in this way

<a href="/" style="color:#909090;">HOME</a>
<a href="/forums/forum.html?quot;_style=&quot;color:=#909090;">FORUM</a>
<vb:if condition="$show['guest']"><a href="/forums/register.php" style="color:lime;">REGISTRAZIONE</a></vb:if>

but I realized that a "REGISTRAZIONE" link above appears the same, why?
I wish it was only visible to those who are not a registered user / guest

Hi

I still do not know what is this VB, but can tell You how to make it visible for registered using PHP and joomla classed:

Code: Select all

<?php
$user = JFactory::getUser();
$userID = $user->get('id');
if ($userID != 0) {
?>
<vb><a href="/forums/register.php" style="color:lime;">REGISTRAZIONE</a></vb>
<?php
}
?>


Hi teitbite, thank you to the previous post (works great), I understand now where do I put that code .. in default.php? if you where?

Hi

Like I've said I do not know what this "vb" does, so cannot answer this question. But if it's teh link to register form, than maybe /layouts/blocks/toolbar.php or logo.php or nav.php (one of this for sure )

Teitbite Hi, I understand you do not know vb (vbulletin), I just post the code example I used in vbulletin to show the link only to non-registered, and I wanted to know how to do the same thing in joomla, that's all
In summary I put that code or toolbar.php or logo.php or nav.php?
And the code reference to the link "REGISTER" that I used in custom module? I take it off?

Hi Teitbite, I checked in /blocks and is only present logo.php and still do not know where to put it.
But I do not know if you understand what I want to do:
- I created a form (custom) and inside I put 3 link with the codes
this is the code that I put at the beginning in custom module

Code: Select all

<li><a id="uno" href="/">HOME</a></li>
<li><a id="due" href="/forum">FORUM</a></li>
<vb:if condition="$show['guest']"><li><a id="tre" href="/forums/register.html?quot;=&gt;Registrazione=&lt;/a=&gt;=&lt;/li=&lt;/vb:if=

later, on your advice,

Hi

For links use mod_custom with <a></a> links, that add this to css:

I changed the structure of the code that link

Code: Select all

<a href="/" style="font-size:20px; color:#909090;">HOME</a>
<a href="/forum/forum.php" style="font-size:20px; color:#909090;">FORUM</a>
<vb:if condition="$show['guest']"><a href="/forum/register.php" style="font-size:20px; color:lime;">REGISTRAZIONE</a></vb:if>

and links you see perfectly, only that I wanted the REGISTRAZIONE link above which remains within that module (which is published in the topbar), is visible ONLY to unregistered / guest.

after you told me to use this code:

Code: Select all

<?php
$user = JFactory::getUser();
$userID = $user->get('id');
if ($userID != 0) {
?>
<vb><a href="/forums/register.php" style="color:lime;">REGISTRAZIONE</a></vb>
<?php
}
?>

But I did not understand:
1. where to put it in if logo.php (which is present in / blocks), if in nav.php or toolbar.php (which are not present)
2. If you are logo.php, where to put it? (for safety I put my logo.php)

Code: Select all

<?php

// No direct access.
defined('_JEXEC') or die;
$logo_image = $this->getParam('logo_image', '');

if(($logo_image == '') || ($this->getParam('logo_type', '') == 'css')) {
     $logo_image = $this->URLtemplate() . '/images/style1/logo.png';
} else {
     $logo_image = $this->URLbase() . $logo_image;
}

$logo_text = $this->getParam('logo_text', '');
$logo_slogan = $this->getParam('logo_slogan', '');

$user = JFactory::getUser();
// getting User ID
$userID = $user->get('id');
//
$btn_login_text = ($userID == 0) ? JText::_('TPL_GK_LANG_LOGIN') : JText::_('TPL_GK_LANG_LOGOUT');

?>
<div id="gkLogoWrap">

   <?php if ($this->getParam('logo_type', 'image')!=='none'): ?>
     <?php if($this->getParam('logo_type', 'image') == 'css') : ?>
     <h1 id="gkLogo">
          <a href="./" class="cssLogo"></a>
     </h1>
     <?php elseif($this->getParam('logo_type', 'image')=='text') : ?>
     <h1 id="gkLogo" class="text">
         <a href="./">
          <?php if($this->getParam('logo_text', '') != '') : ?><span><?php echo $this->getParam('logo_text', ''); ?></span><?php endif; ?>
          <?php if($this->getParam('logo_slogan', '') != '') : ?><small class="gkLogoSlogan"><?php echo $this->getParam('logo_slogan', ''); ?></small><?php endif; ?>
         </a>
     </h1>
    <?php elseif($this->getParam('logo_type', 'image')=='image') : ?>
    <h1 id="gkLogo">
          <a href="./">
          <img src="<?php echo $logo_image; ?>" alt="<?php echo $this->getPageName(); ?>" />
          </a>
     </h1>
     <?php endif; ?>
    <?php endif; ?>

      <?php if($this->modules('newposition')) : ?>
   <div id="gkTopPosition">
      <jdoc:include type="modules" name="newposition" style="<?php echo $this->module_styles['newposition']; ?>" />
   </div>
   <?php endif; ?>

   <?php if($this->modules('highlighter')) : ?>
   <div id="gkHighlighter">
      <jdoc:include type="modules" name="highlighter" style="<?php echo $this->module_styles['highlighter']; ?>" />
   </div>
   <?php endif; ?>   
</div>

3. But the code for the link REGISTRAZIONE that is in the custom module, I have to do? to delete it, edit it, do not do anything and I leave it alone?

Sorry for the message and for my dementia

Hi

First I've made a mistake myself. This is a code You should use:

Code: Select all

<?php
$user = JFactory::getUser();
$userID = $user->get('id');
if ($userID == 0) {
?>
<vb><a href="/forums/register.php" style="color:lime;">REGISTRAZIONE</a></vb>
<?php
}
?>


means that if user os not registered than link will be shown.

I see the code for old register link in logo.php file:

Code: Select all

         <?php if(GK_REGISTER) : ?>
         <a href="<?php echo $this->URLbase(); ?>index.php?option=com_users&amp;view=registration" id="btnRegister"><span><?php echo JText::_('TPL_GK_LANG_REGISTER'); ?></span></a>
         <?php endif; ?>


Ok thanks but what should I do than what I told you?
Where do I put this code? in logo.php? but I replace it with what you posted (old)?
And a link inside a custom module?

Hi

PHP code will not be working inside custom module, so please simply work on logo.php file. By replacing old register link which code looks like that:

Code: Select all

<?php if(GK_REGISTER) : ?>
         <a href="<?php echo $this->URLbase(); ?>index.php?option=com_users&amp;view=registration" id="btnRegister"><span><?php echo JText::_('TPL_GK_LANG_REGISTER'); ?></span></a>
         <?php endif; ?>


to Your new register link code:

Code: Select all

<?php
$user = JFactory::getUser();
$userID = $user->get('id');
if ($userID == 0) {
?>
<vb><a href="/forums/register.php" style="color:lime;">REGISTRAZIONE</a></vb>
<?php
}
?>


Teitbite Hello, unfortunately I can not make it work.
1. I did not understand where I need to insert or replace the code you gave me in logo.php

This is the code of my logo.php

Code: Select all

<?php

// No direct access.
defined('_JEXEC') or die;
$logo_image = $this->getParam('logo_image', '');

if(($logo_image == '') || ($this->getParam('logo_type', '') == 'css')) {
     $logo_image = $this->URLtemplate() . '/images/style1/logo.png';
} else {
     $logo_image = $this->URLbase() . $logo_image;
}

$logo_text = $this->getParam('logo_text', '');
$logo_slogan = $this->getParam('logo_slogan', '');

$user = JFactory::getUser();
// getting User ID
$userID = $user->get('id');
//
$btn_login_text = ($userID == 0) ? JText::_('TPL_GK_LANG_LOGIN') : JText::_('TPL_GK_LANG_LOGOUT');

?>
<div id="gkLogoWrap">

   <?php if ($this->getParam('logo_type', 'image')!=='none'): ?>
     <?php if($this->getParam('logo_type', 'image') == 'css') : ?>
     <h1 id="gkLogo">
          <a href="./" class="cssLogo"></a>
     </h1>
     <?php elseif($this->getParam('logo_type', 'image')=='text') : ?>
     <h1 id="gkLogo" class="text">
         <a href="./">
          <?php if($this->getParam('logo_text', '') != '') : ?><span><?php echo $this->getParam('logo_text', ''); ?></span><?php endif; ?>
          <?php if($this->getParam('logo_slogan', '') != '') : ?><small class="gkLogoSlogan"><?php echo $this->getParam('logo_slogan', ''); ?></small><?php endif; ?>
         </a>
     </h1>
    <?php elseif($this->getParam('logo_type', 'image')=='image') : ?>
    <h1 id="gkLogo">
          <a href="./">
          <img src="<?php echo $logo_image; ?>" alt="<?php echo $this->getPageName(); ?>" />
          </a>
     </h1>
     <?php endif; ?>
    <?php endif; ?>

      <?php if($this->modules('newposition')) : ?>
   <div id="gkTopPosition">
      <jdoc:include type="modules" name="newposition" style="<?php echo $this->module_styles['newposition']; ?>" />
   </div>
   <?php endif; ?>

   <?php if($this->modules('highlighter')) : ?>
   <div id="gkHighlighter">
      <jdoc:include type="modules" name="highlighter" style="<?php echo $this->module_styles['highlighter']; ?>" />
   </div>
   <?php endif; ?>   
</div>

2. From what I understand using this code in the file logo.php I should do what I asked (hide the REGISTRAZIONE link inside the custom module that i created)?

Hi

My file looks a lot different from the one I have. Please download the template one more time and check the standard file to compare. In the place You will see:

Code: Select all

<?php if(GK_REGISTER) : ?>
         <a href="<?php echo $this->URLbase(); ?>index.php?option=com_users&amp;view=registration" id="btnRegister"><span><?php echo JText::_('TPL_GK_LANG_REGISTER'); ?></span></a>
         <?php endif; ?>


replace this code with:

Code: Select all

<?php
$user = JFactory::getUser();
$userID = $user->get('id');
if ($userID == 0) {
?>
<vb><a href="/forums/register.php" style="color:lime;">REGISTRAZIONE</a></vb>
<?php
}
?>


and Yes, with this code in logo.php file You will not need custom module. PHP code is not working inside custom module anyway.