0

I'm trying to customize a Joomla template, which is based on Bootstrap. Specifically, I'm trying to make a "hardcoded" .span4 have the width of a .span3. Sure, it would be much easier to change the markup, but I think that's what css is for, despite the way most of us use Bootstrap for defining layout and visual appearance. Besides, where would be the fun of learning?

For that, this is what I'm trying in the my_css.less provided with the template:

.row-fluid #top1.span4 {
    .row-fluid .span(3);
    background:red;
}

Actually, the "background" bit is only to make sure that I'm not getting the selector wrong. So, I get that element with a red background, but the rest of the properties aren't applied. This is what I get instead:

.row-fluid .span4 {
width: 31.623931623932%;
}

Am I doing anything wrong? Is what I'm trying even possible?

Thank you!

* Edit *

This is the template I'm using in my page:

Perty by SmartAddons

The bit I'm trying to customize is the one at the right of the logo, the one holding the language selector and the social icons.

My client's logo is wider than the one in the template example, so it pushes #top1 to the right, and it pushes the following element (the one containing "galleries", "my account" and the search box) below.

Answering @Harry's question about selectors not matching, mine is ".row-fluid #top1.span4" because I only want my modification to apply to the .span4 contained in #top1. The other piece of code I pasted below is what is being applied instead of what I intend. Also, I wanted my customization to take preference over the default css, so my selector tries to be more specific. It doesn't seem to be wrong, because the background of the element becomes red.

@Harry:

Also, are you using any mixins to generate the width?

I'm not experienced in Less and I wasn't able to find the mixin in bootstrap documentation, but according to @freejosh at this post:

In mixins.less there's a mixin called .span(@columns) that's used to calculate the width, depending on @gridColumnWidth and @gridGutterWidth along with the argument.

Actually, that example is the one I'm trying to adapt to my needs.

I hope my edition made things clearer (or at least not more obscure, english is not my native language).

Thank you again!

* Edit 03/09/2014 *

Ok, I think I'm gettin closer. New code:

.row-fluid #top1.span4 { #grid > .fluid > .span(3); background:red; }

Resulting css: .row-fluid #top1.span4 { width: * 3 * 2; background: red; }

Of course, the browser complains of an invalid property value. But at least that is a step (forward?)

Community
  • 1
  • 1
akhasis
  • 89
  • 1
  • 8
  • 1
    Can you show your full code please? The selector on the first doesn't match the second. Also, are you using any mixins to generate the width? – Harry Sep 03 '14 at 11:29
  • 1
    What Less compiler it is? Assuming it's about Bootstrap 2.x, the master Less compiler would throw a error for your snippet because there's no `.row-fluid .span(...)` mixin at all (there're only `#grid .core .span(...)`, `#grid .fluid .span(...)` and `#grid .input .span(...)`). It looks like your compiler (`lessphp`?) just skips the mixin it can't find. – seven-phases-max Sep 03 '14 at 23:11
  • The compiler is embedded with the template, so I assume it is a php one running in the server. - From what you say, I understand that I must find in Bootstrap the declaration that creates the following section of code in the resulting css: `@media (min-width: 1200px) .row-fluid .span4 { width: 31.623931623932%; }` And then write a similar code for .span3, am I right? – akhasis Sep 04 '14 at 06:22
  • 1
    Well, `.row-fluid .span4` is generated as a part of the whole `.span*` family generation (e.g. with something like `#grid > .fluid(blabla, blabla)`) so you simply can't use the same code for your class, `.fluid` is a parametric mixin too so when you invoke its child mixins as `.fluid > span(...)` you "skip" `.fluid` parameters that would otherwise be used to calc the width (thus that invalid CSS output, yet again it's just `lessphp` that don't like to produce error messages). – seven-phases-max Sep 04 '14 at 19:57
  • 1
    So yes I would suggest to forget about those BS2 grid mixins (they are mostly for internal BS use and it's all a real mess actually) and write corresponding styles directly (using corresponding BS variables if possible but not obligatory - it's BS2 so you've already lost any possible compatibility you'd be care in other situations and you're free to hack it any way you like then :). – seven-phases-max Sep 04 '14 at 19:58
  • Ok, so I will. I think I still have a bit to learn about Less to understand how parametric mixins and child mixins work and how they are affected in my case. Thank you all! – akhasis Sep 05 '14 at 11:32

1 Answers1

0
#grid > .fluid > .span(3);

gives me:

.row-fluid #top1.span4 {
  width: 23.40425532%;
  *width: 23.35106383%;
  background: red;
}

and NOT width: * 3 * 2;

Tested with less.php, less v1.4, v1.7.3. Notice that Less v2 do not compile BS2 at all.

Less v2 fails on #grid > .core > .span(@gridColumns); in navbar.less

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224