I'm using ITCSS to structure my styles. Now I have a page with an image where I need that its max-height would be 512px. This property is specific for the image in that page, so using ITCSS where should I put this property? The image has the class img-fluid of Bootstrap. Another question is, using ITCSS could I create styles for specific pages, or should organize my styles using the structure "imposed" by ITCSS?
It depends on how much page specific styling you have.
One way is to style the image as a variation of image. Used like <img class="c-img c-img-fixed-hero" src="/path" />".
.c-img {} // general image styling
.c-img--fixed-hero {} // special styling for this use case
Another way is to create a page component and use modifiers to apply seperate styles for each variation.
// shared page styling
.c-page {}
// unique home styling
.c-page--home {
.c-img {}
}
// unique about styling
.c-page--about {
.c-img {}
}
Related
I'm a new user of GWT and I'm looking for some advice concerning "theme management".
I have to make a website that can handle theme changes. What I mean is that a user can make is own theme by filling a form, then the website will automatically and dynamically changes its color to display the new ones.
I thought using a CSS sheet for all the static properties and using some GWT lines (e.g. label.getElement.getStyle.setColor(...)) to change color. But I have many "hover" properties and I think creating many MouseOverHandler is not a good idea ...
Is there a way to edit CSS sheet dynamically or a magic trick to do that ?
Thanks.
You have many options - the most straight forward (to me) is to make use of the existing CSS classes that GWT introduces. If you look at javadocs for any of the widgets GWT provides, you'll notice the CSS Style Rules section. For example, Button:
.gwt-Button
the outer element
That means that every Button you add to the page has a .gwt-Button style applied to it. If you inject a CSS stylesheet with a rule that overrides this style:
.gwtButton {
background: red;
}
All your buttons will turn red. You can inject stylesheets using StyleInjector. Creating the stylesheet's content dynamically is up to you - but it's just text, it shouldn't be hard (but make sure the generated CSS rules are valid!).
To get you started, try hooking up this code to some button and see if clicking it triggers changing all the Buttons on the page red:
StyleInjector.inject(".gwt-Button { background: red; }");
If you have custom widgets that you want styled differently, just add an individual class to them (.customWidgetWhatever, like Button has .gwt-Button, etc.) that you will include in your custom stylesheet.
Make sure you understand how CSS works and what it can do for you. For example, if you want to style each button the same, you don't have to change each button's style individually, just use:
button {
background: green;
}
And all the <button>s will turn green.
The easiest way to change themes without reloading the whole application is to assign a theme class to the body element.
You'd want to prepend each CSS class in your app with a particular theme, e.g.:
.theme1 .myClass {
color: red;
}
.theme2 .myClass {
color: blue;
}
Then you'll apply a particular theme to the body element:
<body class="theme1">
When you want to change themes, you'll have to change the body class so it will become:
<body class="theme2">
this way, each element that has class myClass will have its color changed from red to blue.
You cannot edit a CSS file dynamically, but you can inject CSS style either as a new CSS file, or directly into your document.
For example, you can define all key CSS rules in your "main.css" file, and add your user-defined rules directly into the host HTML page with a style tag.
Is there a way or operator in CSS to assign a new style to specific element? I don't want to change original style because it belongs to a plugin and changing it will change it on all my pages. However I want to change the position of the element on a specific web page.
I also can't call those styles in my html because that CSS file is used solely in jquery plugin, you only put class="slideshow" in html div and thats that. I can change that CSS file to suit my preferences, however I don't know how to change it for specific instances?
In order to make a specific styling on a specific instance of your plugin, you should assign a specific class or id to a parent container of that plugin for the instance you need customization.
Example : you can give the id="special" to a parent of the plugin in the page you want customization.
Then you can use that selector to style it independently from other instances of that same plugin.
example CSS:
#special .slideshow /*other selectors */ {
/*your specific style */
}
In your scenario CSS specificity Rule will be helpful for you.
For example in your plugin you are using RED Font Color in class slideshow. Then in your another CSS file you can create a more specific Rule.
Check the Demo what I've posted above on comments section. Here is the direct link.
div.slider .slideshow {color:green;}
You can refer to the element by name:
#htmlitemname{
color: green;
}
CSS is cascading, i.e. it will apply it top down - general, class and then the id.
You can add !important to your css if you wish it to override any inline styles. So long as you make a style sheet specifically for that page, this should work for what you need. Hope this helps :)
I am using a Wordpress theme named KALLYAS, and I am having trouble adding CSS to a specific class. This theme uses multiple shortcodes. So lets say I want to add a background with CSS to the gray area on the homepage only WITHOUT EFFECTING THE GRAY AREA ON ANY OTHER PAGE. also how would I go about adding CSS to a shortcode on a specific page aswell? I am guessing it is same way.
That worked because if you notice on the code in the theme preview it says :
<body class="**home** page page-id-17 page-template-default res1170" data-twttr-rendered="true">
it would also work if you used any of them like :
.page-id-17 .greyarea { color:#ccc }
.home.page-id-17 .greyarea { color:#ccc }
You need to scope your CSS if you want it to just display on one page. Grab a unique class or ID from a parent on that page, and place that in front of your css selector.
Ex
.uniqueClass .greyarea { color:#ccc }
So I have a CSS for .status-msg-body My blog is hosted in Blogger platform and in that a CSS file is there which cannot be removed. That CSS file contains a CSS for.status-msg-body but I want to change it so I have put an inline to my blog. But that does not works it still shows the CSS specified in the file provide by Blogger by default.
You can try using !important property to override those css styles.
Try including !imporant in every line of your css class.
For instance if you have
.status-msg-body
{
color:Red;
}
and you want it blue, add this class
.status-msg-body
{
color:Blue!important;
}
This will override the existing style.
I'm creating a bookmarklet. It will display a widget on page. However, some existing css on page can effect to my widget. How to avoid this? I don't want to use iframe.
Use a localised reset.
Take an existing CSS reset (or roll your own), and namespace it by putting your widget's id (or class) in front of it.
Example
HTML
<div id="my-bookmarklet-panel">...</div>
CSS
#my-bookmarklet-panel a,
#my-bookmarklet-panel div,
#my-bookmarklet-panel span {
/* Reset rules */
}
make use of the !important statement in our widget CSS to protect your rules from overriding.