EasyUI Forum
April 20, 2024, 04:37:13 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: [Solved] CSS, default background input color for dropdown  (Read 7698 times)
argumentum
Newbie
*
Posts: 22



View Profile
« on: February 11, 2018, 11:35:00 AM »

I'm trying to change the background color of the black theme's selected/input color and I don't find an easy way ( or any way really )

I did the change to red by adding to the easyui.css
Code:
input {
    background-color: red;
}
The red background is for dramatization, I'm gonna use a pale gray color, as the default white, is kind of bright for a dark theme. But those areas that are white, I'd like to change to the background color too, as it would otherwise look ugly.

Thanks
« Last Edit: February 12, 2018, 08:52:31 AM by argumentum » Logged
jarry
Administrator
Hero Member
*****
Posts: 2262


View Profile Email
« Reply #1 on: February 11, 2018, 08:22:46 PM »

Please try this code:
Code:
<style type="text/css">
.textbox,.textbox .textbox-text{
background: red;
}
.textbox-addon{
background: #3d3d3d;
}
</style>
Logged
argumentum
Newbie
*
Posts: 22



View Profile
« Reply #2 on: February 11, 2018, 09:48:35 PM »

Please try this code:

..getting closer =)



...this approach also overrides the .validatebox-invalid{} section. ( but I can live with that if needed to )
« Last Edit: February 11, 2018, 10:23:32 PM by argumentum » Logged
jarry
Administrator
Hero Member
*****
Posts: 2262


View Profile Email
« Reply #3 on: February 12, 2018, 01:17:45 AM »

Please look at this example http://code.reloado.com/ahejok/edit#html,live
Logged
argumentum
Newbie
*
Posts: 22



View Profile
« Reply #4 on: February 12, 2018, 08:51:27 AM »


Quite interesting.
If the the CSS declaration is after everything else is loaded, then it acts as expected.
So I'll play around to load this last as an added CSS or something.
Thank you jarry for the clarification.

Can an implementation of default-control-background-color be available on a future version of jEasyUI ?
The https://www.jeasyui.com/themebuilder/index.php does not have one and, is the only thing that has no declaration of, and it would be most welcomed, as in this "hack", it overrides validatebox-invalid and probably other features.

This hack, as is, does not allow me to change the theme on the fly.
I'll mark this post as solved but if you come up with a better solution, please do post.

Thanks

Example of Dark Hive theme ( at 200% to watch in detail ):



PS: ..what I ended up doing is creating a .CSS and loading a default one first and if the extra exists, loading that after:
Code:
function onChangeTheme(theme) {
jQuery('#themesStylesheet').attr('href', '../../eu154/themes/' + theme + '/easyui.css?v=' + Math.random());
jQuery('#themesStylesheet2').attr('href', '../../eu154/themes/easyui.added.css?v=' + Math.random());
jQuery('#themesStylesheet2').attr('href', '../../eu154/themes/' + theme + '/easyui.added.css?v=' + Math.random());
// ..the "?v=' + Math.random()" is to force refresh cached files ;)
}
The head in my code looks like:
Code:
<head>
<link id="themesStylesheet" rel="stylesheet" type="text/css" href="../../eu154/themes/<?PHP echo $cssThemeColor; ?>/easyui.css">
<link rel="stylesheet" type="text/css" href="../../eu154/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../eu154/demo/demo.css">
<link id="themesStylesheet2" rel="stylesheet" type="text/css" href="../../eu154/themes/<?PHP echo $cssThemeColor; ?>/easyui.added.css">

 ...

The CSS itself is:
Code:
input, select, .textbox,.textbox .textbox-text{
background-color: #ffffff;
background: #ffffff;
}
.textbox-addon{
background: #ffffff;
}
for the "default" and the specific easyui.added.css to its folder. In my case, the other easyui.added.css goes in the \black\ folder.

For the above pic. of the Dark Hive theme, the CSS is:
Code:
input, select, .textbox,.textbox .textbox-text{
background-color: #dddddd;
background: #dddddd;
}
.textbox-addon{
background: #222222;
}

Again, if this can be addressed on a next version it'd be very welcomed.
« Last Edit: February 12, 2018, 09:58:20 PM by argumentum » Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!