I would like to set the webpage logo disappear by css display:none.
I already know how to open the element , for example , in the website www.kori.jp, i can find the div class .logo and able to put display:none in it.
But after reflesh or click other page, it appears again. I want to set it invisible for the whole website at the time I have my presentation.
How can i use and set the css in the chrome browse (or any browser which is more user friendly)
I need to present and show the website but cannot display the company information.
Thanks a lot
Not sure why you would want to do this, but I'm not the one to question it. Editing elements in, for example, Chromes developer tools only store it temporarily and, since you're not really changing the CSS of the site, it is obvious it returns to its normal state when you refresh.
While it can and probably will break some functionality, what you could do is hit CTRL + U on a website to show its source, copy+paste everything from there into your own files somewhere locally, and change it that way. Remember to do this both for the .HTML and .CSS files though (and perhaps even .JS files if they exist on the site)!
Related
I am working on an e-commerce site and the product images are NOT visible on the live site but they are visible on my local development version even though I am using an exact copy of the code and database. What is even weirder is that when I open the developer console and look at
- the source code for the images is there and also the preview of the image is correct which tells me that the image is loaded correctly it must be something else.
Also, the only difference between the development site and the live site is that the live site runs on SSL, so I guess the problem could be related to that but I have no idea what it could be - the image urls start with https.
Here is an example page where the images are not visible.
Also, to mention the website is build with WordPress and WooComerce, custom theme.
EDIT: For some reason the images are no longer visible on the local version as well.
One of the parent elements / ancestors of the image (in single product view) is a DIV which has the class attribute woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images and a style attribute which contains opacity: 0, i.e. completely transparent, therefore it remains invisible
So you have to find where that opacity setting is added and deactivate it. (Or if it's static, simply remove it from the HTML tag)
I am new at programming websites in wordpress and would like to know how I can use the Google Inspect and Edit Pages and Styles.
Example:
I have images on a website footer. These images are obtained placed there from a arbitrary file.
Question:
How can i via the Google tool obtain which arbitrary file these images are using?
Press F12 and find for your element, under you will see css and can manipulate with it. Also you can change, add, remove elements.
Is there an easy way to find out which font variants are actually used within a page?
I'm working on a site that has a full font family imported, but would like to remove unused variations. I can go around inspecting elements, but figure there might be an easier way.
There are tools like Fount: https://fount.artequalswork.com/
But it's not time-consuming at all to do it by hand, really. If you're using Chrome just right click the page, go down to Inspect in the menu, and under the Elements tab you'll find the HTML of the page. Click inside the box and hit command + F to bring up the search box, and type in "css" so you can easily find their CSS sheets. Right click on the link and hit Open and you can search for the font from there (command + F again).
I'm trying to re-skin an existing site using CSS only. I will be taking one of their CSS files and redoing it to match a new design, without changing any HTML. I want a good way of continually updating and then testing, but I have to do it locally because they do not have a dev environment. The site itself is dynamic and authenticated, so I can't just download pages from the site and test the entire thing locally. I was hoping that there is a way to tell my browser (Firefox, preferably) to disable that specific remote CSS file and replace it with a local file.
I don't want to use something like Web Develop Toolbar or Firebug because that requires me to manually make the changes each time I load a page. I want something more seamless.
I was thinking one possibility is to load my new stylesheet in userContent.css, but I would still need a way of telling the browser not to load the original stylesheet from the server.
Any ideas?
UPDATE: I found this Mozilla bug report https://bugzilla.mozilla.org/show_bug.cgi?id=208641 discussing the issue of being able to change userContent.css without restarting Firefox. One of the posters (Simon Wilper) posted some files and info about adding a menu item to refresh userContent.css, but it talks about modifying browser.xul and I can't find that file on my system. This seems like the last piece of the puzzle.
You can use AdBlock Plus to create a custom filter to block that one particular stylesheet, so it will not load when you go to the site. This rule will always be in effect, so as you refresh the page, you will not have to do anything extra.
https://addons.mozilla.org/en-US/firefox/addon/adblock-plus/
As for adding your own stylesheet onto that external site, you can use Stylish, an add-on for adding your own stylesheets to particular domains. This, too, will always be present as you refresh the page.
https://addons.mozilla.org/en-US/firefox/addon/stylish/
The issues you will run into, I imagine, will be what to do with images you are intending on linking to in the CSS. You will have to upload them somewhere, reference them absolutely, and then once you are finished, replace the URLs with new locations on their server. Also, that editing Stylish stylesheets within their editor is pretty poor (no code colouring, no code completion.) Probably better to edit it in your editor of choice, and then paste it into the Stylish textarea. Hit save, then see your work (I believe you won't even have to refresh, but I might be wrong.)
Also, both these add-ons are available for Chrome too.
https://chrome.google.com/webstore/detail/adblock-plus/cfhdojbkjhnklbpkdaibdccddilifddb
https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en
I am not sure why people are suggesting to install extensions for this simple task. I would suggest you to just follow these steps to disable whichever file you want from being loaded in your browser that you want. Just follow these few simple steps:
Hit Ctrl + Shift + C to open source inspection
Navigate to Network tab
Right Click on any file from the list and and click Block request URL
Now the file won't load. Cheers!
PS: Steps are same for Google Chrome and Mozilla Firefox browsers. Not tested on Opera and/or Safari.
Install web developer extension
http://chrispederick.com/work/web-developer/firefox/
And then it will create a menu under the Address bar, click on the css tab and then "Disable Styles" > Disable Individual Style Sheet" > then select the style sheet file you want to disable
after this, again click on the css tab and then "Add User Style Sheets" , next select your css file.
For some reason whenever I go to the page of my website that has the crystal report on it my main navigation bar disappears. Here is what the header for the site (with the navigation menu) is suppose to look like:
and here is what it looks like when there is a report on the page:
Could someone tell me what is causing this and how I can fix it?
I'm using master page for the header by the way.
Greener, the Crystal Report viewer is a dynamic HTML representation of the report. It combines JavaScript, HTML and CSS (duh, what doesn't) to represent your report on the webpage. The toolbars are powered by JavaScript calls to .JS that is linked in when the CrystalReportViewer control is rendered to your page.
My point is, all of this introduces a LOT of stuff that can conflict with your existing page. In particular JavaScript errors can occur (which can cause certain things to stop rendering) OR CSS the report uses happens to apply styles you never intended to have applied to objects in your page.
I highly recommend installing the Web Developer toolbar and/or FireBug to FireFox, IE, or whatever browser they are offered on these days. FireFox's implementation of those is quite good in my experience.
When the page loads you can use the 'CSS' menu of the Web Developer toolbar to actually disable some or ALL the styles applied to the page. If disabling Crystal related styles (or all) makes your missing toolbar appear, then it's probably a conflict in your CSS. A front end developer would know to adjust the styles (i.e. add the !important directive to a style, change class/id names, etc.) to address this.
Alternatively, FireBug may be reporting JavaScript errors (heck, even FireFox can show these in the console) which could indicate a problem that prevents the completion of rendering your toolbar.
An outside possibility is that the report itself contains mark-up. For example, if you had certain fields in the report contain HTML that happened to be rendered by the browser, this could create an open div tag, css styles and even JavaScript that would do all the stuff I explained above.
I hope this narrows it down for you. Happy troubleshooting!
I was having the same issue and after hours of searching I finally resolved it... check this out... http://scn.sap.com/thread/1926659
In the crystalreportviewer css file, I adjusted the div class = clear and changed the height attribute and disabled overflow:hidden. Hopefully, that works for you. Good luck!
I found the solution after searching on the web and is a quite simple.
On the Site Master, change the Name for all the places you have the style "clear" for example "clear1" and change it too en the site.css with that name.
The problem is for the conflic with the namespaces with Crystal Report css.
Hope this help.