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.
Related
I'm working on an application and styling it right now, however occasionally when I save my style.css file (my temporary change stylesheet before changing it to LESS) I get some messed up elements that were fine before I reuploaded. I made no changes to those elements and I'm 100% sure it's not my CSS, it's also not my browser cache as I've cleared it and reloaded the page with the same issue. I've also added
?v=1.0.1
onto the end of my link to the stylesheet to trick the browser into believing it's a new one. (Learned that trick on StackOverflow to use with favicons, will give credit when I find where I got it)
It tries to search for the CSS in .LESS files that are non-existent on the web server. Could it be a problem with my bootstrap.css.map file being on the server?
EDIT: Another thing I can't seem to figure out, is why the CSS actually shows up under the LESS file reference?
I found my problem, it turns out I was using the wrong media attribute. For some unknown stupid reason I had set the style.css file to only display for print.. I just removed the entire media attribute to be displayed on all types and it works like a charm.
I've already mapped the necessary files to the local resource - however, while that does allow me to save any changes made to a file in the Sources panel, I was wondering if it's possible to automatically save changes to CSS made in the Elements panel. Otherwise at the moment, any changes made to the style in the Elements panel seem to exist only there.
I remember at some point there used to be a little indicator of the file and line number next to a class/id etc. in the Styles tab of the Elements panel - surely it can't be that hard to simply 'update' any changes to that style rule considering Chrome knows exactly where it's coming from (in the case that it's a stylesheet and not an inline style?). It would be a great relief to my workflow.
The answers to this similar question are obsolete.
When you have finished making your changes in the Elements tab. Next to the style there should be a link with the file name there, something along the lines of site.css:4 or similiar, if you click on that link it will open up the sources tab with that certain page what you have editied containing the modifications. Then you can go to save as, and then save the document from there.
I hope this helps you out :)
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.
I'm running a large site, one that has a nav bar at the top. Rather than change the 100+ html files each time we want to change one of the buttons in the top nav, we want to switch the navbar to be displayed using an include of some kind. I want these includes to work on both Firefox and IE, and I don't want to have to change the extensions of each file either.
So far I've tried:
Javascript read file - This works fine on firefox, but IE has file reading blocked it seems.
HTML include - So far only works if we change the extension to shtml
PHP include - I know you can set up apache servers to run php scripts within html, but I don't know how to make this happen in SunOne.
iframes - I had to block iframes in order to comply with security standards.
I'm more than open to suggestions I haven't considered, or ways to make the above attempts work. Any ideas?
Eureka! I've found it!
So rather than include the html, why not just include the javascript and css? Every page will include a .js and .css file. The css can set the image src, and in each image I can use "onclick" to tell it to execute a function in the .js file with a simple window.location. Voila! Two quick changes will change the whole site!
Thanks to Mr. Lister for the CSS idea. That set me on the path.
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.