I want to change the style depends on the language. For example, when I switch the site language to Arabic I want the rtl style that I wrote to take effect and to unset the rtl style when switching back to English. How to achieve that in Drupal 7?
I tried this answer but didn't work for me.
The simplest way is to use language class Drupal is adding to body element. Check your page html and see what classes body tag has. There should be some class similar to "i18n-de" (in this case for German). Then you can use it to style differently any element inside body tag (basically all of them), like:
body.i18n-de div#header {.some css.}
body.i18n-en div#header {.some other css.}
Related
I'm using Wordpress.
Is it possible to set a font-family for RTL text and headers (I'm not using WPML or Polylang, just text aligned to right and written in Arabic), different from the one my theme uses as default? ie. keep the default font of my template for English language, but use a different font for text and headers (h1, h2…) aligned to right (or written in RTL language like Arabic and Hebrew).
How do I do that using my themes's style.css or a custom css?
Thanks.
This is tricky, and it really depends on what exactly you want to achieve and how you do it. You can, however, take advantage of the fact that RTL blocks (and inline text) uses the dir="rtl" property to set a general CSS rule that captures the elements that have those properties.
For example:
<h1 dir="rtl">עברית</h1>
And then add a CSS rule like this:
*[dir="rtl"] {
font-family: serif;
}
This isn't perfect and you might have to have some adjustments, but it could at least do the trick. You need to make sure all of your RTL text is defined with dir="rtl" -- which is a good practice regardless, and what W3C recommendations are.
You can check this jsfiddle as an example (I added colors to the rule to show how it affects the relevant RTL pieces).
I am using Kentico 8.2 and running into the issue where I need to have different styles for my forms. I have been able to alter the input attributes without a problem, and thereby create different styling for the forms in the site. However, I cannot get the .FormButton to change style if attached to my CSS for the button, ie .newPage .FormButton { background:red color:white }.
Is there another way to populate a CSS on top of the form button in 8.2 without having to add a class attribute in the code behind?
You don't have to touch the code behind. You can just wrap the form in a div with a CSS class using either content before/after or a web part container and leverage CSS Specificty by creating a more specific CSS selector including your new class (e.g. .myRedForm). The resulting selector would look something like this: .newPage .myRedForm .FormButton { background:red color:white }. The last resort would be using the !important directive which I would rather avoid.
Best way to do this is to render the form on a page and inspect the element by using F12 or FireBug. Either one will allow you to view the source and inspect the elements in order for you to get your selector to style it accordingly.
You can also specify a css class by creating your form layout manually and adding CSS around the button. Not ideal because you'd have to build your forms manually each time.
I am making a theme for a website managed by plone using diazo and at least parts of twitter-bootstrap. Personally I'm not all too happy about that combination, but it was requested that way.
Now I was informed the other day that there will be some portlets that suppose to come in their own design, styled in an editor insinde plone (the editor seem to write the styles straight into the html). Meaning no further theming should be applied but bootstrap css recognizes the pattern and hijacks it anyway.
I tried to block that by using a form of <notheme css:if-content=".theStaticPortlet" /> but ended up having the theme blocked on the entire site whenever a container like this was found.
Is there a way of excluding a specific container/class from being bothered by the theme while everything around it stays themed like before?
With lesscss you can do something like that:
.theStaticPortlet {
// put your specific portlet css here
}
:not(.theStaticPortlet) {
// copy or import all your regular site css here
}
From what I understand your question is purely about Bootstrap and its CSS interfering with Plone markup. Exactly which styles are being applied on your portlet? I'd bet it has to do with the DL/DT/DD tags. If so you could use Diazo to replace those with DIVs or some other neutral tags - on Bootstrap's understanding, of course.
I have made some templates on wikia.com, which contain only CSS code (key:value;).
My problem is having another template use these style templates in a style attribute tag.
style="{{MyTemplateStyle}}"
This code does not evaluate as expected. The CSS code is outputted before the element and the style attribute is not included inside the element.
Am I trying something not possible for a wiki ?
I merely want to be able to change styling on certain templates in one place, like regular HTML & CSS pages.
CSS styling specified from the style="" attribute always takes priority over any other css, even if you use !important in a CSS specification.
Therefore any edits you make to your CSS on Wikia will not ever override the CSS specified inside an attribute.
Kim, you were right to switch to classes instead of embedding in-line styles via templates.
The very idea of using templates suggest that this was going to be re-used in more than one place, applying styles to a group or, in fact, a class of elements.
This approach is much simpler to read and maintain (as you only have one, central place to edit), and also, if done right, will enable you to seamlessly change the colour scheme via Special:ThemeDesigner.
In .Net, all styles are not listed in corresponding controls and html tags. For example, the style "WORD-BREAK","WORD-WRAP" etc. Any site which lists all styles available to all tags and controls ?
W3schools is a great place to start learning CSS.
The official specification is another place to look.
Have a look at w3schools. http://www.w3schools.com/css/css_reference_atoz.asp
But remember that there are also styletags specific to a certain browser (like the mozilla tags).
As far as I know Visual Studio shows the tags which are compatible with all browsers (and that might be the reason why you are missing some items).
Also, you can apply all style tags to all HTML tags (you can assign font to an img tag), but they might not give you the effects you are hoping, but the beauty of CSS is that you can assign any style to any tag (and if you are embedding tags in eacht other it will inherit the style, so for example assigning a list-style to a div might not look usefull, but is allowed and will cause all lists in that div to look the same, ofcourse this can be done in various other ways).