After upgrading our ExtJS 3 application to ExtJS 4 the appearance of some (but not all) components changed. That application uses three CSS files: the original ext-all.css and two own files written many moons ago. These two files seems to be generated and define class-based rules like
.x-menu-group-item .x-menu-item-icon {
background-image: none;
}
.x-menu-plain {
background-color: #fff !important;
}
.x-menu .x-date-picker {
border-color: #AFAFAF;
}
To restore appearance of the application, I could
Rewrite the own two files from scratch.
Keep the files and define new rules for the odd looking components. To do that I have to hand-pick them with Firebug and guess which of the many CSS classes used by the component I have to restyle. That should take days.
Style the application with the new theming support which I don't know yet. That should be the last option because it could take too long. Also I don`t see how the existing CSS file can be imported in SASS.
So, what is the best way to restyle my ExtJS 4 application like the old one?
Edit: I don`t want to write CSS in the code by applying a "style" argument. The CSS files have to take care of styling.
As it turns out, theming is the absolut right way to do this. I managed to restore the most important styles of the application by following this guide-to-custom-themes-in-extjs-4.
Soon I ran into this bug and solved it with downgrading sass to 3.1.1 like it was mentioned here.
To restore most of the design I just had to redefine the following variables in the my-ext-theme.scss:
$grundblau: #b9d7ff;
$panelrandgrau: #D0D0D0;
$panelgrau: #f1f1f1;
$base-color: $grundblau;
$panel-border-color: $panelrandgrau;
$panel-frame-background-color: $panelgrau;
$panel-header-color: #333333;
As you can see, the custom design of the application is actually pretty simple. :)
Related
I have a custom sass setup with bootstrap 5 and bunch of my own SCSS files, all of this gets compiled in style.css using gulp. I have a _colors.scss file which stores all the colors according to our design language. We use this to generate a bunch of classes that can be used any where to change colors:
// Text Colors
$colors: (
"icon-color": $slate-500,
'slate-10': $slate-10,
'slate-40': $slate-40,
'slate-300': $slate-300,
"secondary": $secondary-text-color,
"green": $green,
"light-green": $green-color,
"blue": $blue,
"blue-200": $blue-200,
"blue-300": $blue-300,
"blue-400": $blue-400,
"dodger-blue": $dodger-blue,
"mariner-blue": $mariner-blue,
"light-blue": $blue-100,
"cadet-blue" : $cadet-blue,
"aqua-10": $aqua-10,
"gray": $gray,
"gray-light": $gray-light,
"light-gray": $gray-100,
"bright-gray": $bright-gray,
"gray-200": $gray-200,
"clay": $clay,
"clay-10": $clay-10,
"mandy-pink": $mandy-pink,
"aqua": $aqua,
"violet": $violet,
"white": $white,
"primary": $primary-text-color
);
#each $color-name, $color-value in $colors {
.text-#{$color-name} {
color: $color-value !important;
}
.bg-#{$color-name} {
background-color: $color-value !important;
}
.border-#{$color-name} {
border-color: $color-value !important;
}
}
Problem is certain classes like .text-gray or .text-blue are not working. My guess is that since bootstrap also uses variables called gray and blue, its conflicting with my variables in _colors.scss.
On closer look, the css does gets generated properly (I found below declaration in final style.css):
.case-study .case-study-right .card .data-bar p:last-of-type,.share .social-media>span,.text-color-gray-200,.text-gray-200 {
color: #69727A!important
}
But using .text-gray has no effect, the class is not getting applied.
How do I fix this? please help!
First, if you're sure that you see the correct selector and the correct rule in your CSS file: it should be applied. And so, the rule should be visible in the browser console (even if overridden).
If you see it in your CSS file, but not applied in the browser console: check that your CSS file is valid (and that your gulp production script compiles fine), as a bad character could mess some part of it.
If you see your CSS in the browser console, but it's overridden by some bootstrap rules, you can override bootsrap variables, and change bootstrap colors by yours like so (import bootstrap before this):
$theme-colors: (
primary: #121212,
success: #8bcea8
...
);
You could also try this to replace bootstrap values by yours:
$theme-colors: map-merge($theme-colors, $colors);
The simple answer is:
Use Bootstrap 5 the intended way!
Bootstrap is a complex framework. All that huge number of classes work together including overwriting color settings if provided and used the intended way. In your code example you additional create helper classes Bootstrap would provide to you out of the box if you use it the Bootstrap way. As you did not do it leads to conflicts which are not easy to handle ... and nearly impossible to solve without to have the possibility to analyize the page itself.
This is what you may check:
You may check: are there other classes which blocks your classes?
In your example you use !important to get higher specifity. But the color is overwritten by other classes ...
Maybe that are Bootstrap which uses !important as well. In that case you can try to add your classes at the end of your CSS (after the Bootstrap classes) so they are able to overwrite in case of identical specifity.
Additional: in your example you added a huge bunch of non-bootstrap-classes. Maybe this individual added classes blocks your styling by adding a color with higher specifity (using !important as well which is not a good technique at all) to your element than your added class do.
In that case same solution may be possible ... but individual classes with !important and an additional higher specifity (i.e. using two class names in the selector) will win over your helper classes also your helper class comes later in your CSS file.
To be honest: most often analyzing such an huddle of classes indeed is only possible in the browser on the page direct using the developer tools.
But best way indeed would be ...
Do a correct Bootstrap theming and use Bootstrap classes!!!
You really don't need to create the helper classes on your own. Just do a SASS setup of Bootstrap ... and add your needed/additional colors NOT (or not only) to map $colors but AS WELL TO Bootstrap map $theme-colors. Bootstrap builds up helper-/utility-/elements-color-classes not on $colors but on $theme-colors. That means: doing that this intended way ... all your helper classes you added in your project on your own will be provided by Bootstrap mechanic in the correct order and avoiding conflicts to your CSS.
Use Bootstrap classes to style your page. Now you don't need to create an additional class .case-study { color: gray }. Just use the Bootstrap helper class and add .text-gray to same element. (Note: In your example you use the incredible number of NINE classes to do the same styling. In case 'text in cards' here is a nice hint how to realize it the bootstrap way: https://getbootstrap.com/docs/5.0/components/card/#border).
Just thinking about using complex Framework...
Bootstrap is done to help you. As there is a lot of code using that Framework only makes sense to use the code as much as possible without writing new classes. So best way indeed to work with it is to use the Bootstrap elements and styling them the Bootstrap way. That makes it simple and avoids conflicts... And: you are able to do nearly everything with these elements.
And if you need to extend Bootstrap i.e. with additonal classes: avoid (deep) nested classes and !important as well so you are able to overwrite settings with simple helper classes.
i had the similar problem it was my scss was successfully converted to the css but not applied, after checking for hours i found out ,i have written B capital while the class name was btn
so when everything is working then the problem is always in your code syntax!
I am often running into the problem of not knowing what css to change for ionic components. For example I have a button that I am outlining using ionic, my initial guess was to overwrite its outline/border color with something like.
border: 1.2px solid #697954;
But that didnt work so I essentially just had to dig through forum posts until I found that its changed with
--border-color
This seems like an incredibly inefficient method to finding how to overwrite ionic component css variables.
Where can I find exactly what css ionic is using for its components so I can easily overwrite them without digging through forum posts? I checked in the ionic core.css on github, but that didnt give me the info I wanted.
Well know I have border color done correctly, but I need change the onclick background color and the onclick text color. I dont want to dig through the forums again.
As of Ionic 4 component views are encapsulated in a shadow dom and therefore not designed to be easily overwritten with css. Each component has it's own documentation for how you can override common css properties, such as:
https://ionicframework.com/docs/api/button#css-custom-properties
There are a number of guides available for more information about styling shadow doms, such as:
https://www.joshmorony.com/styling-a-shadow-dom-in-ionic-4/
A similar discussion with the example applied to a button can be found here:
Ionic 4 custom styling Shadow DOM
In some situations the Ionic Documentation isn't always up-to-date with the latest CSS variables that are available for a component. A sure-fire way to find out what variables are available is by looking at the master source code on Github for the component's CSS.
For example, if I wanted to see what variables are available for the ion-range component I would look at the range.md.scss file:
:host {
--knob-border-radius: 50%;
--knob-background: var(--bar-background-active);
--knob-box-shadow: none;
--knob-size: 18px;
--bar-height: #{$range-md-bar-height};
--bar-background: #{ion-color(primary, base, 0.26)};
--bar-background-active: #{ion-color(primary, base)};
--bar-border-radius: 0;
--height: #{$range-md-slider-height};
--pin-background: #{ion-color(primary, base)};
--pin-color: #{ion-color(primary, contrast)};
#include padding($range-md-padding-vertical, $range-md-padding-horizontal);
font-size: $range-md-pin-font-size;
}
Here we can see all the variables available for the host component (in this case, ion-range).
I've inherited an AngularJS project which uses the 3rd party grid, Ag-grid. There is an ag-grid-style.css file that has the following:
.ag-pinned-left-header.hasCategoryCol .ag-header-cell, .ag-pinned-left-cols-viewport.hasCategoryCol .ag-row .ag-cell {
width: calc(100% / 7) !important;
}
This works great for the grid already in use, the grid is nicely divided into 7 columns.
My problem is I have created new code, also using ag-grid, but I need the new grid divided into 6 columns, not 7. I end up with one extra empty column. Using Chrome for debugging and going into the developer tools, I can see the above CSS and if I change the 7 to a 6, my grid displays perfectly. My question is what is the easiest way to accomplish what I want? I've been trying to adjust the styling in code but haven't succeeded yet. Suggestions?
I would simply add the modified CSS to a CSS file that renders after all other third-party library CSS files. When you have an !important that happens after another !important, the second one overrides the first. So by adding the CSS to your website it should be fine.
.ag-pinned-left-header.hasCategoryCol .ag-header-cell, .ag-pinned-left-cols-
viewport.hasCategoryCol .ag-row .ag-cell {
width: calc(100% / 6) !important;
}
#Adosi's answer is the preferred solution -- CSS after all refers to cascading style sheets. If, however, you cannot modify the load order of your styles, the following is an alternative solution.
You can override a rule defined in an external stylesheet that has a !important attribute by adding your own definition inline to the element itself. I have demonstrated here using the background-color property as it is more obvious.
#foo {
background-color: pink !important;
}
<p id="foo" style="background-color: cyan !important;">This paragraph has id foo.</p>
The inline style will always take precedence -- eg be loaded last -- so the color defined there is the one that is displayed.
Note that this is not considered a good practice, but I indicate it as an alternative if you are unable to load a CSS rule after your third party asset. (You may wish to log a bug with the 3rd party library because the !important annotation should be used sparingly and in this case probably not at all.)
We are using a framework that allow us to modify the color scheme use throughout the application. I cannot play a lot with the color and would like to reuse them in some classes. So let say that the framework define this class
.StyleFromFramework {
color:#515151;
background-color: #FFFFFF;
}
is located in a css file that I can't modify cause this file is handled by the framework (if I modified this file, all my modification will be lost when the new version of the framework is installed)
I would like to reuse the color of this classes in another class in a file containing all my updates.
.NewStyle {
color: **.StyleFromFramework:color**
Font: Verdan 11 px;
}
Is there a way to do that ?
I would try the following.
.StyleFromFramework, .NewStyle {
color:#515151;
}
.StyleFromFramework {
background-color: #FFFFFF;
}
.NewStyle {
background-color: none; /* or some other value... */
}
The first rule shares the color, and the the other two rules specify properties that are specific to the two other classes.
You should take a look at less.css which does exactly what you're looking for.
perhaps I didn't understand you correctly, but CSS is not dynamic language in which you can reuse rules and components.
I would recommend to use SASS/SCSS framework or something similar (LESS, Stylus... etc.)
In those frameworks, This is one of the most useful features, lets you share a set of CSS properties from one selector to another
read more here: http://sass-lang.com
Using a CSS preprocessor like Sass, Less or Stylus allows the use of variables which then can be reused in your project.
Foundation for instance can be completely restyled with Sass.
I'm working on a new web app and I'd like to create my GUI mockups in Illustrator then implement them in HTML5 and CSS3 using Twitter Bootstrap. I know how to use the CSS classes to create my pages but I'd like to know the process of customizing Twitter Bootstrap to match my mockups as much as possible. I'm talking about colors, typography, margins, padding, borders, button styles and so on. I'd like to create completely different themes for this and every future project I'll be working on.
I'm a programmer but I love GUI design too so I'd like to know how professional designers make all the pieces fit in.
Thanks in advance.
In order to get the most out of Bootstrap (especially the new "mobile first" features) I recommend using your Illustrator file as a jumping off point, rather than a spec.
I agree with the other commenter who suggested leaving the Bootstrap file in place and writing a second file with selective overrides. This is much easier with Bootstrap 3 since the flat design means less to clobber with your own declarations.
I always start with laying out a static version of the pages using plain Bootstrap then methodically cherry picking styles using the inspector (e.g. body backgrounds, typography, colors) in priority order as they stand out to me visually. I usually wind up with something that is close, but slightly different (often better), than the original design.
Good luck! If you don't fight it too hard, Bootstrap offers a lot out of the box.
I'm pretty new to Bootstrap but the general consensus seems to be to leave the actual Bootstrap.css intact and create different CSS files to override Bootstrap. For example in this snippet (SCSS by the way) I commented a section as "General" and placed some default overrides for my site. Most notably would be the restyled input boxes from rounded to square.
/********
GENERAL
*********/
html, body {
height: 100%;
}
.wrap {
position: relative;
overflow: hidden;
min-height: 100%;
}
body {
a {
color: #FF4329;
&:hover {
text-decoration: none;
}
}
input[type="text"], .btn {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
}
Also note that you can customize the files you download from Bootstrap so if you plan on using on the the grid system then that's all you need to download.
If you're planning to use the grid system of Bootstrap, there're plugins for Photoshop and Illustrator that create guidelines for you (you can even specify the padding, number of columns and margin).
Bootstrap is based on CSS. When you design something in Illustrator, you'll have to export assets like images but it's important to make use of CSS also for the most things you can. Remember, it's faster to apply a CSS background-color instead of using an image for that purpose as background-image.
I make my scratches on paper and pass right away to html. With chrome developer tools you can easily change the css styles applied, apply new rules, etc