Actually, I have an application for different countries in different languages and external CSS is defined for all the HTML elements on the Page using classes and Id's. What I want is to change the font of the whole website for a particular country but I don't want to do it by applying the CSS to all the classes again and again. So Is there a way that I can change the CSS(font) of whole website in a go or by using a convenient way.
You don't need to add Class to all of elements again and again. Adding class to body is enough to solve your problem. Please take a look at following code.
if(/* Check your users's country, suppose that your users are in China */){
$("body").addClass("font-chinese");
} else if(/* So on */) {
// keep on adding body class
}
and your CSS file
body {
font-family: default-font;
}
body.font-chinese .container-element {
font-family: chinese-font;
}
body.font-another-country .container-element {
font-family: another-font;
}
Your child elements in .container-element will use inherited CSS properties from .container-element, so you just change font-family of .container-element, it will effect all child elements with out having to add class to all of those ones individually again and again.
You could try something like this:
$('.mysentence').css('font-face', "Arial,sans-serif");
Due to the fact that you're saying there's styles set by ID, the only way to really override these without doing specific style for each element, would be inline styles.
To avoid having to set it for every class like in the example above, you would do something like this instead:
$('h1, h2, h3, h4, h5, h6, p, a').css('font-family', 'verdana');
In the selector part (the first part) you either go through this list and take all relevant elements - or better yet: go through a few samples of the pages you're going to be using and select the relevant html elements from there. It shouldn't really take that long.
For the part about making your solution work on only specific languages/countries I would do something like this:
$('h1, h2, h3, h4, h5, h6, p, a', 'body.en-us, body.en-ca').css('font-family', 'verdana');
Then you can apply class 'en-us', 'en-ca', 'fr-fr' to the body tag and use this to target your javascript changes for those specific countries. Depending on what kind of changes you need to do or how many countries you need to do this for, another approach could be to apply a 'font-verdana' class or something similar to the body tag for those countries and then simply use this as the parent selector instead of the countries/locales.
Well, I have used the $('*') for applying CSS to all the elements and for the elements that are being created dynamically, we can use "DOMNodeInserted" event and deal with the dynamically created elements.
Related
In order to fix accessibility problems with headline hierarchy required for section 508 (Requirement 1194.22 (d)), I need to rewrite headlines hierarchy with JS.
Problem is that HTML is already built and that back-end technologies cannot be used to reorder those headlines. We have a situation that some headlines are of lower order than they are supposed to be, so they appear in this order, for example:
H1
H2
H4
H4
H4
H1
H3
H4
H4
H5
H2
H4
This should be converted to
H1
H2
H3
H3
H3
H1
H2
H3
H3
H4
H2
H3
How do I accomplish this?
You might not have to do anything. There is nothing in 1194.22 that says the order of the headings must be sequential, although that is certainly the preference.
(Note that Section 508 was updated a couple years back so that it follows WCAG 2.0 so referring to 1194.22(d) is old school and instead you should refer to WCAG 2.0. In this particular case, success criteria 1.3.1 talks about headings.)
It can be perfectly valid to have an <H4> nested under a <H2>. Your tool cannot make the decision on whether the hierarchy is correct. A human must do that.
When incorporating third party libraries, having bad heading hierarchy is a quite common problem, but in fact the main problem is that in many cases those heading should not exist. Getting rid of them should be considered before applying the following script which does the intended job.
This javascript uses jQuery but can be adapted in vanilla-javascript. It parses the page for standard headings (h1 to h6) and changes the level to the appropriate expected level at the rank considering its parent one.
The difficulty of this kind of scripts is that in your example, fixing the heading hierarchy just by changing the first h4 to a h3 for instance might work on paper but is not a reliable solution.
$(document).ready(function() {
var level=0, plevel=[0];
$("h1,h2,h3,h4,h5,h5").each(function() {
var c_level=$(this)[0].tagName.substr(1);
var p_level=plevel[plevel.length-1];
while (c_level<p_level) {
plevel.pop();
level--;
p_level=plevel[plevel.length-1];
}
if (c_level>p_level) {
level++;
plevel.push(c_level);
}
if (c_level!=level) {
$(this).replaceWith("<h"+(level)+">"+$(this).html()+"</h"+(level)+">");
}
});
});
I would like to apply
font-family: Helvetica to all element in the site.
So I write
body, html {
font-family: Helvetica !important;
}
in the CSS file, the problem is , the font-family is still override by other inner CSS. How to force the whole site use one font family?
Thanks a lot for helping.
Is it being overriden by other css style rules with !important? If so, there is nothing to do as more specific selectors win over more general ones.
* {
font-family: Helvetica !important;
}
You could use the inspector in chrome, or other browser's equivalent to see how the cascade styles on your particular element unfolds. Your inner CSS could have also defined the !important flag, which overrides you definition on body.
If you post your entire html and CSS people might be able to help more easily.
I got a problem with TinyMCE when it comes to parent site CSS selectors.
My TinyMCE opens an iframe. I add the parent css to the tinyMCE via content_css property, no problem from there.
Now imagine that i got a css style like this:
.mysite.default .content h1 {
...
}
.mysite.default .info h4 {
}
The problem comes when i want to access to .content h1 or .info h4.
As by default, by adding to the body the class .mysite.default, if you got an h1 or h4, those won't be applied of course due to the selector .content and .info in the middle.
So inside the iframe's body i would be able to set styles only for
.mysite.default h1 { ... }
.mysite.default h4 { ... }
Is there a good strategy to have this kind of flexibility?
Problem is that I don't have only one h1 or h4 or span styling, I may got many of them, that's why I need a flexible selector strategy for this...
I can't just copy all the styles of the parent dynamically at runtime, because what if one of the parent selectors has a border, margins, padding (because it might be a parent div wrapper container with some unique styling) ?
So it's not that easy as saying, "hey add every parent style and that's all", because the child will have extra borders, extra margins when starting to edit that div.
If I understand you correctly, you should be able to use
.mysite.default * h1 { ... }
to select all h1s inside other tags: the * wildcard covers any wrapping tag/class/id.
Hope that is helpful...!
I have a Drupal website and I need to create a link to a different version of the same page that opens up in a new window but hides all the side bars, blocks and header and just shows the main content. This is so people can print the main content of the page without all the extra bits.
I know I can add in a link to a print version like print version. But then I want to add a new CSS class to the page which I could use to hide the extra bits. I am not sure how I can add the CSS class to the link/page.
I guess I could also use Javascript but not sure about which method to use for this.
Try the Drupal Print module, it provides customization for printing pages in Drupal.
If the Drupal Print module doesn't work for you (for some reason), the standard method for creating a print view utilizing CSS is to include in your primary stylesheet the following:
#media print {
/* style sheet for print goes here */
}
You would redefine the classes, elements, etc inside that stanza to change or suppress them for printing.
Good luck!
You do not need to create a new print-only page.
Instead, you can just add something like the following to the bottom of your stylesheet and the user will print the page without the extras.
#media print {
body {background-image:none; background-color:#fff;} //turns off bg images
//sets bg to white
div#header, div#footer, div#nav {display:none;} //hides elements
//change to match your divs etc.
h1, h2, h3, h4, h5, ul, ol, div, p, a {color:black;} //changes text to black
}
I have this thing on my webpage... I guess it could be called a widget...
How do I separate it's CSS and JS from the containing page's CSS and JS? preferably without using an iframe?
In my app the user can customize the CSS of the content, so, I'd need a clean slate.
On the outermost element of your widget, set a relatively unique class name. For example:
<div class="my_spiffy_widget">
<!-- Insert spiffy widget here -->
</div>
Put the Javascript and CSS in their own files. For the CSS, structure all of your selectors like this:
.my_spiffy_widget P { /* paragraph rules */ }
.my_spiffy_widget A { /* anchor rules */ }
.my_spiffy_widget UL { /* unordered list rules */ }
That ensures your rules do not accidentally get overridden by other CSS rules.
Likewise with the JavaScript, prefix your functions with a common, distinctive prefix:
function my_spiffy_widget_doSomething() {...}
Avoid global variables if possible, but if you cannot, prefix them as well:
var my_spiffy_widget_firstTime = true;
You could add the !important declaration in the properties, making it harder for the user to override the settings.
eg:
div.widget #header {
padding-left: 10px !important;
padding-right: 5px !important;
}
And/or you could grab a CSS reset script (such as Eric Meyer's) and preface each selector with the name of your container DIV.
You can give all elements outside very complex css class names and make sure they don't collide with the ones the user will choose (like "KAFHxyz_..."). This way, all sane class names and default styles will only apply to the "widget".
This will be some effort since you'll need to set all the standard CSS styles using !important (so the user can say "body { font ... }" and it will only apply to his area.
Alternatively, you could try to write some javascript which fetches all styles of all elements, then add the "widget" (and it's JS/CSS) and then reset all styles to what they were before. Should be possible but the performance will probably suck.
[EDIT] That said, you do know that you can create an iframe with JavaScript and manipulate the content (the DOM inside) to your hearts content, yes? In this scenario, the IFrame will just be a Div-like element which adds a "namespace" for CSS and JS files.