BACKGROUND: I have a set of webpages where clients can create their own emails (usually reminders for things) to be sent out to people. It uses ckeditor and I allow them to define their own style rules in a <style> tag. On another page, I show all of the emails they have drafted. (I basically just take what they made out of the database and output it into the page) I'm not asking about the security risks of this. I know perfectly well what they are and how to deal with them. That's not the question. The main problem is that if I have a class called .button that turns buttons to a navy color and they have some style defined for that same class in their css that makes the text black, then it leaks out and turns my button text black.
QUESTION: How do I let them preview what they wrote without letting their styles creep into my webpage and override my styles?
THINGS I'VE TRIED ALREADY: I've tried an iframe, but I can't totally figure out if it's possible to just embed code in it. I also have seen the <embed> and <object> tags, but I don't know if they could help either.
Thanks in advance for any help!
You could try wrapping each email html and css in its own Shadow DOM: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
Shadow DOM is typically used just for this purpose, to help scope html and css. Popular frameworks like Angular make use of the Shadow DOM for this as well.
One way is using !important in your own CSS which makes your CSS codes default value which cannot be overridden. for example:
.button {
background-color: navy !important;
}
Related
I'm using a button from a library (https://www.npmjs.com/package/#react-oauth/google I understand this library has a custom button option but this option results in a different response).
I basically like to change the max-width and width to another value (image attached below). May I know is there a way for me to edit these style from CSS?
Thank you! Appreciate any help.
Google adds this button to the dom inside iframe, there are certain props you can style the button
to add with, check prop width on
it's mentioned on #react-oauth/google github README
https://developers.google.com/identity/gsi/web/reference/js-reference#width
So still new myself currently in a full stack boot camp in the react section. It should be possible.
Are you using a external stylesheet or trying to do it using inline?
I was taught to use a external stylesheet
From what I am seeing try changing class name to button.
class='button'
Then in your external stylesheet add
.button {
max-width: 400px;
}
Edit. I see you are using react... So it could be className='button'
Edit:
Hello, thanks for your reply! Hmm... in this case I am not able to
assign a className to div myself as the div is from the library. The
weird class you see above "nsm7Bb..." is not by me. Hence, I was
wondering if there's a way to forcefully override library class style.
– Olympian Collections
Gotcha.
Have you tried !important?
Is that your inline CSS?
I'm trying to remove a link completely via CSS and replace it with my own custom message. Is this possible? I found some link disabling via css but the anchor text is still visible, and doesn't allow me to include my own message.
Essentially I want to make it so only logged in members can view links, using a conditional that uses CSS only for non-logged in (guests) users, replacing download links with "Sorry, only members can see this link, register here"
Any ideas?
CSS would be a terrible way to add privacy to your element, as it could be seen in any case by inspecting the source code, or by just disabling CSS.
You have to hide your link server-side.
By the way, just for the sake of completeness, and in case you have to use such a thing for something that actually makes sense doing by CSS, you could go around doing it by adding a class to the html or body in case of non-authenticated users, and then having a CSS rule as such:
html.not-logged-in element {
display: none;
}
Keep in mind that, obviously anybody can still see the element if they want.
Edit
You can't change text with CSS (unless using the content property in a pseudo-element, but nevermind that, as you won't be able to change the href attribute of your link). So, to achieve what you are looking for, you need to have two separate elements. As I said above, add a class to your html or body when the user is authenticated (this is actually a good idea in general), then show and hide your elements conditionally.
So your HTML would look something like this:
<span class="error">Sorry, only members can see this link</span>
I am a secret link
And your CSS would look like this:
.not-logged-in .secret {
display: none;
}
.logged-in .error {
display: none;
}
You can see an example here. In this example I use Javascript to simulate your logging-in process (all I do in Javascript is really just adding the class to the html element).
I'm trying to setup a preview box for an html editor on one of my pages. I made a standard <div id="preview"></div> style container, in which I occasionally drop my html source, and that works fine enough.
The problem is, bootstrap's styles are seeping into the container and 'poisoning' my preview. I see two solutions to this:
Move preview into an iframe
Apply some kind of clear/reset css to the element where I host the preview
eg:
<div id="preview" class="clean-css">
</div>
.clean-css {
div, p: {
border: 0;
margin: 0;
}
/* a bunch of reset css stuff here */
}
I consider iframe a clunky solution and sort of a last resort. I'd much rather keep my stuff on one page. So I started looking into various reset css stylesheets. Unfortunately, it seems most of them are geared towards equalizing differences between browsers and don't reset all styles to their bare values (for example, blockquote keeps its bootstrap styling).
I can keep googling for a better reset-css stylsheet, or I can try to fill in the holes in the stylesheet I have now. But before that, I figured I should ask more experienced frontend devs what's their experience with this.
Is there a more comprehensive clear css solution out there?
Is trying to clear up bootstrap a fool's errand and I should just go with the iframe instead?
After a few months of trying to make reset CSS work, the answer is: just use the &$^* iframe.
There are just too many potential problems and pitfalls, from balancing reset's class precedence to the fact that any CSS will just roll over legacy color / positioning attributes (which are still relevant in email authoring).
iframe is a headache to integrate into the page, but at least you know it can be done, and once it is done, it stays done.
I am working on a mobile site which is linked to online css which I cannot change. I added twitter bootstrap to that site. Bootstrap is applying but not 100% on all FORM HTML tags like select. All I want that if styling is not applying i'll force it somehow on that element, kindly let me know how can i do that. On form tag select the down arrow is not comming which is quite irritating. Kindly let me know how can I force the select to behave like the by default random styling.
You'll probably have to put your own stylesheet embedded into the of your document. Maybe use !important if it doesn't overwrite
Dumb question with a simple answer, I think.
I am building a site that has a completely different layout on one page from the rest. On one page, the design requires a liquid vertical layout, so I need the following code: *{height:100%;}On the other pages I just want the default height.
I tried to add a class to the html tag, which works in the html, but not in the CSS file. I tried:
*.myClass
and
html.myClass
but it doesn't seem to work.
I can't seem to find any info on this online. Is it even possible to add classes to the html tag?
I am using wordpress, so I can easily check to see which page I'm on and add myClass.
I guess I could also use #import to get a different style sheet based on the page I'm on, but that seems like a longwinded way of doing things.
How can I specify height:100% as a value of the html tag on specific pages only?
Can anyone point me in the right direction?
Thanks,
J
Perhaps .myClass, .myClass body {height: 100%}?
It is indeed possible to add a class to the <html> tag.
Live Demo (see code)
This will work, because I just applied this in one of my projects earlier today. :)
html,body {
height:100%
}
If you have pages that require the default height, then don't load this css style. You can place it in a separate CSS file.