Select2 Custom Theme Creation and Use

Starr Duskk
Starr Duskk used Ask the Experts™
on
How do I create a custom theme in select2?

I've googled results on using different themes, but not found how to create one.

I found this that uses one:
https://codepen.io/techhysahil/pen/qbrqWG

It contains this code:
$flat-theme-light-color : #48c9b0;
$flat-theme-dark-color : #16a085;

Open in new window


And uses this code to useit:
.select2-container--open .select2-dropdown--below,
.select2-container--open .select2-dropdown--above{
  background: $flat-theme-light-color;
}
.select2-container--flat{
  .select2-container--focus .select2-selection--multiple{
    border: 1px solid $flat-theme-dark-color;
  }

Open in new window


But I have questions..
If I wrap any element with:
.select2-container--MyCustomTheme{

Open in new window


I tried this:
I put this on my page:
<script type="text/javascript">
    $(".js-example-theme-multiple").select2({
        theme: "multiplecheckboxes"
    });
</script>

Open in new window


Then in my CSS, I wrapped the element with the theme container so that it would only be triggered for multiple select2s:
.select2-container--multiplecheckboxes{

/*Styles for Multi-select Checkboxes*/
/*https://codepen.io/lenamtl/pen/VwwWYzb*/
.select2-results__option:before {

Open in new window


But that doesn't work. It fails to hit that code.

Any ideas on how to create and use a custom theme so that my single selection looks different than a multi selection?

thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Do you have any error into the console right click / inspect

I will check, I have some notes about this and get back to you
Starr DuskkASP.NET VB.NET Developer

Author

Commented:
There are no console errors on inspect.

This is on the main page:
<script type="text/javascript">

    $( document ).ready(function() {

        $(".js-example-theme-multiple").select2({
            theme: "multiplecheckboxes"
        });

    });

</script>

Open in new window


and the CSS is wrapped like a media query:

.select2-container--multiplecheckboxes{

/*https://codepen.io/lenamtl/pen/VwwWYzb*/

.select2-results__option:before {
  content: "";
  display: inline-block;
  position: relative;
  height: 20px;
  width: 20px;
  border: 2px solid #e9e9e9;
  border-radius: 4px;
  background-color: #fff;
  margin-right: 20px;
  vertical-align: middle;
}

.select2-results__option[aria-selected=true]:before {
  font-family: 'Material Icons';
  content: "\e5ca";
  color: #fff;
  background-color: #2196F3;
  border: 0;
  display: inline-block;
  padding-top: 1px;
  padding-left: 2px;
}

}

Open in new window

Hi,

First look the theme from CSS file select2.css
lookup for classic

Duplicate (copy/paste) all releatded classic class and called it mycustom
Modify mycustom class then save the file

On your page make sure you called select2.css (an not the minified one select2.min.css)

$(".js-example-theme-multiple").select2({
  theme: "mycustom"
});

Open in new window


Clear the browser cache to make sure then check the result.

*Note if you are using Select2 with Datatables on the same page make sure you edit the Select2 that come with Datatables located into
...datatables\extensions\Select\css

If you try to use Select2 plugin downloaded from select2 and also select2 that come with Datatables you will have a conflict and you won't see the changes
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Starr DuskkASP.NET VB.NET Developer

Author

Commented:
we have done that, and it now has no checkboxes on the regular, and checkboxes on the multiple only.

However, the styles for the box border etc. are all lost. So it's like it does not retain the other styles.

what we did:
copied the select2.css file
search and replace all "classic" to "customname"
removed any styles from that file that did not have the word "classic" in it.

call both the select2.css file and the select2custom.css file on the same page.

In our custom styles in a separate file outside of the above two, we have styles such as:
.select2-container--default .select2-selection--multiple {
    border: 1px solid #606060;
}

Open in new window


Is there a secret for getting the styles to work?

Also, as an example, where we copied the style into another page, do we need to keep or get rid of the second style here? Should  .select2-selection--single be removed?

.select2-container--multiplecheckboxes .select2-selection--single {

Open in new window

Hi,

make sur you edit the good CSS file
let say you may have select2 standalone JS/select2/select2.css
and if you are using Datatables on the same page JS/ datatables / extentions/ select2/select2.css
you can only use one not both on the same page

Let say you only have datatables on the page make sure to remove the standalone select2 links JS and CSS

Note I would not recommend to use 2 CSS files, you better just use 1 CSS file and duplicate the classic classes only
Starr DuskkASP.NET VB.NET Developer

Author

Commented:
so one file with the "classic" classes duplicated and added to the bottom and the name "classic" replaced?

(we don't use the datatables version, but I'm thinking that's just your example).
Yes

About Datatables I got the issue once as my select2 CSS was overrided by the one from Datatables so that's why I mentionned it.
It took me some time to find out ;)

You can always check by selecting the element, right click / inspect and check style box at the right, this will display the CSS file with a link.

Also make sure to clear the cache or use a version or date with your files
something like this will check the version your browser have and if more recent it will load the file again this is PHP but you can adapt with your code
<?php echo '<link rel="stylesheet" type="text/css" href="css/theme.css?' . filemtime('css/theme.css') . '" />'; ?> 

Open in new window

Starr DuskkASP.NET VB.NET Developer

Author

Commented:
thanks!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial