My employer is switching to a new Web software system, which we will use to track student information. The software is customizable to an extent, but many fields that the system offers cannot be disabled. For example, I would not want or need to track Social Security Numbers, so I would like to hide that field permanently on the page where it appears.
These fields are hard-coded as table rows, and I know I could hide those with style="display:none" in CSS. However, I do not have access to the system's style sheet.
Is it possible to set up a filter in my own browser where I could style the pages in this new software system? If so, would it be limited to my own PC, or could I export and share the file with coworkers to use? Note: the software is limited to IE (11).
If you want to hide the row, you can do it with a user style sheet.
IE allows you to use your own StyleSheet directly from its accessibility settings.
Click the IE9 tools menu icon in the top right, (or use the Keyboard shortcut: ALT+X).
Then open Internet Options, click on the Accessibility button, and chose Format documents using my style sheet.
Then you need to chose a CSS file, using the Browse function.
Source
And your CSS would look something like:
table tr.socialsecurity{
display:none;
}
Use the browsers inspector and find the rows class. If id doesn't have one, you can use nth-of-type().
Note: you need to restart your browser for the CSS to take effect. To use this on multiple computers, send the Style-sheet to your coworkers and have them install it.
As the OP asked for an IE answer, I only contained the relevant instructions. Note that this can be done in ALL Browsers. Instructions can be found here
If you cannot access both HTML or CSS you cannot hide your rows
Might work adding your own style sheets through Accessibility Options
Since you're asking about setting up your own custom style sheet, IE allows you to create a user style sheet for all pages you visit.
"Installing" the stylesheet
Open the Tools > Internet Options dialog.
On the General tab, select Accessibility.
On the User style sheet section, select the box marked Format documents using my style sheet.
Press Browse and locate your stylesheet.
Select your file then press Open to install it.
Note: You may need to restart your browser for the style sheet to take effect.
Rinse and repeat for any other computer.
Related
I occasionally save tutorials from a website as a PDF file for future reference.
My current manual workflow is:
Click the "show on one page" link to get a full single page view of the article.
Open the DevTools of the browser and select sections with advertisements and related links with help of the inspect-functionality and remove them.
Print the page as a PDF file.
I used the Firefox or Chrome-Browser for this, as they both have the required functionality and behave very similarly in that regard.
I noticed that the content I want to remove to get a "clean print" of the content is mostly the same: Let's say all adds are embedded with a div with the class add-banner.
Is there a way to automate these steps?
One idea is to load a custom CSS file that I would need to prepare specifically for a site. Simple rules like .add-banner { display: none; } would allow me to hide the sections that I don't want to print.
I also took a look at console based scrapers because I like the idea to call a command with the URL as a parameter. But the tools I've discovered are image based and I want a indexable PDF file where I can search for text and select parts.
What is the best option to achieve this?
The extension User CSS from the chrome web store (free) allows me to add custom css rules to whatever page is loaded. It is possible to import and export CSS rules and the extension allows to store the custom CSS on a per site base.
This is exactly what I was looking for, since it makes it easier and quicker for me to remove unwanted sections before printing.
We need to tweak some aspects of our Sharepoint site collection ("widen" the page, get rid of fixed/explicitly-sized elements).
I would like to test "probing" type changes in a separate environment, to quickly see what might work.
I have not been able to install Sharepoint on my dev machine (either at home or at work); we do the Sharepoint development via a Remote Desktop Connection to a Windows Server machine that has SP set up.
Anyway, what I'd like to do is create a "plain old" ASP.NET (not Sharepoint) app on my dev machine (locally) and test out my proposed HTML and CSS tweakings. Is this feasible and, if so, how?
Can I simply copy over the *.master pages (v4, minimal, default), the CSS files they reference and the HTML from various pages?
Is there a well-known way to test HTML/CSS changes for Sharepoint solutions in a non-Sharepoint solution?
There is no "easy" way to do this as far as I know.
However there is a possible solution a bit more tricky.
You can convert an HTML page to a Sharepoint master page and so on.
See this link for info about HTML to Sharepoint
https://msdn.microsoft.com/en-us/library/office/jj822370.aspx
You could easily just reverse this process. i.e. Sharepoint to HTML
This would allow you to test however you would like. Then just apply changes accordingly.
If the majority of the changes you are making are CSS-based rather than HTML-based, you can do this with the inspector in a browser. FF is probably the easiest since it allows you to easily create and save a whole new stylesheet associated with a site that you're currently viewing. To do this:
Open FireFox.
Navigate to the SharePoint site.
Hit F12 or right-click on the page and choose Inspect Element.
In the inspector, go to the Style Editor tab.
Click New.
Start adding styles.
In the list of stylesheets on the left, find the new stylesheet that you've created and click "Save" next to it.
When you want to see the styles applied to another page in SharePoint, click Import next to the New button.
This works best if you have FireBug installed as well so you can inspect elements (to look at their applied styles and IDs/classes) separately from FireFox's inspector.
If I am trying to edit some CSS in a huge project using the built-in developer tools in Firefox (which is accessed by right click and then selecting Inspect Element), is there a way to make those changes permanent?
Actually there is a big number of style sheets and and I could not locate this one property in them? I just could not find the file which contains this property, so I want to make permanent changes to the CSS from within the browser. Is there a way?
EDIT:-
To set up in Chrome first you have to add your project file to a "Workspace", Go into dev tools Ctrl+Shift+I then click on the settings gear and on the left yoou should see Workspace.
After you have added your Project folder into a workspace close out of options and click on the "Sources" tab (still in dev tools)
Now load up your index.html from your LocalHost like you normally would. In the sources panel you should see the currently loaded page and its resources. Right click on your .css file and click "Map To File System Resource" it will bring up a search box where you can search for the corresponding .css file from your actual project folder (that is now part of a workspace in Chrome). Once you make the link Chrome is smart enough to link up any other CSS and HTML files that are in your Project Folder.
Now you can make changes in the Elements tab in Chrome Dev Tools and they changes will persist. Also in the ELements tab it will show you what css file and what line any given Style is originating from!
The best thing about this is if you use Sass or Less then it will map your Scss files back to the CSS styles being processed in Chrome. (please note if using Sass and Less you have to have CSS source maps turned on)
If you don't want to do this by hand, there is a plugin for FF called Stylish that allows you to define rules-based style tweaks.
EDIT
I mention this only because it allows you to publish a set of style changes that any Firefox client can pick up and install to a specific installation. Since one can't "permanently" change the contents of remote style information, the only solution is to manipulate it on a semi-permanent basis on each user-agent that needs the changes.
You can use the Web Developer Toolbar for this matter. By going to CSS menu and then to 'Edit CSS' where you can edit and save your changes. Il also provides tools for identify which files are relevant and modify them manually. Also you may try Firebug extension where you can do similar things.
Links to both here:
https://addons.mozilla.org/firefox/addon/web-developer/
https://addons.mozilla.org/firefox/addon/firebug/
If you have installed Firebug you could install cssUpdater to simplify the process of saving changes.
https://addons.mozilla.org/firefox/addon/cssupdater/
You can take a look at userContent.css:
http://www-archive.mozilla.org/unix/customizing.html#usercss
I'm working on an upgrade for our current application (asp.net mvc). Here my problem is, I have a existing css file name "styles.css". Now this file has lots of css classes and they are used in different pages.
Now as a part of the upgrade process, this css file will not be used anymore. But I still want certain css classes from this file, so that I can copy them to a new file and include it in my pages.
Any ideas on how to extract these styles which are used in my new pages. And yes the styles which I want to pick are already set to the controls in the page. Please help.
Finding ones that are used in single page should be easy with multiple tools. One good tool is called UnCSS.
The trick is checking an entire site where CSS file is shared accross pages.
This approach was popular in social networks recently with some high profile guys sharing it like Google's Addy Osmani and some Google Chrome guys:
http://addyosmani.com/blog/removing-unused-css/
Use Chrometools Audits
In Chrome Press: F12 -> Audits -> Run
It will let you know what is and is not used.
There are a lot of ways, for example:
Firefox plugin, this will extract the used css
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
for chrome
https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh?hl=en-GB
Manually: another way in the chrome (or other browsers), right click and select inspect element, this will show you the hierarchis which is working on specific element, by that you can take your used css
You can find the unsed css from the following tool, so that you can clean your css to have pure one
http://unused-css.com/
or
http://www.pontikis.net/blog/remove-unused-css
Use a Browser Debugger, click on the elements on site and see on the right corner which classes are machtes and copy them.
I have a web application with a simple file upload requirement (max 1 mb).
The web application is an externally exposed web site that must be (as much as possible) compatible with all browsers and versions.
We are using C# .net 3.5 ASP .Net (IIS 7) technology.
We are having trouble implementing the file upload control:
<input type="file" ... />
The buttons are not clicking correctly and different input methods (eg clicking on the text box in some browsers will open the input field).
We need to avoid 3rd party file upload tools.
What is the best way to make this compatible with all browsers?
Can we use frameworks (eg we could use JQuery) to do this?
Any help is really appreciated.
Edit:
Here are some more specific behaviour details:
Intended/Expected:
Consistent use of textbox field (for filename):
displays filename of selected file
no events fire launch of browse dialog
Consistent use of browse button:
same css standards as standard HTML button for look and feel
opens browse dialog
dialog cancel - clears textbox field
dialog ok - (re)populates textbox field
We would like to have the look and feel of the textbox and button to use the same css as the rest of our web site.
Current:
textbox click events opens dialog
generic display of textbox and button field
browse button not working with some browsers (not firing browse dialog event, but being displayed)
As much as possible the behaviour (events/actions as above) should be consistent between all browser types.
What is the best way to make this compatible with all browsers?
It's already compatible with all browsers. Just don't try too hard to script it or overhaul the style. You have minimal customisation possibilities with the file upload field, partly for obvious security reasons and partly because the multiple-part rendering of the text+button arrangement in many browsers is simply not amenable to styling primitives that operate on single boxes.
(eg clicking on the text box in some browsers will open the input field).
Luckily people whose browsers do that will already be used to file upload fields doing that; indeed, they will expect the browser to do that, and be confused if you manage to stop it.
(And it's a sensible measure: allowing typing in the filename field is seldom useful, but it has caused security holes in the past.)
Consistent use of browse button:
Nothing about the file upload field even mandates a browse button or file-finder dialogue box. You might have eg. drap and drop instead. The browser decides this; as the site author you don't get a look in.
We would like to have the look and feel of the textbox and button to use the same css as the rest of our web site.
This isn't really possible within the realms of HTML. Hence the “third party uploaders”, typically Flash with HTML fallback.
There is one approach that you can sort-of use to make a file upload look like you want, but it's not very nice. You style a text field and button however you like, listen for changes to the file upload field and copy the value to the text field to display. The text field must be read-only because it won't be possible to allow the user to pick a file from there.
You then put the real file upload control on top of the fake one with CSS positioning, and give it CSS opacity (alpha filter in IE) so it's so faint you can't see it. You then have to hope that the browser decides to put a clickable part of the file upload field over the top of where you have rendered your button. Though you can fiddle and check it to work in many popular browsers, it's really very brittle and almost certainly a complete waste of time.
You will not get a consistent UI. Each browser does it's own implementation. A Safari user will expect the Safari method, same for IE and so on.
You might have some success with CSS control of the box but be aware that modern browsers have a lot of security on this field. You will have limited control of this field compared to fields
If you follow instruction here: http://www.15seconds.com/issue/010504.htm
you should be able to have consistent behaviour. Having just
As for styling - this is a task for you. Make sure your HTML and CSS are compatible (work as expected) in all browsers that you support.