Public Forums 71,145 posts

[remaxutila Friend remaxutilaJoin date: May 2014Posts: 15Downloads:3Uploads:1 Thanks: 2 Thanked: 2 times in 2 posts]

#203732

My Configuration:
Purity iii v1.1.2
T3 Framework v2.4.1

I was having problems styling megamenu.
Changing the values of some of the Dropdowns variables in variables.less

// Dropdowns
// -------------------------

@dropdown-bg: @gray-dark;
@dropdown-border: @gray-dark;
@dropdown-fallback-border: @gray-dark;
@dropdown-divider-bg: lighten(@dropdown-bg,5%);

@dropdown-link-color: @gray-light;
@dropdown-link-hover-color: #fff;
@dropdown-link-hover-bg: lighten(@dropdown-bg,5%);

@dropdown-link-active-color: #fff;
@dropdown-link-active-bg: darken(@dropdown-bg,5%);

@dropdown-link-disabled-color: @gray-light;

@dropdown-header-color: @gray-light;

@dropdown-caret-color: @dropdown-link-color;

did not seem to have the desired affect.

After much investigation I discovered the problem was with megamenu.less
For example,
I had to change megamenu.less (around line 155)
From

.mega-nav > li.active > a, .dropdown-menu .mega-nav > li.active > a {
color: @dropdown-link-active-color;
background-color: @dropdown-link-active-bg;
// Link states
&:hover,
&:focus {
background-color: @dropdown-link-hover-bg;
}
}

to achieve the CSS styling I was expecting fro active links when using variables.less

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#559376

You should not be modifying less files -a s they will be overwritten if/when you should ever decide to update/upgrade your core template files. The preferred method for CSS customization, rather, is via creating a new file called “custom.css” within file path –> /templates/purity_iii/css/ <– and inserting your customized CSS rules there.

[remaxutila Friend remaxutilaJoin date: May 2014Posts: 15Downloads:3Uploads:1 Thanks: 2 Thanked: 2 times in 2 posts]

#559380

TomC, thanks,

I was not intending to suggest the core template files be modified – just identifying where modifications may need to be made.

I prefer to work with LESS files – either via Thememagic or via a custom theme (http://www.t3-framework.org/documentation/bs3-customization.html#theme-customization). For me, working with LESS files makes things easier for the obvious reasons (consistent CSS definitions). As I am sure you are aware, the T3 framework provides multiple options for customizing a Template so that the customizations are not overwritten by a Template/Framework package update/re-install.

Thanks – Mark

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#559383

<em>@remaxutila 458527 wrote:</em><blockquote>TomC, thanks,

I was not intending to suggest the core template files be modified – just identifying where modifications may need to be made.

I prefer to work with LESS files – either via Thememagic or via a custom theme (http://www.t3-framework.org/documentation/bs3-customization.html#theme-customization). For me, working with LESS files makes things easier for the obvious reasons (consistent CSS definitions). As I am sure you are aware, the T3 framework provides multiple options for customizing a Template so that the customizations are not overwritten by a Template/Framework package update/re-install.

Thanks – Mark</blockquote>

I am absolutely aware —> http://www.t3-framework.org/documentation/bs3-customization.html#custom-css

😎

1 user says Thank You to TomC for this useful post

1. remaxutila

[remaxutila Friend remaxutilaJoin date: May 2014Posts: 15Downloads:3Uploads:1 Thanks: 2 Thanked: 2 times in 2 posts]

#559402

Tom,

Thanks.
It took me a while to get my ‘head around’ all the various methods/options available for customizing a T3 Framework Template, mainly because I did not read ALL the documentation from start to finish before ‘jumping in’ and working on my Template customization – my bad.

As long as a stuck with the principle “DO NOT MODIFY ORIGINAL FILES – look for another way to customize” I eventually discovered a solution.

The one exception to this principle was when I was trying to modify the CSS loading order in <head>.
I made a copy of template.less in …/themes/MyCustomTheme folder and modified the various @import paths accordingly, but I could not get it to work for;
../../../../../plugins/system/t3/base-bs3/less/megamenu.less” and (I seem to remember) for
../../../../../plugins.system.t3.base-bs3.less.off-canvas.less.css
so I had to modify the original template.less file.

I am guessing the problem was something to do with recursion in the various @import statements.

If you have a solution to my CSS loading order in <head> problem that does not involve modifying original files I would appreciate it.
The main issue I was tying to resolve was to ensure that /t3-assets/dev/MyCustomTheme/templates.purity_iii.less.themes.MyCustomTheme.style.less.css was the last stylesheet to be loaded so that I could be sure it wasn’t being overriden by any other t3 stylesheet.

Thanks – Mark

[Author]

Posts