webflow editor
resulting page
I have been trying to reset the backgrounds on my web page to white and I have removed all the section background colors in the webflow editor but for some reason the resulting webpages still have the background colors I have removed.
Inspect the element using your browser's Developer Tools by right-clicking on the element and choosing "Inspect".
Look in the computed CSS panel to see which which class the offending style is being inherited from.
Style that class so that the element is inheriting the desired style.
Shawn's suggestions are really good. Highly recommend starting with them.
In addition:
Check for divs/layers which has absolute positioning. They could be used as background fillers
Check for animations/interactions. There could be custom animations created which on load or on scroll change specific elements' background colours.
But to tell clearly, you could provide a read-only link from Webflow. It would be easier to diagnose
Related
So I'm definitely an amateur with HTML/CSS. I'm trying to edit an HTML template in various ways, and one of the things I'm stuck on is trying to change the background color of an active navigation tab. Where would it go? What string do I use? To be honest, I'm not sure I'm even asking the right questions or using the right terms since I'm so new to this. Half of what I've figured out how to do is by using "Inspect" on chrome to find out what the containers/etc. are even called.
I'd like to change the white to match the rest of the container below's background color of #fbf9f6, but only the one that's active.
I'd also like to change the background color of the selected icon to pink as well as the icon itself to white when active.
I'll mention that this code is only in HTML as far as I can tell, I don't think there's a CSS file for it since it was a template I copy and pasted. The website is Toyhouse if that helps at all.
This is what I'd like it to look like.
Here's the link to the code: https://codeshare.io/5e10QJ
First, It looks like you have all your styling in the HTML file. These styles should be removed and placed in a css file. Then, in your HTML file, you can use classes and ids to as selectors to style these elements.
In order to change the the color after an element has been active is by using pseudo classes. You can find information on that here.
https://www.w3schools.com/CSS/css_pseudo_elements.asp
I am a UI developer. My question is suppose I have provided an image from client, now with this image is it possible to detect its CSS properties that is what is the font size used in a particular area, what is the color, width, margin, padding etc through some software or tools like adobe Photoshop etc.
If yes can I get some link or tutorials of how to do that .
Any help is appreciable .
Thanks !!!
If you are looking to detect css properties in chrome right click on the element you wish to see the css properties of, then go to inspect, you will see all the css styles associated with that element on the right side of the developer tools window that opens. Personal tip, click the computer tab on the right of styles to get an easy overview of what is actually rendered.
for a tutorial check out https://developer.chrome.com/devtools
You can use Photoshop's ruler and guides (Gimp can also do that) to measure things like width and margin.
As for font size I would just create a text layer in Photoshop, position it above the text in the image and eyeball it for size.
EDIT: As requested here are a few useful links:
Official Photoshop Documentation
Photoshop Measure Tool
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 want to click / look at on an html element and find out which css rule is responsible for which format property.
i.e. I want to know the font's come from body{ } the color from h { } and the padding from #headercontainer
Is there a way of doing this?
I've tried firebug and cssedit (both of which are very cool) but can't see where you'd find out the inheritance.
It seems like such a useful thing to want to do there has to be a way!
Thanks.
It's right here in firebug:
The built-in tools basically offer the same feature now:
use firebug. The style information will show which css rules are being applied and which are being canceled out.
When you inspect an element, the style tab shows what styles are being applied. style rules with a strikethrough are overridden styles (note: this is with "show computed styles" turned off)
Firebug's inspect feature (there should be a little inspect button or flashlight under the tab) allows you to click on an element and see all of the CSS blocks that it inherits from.
Here is a youtube video which demonstrates this feature.
Here is the firebug website. You can see in the picture at the top the styling inheritance data on the right.
If you can tolerate IE, try IE8's developer tools - they're actually quite nice. Open the page in IE8 and press F12 to bring up the tools.
(source: microsoft.com)
I thought Firebug did this? If you inspect an element it shows the styles on the right, and all the CSS that effects that element. It even shows the formatting that has been overridden by using a strikethrough.
Yeap, for that FireBug is awesome. Firebug is a add-on for Firefox and allows you to inspect each element in currently viewing page and allows you to change them and see the results immediately.
Also Google's Chrome is able to provide you that info when you run chrome://inspector which I like a lot.
Also new verison (2.x) kind of validates your code and errors are shown after clicking error icon in bottom right corner
Firebug is for advanced users, you can use x-ray if you want to click to find out http://www.westciv.com/xray/
For fonts there is a firefox add-on called font finder.
https://addons.mozilla.org/en-US/firefox/addon/4415
This is FF plugin
http://www.pixelperfectplugin.com/
Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.
Read more: http://pixelperfectplugin.com/how-to-use/walkthrough/#ixzz0eOfezx1N
How to get mockup image behind all div like this plugin does.? this tool only shows design behind layout only on firefox and i want to see on all browser.
I found the way here
http://aloestudios.com/2008/08/pixel-precision-with-diagnostic-css/
Well if you want it behind then simply setting it to the background image of body or html would work. If they need to be styled with bgimages or colors as part of the design then i suppose you could throw another div in the dom with position absolute and set the z-index to 0 or -1 depending. IF you want it to overlay the dom then you could do same thing only using an insanely high z-index and then setting the opacity. That would interfere with direct point and click inspection on the layout i think but you could still get to the elements form the html pane.
Obvoiously no method short of developing in pure js somehow is going to give you the features of a browser plugin.