0

I have a PHP application that uses Twitter Bootstrap and allows the user to select the preferred Bootswatch theme. In the application, there is a PHP class to build a datagrid (table thead tbody tfoot), however within the <td> element was inserted into the <small>, then removed the <small> and decide to use CSS.

td { font-size:0.85em; vertical-align: middle !important; }

However, several Bootswatch themes using a less variable @font-size-small, and I would like my datagrid reuse this variable, in other words, when the user to choose a Bootswatch theme, the datagrid font size would be adjusted based on the theme and not explicitly defined by font-size:0.85em;

Thanks!

Magno Alberto
  • 628
  • 14
  • 27

1 Answers1

1

You have some ways to do this, one of them is specify a class in the body or in the container to change the style which theme is selected.

Like this:

body.theme1 {
  font-size: 0.85em;
}

body.theme2 {
  font-size: 1.25em;
}

or in LESS/SASS:

body.theme1 {
  font-size: @font-size-small;
}

body.theme2 {
  font-size: @font-size-small-theme2;
}
Rafael RN
  • 176
  • 1
  • 8
  • Thanks Rafael, I believe you are doing something wrong when using LESS, from what I understood reading 'http://lesscss.org/', I first link my .less stylesheets with the rel attribute set to "stylesheet/less": `` and add ``, but unfortunately I see no change. My styles.less: `body { font-size: @font-size-small; }` – Magno Alberto Aug 16 '16 at 15:00
  • @MagnoAlberto For your code works, you need to include the js before your .less `` – Rafael RN Aug 16 '16 at 15:12