COMMUNITY FORUM

Please note that official support for commercial extensions & templates is provided in the Subscriber Help Desk.
Support requests should ONLY be directed there and require an active subscription plan.
This forum board is to be used for archive purposes and knowledge exchange ONLY.

Logo positioning

Krikor Boghossian
Offline
Platinum Member

10 years 1 month ago #139645 by Krikor Boghossian

Replied by Krikor Boghossian on topic Logo positioning / Background interactivity

Open your index.php file and locate the following block.

<section id="logo"<?php if($this->countModules('RadioWave_Menu')) echo 'class="left small-8 bottomMargin"'; ?>>
          <!-- Logo -->
          <h1>
            <a href="<?php echo $siteurl; ?>">
              <?php if($this->params->get('siteLogo')): ?>
              <img src="<?php echo $this->params->get('siteLogo'); ?>" alt="<?php echo $this->params->get('siteLogoAltText', $sitename); ?>" />
              <?php else: ?>
              <span><?php echo $this->params->get('siteTextAsLogo', $sitename); ?></span>
              <?php endif; ?>
            </a>
          </h1>
          <!-- Tagline -->
          <?php if($this->params->get('siteTagline')): ?>
          <h2><?php echo $this->params->get('siteTagline'); ?></h2>
          <?php endif; ?>            
          <div class="clr"></div>   
        </section> 
        
        <?php if($this->countModules('RadioWave_Menu')): ?>
        <div class="column small-8 right rightMenuContainer">
          <div id="menuWrapperCompact" class="right">
            <div id="menuToggler"><span><?php echo JText::_('NU_MENU'); ?></span><i class="icon-menu-1"></i></div> 
            <nav class="mainNav">
              <div id="closeBtn"><i class="icon-cancel-1"></i><span><?php echo JText::_('NU_CLOSE'); ?></span></div> 
              <jdoc:include type="modules" name="RadioWave_Menu" style="nu" />
              <div class="clr"></div>
            </nav>  
          </div>
          
          <!-- Social -->
          <?php if(count($social)): ?>
          <div class="right socialMenu hide-for-small">
          <ul>
            <?php foreach($social as $provider): ?>
            <li>
              <a class="linkIs-<?php echo $provider->class; ?>" target="_blank" href="<?php echo $provider->url; ?>">
                <span><?php echo $provider->name; ?></span>
              </a>
            </li>
            <?php endforeach; ?>
          </ul>
          </div>
          <?php endif; ?>
          <div class="clr"></div>
        </div>  
        <div class="clr"></div>
        <?php endif; ?>

and locate it with this block.

<section id="logo"<?php if($this->countModules('RadioWave_Menu or RadioWave_Leaderboard')) echo 'class="left small-12 large-4 bottomMargin"'; ?>>
          <!-- Logo -->
          <h1>
            <a href="<?php echo $siteurl; ?>">
              <?php if($this->params->get('siteLogo')): ?>
              <img src="<?php echo $this->params->get('siteLogo'); ?>" alt="<?php echo $this->params->get('siteLogoAltText', $sitename); ?>" />
              <?php else: ?>
              <span><?php echo $this->params->get('siteTextAsLogo', $sitename); ?></span>
              <?php endif; ?>
            </a>
          </h1>
          <!-- Tagline -->
          <?php if($this->params->get('siteTagline')): ?>
          <h2><?php echo $this->params->get('siteTagline'); ?></h2>
          <?php endif; ?>            
          <div class="clr"></div>   
        </section> 
        
        <?php if($this->countModules('RadioWave_Menu or RadioWave_Leaderboard')): ?>
        <div class="column small-12 large-8 right rightMenuContainer">

          <?php if($this->countModules('RadioWave_Leaderboard')): ?>
          <div class="text-right small-12">
            <jdoc:include type="modules" name="RadioWave_Leaderboard" style="nu" />
          </div>
          <?php endif; ?>

          <div id="menuWrapperCompact" class="right">
            <div id="menuToggler"><span><?php echo JText::_('NU_MENU'); ?></span><i class="icon-menu-1"></i></div> 
            <nav class="mainNav">
              <div id="closeBtn"><i class="icon-cancel-1"></i><span><?php echo JText::_('NU_CLOSE'); ?></span></div> 
              <jdoc:include type="modules" name="RadioWave_Menu" style="nu" />
              <div class="clr"></div>
            </nav>  
          </div>
          
          <!-- Social -->
          <?php if(count($social)): ?>
          <div class="right socialMenu hide-for-small">
          <ul>
            <?php foreach($social as $provider): ?>
            <li>
              <a class="linkIs-<?php echo $provider->class; ?>" target="_blank" href="<?php echo $provider->url; ?>">
                <span><?php echo $provider->name; ?></span>
              </a>
            </li>
            <?php endforeach; ?>
          </ul>
          </div>
          <?php endif; ?>
          <div class="clr"></div>
        </div>  
        <div class="clr"></div>
        <?php endif; ?>

If you want to remove the social section comment out the following block

<?php if(count($social)): ?>
          <div class="right socialMenu hide-for-small">
          <ul>
            <?php foreach($social as $provider): ?>
            <li>
              <a class="linkIs-<?php echo $provider->class; ?>" target="_blank" href="<?php echo $provider->url; ?>">
                <span><?php echo $provider->name; ?></span>
              </a>
            </li>
            <?php endforeach; ?>
          </ul>
          </div>
          <?php endif; ?>
          <div class="clr"></div>
        </div>  
        <div class="clr"></div>
        <?php endif; ?>

This code adds a new position called radiowave_Leaderboard.
You can add this position to your templateDetails.xml file as well.

This will work but remember not to use the Radiowave_Menu and radiowave_HorizontalMenu positions at the same time.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

focus stuff
Topic Author
Offline
New Member

10 years 1 month ago - 10 years 1 month ago #139646 by focus stuff

Replied by focus stuff on topic Logo positioning

Great news after all ! ! ! !
However, the menu toggler icon remains. How can i remove it as well?
Also, i had no luck fixing the top padding of the logo. Could you please guide me what css code should i add in to avoid those extra ~20px to make the paddings even ?

Edit: I commented out the following code to remove the toggler icon. Is this ok or will it cause any problems?

<div id="menuWrapperCompact" class="right">

<nav class="mainNav">
<div id="closeBtn"><i class="icon-cancel-1"></i><span><?php echo JText::_('NU_CLOSE'); ?></span></div>
<jdoc:include type="modules" name="RadioWave_Menu" style="nu" />
<div class="clr"></div>
</nav>
</div>

Please Log in or Create an account to join the conversation.

focus stuff
Topic Author
Offline
New Member

10 years 1 month ago - 10 years 1 month ago #139647 by focus stuff

Replied by focus stuff on topic Logo positioning

Great news after all ! ! ! !
However, the menu toggler icon remains. How can i remove it as well?
Edit: I commented out the following code to remove the toggler icon. Is this ok or will it cause any problems?

<div id="menuWrapperCompact" class="right">
           <!--   <div id="menuToggler"><span><?php echo JText::_('NU_MENU'); ?></span><i class="icon-menu-1"></i></div>  -->
            <nav class="mainNav">
              <div id="closeBtn"><i class="icon-cancel-1"></i><span><?php echo JText::_('NU_CLOSE'); ?></span></div> 
              <jdoc:include type="modules" name="RadioWave_Menu" style="nu" />
              <div class="clr"></div>
            </nav>  
          </div>

Everything is just as I wanted, except the banner item size. I thought that the remaining menu toggler caused the banner to look smaller but it remains small after i removed it. How can i make it show at its original size?
Also, i had no luck fixing the top padding of the logo. Could you please guide me what css code should i add in to avoid those extra ~20px to make the paddings even ?

Please Log in or Create an account to join the conversation.

Krikor Boghossian
Offline
Platinum Member

10 years 1 month ago #139648 by Krikor Boghossian

Replied by Krikor Boghossian on topic Logo positioning

You can also comment them out via PHP comments.

I accidentally gave you a wrong piece of code.

<section id="logo"<?php if($this->countModules('RadioWave_Menu or RadioWave_Leaderboard')) echo 'class="left small-12 large-4 bottomMargin"'; ?>>
          <!-- Logo -->
          <h1>
            <a href="<?php echo $siteurl; ?>">
              <?php if($this->params->get('siteLogo')): ?>
              <img src="<?php echo $this->params->get('siteLogo'); ?>" alt="<?php echo $this->params->get('siteLogoAltText', $sitename); ?>" />
              <?php else: ?>
              <span><?php echo $this->params->get('siteTextAsLogo', $sitename); ?></span>
              <?php endif; ?>
            </a>
          </h1>
          <!-- Tagline -->
          <?php if($this->params->get('siteTagline')): ?>
          <h2><?php echo $this->params->get('siteTagline'); ?></h2>
          <?php endif; ?>            
          <div class="clr"></div>   
        </section> 
 
        <?php if($this->countModules('RadioWave_Menu or RadioWave_Leaderboard')): ?>
        <div class="column small-12 large-12 right rightMenuContainer">
 
          <?php if($this->countModules('RadioWave_Leaderboard')): ?>
          <div class="text-right small-16">
            <jdoc:include type="modules" name="RadioWave_Leaderboard" style="nu" />
          </div>
          <?php endif; ?>
 
          <div id="menuWrapperCompact" class="right">
            <div id="menuToggler"><span><?php echo JText::_('NU_MENU'); ?></span><i class="icon-menu-1"></i></div> 
            <nav class="mainNav">
              <div id="closeBtn"><i class="icon-cancel-1"></i><span><?php echo JText::_('NU_CLOSE'); ?></span></div> 
              <jdoc:include type="modules" name="RadioWave_Menu" style="nu" />
              <div class="clr"></div>
            </nav>  
          </div>
 
          <!-- Social -->
          <?php if(count($social)): ?>
          <div class="right socialMenu hide-for-small">
          <ul>
            <?php foreach($social as $provider): ?>
            <li>
              <a class="linkIs-<?php echo $provider->class; ?>" target="_blank" href="<?php echo $provider->url; ?>">
                <span><?php echo $provider->name; ?></span>
              </a>
            </li>
            <?php endforeach; ?>
          </ul>
          </div>
          <?php endif; ?>
          <div class="clr"></div>
        </div>  
        <div class="clr"></div>
        <?php endif; ?>

Use this snippet instead.

In your template.css comment the margin-bottom: 25px; of the .bottomMargin h1 class.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

focus stuff
Topic Author
Offline
New Member

10 years 1 month ago #139649 by focus stuff

Replied by focus stuff on topic Logo positioning / Background interactivity

Krikor Boghossian wrote: You need to add a module suffix to your secondary menu eg. smallerMenu and change the look and feel of your menu.

Example
.smallerMenu ul.menu li a {
height: auto;
line-height: 1;
padding: 10px 0;
}

Could you please help me here once again? The code you gave me just makes the secondary menu (the one on top with the external links) to be in a vertical ul. All i want to change is its height to approx 40px and its bg color to something else, so it will clearly differentiate from the actual page navigation... I added smallerMenu as Menu Class Suffix and left the _menu Module Class Suffix as it was. Sadly i cant add any rules, i'm sorry for the noobness but im obviously doing something very wrong, so if you could provide me with a new bgcolor/bar height snippet and let me know what suffix add where I will be even more greatful! : )

Please Log in or Create an account to join the conversation.

Krikor Boghossian
Offline
Platinum Member

10 years 1 month ago #139650 by Krikor Boghossian

Replied by Krikor Boghossian on topic Logo positioning / Background interactivity

Since this is a custom request and generally unrelated to the template I can give you resources that will help you build your site.

The background property.
www.w3schools.com/css/css_background.asp

You need to specify a bg property for the .smallerMenu class.
eg. .smallerMenu { background: #HEX_COLOR; }

the font-size and font-weight attributes is something that you should also need to look into it.

Remember to add all these values in your custom.css file.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.