I am working on an existing code base that uses bootstrap. The existing code base has a single large CSS file (apart from bootstrap) that overrides many attributes from bootstrap.
I just want to disable all the CSS values from that large CSS file for a particular element.
largecss.css
<div disableCSSfromLargeCSS.css> </div>
Is this possible? Without manually checking the attributes and overriding them?
Try $('#element *').removeAttr('style') or $('#element').children().removeAttr('style') to remove all applied css to that div.
Related
Many elements refer to many css and many css refer to many elements.
Is there a technique that is easiest to look at for an element of css?
For example:
I have a 1000 line html file and
I have a 1000 line css file
example i would like to know <div class = 'container'> and the inner element in line 574. Which css line is used?
Is there a method or tools that makes it easier or faster?
the easy way is to inspect element in your browser (key f12) and copy the css generated there. or you cand see the hole css file and extract what you want.
We are running Domino 8.5.3 (planning to go to 9 asap). I have an application that consists of viewpanels with searches. My viewpanel displays a lot of columns and I would like to have some control over the size of the individual columns. I have been everywhere and tried setting several different column styles using a variety of inline and css techniques, but I can't seem to override whatever the "xspTextViewColumn" is doing.
Here are some of the website pages that I have consulted:
http://blog.hughesconnect.com/?p=138
Issue with CSS width and views columns and headers
http://iswwwup.com/t/df2dfb59c014/how-can-i-left-align-the-extra-columns-in-an-xpages-data-view.html
I do not have access to dojo or extension libraries.
Thanks.
---Lisa&
You can add width:100px; to the style property of the view column you want to adjust. By using the style property it will render as a style attribute in the HTML which takes precedence over any CSS rules contained in classes.
I have provided a template and it contains many CSS files in head and the body is divided into header ,content and footer portions. I want to add to add bootstrap in order to utilize its grid system for its content part. But when ever I add bootstrap.css in head above or below all the style sheets in <head> content part and footer part renders well but my header portion of the body encounter certain design problems as many of the properties in other css files get overridden by its grid system.
All I want to know is, is there any hack I may be able to use the
bootstrap.css for the content part?
I have also tried linking the bootstrap file in <body> below the <header> and above the content portion(I know its not a good practice.) . but it also causes the similar problems for the header portion.
What you can do is make and download a custom bootstrap version from http://getbootstrap.com/customize/ that contains only the grid system and use that CSS in your web app.
No, you can't. You're going to either have to change your markup and adjust the styles accordingly, or use an ID wrapper and change the styles in your CSS to only target <header> under that specific ID.
You're better off adjusting your styles to fit bootstrap, though.
Try adding !important to the properties that you want to customize in your CSS file.
But the best way I see to solve your issue is modifying the bootstrap.css file adding your configurations and adding !important if necessary
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.
I have the next two elements on an HTML file:
<a id="a1" href="?cssfile=css-folder/015/styles.css">Style number 015</a>
<div id="a1Preview"></div>
The first one (anchor) is a reference to a CSS that will be loaded dynamically by the page. The second one (div) pretends to be a preview (thumbnail) of the style sheet.
THE PROBLEM IS I need a way to set the div background dynamically from the CSS, something like:
#a1Preview
{
background: url(css-folder/{"015" extracted from the <a> element}/preview.png);
}
Is this possible? Any ideas? Of course the HTML is untouchable. I can only change the CSS.
Thanks in advance.
You could use jQuery to change the css content dynamically. jQuery is a extension to javascript. From there you could then use the system you use to skin, but generally to extract href attributes from tags and change CSS, you can use such a thing.