I know it's probably not possible, but I want to be able to create a file of some kind that will automatically disable part of a website's CSS. Basically, when I go to the site, I want this to be disabled instantly:
Is there any way this can be done?
Check out userstyles.org – they have a browser plugin called 'Stylish' which you can use to apply custom CSS to a particular site. For example, the CSS style that would do what you want here is:
.roundfield .usertext-edit textarea {
background: none;
}
If you need to do this for all website, you will need to Build a Chrome Extension, or Firefox Extension, those will help you to access every website's html/js/css. Then you can simple use a small javascript to disable everything you want.
Yes using jQuery disable the elements on page load or set the css as empty.
$(document).ready(){
$('#target_element).css();
}
It looks like you're using Chrome. You can edit Chrome's user style sheet and override the style of any site. Put the URL about:version in the search bar and note the "profile path". Browse to the profile path (e.g. C:\Users\you\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets) and in your profile folder open the user style sheets folder. Look for a file called custom.css and add your styles (e.g. .roundfield .usertext-edit textarea { /* your css here*/}). Note that you may need to use the dreaded !important declaration in your rule to override the rules of the site you're targeting.
yes, it can be achieved with javascript/jQuery, on page load target all elements with the specific class and set their background to none.
Related
I was modifying a theme for a WordPress based site, the Anew theme to be specific. Although I changed the theme options - style.css file and custom.css file, I couldn't change the color of the links.
Then I used Chrome's Developer Tools to check where my rules were overridden. The overriding rule was on an (index) file, with parenthesis. With no relevant information on the internet, I decided to take a look at it later.
After some hours, all my changes were committed and now it shows the new color. But I am still curious about this (index) file. Is it a script-added rule?
It is probably CSS embedded in the HTML (style tags in the head), either as part of the markup or added dynamically via JS (or possibly by PHP when the page is rendered).
Need more info to give any answer more specific than that.
When you see index it means the page you're on. The CSS is directly embedded into the page instead of in a separate file.
I am using a jQuery CSS style on the main portion of my website. It works fine. Now, I also have a sub-directory of my website which should not use the style. When I manually navigate my browser to the sub-directory of the website, no style is applied which is what I want. When I click on a link to the sub-directory from the main area, however, it is applying the CSS style from the main part even though I am not referencing this CSS anywhere in the HTML of that sub-directory. If I refresh the browser, the style goes away.
Please can someone help me understand what is going on here? Thank you.
You are using jquery mobile, which by default loads the content of links via ajax. That means you don't have a page refresh when clicking on a link. The contents get dynamically inserted in your document which still has all your css.
More information here.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
You have to disable ajax for that link. More information here.
jquery-mobile - how can I bind disable ajax links to a certain class
Clear your history and browser data, then refresh and try.
Try to open the link in chrome and using the developer options (F12)
look for the resources it is referencing. If the page is referencing
the CSS files then either Javascript is making the referencing or
you have accidentally kept the resource link. Let the forum know your findings.
Edit
Somebody seems to have done what I have mentioned and has come to conclusions that they are because of AJAX. The steps I have mentioned above would let you do that all by yourself.
I have a website where a user chooses a template of their choice for their web page.
Once they've selected the template, I want them to be able to change some of the styles such as the font colour etc?
Is there a way I could do this?
I thought of perhaps storing the user specified stuff in a field in a database and then retrieve it and display as internal CSS?
You may use a user.css (initially empty) for each user and then add data provided by user with !important override.
Yes
It is possible. But you will have to rely on Javascript to add the stylesheet, url selected.
Assuming you would be using a link to change the theme, using jQuery, you would do
$('#red').click(function (){
$('#linktagid').attr('href','user_red.css');
});
This question already has answers here:
How to identify unused CSS definitions from multiple CSS files in a project
(3 answers)
Closed 1 year ago.
I have a lot of CSS files on the page. But a lot of these files are not used by styles. Is it possible to determine which files are used by page and which not.
Use http://getfirebug.com/ to debug the page.
When looking at the css it will reference which stylesheet is used.
For example:
You can see from the screenshot that when using Firebug it shows in the blue text that the page is using the style.css stylesheet.
Work down the tree in Firebug and simply hover over your elements and see which stylesheets are used.
You can debug with firebug ( http://getfirebug.com/ ). It will show what is used for what and allows you to find out.
You can do one thing :
open the website in Firefox
Use firebug to point some control on which you want to see the applied classes.
In the html source code in firebug , you can find the applied css classes on a particular control.
Find those classes in your CSS files.
Repeat this process for all the controls of the webpage.
Now you can remove those CSS files that are not used on that web page.
Thanks.
New in Chrome 59 is the coverage tool that shows you CSS and JS code coverage. It'll show you what percentage of CSS files are used on a page. When you click on that file, it'll show you which styles are used and which ones aren't. More info here: https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
Use Web Developer Addon with firefox.
http://chrispederick.com/work/web-developer/
After installing this addon goto firefox tool->web developer -> css-> view css.
There are many ways to find which CSS are being used by page.
here are some of them:
1) if you are using firefox then firebug is useful to use. http://getfirebug.com/
just right click on page and use Inspect Element option
2) if you use IE,then Developer tools is available in IE
3) If you use google chrome,then u can directly use Inspect Element option by right clicking on page.
The way to find or access to CSS files are used for current page, could vary base on the Browser and/or Operating system you are using.
Here I am going to share with you Opening the “Console” panel (Developer Tool) of Chrome, Firefox, Internet Explorer, Safari, Opera in both Windows and Mac OS.
When you open the Console of the current browser, click on the element you want to inspect and on the right hand side you will have a tab name Styles as shows below:
As you can see the image has the name of the CSS file (in this example named "desktop_ltr.css")
I have a problem with the CSS of the datepicker, I downloaded a default template for the UI, but it's different when I use it on my page. I've read that the template uses em so that the size is relative to my page. What can I do to make it the size of what is in the demo without changing the css in the theme that I downloaded?
Well, the most direct method would be to find the highest level class name that corresponds to the problem and write a new rule like:
.ui-datepicker { font-size:0.9em; }
And then just keep playing with it until it looks right. That's the brute force method, but without more info, it's the best I can suggest.
I found the solution. I just reordered the calls for the css files. I used the datepicker css first then called my site's css