Public Forums 71,145 posts

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#186914

Hello all,

As I am styling two different templates, I’ve come across the same elusive style.

I’m using the megamenu (though it’s not even yet doing a dropdown) in both cases. I have it set so that there is Red text on a back backrground for the current page and the hover state and white text on a black background for the rest of the links. Simple, right?

Ok, so when I click on a link, if I move my mouse off the navbar, I see this gradient grey but it goes to the next page so fast that I can’t find what the css is – what element it is assigned to. It also shows the same thing when I tap an item when using my tablet – of course there is no hover in that case, so I never see the red text/black background, only the grey gradient background.

I have gone through the .less files (in development mode) and tried one by one getting rid of the lines that have gradient in them, but none of them seem to get rid of this.

Here’s a short screencast that should make it more clear: http://screencast.com/t/ZkhQgJRMjRN5

Please help.

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#490375

Hi slavelle,

The css style of T3 framework Mega Menu is defined in <blockquote>plugins/system/t3/base/less/megamenu.less</blockquote>. But, we always have the overridden css styles for Mega Menu on diffrerent JA Templates. It can be found in <blockquote>templates/ja_template/less/megamenu.less.</blockquote>

Regards,
—
Leo

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#490432

Thanks Leo. Yes I understand this, cut I can’t find what element is getting styled that way in order to change our override it.I Adam looking to find out exactly what bit is being followed gray and by what do can change our.for example, if it is a li a: hover or whatever.anyone have any ideas what I should bye liking for?

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#490441

Please excuse my mobile post and it’s related misspellings 🙂

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#490448

I often feel like I’m talking to myself, but when I find something, I like to share it so it may also help someone else taht’s looking for it.

I wasn’t able to locate the style that is being applied to the button described above, but I DID find the less variable that is controlling it, so I got it at the source. One way or the other, I’ve at least solved the problem.

In the variables.less file, there is a section for the navbar with some definitions. Here is the one that affected me:

"@navbarLinkBackgroundHover: @Black;"


In working a bit with this new framework and the .less files and specifically, the .less variables, I can see that there are some great opportunities to restyle a number of things in short form: good, but also a great deal of complexity added to the chain of css styles, not always easily found!

Is there going to be a document produced at some point that shows what the variables effect in the base template and some basic direction on how to quickly style things or will it continue to be a “find them as you find them” exercise? It would be really helpful to the template development community to have such a document, and it seems someone must have written this stuff down somewhere 🙂

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#490456

Hi slavelle,

Thanks for your feedback. You can follow below link for our T3 framework documentation including Mega Menu too.
http://t3-framework.org/documentation.html

Regards,
—
Leo

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#490492

Leo – that documentatino is useful, and I’ve gone through it a number of times. Unfortunately, it doesn’t really get into the details of how all of the styles connect to each other, so there’s a lot of hunt and peck to find what”s affected by what settings. There are obviously a lot of less settings that are reliant on the variables.less file. The custom css is nice for overriding things, but its nice to be able to get them at the source if possible – that’s kind of the point of the less stuff and anyway, right?

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#490513

Hi slavelle,

The above documents are all the tips I can give you, I think You will be more comfortable with our T3 framework as the time goes and you learn from practical experiences. For JA Users who are new to our T3 framework or LESS, we always recommend them to work with CSS files by setting No to Development Mode. By that way, they can use some Developer Tools (Chrome tool, Firebug) to detect exactly which files they need to apply changes. Then compare with less files in /less folder, in general, less file & css file always have same name.

Furthermore, along with new T3 framework or our JA Template release, we also update our guides for these (New features, fixed bug, layouts….). Hope you can keep track of them.

Regards,
—
Leo

[Author]

Posts