We have to include CSS file for forge-viewer, but it breaks our own site styles. For example:
- forge CSS contains Alertify styles (they overrides our own custom Alertify styles)
- forge CSS has style for "#close" - this breaks our close buttons
- etc
That can you suggest to solve this critical problem?
CSS collisions can easily be solved by scoping your own css or the viewer one. It is hard to tell you exactly how to fix it as there are many different ways to handle it and without knowing exactly how your css/html is structured I can't tell you the best approach.
If you are using LESS or SASS, it is pretty easy: Easily scope CSS using LESS or SASS. You can scope the viewer styles by adding the viewer div id or class to its styles.
Another approach is to adapt your own css, for example your #close button must be a direct child of a specific class:
// instead of using:
#close { ...}
// add a parent class:
button#close.my-app { ... }
Hope that helps
Related
I want to do this because I get stylized text from "Portable Text to React". However my index.css (global style)
which has a css reset, removes all the default styling from elements of the portable text.
How can I exclude the reset.css from this 1 react component (or solve this in another way you know) ? Adding .unset * {all: unset} or .unset * {all: unset} class does not create the behaviour I want. It removes all styling instead of re-giving the styling to h1s, spans, lists etc.
In here what you can do is, you need to separate your styles for different components. Normally don't use global css to add styles to jsx code.There are couple of ways to add separate css for your component. In here what it does is, these styles are targeting only for selected components.
Option one -use module.css file.
in here you can add css classes only inside the module.css file.(dont use id selectors inside here).Read this reference, you can get full idea about this.click here
option two -use third party library like styled component.
this doc explain clearly what need to do and have many examples to get idea.click here to navigate the doc
Solved: Give this class to the element. revert behaves exactly the way I want. Returns all elements inside this one element to browser default styling, while my css reset remains active on rest of the application. I don't know if there are any drawbacks.
.unset * {
all: revert;
}
I've developing an app with Vue, and a third-party template, and dynamic plugins, and all kinds of trickery. I'm have a really hard time with the CSS.
Often I need to style particular element on the page, an <input> for example, and I can't figure out how to write a selector that actually works. The input may have been created dynamically by some Javascript and may have had CSS applied programmatically.
So I go to Firefox Web Developer, click on the element, and see a bunch of CSS classes. I create a rule:
.myCustomClass {
color: red;
}
put myCustomClass in the class="" tag in the <input>, and... nothing.
I'm thinking I need to prefix it like this:
.someOuterClass .someInnerClass .myCustomClass {
color: red;
}
but that rarely works. Sometimes I give up and add !important. Sometimes that works, and sometimes it doesn't.
So my question is, can I examine the classes that I can see in Web Developer and somehow derive a rule that is specific enough that it will always work?
I've read about specificity, but it's not helping.
Specificity is a PITA sometimes, especially when other 3rd party libraries are adding stuff to the mix.
Here are a few things you can try:
Make sure to add your styles to the END of the CSS. Theoretically, you can affect the order Webpack includes CSS (I've never tried it)
Add an ID not a class to a wrapper outside the elements you want to change. Then reference this ID in the CSS chain eg: #myAppID .className .subClassName {} Basically ID's are stronger than classes in CSS specificity. I would try to do this at a page/view level to make life easier.
If elements are already getting classes (as you see them in the inspector) try to reuse those classes with your "override" CSS. If the classes are modularized (Have a random suffix like someClass__34xft5) you shouldn't use those exact classes since they can change if the source is recompiled. In that case, use a "matching" selector [class^=”someClass__”] to match any selector with that prefix.
Not sure how deep you want to go, but here's an article about overriding Amplify-Vue prebuilt styling.
One caveat, if the CSS is being added inline via javascript somewhere, it's going to be very hard to override. You may want to use !important in conjunction with the above.
"...can I examine the classes that I can see in Web Developer and somehow derive a rule that is specific enough that it will always work?"
Probably, but why bother? You're already adding class attributes to elements. Why not add inline style attributes instead? Adding a bunch of classes or ids just to create a specificity chain to touch up styles is pretty messy...inline styles are barely if at all worse and are clearer to understand.
Inline attributes are the most specific CSS instructions you can give.
I am trying to make an existing website responsive using Bootstrap. The issue is that some classnames in the existing css files there are classes defined that have the same name as in the Bootstrap css files.
I was curious, if there is a way to define the stylesheet to be used as a source for the class styles?
Imagine that there is container class defined in the original CSS files and the container class defined in the Bootstrap CSS. Is it possible to somehow distinguish between them? Or only renaming will do the trick?
Think on it well before dealing with this.
You can link one or another css on the declaration, but obviously it will work only the linked one on this view. (recommended if you don't need both)
If you link both (not recommended), the load of each can be different that you expect, creating visual glitches or loosing usabillity.
You can deal with load times expecting it to load as it's supposed (the first linked before the second one) that it's a bad idea because it depends on many things to work as it's supposed, or using javascript to make some stylesheet load after (not recommended).
Use !important statement (highly not recommended)
Why it's not recommended?
You will be overriding properties and values, making it unstable and increasing your load time, specially if you use javascript.
You'll loose the control over which property the browser is applying to an object and which not. Specially because Bootstrap will take preference over some properties even if the other css loads after (due to well accurated selectors).
!important, ironically is less important than a well accurated selector, so it only work sometimes dealing with Bootstrap. By the other part, it will make difficult each time you need to override a property value (try not to override if possible, but if needed, it's recommendable to use better selectors or different classnames or IDs to get a clean maintainable code).
What you can do?
you've different options.
The first one (the best one) is split this custom css into different css stylesheets depending on the view are needed, to avoid loading styles when there's no reference to them. The second step is to clean those css files, changing classnames to not interfere with bootstrap, and deleting possible duplicate or override of properties that bootstrap already has. You'll have a clean, fast and pretty css.
The second one is to change classnames on your css and cleaning it of possible override of properties that interfere with bootstrap.
The fastest one, if you hate a little the web owner, is simply changing classnames on your custom css, and the references to them on your HTML plus bootstrap classes:
< div class="customContainer container"> ...
And start praying for the overrides to don't cause glitches on some version of some browser.
EDIT:
You've another option, that is editing bootstrap framework classnames, which is not recommended because you'll need to produce documentation and will be less maintainable (loads of programers/designers know bootstrap but not your modified bootstrap), and you'll have to waste loads of time doing it well.
Just add a custom class like "custom-container" and add style to this class.
Rename the classes is the option for existing css. Same name is not option.
Change your initial class names as the default bootstrap classes are needed to make your site responsive, or better still do an edit of the bootstrap bundle
Step 1:
Load your custom css file after you load your bootstrap.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
If that is still not working just add it as important. But avoid using this trick as it can override styling from base.
Eg:
p {
color: red !important;
}
Step 2:(better one)
You can use IDs for styling.
#custom_id p{
color: red;
}
<body id="custom_id">
I will recommend you to use ID, because id is unique and use for specific styles. its always good to use rather than using !important on class properties later. Another option is rename classes.
First add bootstrap css and then add your css. The style in your class will override the bootstrap class styles(some styles in bootstrap are made important so that classes you should make important in your style).
I am currently merging functionality of 2-3 open-source projects and am dealing with a couple of large CSS files. To make a long story short, there are a couple of textboxes that are not being styled correctly. Namely, they seem to inherit styles from both libraries.
Hence, I am wondering if there is a Jade or CSS way of disabling all styles on those boxes and then applying only the ones indicated in its class property. That is, somehow I need to make sure that the only thing that are applied are those that are specified within the class property.
Check out this link on 'unset', 'initial', and 'inherit'.
Likewise, check this out as well. There is always the option of using '!important' in your own CSS file to override existing styles.
Hope that helps!
the all property offers the ability to force a reset off all properties, but browser support is limited. Because of the nature of CSS, the element will always inherit any properties that are not overridden. I'm assuming if you are using jade you are also using a css pre-processor, so you can mange some of this by name-spacing your libraries. For example
//sass
.foo {
#import 'bar';
}
//csss
.foo .class-from-bar {...}
.foo .class-from-bar-2 {...}
I am noob in CSS and HTML, So bear with me for this question.
I am integrating a web application with our existing application. They defined some css rules which is conflicting with our application.
My problem is: Is there any good way to separate out the CSS rules to be used each application pages?
I tried to look at CSS namespace, seems to be lot of rework, as I have to prepend each tag element with namespace.
Update:
I am trying to integrate a Meteor based app into another Meteor based application, now I don't want the 2 css two mix.
Apply a class to the body per page/module/application.
This way your current CSS will still work and you can override by prepending your new CSS with the body class.
CSS namespace is the only good option. You can edit all rules very easily using multiediting feature of sublime text.
Depending on the size of your application, a very dirty and quick solution is to append the rules that your need to separate files (and apply appropriately)
e.g.
for main.html, you have main.css
about.html, have about.css
however, this is pretty bad practice as your separating all your requests for essentially the same information...
What you COULD do is use a CSS Preprocessing language within your dev environment, like SASS, SCSS or LESS where you could abstract a lot of the specific pages into modular files like, main.sass, about,sass etc... which would be compiled into just one main.css file.
Another thing to consider, is that CSS is how classes, ids and pseudo selectors all effect the specificity of the rules that can be applied.
i.e.
!important > #id > .class > html_element
Here is a great intro article about CSS Specificity for you~
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
I ended up following solution which worked out for me.
For another app which i am integrating, i made its whole body into a container and gave a class to it.
In layout of another app,
<!-- Another application body layout-->
<body>
<div class="another-app-container">
<!-- Here goes whole layout of page -->
<p class='someClass' > ....
<div class='myClass'> </div>
</p>
</div>
</body
In CSS of that app, i applied following CSS rule,
.another-app-container * .someclass{
// CSS rule goes here
}
.another-app-container * .myClass {
// CSS rule goes here
}
Beauty of CSS i got here is, '*' which applied the CSS rules even it has lot of nesting of elements CSS.
So, it segregated the CSS for my own from another application