Install the little animated lines on woo

1

Hello, theme Antimatter shows a permanent line above a selected menu-item. And it shows an animated line below the menu-item while hovering the menu-item.

Is there some way to copy this style/behaviour into theme Woo?

Thanks in advance. jef

2

@jefrey,

[…] is there a place in the documentation to look?

No

Copying the scss from one theme to the other is not as simple as it sounds… Themes do not share selectors for a certain element.

Here are the steps to find the relevant css for the lines above and below the menu items in theme Antimatter and apply the css in theme Woo:

  • Enable theme Antimatter
  • Carefully look into the browser’s devtools what happens when an element is set to be ‘active’ and/or ‘hover’.
  • Copy the css found from previous step into css file of theme Woo
  • Alter the selectors in the copied css to match the selectors for the menu-items in the new theme.
  • Tweak and poke to get things right. For example in theme Woo, the header is not as wide as in Antimatter. You therefor have to alter the position of the upper and lower line.

Here is the result of above steps you can copy at the bottom of file user/themes/woo/css/default.css:

/* Draw line above and below link, but keep it hidden */
ul#nav li a:before, 
ul#nav li a:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 10px;   /* alter the position of lower line */
    left: 0;
    background-color: #1BB3E9;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

/* Show line below on hover */
ul#nav li a:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(0.75);
    -moz-transform: scaleX(0.75);
    -ms-transform: scaleX(0.75);
    -o-transform: scaleX(0.75);
    transform: scaleX(0.75);
}

/* Show line above when active */
ul#nav li.active a:after {
    top: 10px;      /* Alter position of upper line */
    visibility: visible;
    -webkit-transform: scaleX(0.75);
    -moz-transform: scaleX(0.75);
    -ms-transform: scaleX(0.75);
    -o-transform: scaleX(0.75);
    transform: scaleX(0.75);
}
3

Thank you Pamtbaau, it works, the explanation is perfect and reassures me that I didn’t see anything else to modify that I haven’t tried yet, except that I didn’t dare to copy from scss to css, this opens up possibilities for me, thanks again. Good evening to you. jef

4

@jefrey, I didn’t copy from scss, but from the generated css visible in the Devtools of the browser…

5

Good evening, I take back this subject because I have a new problem, the copy / paste works with simple pages but not with some modular pages, I have the impression that it is because of the type of url address of the modules, here is :
-my first tab points to a simple page and it works and I have a simplified url address:
<a href="/demo">/mypage</a>
-when I click on that tab, the little line at the top shows up and stays in place as long as I’m on that page, everything is fine.
-my other links point to modules of a modular page but the url address is long, example:
<a href="http://deux.localhost/#features">firstmodule</a>

I guess the problem is with this long address, and it would probably work if it was renamed like this:
<a href="/home/_features">firstmodule</a>
the problem is that I can’t figure out how to rename it.
I searched in the documentation ‘page linking’ , but I can’t find the solution.
Thanks in advance. jef

Hello Pamtbaau, i would like to remove the nonsense I wrote in post 1:(which he already has in his folders) is possible?

6

I have the impression that it is because of the type of url address of the modules

I don’t think so. You probably have to check the path to the links in the modular on-page menu and add the correct selectors to the existing rules in the css file.

i would like to remove the nonsense I wrote in post 1:(which he already has in his folders) is possible?

I’m afraid I do not understand this request…

7

Hello, I wanted to say how to modify the first message, because I had written a stupidity by saying that woo had in its folders the scss, that can mislead someone who would seek in woo, this famous folder scss, which does not exist by nature.