I am using ngx-admin template and for my table. I don't use ng2-smart-table.
I tried to change whole page to dark theme. full page changed to dark mode except table. The table is still white color.
How can i change The table color to dark theme when theme change to dark theme.
I attach screen shot of my issue.
I need the table also has to change dark theme. How can i do?
themes = [
{
value: 'default',
name: 'Light',
},
{
value: 'dark',
name: 'Dark',
},
{
value: 'cosmic',
name: 'Cosmic',
},
{
value: 'corporate',
name: 'Corporate',
},
];
currentTheme = 'default';
You will first need to research primeng themes and how to import them into your project and utilize them.
But for answering this question since ngx-admin doesn't natively handle all the colors for primeng on theme change. You will have to subscribe to the theme changes in the nebular theme and update tables yourself.
themeClass: string = 'light-theme';
constructor(private themeService: NbThemeService) {
this.themeService.onThemeChange()
.subscribe((theme) => {
// Here is where you will know which theme is currently applied and you can do logic. For example (if setting theme by class):
this.themeClass = theme?.name == 'light' ? 'light-theme' : 'dark-theme';
});
}
Related
I have been using tailwindcss for my react project and would now like to use daisy-ui in addition. I installed it as instructed and added the plugin to my tailwind.config. After doing this some of the designs in the page look off. In particular the ones styled with border-neutral-500, bg-neutral-500 - for these colors I also no longer see the little color indicator in vscode.
I am not using a custom theme but when looking at it it seems daisyUI is specifying its own version of the neutral color. https://daisyui.com/theme-generator/ vs https://tailwindcss.com/docs/customizing-colors - is this the source of the problem? How can I avoid this?
I guess there is really conflict with utilities. DaisyUI extending theme colors with its own
You may reassign neutral color palette again with default Tailwind values like
const colors = require('tailwindcss/colors');
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {
colors: {
neutral: colors.neutral,
}
}
},
plugins: [
require("daisyui")
],
}
This way both Tailwind bg-neutral-500 and Daisy btn-neutral (for example) will work
Daisy UI has buttons: https://daisyui.com/components/button/
However, I'd like to override the colors for a specific button, without having to go through the effort of creating an entire theme.
I can just use bg-green-500 on a button, but that will just change the background color, when I also need to change all of the associated colors.
Is there a good way to do this?
AFAIK, to do this you override the current theme in the tailwind.config.js file.
Note that you import the theme's base:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./app/**/*.{ts,tsx,jsx,js}"],
daisyui: {
themes: [
{
light: {
...require("daisyui/src/colors/themes")["[data-theme=light]"],
primary: "#7cb3dd",
},
},
],
},
plugins: [require("#tailwindcss/typography"), require("daisyui")],
};
Here, we're overriding the primary color to #7cb3dd for the' light' theme.
Adjust as needed!
Here's more info:
https://daisyui.com/docs/themes/
I have been trying to learn styling in extjs, but I cannot figure out how it works. In a very simple example, I would like to apply some styles to panel header:
app.js
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
title: 'MyPanel',
cls: 'title',
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'myButton'
}, {
html: 'Hello World!!!',
}]
})
}
});
So, according to documentation I managed to change header background-color with the following css file:
app.css
.title .x-panel-header {
background-color: pink;
color: red; /* this doesn't work */
font-size: 22px; /* this doesn't work */
}
The problem is that some theme variables aren't applied correctly - for example, text color or font-size, although these variables are specified according to documentation for panel header. What am I missing?
Almost all ExtJS components have a style or cls property.
Manually overriding the extjs css classes should be the last resort.
In your case you should be looking at these components:
Ext.panel.Header
Ext.panel.Title
The panel component should have a header config and the header component should have a title config to customize each part.
Here is working example: Sencha fiddle example
For the sass variables you mentioned
They are used to customize ExtJS Themes. So if you want to make your own theme with let's say triton as base you can use these variables to create your own theme. This is quite useful if you want to make overrides for the whole theme (e.g. the background color of all Ext.panel.Panel components)
I'd recommend you to read this guide for more information on this subject: Theming guide
I'm trying to add the zebra-stripe plugin to a wordpress page.
I am not sure where to place the following code in order to make the zebra striping work.
Can anyone point me in the right direction? Thank you!
$(function() {
// call the tablesorter plugin
$("table").tablesorter({
theme: 'blue',
// initialize zebra striping of the table
widgets: ["zebra"],
// change the default striping class names
// updated in v2.1 to use widgetOptions.zebra = ["even", "odd"]
// widgetZebra: { css: [ "normal-row", "alt-row" ] } still works
widgetOptions : {
zebra : [ "normal-row", "alt-row" ]
}
});
});
It looks like the Wordpress table-sorter plugin is using the original tablesorter (v2.0.5) so the theme and widgetOptions settings do not do anything.
If you're not using that plugin, but you are using my fork of tablesorter, then you need to load the /css/theme.blue.css file and not change the default zebra class names:
$(function() {
$("table").tablesorter({
theme: 'blue',
widgets: ["zebra"]
});
});
If you are using the original tablesorter without the Wordpress plugin, use the same code above, except for the theme setting; the blue style that needs to be loaded will be in the following location /themes/blue/style.css.
I have a set of WYSIWYG editors that are all initialized via TinyMCE on demand.
In the previous version of TinyMCE I was able to easily remove buttons by specifying the button theme_advanced_buttons1, theme_advanced_buttons2 etc. But since the newest release of TinyMCE 4.0 , it seems as tho that no longer works.
I am running the modern theme, so maybe the theme_advanced_buttons1 doesn't work with the modern theme? I've tried theme_modern_buttons1 , but that didn't work.
I'm thinking it may have changed with the newest release, as there is a new toolbar with the options for 'File, Edit, Insert...' etc.
Anyone know how I can hide the buttons on initialization? Heres the code I'm trying:
```
// initialize tinyMCE editor on our movie description text area
function initialize_movie_descriptions() {
$('.movie_description_editor').each(function() {
var id = $(this).attr('id');
tinyMCE.init({
mode : "exact",
elements : id,
theme : "modern",
plugins: "wordpress,wplink, paste",
theme_advanced_buttons1: "",
theme_advanced_buttons2 : "",
theme_advanced_buttons3: "",
theme_advanced_resizing : true,
paste_auto_cleanup_on_paste : true,
paste_preprocess : function(pl, o) {
o.content = o.content;
},
paste_postprocess : function(pl, o) {
o.node.innerHTML = o.node.innerHTML;
}
});
});
}
initialize_movie_descriptions();
```
Edit
Apparently changing the line plugins: "wordpress,wplink, paste", to plugins: "", seems to have removed the 'Insert' menu item in the first toolbar. I guess because it's not loading any plugins now??
If you don't want all buttons but keep some of the functionality you have to keep to plugins. Simply just add the buttons you want in toolbar. The Same way with the menu:
tinymce
.init({
...
plugins : [code fullscreen save table contextmenu paste textcolor" ],
//buttons you want to show, else set "toolbar:false"
toolbar : "insertfile undo redo | styleselect",
...
menu : {
...
edit : {
//menu edit
title : 'Edit',
//items of menu edit
items : 'undo redo | cut copy paste pastetext | selectall'
},
...
});
you can find a list of plugins with their configuration in tinyMCE here: http://www.tinymce.com/wiki.php/Plugins
I struggled with the same problem after updating Wordpress to version 4.0. I found the solution on the wiki-advanced-page of TinyMCE. In TinyMCE 4 "theme_advanced_buttons" is replaced by "toolbar". You probably want to hide the "menubar" too, see example below:
tinyMCE.init({
mode: "exact", // not needed
theme: "modern", // default - not needed. Only theme available in WP 4.0
height: height, // e.g. 100
menubar : false, // you probably don't want to show the [file] etc bar
block_formats: "Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3;Header 4=h4;Header 5=h5;Header 6=h6",
toolbar : "formatselect,bold,italic,underline,removeformat", //choose buttons in bar
});
There's a fast way to remove everything you see: Using CSS. Maybe it's not the best one, but is the faster one:
#mceu_15, #mceu_17, #mceu_18 {
display:none; }
Those #mceu numbers are the icons I want to hide (added by annoying plugins ;)
NOTE: You have to add this css on your_theme/admin.css
If it doesn't work look / add in your theme functions this:
function admin_style() { wp_enqueue_style('admin-styles', get_template_directory_uri().'/admin.css');} add_action('admin_enqueue_scripts', 'admin_style');