I'm building a site in Joomla 3 on T3 framework.
I'm having to use LESS for the first time, but am experienced with CSS.
The site will have differently themed landing pages. These will all be identical except for the colour scheme.
I am attempting to set up a colour scheme in the T3 'variables' less file and then implement the colours - the colour will be different for many core components - such as H1, P, DIV Background Color, etc.
So if I set up, say, a master colour for Thailand's page, I create this rule in the variables.less file:
#thai: #e55092;
and then my knowledge of exactly how LESS compiles to CSS falls flat and I lose my entire train of thought.
Because I now want to be able to set up a landing page for Thailand in the T3 template. I need to be able to use the class 'thai' in various places in this page - for instance, the H1 text should be coloured #e55092, an aside background should be #e55092, an HR should be #e55092 ... for THIS page only.
I hope this isn't a too open question but what would be best practice for achieving this, keeping my code clean and fast? My current line of thought is that I create a whole bunch of rules in LESS along the lines of:
thai.h1 { color: #thai }
thai.button [ background-color: #thai }
(excuse syntax - very new to LESS and not sure what's possible or correct)
But isn't that defeating the whole purpose of using LESS in the first place?
I think your question is very broad indeed. Depending on your situation:
One CSS file for all pages. You can consider changing selector order The code for a button can then look like that shown beneath:
.button {
border: 1px solid white;
.thai & { background-color: red;}
.japanese & { background-color: yellow;}
}
In your HTML pages: <body class="thai"> and so on..
Compile different CSS files for each landing page
In Less you can override a variable by putting the definition afterwards
You should first define a main file, for the button example this button.less file should contain something like that shown below:
#button-background-color: orange;
button { background-color: #button-background-color; }
Now you can define you thai theme file (thai.less) as follows:
#import "button.less";
#button-background-color: red;
Or alternatively compile different CSS files using the modify-var option:
lessc button.less --modify-var="button-background-color=red" thai.css
Related
I have some datatables (as in datatables.net) running in PHP within a Laravel 9 framework. Everything works fine but the select length drop down is too small and results in the down arrow impinging on the number as below:
I have tried to find the css class which appears to be:
div.dataTables_wrapper div.dataTables_length select {
width: auto;
display: inline-block;
}
but changing this seems to have no effect - min-width etc. And I did clear all caches!
The rest of it is perfect.
Thanks!
I wrote a reusable app in Vue and I compiled it as a library. I set the global variable $brand-color in SCSS file which is a main color of the app (buttons, borders, font colors). I use this variable in other SCSS component files.
I've put my app to my client's website and everything is working fine. Right now I have another client who is willing to use my app. BUT... new client wants to have my app in different $brand-color than my old one. What would be the best way to approach this problem?
One thing which comes to my mind is to set store variable with value of $brand-color which depends on location.host and bind styles of all "branded" elements.
switch (location.host) {
case 'client1.com':
context.commit('setMainColor', '#ff0000');
...
case 'client2.com':
context.commit('setMainColor', '#16c100');
...
}
But this will be very painful. I would need to apply a lot of changes in all my components. Is there any better solution that style-binding all components?
By the way, I can't use CSS variables because code needs to be IE friendly.
You can have 2 files, each file definne scss variable for different customer:
customer1_variables.scss
$brand-color: green
customer2_variables.scss
$brand-color: red
And you can import it in javascript file
main.js
switch (location.host) {
case 'client1.com':
import './customer1_variables.scss'
...
case 'client2.com':
import './customer2_variables.scss'
...
}
Another solution is using vue-style-component. You can check this article for more detail
So finally I set store value depending on my client and prepared set of SCSS classess specified for each client, i.e.:
.btn-client1 {
background: red;
}
.btn-client2 {
background: blue;
}
...
and I binded classes for specific elements:
:class="`btn-${client}`"`
I want to code format my Less stylesheets similar to how Bootstrap does it - by column. I don't know if I'm languaging it right, so I've included a screenshot of what I'm looking for:
Currently I use either Sublime Text or Visual Studio Code, or, I guess Vim sometimes, but I do most coding in the first two. I can do this manually, but it's a pain in the *ss.
I've also experimented with Sublime plugin AlignTab, but I didn't get anywhere.
I've looked quite a bit for how to do this, but I concede that it's possible I'm missing something obvious. I'm tempted to email Bootstrap developers, and ask how they do it. Can't be too hard, can it?
There are several extensions in the marketplace that aim to solve this issue. I just installed Align, the most popular one, and then copied the first less code I could find from http://lesscss.org/
#base: #f938ab;
.box-shadow(#style, #c) when (iscolor(#c)) {
-webkit-box-shadow: #style #c;
box-shadow: #style #c;
}
.box-shadow(#style, #alpha: 50%) when (isnumber(#alpha)) {
.box-shadow(#style, rgba(0, 0, 0, #alpha));
}
.box {
color: saturate(#base, 5%);
border-color: lighten(#base, 30%);
div { .box-shadow(0 0 5px, 30%) }
}
I then selected the code and used the align command and got this:
Some of the other extensions might not require you to select the text first, or might format differently, so don't be afraid to try them out.
If you're asking if there is a built-in way to do this, though, not to my knowledge.
How do I get .Dump() to work without showing the number of results as the first row?
I've switched a manual report to run via lprun and email to a client. However, I was removing that row manually when I saved the excel file before.
I need to keep the html formatting, so I don't want to do csv. I also use .Dump() in the report (one call at the end), I'm not writing with the html, csv, or xml writers manually.
Looking at the source of the html generated, the header that contains the number of items is located in td.typeheader. I guess you can inject a simple css style into the html generated to hide it :
td.typeheader { display: none; }
The injection can be a simple replace :
File.WriteAllText(pathToReport, File.ReadAllText(pathToReport)
.Replace("</head>", "<style type=\"text/css\">td.typeheader { display: none; }</script></head>"));
I've written a fiddle (http://jsfiddle.net/929Zb/5/) for this that reduces the problem to the minimal markup that demonstrates the problem... which is my Highchart isn't being rendered in Safari (version 5.1.7 on Windows but I've also run it in the latest version on a MacBook.)
My requirement is a multiple column layout of widget as shown in this screenshot from the fiddle running in chrome :
and here's the same thing running in Safari :
Safari has rendered SVG and hovering over it in debug highlights the elements in blue in the HTML but it just can't be seen!!
The css I'm using to display the column is shown below. If you change the column count from 2 to 1 the chart displays fine in Safari!!
.widget-container
{
-webkit-column-count: 2;
-webkit-column-gap: 2em;
-moz-column-count: 2;
-moz-column-gap: 2em;
column-count: 2;
column-gap: 2em;
}
.widget {
/* This is required to keep the widget div's together and not break them over columns */
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
margin-bottom: 2em;
}
Is there a change to the CSS that will make Safari work or will this require a javascript fix? I pondered whether this was something to do with CSS transitions so tried turning off animations but given it's still animating I've clearly got the syntax wrong. I have a time constraint on this problem so I'm posting now but will report back if I have any progress.
I think this is some CSS problem with displaying chart in any column different than first one. If you disable colum-break-inside it also works.
What can I suggest is to disable position for chart container: http://jsfiddle.net/929Zb/17/
.highcharts-container {
position: inherit !important;
}