Sproutcore Custom CSS - javascript

Hey, so I'm trying to apply some custom css to a ToolbarView in SproutCore. I've managed to get a CSSE file loading by saving it in layouts/english.lproj but the styles I write are being overridden by the ones provided by SproutCore. This only happens for styles provided by the framework. In my case this would be the background-image element. If I view the page in Chrome's developer tools (below) you can see that both styles are being applied but because my stylesheet loads afterwards it is overridden. If I uncheck the background-image element in Chrome, my background can be seen.
Here are the things that I have tried:
Giving my Toolbar an extra CSS class and targeting that (in my case AppToolbar)
Targeting every CSS class including app-toolbar (.sc-view.sc-toolbar-view.AppToolbar)
CSS !important
Lots of Googling and Reading Documentation
Has anyone else had this problem? any help/suggestions would be greatly appreciated.
Screenshot posted here

Try using the background property instead of the background-image property.

A quick solution is to give your mainPane a layerId of "myApp" and prefix all your css properties with "#myApp":
#myApp.sc-toolbar-view { ... }
A cleaner solution is to give to your app a theme: http://guides.sproutcore.com/theming_app.html.
After that, you will have to prefix your css class with $theme:
$theme.sc-toolbar-view { ... }
Don't forget that you can use scss which is integrate to Sproutcore. This way you can encapsulate all your rules like this:
$theme {
.sc-toolbar-view { ... }
.button { ... }
...
}
This allow you to write $theme only once (per file) and all your css rules will have priority over the one provided by SC.

Related

HTML+CSS:Is there a way to have a container(modal) in "vacuum" from the rest of the page so no other styling applied to it?

I have downloaded a free bootstrap template which has a lot of pages with a lot of styles and scripts.
When I try to add an html container to that page(which is a modal/popup), all the styles from body to headers apply to it which breaks it completely.
So because I don't want to create a class/id for all and some width/heights on the parent and body divs styling are impossible to avoid without breaking the template flow, I am wondering if there is a way to create a html container with some option that if you add it, absolutely no other styling applies to it and I can style it as I wish irrespective of what happens around it?
Could z-index work here?
L.EDIT
I have added the code here on codepen [codepen modal][1]enter link description here
The modal should look like in the codepen but instead it is spread out like it is here in this screenshot.
Your styling for your custom element must be of higher specificity than the other styling that is declared. Take a look at this great article by Emma Bostian :
https://dev.to/emmabostian/css-specificity-1kca#:~:text=CSS%20Specificity%20is%20the%20set,present%20on%20the%20element's%20style.
There's a following property in CSS:
#Element {
all: initial;
}
This should reset all the styling from the parent elements including the container in which the element is placed and the body.
Try this and declare the styles after.

Remove CSS property completely

I have a button, which when clicked loads an additional CSS file, that overrides a great part of the basic CSS files. (this is for accessibility purposes if you wonder)
Let's say I have a background and background-color properties used in multiple selectors for input[type='text']. I want to reset/delete those. I DON'T want to set a new value for those background properties, I want to remove them, so that the browser will render everyting as it would by default.
The reason for this is because in high contrast mode with black background color to the body in Firefox, any background set to input or button will override it with a value equal to the text color which will make the value of the input or the button unreadable. But that's another story...
EDIT: Since everybody so far is telling me to set some new property to those, I'm writing it in bold big letters - I DON'T NEED TO SET NEW PROPERTY FOR background. :) The reason behind that if that property is present Firefox defaults it to black if the background set in the high contrast mode is black as well. To test this, go to Preferences -> Content -> Colors and check Allow pages to choose their own colors, instead of my selections above. Here's how my options look.
You can remove the original stylesheet. Just assign it an id and use jQuery.remove(...).
The alternate solution is to alter the first stylesheet to use some kind of namespace+, for example:
/* these are the rules that you want to be removed */
.stylesheet1 { }
.stylesheet1 h1 { }
.stylesheet1 p { }
.stylesheet1 a { }
.stylesheet1 input { }
/* these rules can co-exist with the next stylesheet */
nav { }
article { }
aside { }
section { }
Inside your HTML add the stylesheet1 class to body. When you load the other CSS file (presumably via JavaScript) then you remove this class. All namespaced rules will become ineffective.
* CSS preprocessors e.g. SASS and LESS make it easier for you to manage these rules.
Do a css reset/normalize at the beginning in your first css file. Then at the beginning of the second one do it again.
You can leave out the first reset, but this will give you consistent results.
It sounds like the best solution for you is to have two different CSS classes targeting a single input, and toggle back and forth between the two. There are several ways to do this:
CSS:
input[type="text"].a {...}
input[type="text"].b {...}
Here we have two different classes, a and b. When defining the input initially, set class="a". We'll then swap that with b when the button is clicked. Again, there are several ways of doing this:
jQuery:
$('.a').click(function(){
$(this).removeClass('a').addClass('b');
});
Plain JS
var button = document.querySelector('.a');
button.addEventListener('click', function(){
button.classList.remove('a');
button.classList.add('b');
});
This is the generally preferred method for achieving this kind of behaviour. It adheres strictly to standards, in that it separates logic, markup, and presentation into their respective pieces.
Note: The plain JS method listed above uses some pretty modern native JS code. Take a look at You Might Not Need jQuery to find suggestions for making this functionality cross-browser.
Instead of adding or removing properties to elements, I think the better way to do it is to put these extra properties in a CSS class and then add or remove this extra class to the elements as needed. And if you need override, then use !important. Now it's just about add/removing classes.
Here's an example in jQuery
.MyControl{background: blue;}
.MyControlAccessibility{background: red !important;}
$(SomeControl).click(function () { $(this).addClass('MyControlAccessibility'); }
$(SomeControl).click(function () { $(this).removeClass('MyControlAccessibility'); }
Using a global class on the body is good as mentioned.
Another way could be to put your light and dark "theme"-specific styles into separate stylesheets from the common CSS and then disable the one you do not want. This will avoid conflicts and needing to use !important, and you can keep things clean without having to hack away at various bits of jquery.css().
For example
base.css
a { text-decoration:none; }
dark.css
body { background-color:#000; }
a {color:#fff; font-size:1.2em;}
light.css
a {font-size:1.5em;}
Note that light.css has no properties for background-color etc. so when they switch from dark to light, the defaults will be used again.
To do the switch, you can do something along these lines:
for (var i = 0; i < document.styleSheets.length; i++) {
var ss = document.styleSheets[i];
// some browsers store in url, others in href
if((ss.href || ss.url || '').indexOf('dark.css') > -1) {
ss.disabled = true;
}
}
By disabling instead of removing the current one, it should be easier to switch between the two.

Moving an element into a new div - doesn't take on its new css properties

So, I have an element that has some "pre-existing" behavior attached to it. So, I found that just moving it (as required by some new requirements) retains the existing behaviors = good. But the issue is, when I move the element I need to give it "new styles".
So, if I have something like this:
<div id="existingStructure">
<div id="legacyElement"></div>
</div>
Now, that has pre-existing styles attached to both. I can rearrange these styles etc.. but I can't change them. The styles are attached to the "id's" rather than a class definition. I believe I can change that if needed.
Now, I need to move "legacyElement" when certain things happen to a "new div".
I just
jQuery('#newStructure').append('#legacyElement');
<div id="newStructure">
<div id="legacyElement"></div>
</div>
Unfortunetly, the styles I have on newStructure don't seem to be applying to *legacyElement" when it gets moved here dynamically.
I was thinking of moving all the styles to a class rather than associated to the ids, and when I move it.. I just jQuery().addClass / jQuery().removeClass etc...
Is there a better/easier more robust way that I can just have the legacyElement loose its styles when it sits under existingStructure and then get new ones when moved to "newStructure" etc.. and vice versa. That element "legacyElement" will be pinging back and forth.. so, I need it to have the styles under each parent div as it goes there.
so when an action happens on page, I move it back:
jQuery('#existingStructure').append('#legacyElement');
If I am not succinct enough, please let me know.
The EXISTING styles are in an external CSS file and are like so..
#existingStructure {
// bunch of css
}
#existingStructure .item1 input[type="text"] {
// bunch of css
}
#legacyElement{
// bunch of css
}
and new styles are sorta the same except 'additional styles' might be applied.
#newStructure {
// bunch of css
}
#newStructure .item1 input[type="text"] {
// bunch of css
}
You can certainly target your div styles by their parents:
#existingStructure #legacyElement {some styles}
#newStructure #legacyElement {some other styles}
To explain futher, this arrangement should result in greater specificity, overriding styles that are simply applied to either #existingStructure or #legacyElement. I'm hoping no one did anything foolish like using !important on them.
Short answer: It should.
Here's an example I quickly made in jsFiddle: http://jsfiddle.net/CCm4J/1/
So then why isn't yours? Most likely you have css rules that are embedded that apply only when in the existingStructure id/class perhaps? Without see more of your css I'm not sure how specific I can get. I would just verify that your css rules are allowed to apply outside of existingStructure (and even that existingStructure might have rules for its parent too!)

How to change style of tab panel headers(title) and panel headers in extjs4

I want to knw is there any css class i can override so that all tab panel headers and panel headers style i can change???
if so can some one pls let me know
thanks
For Panel headers:
To change the style of the text specifically use the classes: x-panel-header-text x-panel-header-text-default
To change the background you would need to modify: x-panel-header-default
For tab headers you need to modify:
For the text:x-tab-inner
For the background there is plenty of classes that affect how the background is displayed: x-tab x-box-item x-tab-default x-noicon x-tab-noicon x-tab-default-noicon x-top x-tab-top x-tab-default-top x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active
Because of the way CSS calculates how to style elements, if you are not really good with CSS you will probably need to use !important in each attribute you change, else if you know how to use CSS better, use google chrome to inspect elements and figure out the CSS hierarchy of classes that Extjs uses to do it in a more professional way.
For styling the text in the tab headers:
Add a rule to your CSS file selecting "a.ajax__tab_tab" and set the color/other properties from there.
This will affect the text within each tab title in the TabContainer.
Example:
a.ajax__tab_tab {
color: #00898D;
}
You don't use css directly
you should just change the sass variables and then sencha cmd will convert them to above values. SASS variables for each component are in the docs in the menu.

Remove/change Internal styles sheet styles with JavaScript/jQuery

I want to be able to remove/change the internal style sheets values through JavasScript. It has to be through JS because I cannot edit the html since I am using an application that does not allow me to, but I can use JS. How can I change the value for the background or remove it completely? Or is there another way to accomplish this?
<body>
<head>
<style type="text/css">
#company-header{background:#000 !important;}
</style>
</head>
<div id="company-header"></div>
</body>
If your just going to change small bits of css, using jQuery's css() is your best option, but it does not always recognize !important, for that you would probably need cssText, like this:
$('#id').css('cssText', 'height: 200px !important');
This replaces all the css, so everything needs to be defined in the new css rules that are added.
If you are changing a lot of css, or just want to make it easier for the next time, you could remove all inline css and add an external stylesheet instead.
To remove all inline styles you would do something like this:
$(document).removeAttr('style');
or for div's only
$('div').removeAttr('style');
Depending on how many styles there are, this could take som time to process.
Then to add a new stylesheet do:
(function() {
var myCSS = document.createElement('link');
myCSS.rel = 'stylesheet';
myCSS.type = 'text/css';
myCSS.src = '/styles/mystylesheet.css';
var place = document.getElementsByTagName('script')[0];
place.parentNode.insertBefore(myCSS, place);
})();
Edit:
function removeCSS() {
var badCSS = document.getElementsByTagName('style')[0];
$(badCSS).remove();
});
This will remove all the markup in the internal stylesheet, but since the styles are already loaded it will make absolutely no difference.
Internal styles will always override external styles, but for one exeption, if the external style is !important. If both the external and internal styles are !important, the internal style will be used.
Loading an external stylesheet dynamicly with javascript will only work if everything you are trying to override is set to !important in the external stylesheet, and not set to !important in the internal stylesheet.
Changing the styles directly in the DOM with jQuery's css() and using the cssText option to override the !important set in the internal stylesheet may be your only viable option if there is absolutely no way to alter the html file and remove the internal stylesheet.
EDIT: OK, now that we understand that this question is really just about how to override the !important style declaration when setting styles via javascript, this is a duplicate of this posting: Overriding !important style.
The two possible answers there are to set a whole style string on the object or to create a new stylesheet that refers to this object.
Previous answer before question was edited:
You can just set some style directly on the object if you want like this. This will override anything that comes from a style sheet so you don't have to mess with the style sheet.
$("#company-header").css("background-color", "#FFFFFF");
or
$("#company-header").css("background", "none");
A more extensible way of modifying the look of an object or groups of objects is to based the style settings on class names and then add/remove class names using jQuery. This has the effect of switching which style sheet rules apply to a given object without having to directly manipulate the style sheets themselves:
$("#company-header").removeClass("oldClass").addClass("newClass");
$(document).ready(function(){
$('style').remove();
});
This code will remove the all internal css from the site. I used this but style tag will be visible in the page source.

Categories