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
Related
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;
}
I've builded banner for my home page and I want to hide a few HTML element in the responsive mode. When I run it on chrome browser and then I got an issue. This is css property which has been blocked by another css class. I can't figure it out where this css class is ? Anybody can help me to give me solution?
I agree with Cheslab, I think this is inline style resulting from javascript.
css with a viewport property will show its source of the top right side of the style section in the console.
Try putting in any css file:
img.imgSGHN {display:none;}
If this doensn't make any changes, you should be able to override the inline style by adding "!important" (not recommended) in your custom style.
img.imgSGHN {display:none!important;}
will get rid of .imgSGHN element.
The best way to approach the problem would be finding the script where it creates the inline css style and changing its behavior. Simply making it not override "display: " property will do.
I am editing a HTML website template, and I need to change the banner height so I edited external CSS. However, somehow it is taking an inline CSS height property so there is a space left in between.
Please let me know, if I have not written any inline CSS (and there is no inline CSS in html page), from where is that height property coming from.
Code I see in console is:
<div style="display: block; height: 445px;" id="camera" class="camera-wrap camera_wrap">
And my code is:
<div id="camera" class="camera-wrap">
<div data-src="images/Battery-Banner.jpg">
I have no idea why it is taking class camera_wrap twice.
Usually JS plugins put dynamic css that is calculated during runtime. It will be placed in inline style tag. Otherwise any static code will go to external css file. Try checking how plugin is calculating that height and than modify your HTML/css.
Try viewing the HTML source in your browser (not using inspect element, use view-source). This will show you the markup prior to any other client side processing aka. JavaScript. If the inline style isn't there when you view source then that indicates that it may be a rogue bit of JavaScript that is adding it in.
In any case can you please provide more information on the issue? Possibly a little more background on what type of website, what parts it has CSS, JS etc. With more information we may be able to help more.
If your source is showing 1 class, and when you are using inspect element it is showing other classes, then it is definitely added by js/jquery plugin.
If you want to overwrite other class css properties, either use !important in your class or use deeper dom traversing like #camera.camera-wrap{}. Than this will be given higher priority. Try which works for you.
can anyone explain to me what does (content: "\f01a"; ) on css means? and how to use it?
I'm having a problem locating this icons on my css file, I don't know were to find it, I've tried searching some solutions on google but it only makes my self confuse.
if only someone could explain it to me. Thanks.
It's mean: fa-arrow-circle-o-down. It's used with Font Awsome plugin for displaing "font-icons". For use it you must read the documentation.
CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it's called a pseudo element because it's not actually selecting anything that exists on the page but adding something new to the page.
<< FOR MORE INFO >>
With the content command, css will write the text which is given into the html element.
The \f01a is a Unicode Symbol in Hexadecimal. I think you have to embed a given font, so the icons will be displayed.
content property sets text to the element. It works with pseudo selectors only.
You can set any text.
It can be used to set icons.(icons but not images, using different fonts).
More info here.
These are content values for showing respective icons in your website.
You can use it like this,
.element:before {
content: "\f01a";
}
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.