I have a J query Data table, that outputs something like this:
the code for the above datatable is:
$('#companies').DataTable({
"aaData": data,
"aoColumns": [......]
});
Please tell me how do I change the css (width, height, color etc) for pagination, search and no. of records?
Thanks
you can change the css of your required elements simply take the class/id name of element with its parent class/id. if not change then use !important tag to the style code. like:(example)
div#dataTable_filter {
float: right;
margin-right: 15px;
margin-top: 0px; }
Related
I tried to change the cursor on my html website with the "cursor" property, but I can only do it embedded, but I want to put it in my css stylesheet. Is that possible?
This is the code that I put between the style tags
* {
cursor: url('plaatjes/cake.cur'), default;
}
changing ur cursor is possbile yeah.
There are different possibilities why ur cursor image is not showing up (image type, image size, image url for
example..)
Try this accepted answer:
so accepted answer
This example changes the cursor for a specific div, if u use this like u have done before (with *) it should work at all.
If you want cursor on whole page, this should work:
first fix width/height of html and body element,
html, body {
height: 100%;
width: 100%;
padding: 0; margin: 0;
}
then:
* {
cursor: url('plaatjes/cake.cur'), default;
}
I'm creating a chat widget and I want to overwrite a bunch of CSS. For example if this is the website theme's CSS:
textarea {
color: red;
margin: 10px;
}
and if I style my widget like:
textarea {
padding: 5px;
}
then only my widget's CSS should work. However, it adds both CSSs to textarea by default - how can I prevent the website's CSS from being added?
As Marc B stated, you can put your chat in an iframe, in which case you can have its own completely separate stylesheet.
If you must use it inline, then you can use all css property to unset what has been set elsewhere:
Widget CSS:
textarea {
all: unset;
padding: 5px;
}
Further, as pointed out in comments elsewhere, the best way is to create different classes for text area and use them where necessary, for example:
textarea.main {
color: red;
margin: 10px;
}
and if I style my widget like:
textarea.chat {
padding: 5px;
}
And then use
<textarea class="main">
or
<textarea class="chat">
depending on what you need.
Well I guess it is really easy to write !important to all your css rules. Just replace ";" with "!important" if that's an easy way for you OR if you really want to change then you can use iframe really
For all the images by default the below style class is being set.
.figure {
display: inline-block;
vertical-align: top;
position: relative;
max-width: 100%;
}
I am trying to change display: inline-block to display:inherit only on a particular page. I added the image via visual composer in WP,and tried adding a new class for the image div by adding the style needed, but still the display:inline-block remained the same.Any solutions will be appreciated.Thanks.
please add inline css and check its working or not?
If its working then add new class and add that class end of the css and try it will work
Like add inline-img this is the new class then add following css to end of your css file
.figure.inline-img{
display:inherit;
}
If you've added a custom style to the figure (you mentioned a .pax class), then you simply need to specify the following in the CSS:
.figure.pax{
display:inherit;
}
If that doesnt work, you can either add specificity to the selector (my preference) or add !important as follows:
.figure.pax{
display:inherit !important;
}
(Alternatively, if you'd like the image to be display:block which is what it looks like you'd like, use display:block instead of display:inherit)
I have a html page
<smalltooltip id="menu-discussion" data-title-tooltip="Discussion"></smalltooltip>
<smalltooltip id="menu-settings" data-title-tooltip="Settings"></smalltooltip>
and css style
smalltooltip[data-title-tooltip]:after {
//css style
}
It's working, but how to select id "menu-discussion" like this:
#menu-discussion[data-title-tooltip]:after{
width: 70px;
}
but it's not working.
Is it just that you are selecting the 'data-title-tooltip' attribute instead of just 'data-title'?
#menu-discussion[data-title]:after {...}
or are you missing the content property for the after pseudo element?
#menu-discussion[data-title]:after {
content: '';
}
Use following style
smalltooltip[id="menu-discussion"][data-title-tooltip]:after {
width: 70px;
}
For reference - http://plnkr.co/edit/IJPhnQ6rq6Yi5I2yYJuu?p=preview
Edit
As per the edited question, there should be no issue with the style specified, however, I will recommend you to have style like above specifying the element, as unqualified attribute selectors are known to be slow
I have 30 buttons of different sizes and I want to set the width of all at once through CSS. But I haven't been able to get it to work right.
[insert example of failed CSS code here]
But it doesn't work. For example, the following button doesn't follow the above rule:
[insert minimal, complete HTML example here that illustrates the issue]
If you need to do this explicitly, you can simply add the !important attribute, although this will guarantee that regardless of location or source, the width property will be overridden, so be sure that you definitely want to apply that style.
button {
width: XXXpx !important;
}
EDIT
To make the above style only apply to one HTML page, as per your request, you can change the HTML for that page slightly, giving an id to your <body> tag, and then targeting buttons only when they appear below that id.
HTML
<body id="page_title">
CSS
#page_title button {
width: XXXpx !important;
}
You can create a button class in your css
.button
{
width: ____px;
}
and then in your .aspx add cssClass="button" to your ASP buttons (I assume they're asp.net controls?)
For input element
INPUT[type="submit"] {
width: XXXpx;
}
For button
BUTTON {
width: XXXpx;
}
Assuming your buttons have something unique in common (ie. they're all have the class name of "buttons"), you can just use a CSS selector to set their width property. ie.
.buttons {
width:100px;
}
There are a number of different selectors you can use to target them, and keep in mind you can have multiple classnames on each html element by putting a space between them. ie. <div class='nav button'></div> will respond to both the .nav and .button definitions.