Page 1 of 1

Light Up only part of the header??

Posted: Wed Nov 22, 2017 1:51 pm
by mausz85
Image
Any way to light up only the part showed in the picture? or change the color to make it different from the others?

Re: Light Up only part of the header??

Posted: Wed Nov 22, 2017 1:57 pm
by kestas
Hi,

Use css.

Cheers

Re: Light Up only part of the header??

Posted: Wed Nov 22, 2017 1:58 pm
by sachin6609
mausz85 wrote:
Wed Nov 22, 2017 1:51 pm
Image
Any way to light up only the part showed in the picture? or change the color to make it different from the others?
Hello

Yes It is possible by some css tricks let me share the url i will Give you the css changes to do That

Thanks

Sachin

Re: Light Up only part of the header??

Posted: Wed Nov 22, 2017 2:15 pm
by mausz85
sachin6609 wrote:
Wed Nov 22, 2017 1:58 pm
mausz85 wrote:
Wed Nov 22, 2017 1:51 pm
Image
Any way to light up only the part showed in the picture? or change the color to make it different from the others?
Hello

Yes It is possible by some css tricks let me share the url i will Give you the css changes to do That

Thanks

Sachin
Website
http://www.led-biz.com

you mean this?

Re: Light Up only part of the header??

Posted: Wed Nov 22, 2017 4:00 pm
by kestas
Hi
There are some tutorial:
https://stackoverflow.com/questions/268 ... rrent-page
Regarding this tutorial you should edit your stylesheet.css
and catalog/view/theme/default/template/common/header.tpl (or header.twig if OpenCart is 3 version).

Good Luck

Re: Light Up only part of the header??

Posted: Wed Nov 22, 2017 4:33 pm
by mausz85
kestas wrote:
Wed Nov 22, 2017 4:00 pm
Hi
There are some tutorial:
https://stackoverflow.com/questions/268 ... rrent-page
Regarding this tutorial you should edit your stylesheet.css
and catalog/view/theme/default/template/common/header.tpl (or header.twig if OpenCart is 3 version).

Good Luck
i already checked but i dont understand it :/, thx anyway!

Re: Light Up only part of the header??

Posted: Wed Nov 22, 2017 4:59 pm
by kestas
ok
find your theme stylesheet.css open in some text editor like notepad or notepad++
find the code:

Code: Select all

#menu .nav > li > a {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    padding: 10px 15px 10px 15px;
    min-height: 15px;
    background-color: transparent;
}
below add:

Code: Select all

#menu .nav > li > a.active-page {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    padding: 10px 15px 10px 15px;
    min-height: 15px;
    background-color: #a94442;
}
where
background-color: #a94442;
is your color you can change.

next open in text editor catalog/view/theme/YOUR-THEME/template/common/header.tpl
find:

Code: Select all

 <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
change to:

Code: Select all

 <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle active-page" data-toggle="dropdown"><?php echo $category['name']; ?></a>
I have not tried, but it should work...

Good Luck

Re: Light Up only part of the header??

Posted: Wed Nov 22, 2017 5:07 pm
by mausz85
kestas wrote:
Wed Nov 22, 2017 4:59 pm
ok
find your theme stylesheet.css open in some text editor like notepad or notepad++
find the code:

Code: Select all

#menu .nav > li > a {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    padding: 10px 15px 10px 15px;
    min-height: 15px;
    background-color: transparent;
}
below add:

Code: Select all

#menu .nav > li > a.active-page {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    padding: 10px 15px 10px 15px;
    min-height: 15px;
    background-color: #a94442;
}
where
background-color: #a94442;
is your color you can change.

next open in text editor catalog/view/theme/YOUR-THEME/template/common/header.tpl
find:

Code: Select all

 <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
change to:

Code: Select all

 <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle active-page" data-toggle="dropdown"><?php echo $category['name']; ?></a>
I have not tried, but it should work...

Good Luck
#menu .nav > li > a {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
padding: 10px 15px 10px 15px;
min-height: 15px;
background-color: transparent;
}

#menu .nav > li > a.active-page {
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
padding: 10px 15px 10px 15px;
min-height: 15px;
background-color: #a94442;
}

<li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>

i did as you wrote but nothing changed, any other ideas? anyway thx for the time helping me out!
I only want one button to be always lighted up not all

Re: Light Up only part of the header??

Posted: Wed Nov 22, 2017 5:21 pm
by kestas
you did not do all
you need replace this line in your header.tpl

Code: Select all

<li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
with this one:

Code: Select all

<li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle active-page" data-toggle="dropdown"><?php echo $category['name']; ?></a>
because I have checked in your site and did not found this class="dropdown-toggle active-page" class where is active page defined.
Or maybe your header.tpl is not default. so to help I need your header.tpl file

you can write me PM

Re: Light Up only part of the header??

Posted: Wed Nov 22, 2017 5:24 pm
by mausz85
kestas wrote:
Wed Nov 22, 2017 5:21 pm
you did not do all
you need replace this line in your header.tpl

Code: Select all

<li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
with this one:

Code: Select all

<li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle active-page" data-toggle="dropdown"><?php echo $category['name']; ?></a>
because I have checked in your site and did not found this class="dropdown-toggle active-page" class where is active page defined.
i did just now but nothing changed

Re: Light Up only part of the header??

Posted: Wed Nov 22, 2017 6:11 pm
by kestas
Please write me PM and send your header.tpl and stylesheet.css files to me. I'll check it.

Re: Light Up only part of the header??

Posted: Thu Nov 23, 2017 9:21 pm
by kestas
The first post with suggestions was wrong.

I just checked and this is working solution

So in your catalog/view/theme/default/template/common/header.tpl in the end of the file after last
<?php } ?>
add this script:

Code: Select all

<script>
$(document).ready(function() {
  var url = window.location.href; 
    $("#menu a").each(function() {
         if(url == (this.href)) { 
            $(this).parents("li:last").addClass("active");
        }
    });
});
</script>
and in your stylesheet.css file add:

Code: Select all

#menu .nav > li.active > a  {
	background-color: lightblue;
}
where
lightblue
is your color you can change to your desired.