I've been tasked with reproducing the look and feel of an intranet site in SharePoint, at first I was thinking no problem just mod a Master page and voila.
The problem occurred when I opened the source of the site and saw that they are using 12 disparate CSS files that override each other, and are written in the worst way possible.
My question is is there a tool that can take the mess and generate the resulting HTML so I don't have to manually.
Base.css for example sets BODY width to 90%
custom.css then sets it to 960px !important
Mod.css lastly tries to set it to 100%
I would need it to look at this and generate BODY with the style to set the width to 960px
You can do this using chrome's developer tools:
Right click and inspect the element and then click on the computed tab on the far right top corner .
It will give you the styling that the element has after all the overrides and such.
As a starting point, you coud use window.getComputedStyle() for obtaining such information.
Have a look at: https://code.google.com/p/instyle/
It seems like it does what you need.
Related
I have a page which I use often to check some stuff, but it's not developed by me.
On this page, there is a label which is always to small and to read it completly, I go always to dev console, search the label and change the width manually.
This annoys me, is there a possibility to set the value fixed for myself? or with a chrome plugin so that I don't have to do it all the times?
This is the page, when I've loaded it:
You can see the yellow boarder, it's not wide enought, that I can see the whole text.
So to see it, I always open Developer Console and change the width of this css class to a width of 400px.
default it's set to 250px.
I'd like to find a way, that I don't have to do that every time manually.
But I don't have impact on the code, I'm not a developer of the page. Just a user.
And couldn't finde a solution, if there is a plugin or another way, how I can configure chrome that for this page, this width of the class will be changed automatically.
Try to add !important in your css code as there might be the case in your browser so go with an important tag hope it will help you to resolve your query
I'm trying to make a window based application for web browsers. The number of windows is considerably high, so I'm storing them as HTML files (one per window) that I asynchronously retrieve from the server according to user interaction.
To add a window to the main page, I first add the link elements (CSS) of the downloaded document to its head section, and then I append the content of the body section to a certain div. When a window is closed, I just remove these elements.
This approach seems to be working nicely, but I can see that sometimes when I add a window, its elements are visible out of position with no style, and after a brief moment they are correctly painted.
I don't have a strong background in web programming, but I suspect this might be related to what it is called "browser reflow". Does it mean that it is taking too much time to repaint everything? Is it possible to just hide these "unstyled" elements until it is safe to show them?
Any guidance would be appreciated.
Some time away from the computer seems to have relaxed my mind. I was erroneously assuming that adding new link elements to the head section would load the CSS files immediately. Obviously, the browser needs to retrieve them from the server first. So, the DOM elements I'm adding don't show their style because the CSS files have not been downloaded yet. I think this is the right answer.
I've got a tough one. I work for a company that uses a sharepoint that is 100% text based due to varying network performace issues accross the world. It provides the option to input HTML for styling but scrubs any javascript. I do not have access to code CSS and I'm assuming jquery is not available.
I would like to embed images into the sharepoint as a proof of concept by taking advantage of a floating div (or iframe) that displays with an href to display a png file stored on a server. I don't want the div (or the image) to load unless the user clicks a link or a button.
I'm pretty amature at anything other than basic HTML formating. I'm not even sure it's possible to do something like this with only html.
Thank you in advance to anyone willing to take a stab at this.
You could do it with this HTML, which is ugly and unmaintainable.
Use an iframe with scrolling="none". Use width and height attributes to give it dimensions.
Inside the iframe have your img elements with an id attribute. Ensure they're spaced with enough vertical space so they can't be seen by default, and appear isolated when viewed later.
Link your links to those id attributes, e.g. link
I made a table on the html page using div tags. The content of the table hides and shows with onClick event on the corresponding Enabled/Disabled section. Everything style related about div sections is made with CSS in a separate stylesheet.
All of the files (html, css, js) are located locally on my disk and they will be mostly accessed locally within the software made in VB.net.
The pages I made look perfect in both Chrome and IE (v11), but when I open them with WebBrowser control it seems as the control is not handling the div elements with float property (see image bellow).
Can someone please tell me what the problem is here, as I don't think it's webpage style related, but more of a WebBrowser control related problem?
(open image in new tab for better resolution)
Answering my own question in case if someone comes looking for answers on this topic:
turns out a lot of CSS3 functionality is not supported within VS WebBrowser control. The main issue weren't divs with float property, but the use of calc within width property (width: calc(...);). After setting all the CSS width properties to a pre-calculated percentage, the table began to regain it's shape.
There are some other CSS properties not working properly, for instance display: table; (cell, row, etc.) and box-shadow.
EDIT: I discovered the beauty of Microsoft's idea of emulation behind WebBrowser control. Turns out, even if you have IE11 installed, WebBrowser is dumbed down to IE8 and you have to change/add a registry key in order to enable the IE11 HTML5 and CSS3 functionalities to it.
See: http://www.codeproject.com/Articles/793687/Configuring-the-emulation-mode-of-an-Internet-Expl
I really like what this website has done with their CSS layout. Is there any tutorials anyone can point me to/an explanation of the layout - particularly how to get those smaller linked images to line up over the larger image. I'm a bit new to design. Let me know.
Site: http://www.fssjax.org
Thanks
Download Firefox's Web Developer Add-on and Firebug. (Chrome has something similar - likely other browsers do too).
After you install them, visit the page in question, and click Outline -> Outline Current Element. This will make it so anything you rollover will show you a red border around it - which will help you understand all the parts that make up their page.
Then, right-click on an element and click Inspect Element (at bottom of pop-up options). This will show you the HTML on the left and the CSS on the right - the perfect way to learn how they're laying out their page.
Download Firebug for Firefox, it allows you to easily inspect elements on a web page and see their css etc. Chrome also has a bult-in inspector.
Inspect an element, look at the css then Google to find out what the css does if you aren't sure.
Well ok, it's kind of a crap navigation though...
Anyway, the nav is built using the float (http://www.w3schools.com/css/css_float.asp) attribute. Two elements (the containers) are placed sequentially, then the first (the nav) is floated to the left of the second. There's also usage of the position (http://www.w3schools.com/cssref/pr_class_position.asp) attribute to move it over the picture.
And like the others said, use Firebug to figure out what everything is doing.