So I am using ui-select with angularjs to create a configurable directive. The functionality on the backend is almost done but our prototype has very specific styles and I need to adhere to those styles.
I would like to simply re-style the ui-select as I see fit but I can't seem to find a single tutorial online on how to do so. I have found a few examples on overriding the template that angular ui uses using $templateCache. Is there a way to simply have a css file somewhere that it uses instead of its default? Or is there a way to override the current classes without a bunch of !important tags.
Of course, you can change the entire style of the UI-select directive by our own CSS. There is no restriction for that, take a look at sample CSS changes in the link.
.ui-select-container {
width: 200px;
}
.ui-select-bootstrap .ui-select-choices-row.active>a {
background: #000;
color: #fff;
}
.ui-select-container input {
border: none;
border-bottom: 1px solid #ccc;
box-shadow: none;
}
Related
I am in the process of finding a rich text editor to add to my application and came across TipTap. It looks great so I followed a tutorial I found on YouTube however no styles are being loaded on my site.
I have been searching for a solution for ages but can't find a replication of this problem.
No styles are being loaded on render so the editor is no more than a line of text indicating the menu buttons and a blank box (which is editable) for the input area.
All of the buttons behave as expected but there are no styles.
I noticed that if I try to render a simple HTML button on another page it also comes without default styling. Is there something obvious I'm missing here? I have been searching for a solution for a few hours now.
This is how my editor looks
This is how it should look
This is a HTML button also showing without a default style I tried to render on another page
<button type="button">Where is the style?</button>
I tried deleting the cache on Chrome however nothing changed
If anyone is in the same boat I have found a solution, each element on the page needs to be defined explicitly within the css file. Default behaviour wasn't working as expected so for the buttons I added to the style sheet:
button {
border: 2px solid black;
padding: 3px;
border-radius: 2px;
}
and styles appeared.
Adding .ProseMirror to each element had no effect on its styling so I had to style elements globally. This affected other components I had made such as a Button component, to overcome this I added editor to the class name of each button in the Editor component
<button
//
className={editor.isActive('underline') ? 'is-active' : 'editor'} //default is '' but 'editor' added
>
This allowed me to style the Editor buttons separately
button.editor {
border: 2px solid black;
padding: 6px;
width: 80x;
border-radius: 8px;
background-color: ##C1BCAC;
}
I am using Reveal JS. This is the CSS that I want to override:
.reveal section img {...
Using one of the methods below (or something better), how can I use JS to override that?
document.getElementById(image1).classList.add("red"); // I tried creating a CSS class called "red" but it doesn't overide the original
document.getElementById(image1).style.boxShadow = "red"; // this doesn't overide the original theme CSS
First, use chrome dev tools to make sure that the class is actually being added to the element.
If it is being added but the styles are not being applied, your problems may be stemming from css specificity rules.
Instead of defining your class like this:
.red {
box-shadow: 5px 2px 2px red;
}
Try this:
.reveal section img.red {
box-shadow: 5px 2px 2px red;
}
Problem
I have a stylesheet (bootstrap) that when applied in the header overwrites my personal styles.
I do need these bootstrap styles when the js is invoked otherwise the dialog that pops up is un-styled.
How can I stop my own styles from being overwritten?
I didn't understand your question fully, but here's what I understood:
1- You are using Twitter Bootstrap in your project, and it is overwriting your stylesheets.
2- You need bootstrap for a popup dialog and nothing else.
Well, from the first question, you can:
-Call your hand-made stylesheet AFTER calling Bootstrap's css.
-Change your stylesheet CSS classes and ID's.
-Hierarchize your classes from the ID's, for example:
#foo{
color: black;
}
#foo .bar{
color: white;
}
#foo .bar>li{
margin: 10px;
}
-Add a '!important' after the affected classes (Not recommended at all).
For the second matter, you could:
- Costumize your boostrap, you could pick certain plugins (such as popup), and exclude others that you don't use. (Costumize Bootstrap)
Like Nick R mentioned in the comments - Order is important here. The browser will 'overwrite' styles as stylesheets are loaded. For example, if you have two sheets:
.darkdiv {
color: #fff;
background-color: #000;
}
and then a stylesheet with:
.darkdiv {
color: #888;
}
Any element with class "darkdiv", will keep the original background-color but have the grey (#888) colored text as that style was 'overwritten' by the second stylesheet.
I'm trying to change the background color of a div with a checkbox in it. I've made this for reference. I'm trying to replace the parent <div> with the 'highlight' <div>, so I thought the toggle <div> would work. When the checkbox is deselected, I would like the background color to go back to normal (or remove the 'highlight' <div>). Any help is appreciated.
You are setting an inline background-color style for the divs. This takes precedence over any properties you set via a CSS rule.
Add !important to the background-color value of the checked class in your css file, like so: http://jsfiddle.net/KtsGs/1/
There are a few issues present in the jsFiddle.
The first one is that, despite having written jQuery code, you haven't selected jQuery as the framework on the left hand side. That's a small issue specific to the code on jsFiddle, and easily fixed, though.
The second issue is that you have inline styles on the <div> elements, including a background-color. That inline style will be used in preference to any background-color specified using a CSS class (unless it's specified as being !important), so even when your code correctly adds the checked class to the element, the background colour isn't going to change.
The simplest solution is to simply change your CSS declaration:
.checked {
background-color: #ff0000 !important;
}
Here is an updated version of your jsFiddle with the working functionality (using the suggestion above).
However, I'd suggest you instead move the inline styles and JavaScript event handlers to their own CSS declarations, so you don't have to specify !important. That would require the following changes:
#holder > div {
clear: both;
padding: 0.5%;
margin-bottom: 1px;
border-bottom: 1px solid #eee;
float: left;
width: 96%;
style: height: 16px;
cursor: pointer;
background-color: white; // added this to the existing CSS
}
#holder > div:hover { // this is new
background-color: #fafafa;
}
Then move the CSS declaration for .checked below those, so that it takes precedence for the background-color property.
Here is another updated version of your jsFiddle, using the CSS declarations instead.
i am using jquery-ui dialog in my application. now i want to customize the signin/sinup dialog i.e. jquery-ui dialog. without customization dialogs are looking like:
but when i made following changes to login.jsp page that too in style it is changing all the dialogs of application that i don't want to happen but only signin/signup dialog. CSS code is:
.ui-widget-header {
background: #343434 !important;
border: none
}
.ui-dialog-titlebar-close{
background: #1C1C1C !important;
}
.ui-dialog {
background: #343434 !important;
border: thin 1px;
}
and js code for this signin dialog (id="signinDialog") is:
$(document).ready(function() {
$("#signinDialog").dialog({
width : 600,
resizable : false,
modal : true,
autoOpen : false,
position : ['top', 157]
});
function openLoginPopup() {
$("#signinDialog").dialog("open");
}
after these changes i am getting signin/signup dialog the way i want but the problem is this is changing jquery-ui dialog css for all application and looking like this:
I have been stuck in this issue from morning and tried lot of ways to resolve, like
this but all fell flat. Atlast i have to ask this.
I want all dialogs remain same except signin/signup dialog after customization.
Using a CSS selector for your particular dialog's ID, as EasyPush suggests, isn't going to work because your content becomes the child of the dialog element in the DOM. Since CSS doesn't have parent selectors (see CSS selector for "foo that contains bar"?), there would be no way I can see to use pure CSS. Instead, you'll need to use javascript.
Using jQuery for the close button, for instance:
$("#signinDialog").parent().find(".ui-dialog-titlebar-close").css("background","#1C1C1C");
Unfortunately, applying the "!important" rule to CSS via jQuery is a little tricky. You may instead prefer to apply a class and then style that class in CSS with "!important." Something like:
$("#signinDialog").parent().find(".ui-dialog-titlebar-close").addClass("mySpecialClass");
Along with a css rule:
.mySpecialClass{
background: #1C1C1C !important;
}
If i'm not misunderstanding you it seems you are indeed changing the layout of all dialogues. This because the selector ".ui-dialog" will match all dialogues in your application.
If you only want to specifically style your signin dialog, you need to specifically select only these elements. You should be able to do this as follows:
#signinDialog.ui-dialog {
background: #343434 !important;
border: none
}
#signinDialog .ui-dialog-titlebar-close{
background: #1C1C1C !important;
}
#signinDialog .ui-dialog {
background: #343434 !important;
border: thin 1px;
}