I'm looking at making some custom GWT widgets styled in a uniform fashion without requiring the designer to go into each widget's UI file every time they want something to appear differently. I would provide a bunch of base styles for elements in the widget and the designer comes along later and sets, in UIBinder, HTML, CSS, anything really, the style using the same selector.
For example:
I have a composite widget which I have setup to use a CSSResource. This CSS resource has a style named .myHeaderStyle which is applied to an element on the composite.
This composite is used in another GWT Widget and needs to appear slightly differently when used in the enclosing widget.
My hope here is that I can specify another style in the UIBinder definition of that UI also named .myHeaderStyle and have this style override the style specified in the composite widget's CSSResource.
However, in my attempts to make this happen even with !important included on the style properties that are to override the initial style, I'm only getting the original .myHeaderStyle set on the composite widget.
I'm trying to specifically avoid adding/changing the style in the composite every time we compile, I want it to inherit from the enclosing page effectively overriding the composite widget's original styling.
Is what I'm trying to do possible in some form with GWT+CSS?
After building complex GWT apps for 6 years, I am a big proponent of using a single CSS file for the entire app, and never using CSS resources or UIBinder definitions. Then you can set ".myWidget" style in your widget, and your designer can do:
.myHeaderStyle {
font-size: 1.4rem;
}
.myWidget .myHeaderStyle {
font-size: 1.6rem;
}
In my opinion, this is the easiest way to maintain consistency throughout the app - all styles are in one place, using inheritance, rem, and other best practices. It's much easier for designers that CSS resources scattered throughout the app.
By the way, this is also the easiest approach to implement themes (or skins), or change CSS based on the screen size without touching the code.
EDIT:
This is an example from one of my apps:
<g:HTMLPanel>
<g:Label ui:field="logo" styleName="logo">My App</g:Label>
<div class="menu" >
<div class="tab" >
<g:Label ui:field="tab1" ><ui:text from="{constants.tab1}" /></g:Label>
<g:Label ui:field="tab2" ><ui:text from="{constants.tab2}" /></g:Label>
<g:Label ui:field="tab3" ><ui:text from="{constants.tab3}" /></g:Label>
</div>
</div>
</g:HTMLPanel>
Note that I use 'class' for div element, but styleName for a widget. I don't set style on my tab labels, because I use CSS to style all of them at once:
.tab>div {
float: right;
margin: 0 0 0 6px;
padding: 2px 6px;
width: 120px;
}
Related
How do you change the color of a specific link on a post in WordPress? Do I just use CSS code right there in the post?
for example, this is what I did in the post:
<font color="FF00CC"></font>test
and
<font color="FF00CC">test</font>
it didn't work
I don't know how to give it a class name because it's just a single word so I'm not sure I can target it in the custom CSS section.
do you know how to change the link's hover, active, and visited states too? The color that I selected for the whole WordPress site I have is different in this particular word and I'm not sure why either.
I have a class name on this entire post as a side note because I did other CSS customizations on it in the custom CSS section. I just want to target this one link on this page tho.
You may do well reading through the basics of web design, or at least browsing the Basics of CSS. You should avoid using inline CSS unless you specifically need to, especially if you intend to use Pseudo-Classes such as :hover.
You may also consider reading over the basics of Semantic HTML5, because elements like <font> are obsolete and effectively unsupported.
Now to the root of your question, all you need to do is add a class to your link:
Test
Then in your Appearance > Customizer > Custom CSS you can target that with a very basic selector:
.test-link {
color: #F0C;
}
Also, since it's being selected via CSS you can now use the :hover pseudo-class, which is something you can't do with inline CSS (you would have to use inline JavaScript, which is enormously overkill for something so trivial):
.test-link:hover {
color: #0FC;
}
Take a look at the following snippet to see it in action.
.test-link {
color: #F0C;
}
.test-link:hover {
color: #0CF;
}
Test
You can write an inline CSS.
<a style="color: #FF00CC" href="http://www.google.com">test</a>
I am sorry beforehand if question is stupid, but this is my first project.
I got html.css layouts from HTML/CSS-coder, and for each view they made separate html and separate CSS file.
But I am developing SPA, so there will be one page as an entry-point. Obviously, it should contain all CSS files for all views. The problem is that some of the CSS files contain classes with the same name, but different content. So if I just put list of CSS files in the entry html, some views become a mess, because they use wrong classes.
Thanks a lot.
As I see that my question is not being understood, I decided to give example:
File1.css, used in view1:
.class1 {
cursor: default;
}
File2.css, used in view2:
.class1 {
cursor: pointer;
}
Obviously, I need both as is and cannot use !important; as this will make a browser to use only one of them in both view1 and view2.
What is correct approach to solve this? Ask html coder to re-name classes, or do it myself? Or is there some tool that can somehow consolidate CSS files automatically?
Also, how usually html/css layouts should be coded for SPA to avoid this situation?
UPDATE 1
I appreciate efforts the SO community made to help me though question is indeed could seem vague. I've already learned a lot from all answers.
The situation is much clearer for me now.
The problem in many projects such as yours is that developers do Not do what they are supposed to be doing in standard manner. The correct approach to manage CSS Files in more than 500 lines of CSS Code is to follow Modular, Structured Patterns such as BEM. These Standards guid you through the right choice for the naming conventions and writing Css Components.
For example in Twitter Bootstrap they use components and utilities to manage large projects and avoid such collisions.
Your way to get out of it
You have always the chance to write your styles inline inside the html code. This would bring a high specificity and will override Clas Based CSS of the files included.
You could provide a .css file of your own and include it after all that developre's css and !important all the mess or with the help of high specificity like ids make your CSS win!
Forget about the whole CSS They provided you and start using a framework like Twitter Bootstrap or Zurb Foundation.
Yes you are going to have to go in by hand and re-code the classes. Additionally You can add id's or an extra class to whatever section you are currently styling.
For example: <div class="CSS-coder" id="myExtraStyles"> or <div class="CSS-coder myExtraStyles">
!important will override most styles. But it would be better to edit the current classes that wont be sharing style attributes.
Additionally remember that "Cascading" means from top to bottom. So any styles loaded after the default styles will override the styles loaded before it.
I agree with the other poster in that a "framework" is the way to go.
Good luck with your project.
If I understand correctly, it seems as though you need to use parent / child selectors depending on which view it is:
file1.css:
.view1 .class1 {
// Styles
}
file2.css:
.view2 .class1 {
// Styles
}
To achieve this, look at each view and see if there's a top-level element you can append a class to, such as the <body> tag:
<body class="view1">
<div class="class1">
AND
<body class="view2">
<div class="class1">
This removes any need for !important (stay away from that as much as you can!)
EDIT
Re-reading your question I think I have a better idea now as to what your actual problem is.
What you can do is to find or add a parent element that you can use to filter out the styles.
Let's say you link to those 2 CSS files and both of them define a style like so:
/* First CSS file */
.sub-div {
background-color: red;
}
/* Second CSS file */
.sub-div {
background-color: blue;
}
On your HTML, look for a parent element that you can use.
<div class='red-only'>
<div class="sub-div"><p>View 1</p></div>
</div>
<div class='blue-only'>
<div class="sub-div"><p>View 2</p></div>
</div>
Create a custom CSS (you should link to the file last).
.blue-only .sub-div {
background-color: blue;
}
.red-only .sub-div {
background-color: red;
}
When working with css, the order is important.
The file that is declared last will have the highest precedence.Now with that in mind if you have
<link href="file1.css" rel="stylesheet" type="text/css">
<link href="file2.css" rel="stylesheet" type="text/css">
Then the code specified in file2 will override the code in file1, only if they have the same specificity. Meaning that the more specific declaration will trump even if it is declared in file1. So if you want to override a rule in file1 you will need the exact same declaration in file2.
When working with files created by others like bootstrap or similar it is preferable to create a new file.
<link href="file1.css" rel="stylesheet" type="text/css">
<link href="file2.css" rel="stylesheet" type="text/css">
<link href="myStyle.css" rel="stylesheet" type="text/css">
This will help you avoid trouble that might arise from modifying the originals.
The code inspector in chrome and firefox will be helpful when you need to check wich classes are applied to a certain element.
It might be that your element is applying a class that overrides the one you are trying to apply to the element. For example:
<div class="class1 class2 class3" ></div>
Class3 might override parts of class1 and class2, because it is the class applied last. Like i said, in CSS order is very important.
Do not use !important if possible. You might want to override values later on, and with !important will become difficult to do so. Verify if there are !important declarations in file1, because these might be the ones causing you trouble.
Are you using a programming language? Or just CSS/HTML markup? If you use a programming language (what I suppose, as you got one entry point) you could simply make a big switch statement, check the current view and then inject accordingly the appropriate css file.
SO I have a problem with OOCSS. It is supposed to be more portable but compared to how I usually do things, I'm finding it less so.
My example:
I have a widget testimonial. In the main content body (which has a white background) the testimonial has a black font. But in the footer (which has a blue background) the testimonial needs a white font.
Before OOCSS, I would do something like this:
#main-content .testominial {
color: #000000;
}
#footer .testominial {
color: #FFFFFF;
}
With this "old" approach, I could drag my widget from the content area to the footer and the colours would simply work - I wouldn't need to change my CSS or DOM classes of the widget.
With the new OOCSS/BEM, I am NOT supposed to couple the .testimonial class to the ID (or to the location), but rather I should subclass it like so:
.testominial {
color: #000000;
}
.testominial--footer {
color: #FFFFFF;
}
The problem with this is that I can no longer drag my testimonial from the content area to the footer without going into the DOM and changing the classes on the testimonial widget - It is LESS portable as it requires manual intervention by a developer; whereas before an editor could just drag it and the styling was automatic.
Am I missing something? There seems to be no solid real-world examples out there?
You need to consider dropping the testimonial naming as well as the footer.
Consider this example:
.primary-box { }
.primary-box--reduced { }
.primary-box--standout { }
In the example the classes are completely independent of their page context. The result is that the classes are completely re-usable. Any box on the page can take the classes above and expect to be styled exactly as defined.
For example, you could have:
<header>
<div class='primary-box primary-box--reduced'></div>
</header>
<div class='content-box'>
<p class='primary-box primary-box--standout'></p>
</div>
<footer>
<div class='primary-box primary-box--reduced'></div>
</footer>
Now when the designer comes back and tweaks the padding of the standout boxes you can go directly to those styles and tweak them, confident that the only areas that will be effected will be the areas that have those classes in the HTML.
Also, when you decide to move .primary-box--reduced from the <header> into the menu bar that sits above it, or into the footer, you can be confident that the styles will come along, completely.
When you need another element somewhere, perhaps a primary-box--standout, or just a default primary-box in the header, you just create it and add the classes, they styles will follow completely.
You'll never inherit unexpected styles either.
This is very much a real world example, a site I built recently was almost all built like this, I say almost all because I'm still learning, but I can guarantee the bits I had the least trouble with on a fast-moving project with very fluid designs were the ones with non-specific context.
What's important is the lack of context. In the first example, .testimonial--footer is very context dependent, you really need to use it on testimonials in the footer only.
And as if by magic CSS Wizardry cover this exact topic
EDIT: I added this example to help with a comment made on my answer. This isn't BEM, or OOCSS, though it is a bit closer to the SMACSS approach. It's how I tackle problems with css and is a hybrid BEM / SMACSS approach:
Loaded in order:
module files, such as .primary-box
page section files, such as .header or .call-to-action
page files, such as .about-us or .contact
Each file gets more and more specific, while simultaneously building more complex and modules. Building on the examples above and hopefully helping the OP, you could see styles like:
.header {
.primary-box {
color: #000;
}
}
which would over-ride the module styles using a more specific nested class notation. Please note, I would still avoid using a class name like .header - .banner-standout would be better as it's re-usable anywhere without confusion
Next, you could even see:
.about-us {
.header {
.primary-box {
color: #f00;
}
}
}
I find this works very well in real projects for context while retaining the context free power of BEM, though I would also urge as much as possible to push up this chain into the modules. Life is easier if I recognise a new generic page section or module and re-organise the naming and files appropriately. In a project where the code has been refactored with care I have nothing in page files.
With this "old" approach I could drag my widget from the content area to the footer and the colours would simply work - I wouldn't need to change my CSS or DOM classes of the widget.
If you "drag" the element .testominial from the container .main-content to the container .main-footer, that is you change the DOM. So you can also update the modifier in the CSS classes, there is no additional cost.
The purpose of BEM is to make CSS classes reusable. The following modifiers can be reused in various environments.
CSS:
.testominial {
}
.testominial--darkFg {
color: #000;
}
.testominial--lightFg {
color: #FFF;
}
HTML:
<main class="main-content">
<div class="testominial testominial--darkFg">...</div>
</main>
<footer class="main-footer">
<div class="testominial testominial--lightFg">...</div>
</footer>
With the old approach, you'll have to change the CSS code each time you need a new block .testominial in a new container. HTML and CSS are strongly coupled, and some CSS code will be duplicated.
With the BEM approach, you'll have to add some CSS code each time the designer will add a new variation of the block appearance. HTML and CSS are less coupled, and CSS is better reused.
I have an application where I allow users to add a snippet of code onto their website which in turn adds a small widget to the site allowing their users to interact with the application etc.
What i'm doing now is placing all of my html in a container that they place on the site with (hopefully) a unique id. Lets say ts-container. Then, in the css that gets loaded on the site that is meant to style my elements, I place #ts-container in front of every selector in the style sheet. Is this the best and only method of protecting my css from affecting their page elements, or is there some way to wrap the entire style sheet without having to actually id every class? Is there a way to place the style sheet in the wrapper container and have it only affect those elements or something? Should I be doing this in an iframe or something similar instead?
Just looking for some suggestions in case I am missing a best practise in my situation.
You can do a sub-reset of the CSS:
#ts-container * {
margin: 0;
padding: 0;
font-size: 13px;
font-weight: normal;
background-color: white;
color: black;
}
You might need to enter some extra styles, but this should prevent any CSS from the parent document from affecting your widget.
iframes are a much easier way to do this, though. Whether you use them or not is a design choice.
I am using a CMS that has been poorly configured with horrific CSS (e.g. H1 is about 12px). How can I load my content without it being infected by this diseased CSS?
I was considering an iframe, but I would want to keep it in the CMS if possible. Would frames work?
If you can keep your content within an element with a specific class or id (e.g. <div class="content">, then you could adapt a reset stylesheet (like Eric Meyer’s) to reset everything within that class:
.content div, .content span, /* ...and so on */
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
Then write all your styles prefixed with that class too, e.g.
.content h1 {
font-size: 3em;
}
If you’d rather reset everything to the default browser styles (rather than the unstyled settings you get with a reset stylesheet), you could adapt Firefox’s built-in html.css stylesheet in a similar way (i.e. prefix all its selectors with the class/id on the element containing all your content).
Bit of a drag, but it might be less of a faff than frames. (I assume the CMS generates your HTML, so it’d be harder to change that to use frames than to work around their issues in your CSS file.)
You might consider changing your CMS — they’re meant to reduce the amount of work you have to do, not increase it.
Is there any possibility to load your custom css classes? You should load your CSS classes after CMS's CSS classes and override them.