Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I created a solution, stuck in jquery ui to do some slider bars which work and look great.
I popped an accordion onto a page and the CSS for it is awful. But I have no idea how to replace it with my own CSS, as it seems to use an absolute TON of CSS classes and overriding them all seems very messy.
Presumably picking and choosing styles and themes with JQuery UI is a common task, is there a best practice for this?
I'm thinking perhaps you can get the individual component CSS and pre-compile it or similar. But there seem to be many common CSS styles that are applied by jquery ui.
For example, an accordion has these classes automatically applied:
ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active
I can see that two contain the word 'accordion' and so you can imagine 'overriding' (or should that be removing the code from the jqueryui css and putting it into my own css class?) them without issue, but the others are buried in jquery ui and overriding them globally would likely cause issues.
My goal is to completely customise the accordion control with my own CSS while not affecting any other jquery ui component.
You need to re-declare the same in your stylesheet at the end of all the other styles and set to your custom values that you want to override. After doing that, re-declare that css file at the end of the page. Hope this helps.
If you want to keep the original style as it is then wrap one div around your accordion and inherit the css as you want. Anytime you can remove that class from div to get the default jquery accordion. like:
<div class='someClass'>
<div class='ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active'></div>
</div>
CSS would be like this:
.someClass .ui-accordion-content { /* your necessary styles */ }
Both above answers seem to fit your needs, in the interest of completeness though you could also over-ride the css using jQuery simply picking out the elements that you're not happy with, e.g.
$(".ui-accordion-content").css("color", "#FFF");
Might be simpler than digging it out in the jquery-ui css or re-declaring if you're only looking to change one or two items.
Related
I think the title is a bit vague but my vocabulary is limited in english. I'll try to explain what I want to do.
I have two CSS files from products I have no control ( are not mine ). Lets say AdminLTE bootstrap and a JQuery plugin.
The problem is the Box class is in both styles.
and messing my flight indicators from the JQuery plugin. I know I have to choose the order of CSS style files or add important to one of them but I'm afraid of start to mess with my bootstrap interface.
Is there any other way to solve this?
I know I have to choose the order of CSS style files or add important to one of them
you don't, you could simply write a selector with higher specificity which would override the jQuery plugin styles, like body div.instrument .box
I'd like to get opinions if this plan is worthwhile or not.
I have an existing site, and some elements have a CSS class defined.
I thought I would append each element that has a class with a new class:
<div class="existingClass">
would turn into:
<div class="existingClass newClass">
Then, if I want to override any attributes in "existingClass", I would do so in "newClass" (because the last class attributes are taken?).
I figure this way, nothing would break, so I do not risk anything because I am not removing "existingClass".
Any problems with this plan?
First know what is in the existingClass. Write newClass in such a manner that it won't break the layout. For knowing what is in the existingClass use tools like firebug to save time.
Indeed this seems to be a good approach, if you don't want to mess editing the already written CSS.
What you must master are CSS precedence rules, also known as CSS specificity.
Some good articles about it:
Specifics on CSS Specificity.
CSS Specificity: Things You Should Know
This is important because when you want to change a style, that chance will be visible only if you follow appropriately those guidelines. If you don't, then you'll face some troubles when rendering your page.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I would like to know why they created the property style for all properties instead of create a new property for each one?
Let me explain better, today we use this:
<p style="color:blue; background-color:red"></p>
I would like to know why they didn't do like that:
<p color="blue" background_color="red"></p>
Is there something in any w3c document telling it?
My theory, based on logic... Something like color="blue" is not CSS, it would inherently be part of the HTML language.
With CSS in the picture, there is no reason to expand on HTML to handle something that HTML was never designed to handle. And so they made a way for HTML to read and understand CSS. Hence the style="" property.
Why create something that is redundant when you can simply adapt to read what already exists?
That said, you used to be able to use things such as the <font> tag to recolor or resize text, such as <font color="blue">
As CSS becomes more and more powerful and expansive, there is no need to implement this type of styling, thus why the tag is now deprecated in HTML5.
Beyond all reasoning there is a clear logical point, which is for each type of code to serve its particular purpose. While they allow you to insert CSS into HTML inline by using the style="" property, it is not best practice and should be used in extreme and unique cases.
Thanks to the style attribute, the development of new CSS properties doesn’t require an update to the HTML specifications.
If we’d have a separate HTML attribute for each CSS property, all these attributes would have to be defined in the HTML spec. So whenever a new CSS property is defined, all HTML specs would have to be updated. Otherwise this new CSS couldn’t be used in older HTML versions (validly).
In the same sense HTML doesn’t define graphic formats (like PNG) or codecs for audio/video, or the content of math or svg.
So CSS and HTML developers can work separately from one another, as long as they respect the interface they agreed on: the style attribute (and the other ways to add CSS for HTML).
Another reason: It would be possible that other styling methods come up in the future, not compatible to CSS. Now when everyone would get their own attributes, that would become a total mess.
I'm unable to point to where in the spec this is detailed, but I'll include my understanding.
I believe the intent was to promote separation of style from content. The style attribute was introduce to allow for inline element styling, but the intended approach to styling was to do so using classes and external CSS. This allows for reduced document size, as well as a generic content-only approach which allows for, among other things, a simple approach to theming.
style may also have been included to address situations where referencing an external stylesheet is either impractical or impossible.
Because as much as possible, the w3c is trying to abstract presentation (CSS) from structure (HTML) .. and if there are new properties created (attributes really) it would obscure the mark-up as well as making it more confusing (and harder to debug)
Its always best practice to use an external stylesheet whenever possible.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
How to apply css style to a wordpress article without being administrator?
I've found plenty of information on google, but none that apply to my case because:
I'm not an administrator of the site so changing the theme, the global stylesheet, or hacking the php to allow html style tags is unfortunately not an option.
I only want to change the style of only some articles, so even if I had the authorization I'm not interested in changing the default stylesheet.
Currently, the only solution I've found is using style attributes html tags of interest, but it is error prone and doesn't scale well.
Any suggestion on including css style rules either inline or from an external url?
In my experience, style tags within posts do work (testing in WP 3.5.1 using the text editor).
However, you have to be cunning with the styling to make sure you override the defaults. An easy way to do this is with the important notation:
<style type="text/css" scoped>
* {
color:red!important;
}
</style>
<h1> hello </h1>
All the content of the post ("hello", in this case) appears red.
The use of the scoped attribute means the styles only apply to the blog post, not the whole page.
Are you talking about changing your specific posts that you create only?
If so, I'm guessing you only have access to the posts in question and therefore it would make it very difficult for you to do anything scalable.
You said you can't change the stylesheets or change the default stylesheet but if you could then you could wrap all the articles you want the specific styling on inside their own div with an id name of your choice. This would then automatically change all elements inside post with your div id and would scale across all pages you create without the need of re-defining the rules every time, for example:
<div id="antoines-article">
All your content
</div>
Your only other option is to use inline styles
<div style="background-color: green">All your content</div>
or by adding this before your post content (bare in mind however that this is only allowed by default to Administrator and Editor roles)
<style>
div { background-color: green; }
</style>
The difference here is that the first rule would only change the div it is attached to while the second would change all your divs to green.
This still may not be what you are after but I'm afraid from what you've said you are pretty limited with your options.
In addition using the !important tag after most css definitions will overwrite CSS styles from stylesheets if you find something wont change for you. For example
div { background-color: green !important; }
In addition, you could ask the webmaster of your site to setup specific page templates with different CSS styles loaded which you could then hook onto.
I been trying to loose the style that the custom jqueryui.css uses for Tabs, but I can't find the piece of code that just get it working, and not style it. Anybody knows what exactly the css is, removing everything but the css to get it working?
The jQuery UI CSS theming are built up around the classes named ui-*. For example:
ui-widget
ui-widget-content
ui-corner-all
And for tabs you get: ui-tabs
Open up the .css to see what they do.
I don't think you can remove all the classes and just have the functionality, since most of them are needed for tabs to work.
If I were you and wanted to remove all the styling, I would edit the .css and make small changes and see what happens. For example, remove the default font, background-color etc. When you are pleased with the result I would keep the remaining classes as they are and build your application around them.
I hope this helps.
I had a similar question once, and a user was kind enough to provide me with a minimal example. See the comments on Vertical "tab" component on jQuery UI site (JSfiddle here)