Post by m_aram » Fri Aug 21, 2015 1:38 am

Hello,

I am having difficulty with aligning the search bar at top to right and bring it down a little to have it centered vertically.
I attached two pictures of how it is and how I want it to be.

This is the code I have in system/modification/catalog/view/theme/default/template/common/header.tpl

Can anyone please help me fix it?

Code: Select all

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo $title; ?></title>

<base href="<?php echo $base; ?>" />


<?php if ($description) { ?>
<meta name="description" content="<?php echo $description; ?>" />
<?php } ?>
<?php if ($keywords) { ?>
<meta name="keywords" content= "<?php echo $keywords; ?>" />
<?php } ?>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<?php if ($icon) { ?>
<link href="<?php echo $icon; ?>" rel="icon" />
<?php } ?>
<?php foreach ($links as $link) { ?>
<link href="<?php echo $link['href']; ?>" rel="<?php echo $link['rel']; ?>" />
<?php } ?>
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
<?php foreach ($styles as $style) { ?>
<link href="<?php echo $style['href']; ?>" type="text/css" rel="<?php echo $style['rel']; ?>" media="<?php echo $style['media']; ?>" />
<?php } ?>
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
<?php foreach ($scripts as $script) { ?>
<script src="<?php echo $script; ?>" type="text/javascript"></script>
<?php } ?>
<?php echo $google_analytics; ?>

        <?php global $config; if ($config->get('config_vie_custom_js')) { ?>
        <?php echo html_entity_decode($config->get('config_vie_custom_js'), ENT_QUOTES, 'UTF-8'); ?>
        <?php } ?>
      
</head>
<body class="<?php echo $class; ?>">
    <?php echo $language; ?>
    <div id="top-links" class="nav pull-right">
      <ul class="list-inline">
      </ul>
    </div>
  </div>
</nav>
<header>
  <div class="container">
<div>
</div>
    <div class="row">
      <div class="col-sm-4">
        <div id="logo">
          <?php if ($logo) { ?>
          <a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
          <?php } else { ?>
          <h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
          <?php } ?>
        </div>
      </div>

      <div class="col-sm-5"><?php echo $search; ?>


    </div>
  </div>
</header>





<div align="center">
	        <table border="0" cellpadding="0" cellspacing="0" width="1140" height="25">
		<tr>
			<td width="175" align="center" bgcolor="#C0C0C0">
                        <a href="http://armnumres.org/index.htm">HOME</a></td>
			<td width="175" align="center" bgcolor="#C0C0C0">
                        <a href="http://armnumres.org/catalogue.htm">CATALOGUE</a></td>
			<td width="175" align="center" bgcolor="#C0C0C0">
                        <a href="http://armnumres.org/auctions.htm">AUCTIONS</a></td>
			<td width="175" align="center" bgcolor="#C0C0C0">
                        <a href="http://armnumres.org/bibliography.htm">BIBLIOGRAPHY</a></td>
		        <td width="175" align="center" bgcolor="#C0C0C0">
			<a href="http://forum.armnumres.org/">FORUM</a></td>
			<td width="175" align="center" bgcolor="#C0C0C0">
                        <a href="http://armnumres.org/aboutus.htm">ABOUT US</a></td>
		</tr>
        	</table>
          </div>




<?php if ($categories) { ?>
<div class="container">
  <nav id="menu" class="navbar">
    <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>




    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
<li><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a></li>
        <?php foreach ($categories as $category) { ?>
        <?php if ($category['children']) { ?>
        <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
          <div class="dropdown-menu">
            <div class="dropdown-inner">
              <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
              <ul class="list-unstyled">
                <?php foreach ($children as $child) { ?>
                <li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
                <?php } ?>
              </ul>
              <?php } ?>
            </div>
            <a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>
        </li>
        <?php } else { ?>
        <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
        <?php } ?>
        <?php } ?>



    <?php echo $currency; ?>



</div>
      </ul>
    </div>




  </nav>
</div>
<?php } ?>

Attachments

bar_the_way_i_want_it.jpg

bar_the_way_i_want_it.jpg (104.42 KiB) Viewed 1842 times

Screen Shot 2015-08-20 at 10.31.09 AM.png

Screen Shot 2015-08-20 at 10.31.09 AM.png (54.72 KiB) Viewed 1842 times


Newbie

Posts

Joined
Fri Aug 21, 2015 1:27 am

Post by viethemes » Fri Aug 21, 2015 10:37 pm

I have just modified code, you can replace with code below

Code: Select all

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo $title; ?></title>

<base href="<?php echo $base; ?>" />


<?php if ($description) { ?>
<meta name="description" content="<?php echo $description; ?>" />
<?php } ?>
<?php if ($keywords) { ?>
<meta name="keywords" content= "<?php echo $keywords; ?>" />
<?php } ?>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<?php if ($icon) { ?>
<link href="<?php echo $icon; ?>" rel="icon" />
<?php } ?>
<?php foreach ($links as $link) { ?>
<link href="<?php echo $link['href']; ?>" rel="<?php echo $link['rel']; ?>" />
<?php } ?>
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
<?php foreach ($styles as $style) { ?>
<link href="<?php echo $style['href']; ?>" type="text/css" rel="<?php echo $style['rel']; ?>" media="<?php echo $style['media']; ?>" />
<?php } ?>
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
<?php foreach ($scripts as $script) { ?>
<script src="<?php echo $script; ?>" type="text/javascript"></script>
<?php } ?>
<?php echo $google_analytics; ?>

        <?php global $config; if ($config->get('config_vie_custom_js')) { ?>
        <?php echo html_entity_decode($config->get('config_vie_custom_js'), ENT_QUOTES, 'UTF-8'); ?>
        <?php } ?>
      
</head>
<body class="<?php echo $class; ?>">
    <?php echo $language; ?>
    <div id="top-links" class="nav pull-right">
      <ul class="list-inline">
      </ul>
    </div>
  </div>
</nav>
<header>
  <div class="container">
<div>
</div>
    <div class="row">
      <div class="col-sm-7">
        <div id="logo">
          <?php if ($logo) { ?>
          <a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
          <?php } else { ?>
          <h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
          <?php } ?>
        </div>
      </div>

      <div class="col-sm-5" style="padding-top: 40px;"><?php echo $search; ?>


    </div>
  </div>
</header>





<div align="center">
           <table border="0" cellpadding="0" cellspacing="0" width="1140" height="25">
      <tr>
         <td width="175" align="center" bgcolor="#C0C0C0">
                        <a href="http://armnumres.org/index.htm">HOME</a></td>
         <td width="175" align="center" bgcolor="#C0C0C0">
                        <a href="http://armnumres.org/catalogue.htm">CATALOGUE</a></td>
         <td width="175" align="center" bgcolor="#C0C0C0">
                        <a href="http://armnumres.org/auctions.htm">AUCTIONS</a></td>
         <td width="175" align="center" bgcolor="#C0C0C0">
                        <a href="http://armnumres.org/bibliography.htm">BIBLIOGRAPHY</a></td>
              <td width="175" align="center" bgcolor="#C0C0C0">
         <a href="http://forum.armnumres.org/">FORUM</a></td>
         <td width="175" align="center" bgcolor="#C0C0C0">
                        <a href="http://armnumres.org/aboutus.htm">ABOUT US</a></td>
      </tr>
           </table>
          </div>




<?php if ($categories) { ?>
<div class="container">
  <nav id="menu" class="navbar">
    <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>




    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
<li><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a></li>
        <?php foreach ($categories as $category) { ?>
        <?php if ($category['children']) { ?>
        <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
          <div class="dropdown-menu">
            <div class="dropdown-inner">
              <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
              <ul class="list-unstyled">
                <?php foreach ($children as $child) { ?>
                <li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
                <?php } ?>
              </ul>
              <?php } ?>
            </div>
            <a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>
        </li>
        <?php } else { ?>
        <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
        <?php } ?>
        <?php } ?>



    <?php echo $currency; ?>



</div>
      </ul>
    </div>




  </nav>
</div>
<?php } ?>

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by m_aram » Sat Aug 22, 2015 3:21 am

Thank you very much! Looks amazing!

Also I moved the Currency to the menu bar (in the same code). Do you know how to make it change color so it is similar to rest of the buttons?

Newbie

Posts

Joined
Fri Aug 21, 2015 1:27 am

Post by viethemes » Sat Aug 22, 2015 6:17 pm

Could you provide your site URL, so we can take a look at it closer?

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by m_aram » Sun Aug 23, 2015 3:07 am

viethemes wrote:Could you provide your site URL, so we can take a look at it closer?


http://armnumres.org/archiv/

Newbie

Posts

Joined
Fri Aug 21, 2015 1:27 am

Post by viethemes » Sun Aug 23, 2015 10:34 pm

To fix it, you can intall my free extension Custom CSS and add code below

Code: Select all

#menu .pull-left button {
	color: white;
	padding: 11px;
}

#menu .pull-left:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by m_aram » Mon Aug 24, 2015 2:21 am

Thank you, but it worked partially. Now when you click on it and want to change the currency, it also has white font.

Newbie

Posts

Joined
Fri Aug 21, 2015 1:27 am

Post by m_aram » Mon Aug 24, 2015 2:29 am

Also when I do that, the search bar goes back to its place and I have to re-enter the code you gave me previously.

Newbie

Posts

Joined
Fri Aug 21, 2015 1:27 am

Post by viethemes » Mon Aug 24, 2015 10:15 pm

You can try this code

Code: Select all

#menu .pull-left button {
   color: white;
   padding: 11px;
}
#menu .pull-left .dropdown-menu button {
   color: black;
	text-align: left;
	padding: 5px;
}

#menu .pull-left:hover {
   background-color: rgba(0, 0, 0, 0.1);
}
About loosing code, you should modify this file catalog/view/theme/default/template/common/header.tpl, the change will not loose when you rebuild cache.

http://www.viethemes.com - OpenCart turtorials, news, tips and stricks, extension

Our extensions:
Visual Theme Editor - Powerful tool for customizing style of any theme visually
Live Theme Editor - Customize layout, colors, backgrounds, fonts of the default theme
Theme Animation - Animation Editor for any theme

Extra Positions PRO, Custom JavaScript, Custom CSS and others


User avatar
Active Member

Posts

Joined
Thu Jan 08, 2015 12:17 pm


Post by m_aram » Tue Aug 25, 2015 9:52 am

Thank you again! It worked.

Newbie

Posts

Joined
Fri Aug 21, 2015 1:27 am
Who is online

Users browsing this forum: No registered users and 1 guest