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)
Related
I'm relatively new to coding, but I've made half a dozen full-stack apps and in each I've noticed that whenever I deploy an app to Heroku / GitHub Pages, every single element on the page gets smaller than what they were on my localhost. For example, a Navbar will go from say 50px to 30px. The font size for an element will go from 20px to 12px. I have no idea why, I'm guessing the index file isn't reading the CSS files properly when it's being rendered and defaulting to something, but it's irritating and I can't plan how to style my pages because I don't know what the finished product is going to look like. Does anyone have any sort of answer?
My portfolio site on localhost: everything is the size I want it.
My portfolio site deployed on GitHub pages: everything is smaller.
On localhost you're zoomed in, do you see that icon at the left side of your address bar? Just reset your zoom on localhost with CMD+0, or on PC I guess it's Ctrl+0 and you'll have a consistent look.
Good luck with your site (:
When my website was in development stage(i.e. when it's on localhost), I was easily able to change section background and effects used to reflect immediately. But when I made my site live on Windows Server 2012 and tried to update section backgrounds, background is not updating. Whenever I add new image to server, it's not displaying in section background. But when I try old uploaded images, all those images display.
I tried following possible solutions:
I changed absolute path's of images to relative path, but not worked,
I cleared wordpress' cache, it also not worked,
I cleared browser cache, it also not worked,
I changed "CSS Print Method option" to "Internal Embedding" from "External CSS" in elementor's settings option, it also not worked,
I'm not using another page builder
I tried templates that also not worked.
I checked this elementor's link also - My changes do not appear online, what can I do?
But above document didn't work for me. Is there anyone faced this issue and have solution for this problem?
For the second time i struggled with this issue for hours only to find the quick fix:
Elementor > Settings > Advanced > CSS Print Method > Internal Embedding
I tried many of your answers, but with no effect.
Style > Background and then select HOVER (Instead of NORMAL) finally did the trick!
This problem occurs just because of "User Permissions". I used Microsoft Windows Server 2012, So I followed following steps:
Go to Control Panel -> System and Security -> Administrative Tools
Search for Internet Information Services (IIS) Manager and double click on it
Then go to sites
Select your live site -> Right click on it -> Edit permisions
Go to Security tab
Click on edit -> Click on "Add..." button for adding new user.
Type Every -> click on Check Names -> Click on Ok
Now you can see "Permissions for Everyone" options below Add and Remove buttons.
Check full control check box and click on apply
And finally click on Ok.
Now elementor can read images. When you'll update image, you need to stay calm and wait to update. It'll take time to change.
Don't make Image Size option full, it'll take too much time to update. Instead of that use 1024x1024. It'll update fast and you can see change immediately.
Just don't forget to remove that user after complete updation of live site. It's bad practice to have full access to live site.
I had a similar problem. I couldn't get images or background colors to show up on my background. I found that the background overlay was set to white with an opacity of 100%. Once I set it to 0% opacity everything worked. I don't remember setting any overlay so it was probably on by default.
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)!
I have WordPress page whose theme seems to be loading an undesirable CSS background-image. I want to try to locate the code that is responsible for loading this image but first I have to find its name. I was wondering if there is some tool that allows coders to list and identify the urls of all css-background images that a page calls.
Obviously finding background-images is trivial if all of the page's CSS is controlled only by inline code and directly linked CSS-stylesheets: a text search "find" operation for "background-image" will allow you to find all bg images. But the task becomes complicated if styling is js dependent, and in this case, it was at times.
For those of you who immediately wonder why I need would want to go this route instead of simply using development tools in Chrome or Firefox, below is a list of reasons why.
Why I want a way to automatically extract the background-image urls:
The unwanted ghost images only loads on my mobile phone, so I can't inspect the element to find the image in using my desktop development environment. This is true even if I set the developer tools to "mobile".
I don't have a development environment for my phone that will let me inspect the relevant element.
I tried downloading the exact html loaded by the mobile phone in my browser, but the css ghost image will not appear on my desktop even when use the code my phone had loaded.
The ghost image is not from a virus in my mobile phone browser, because the ghost image loads on my phone even when I used a different browser.
Any help will be greatly appreciated!
Thanks
UPDATE: I figured out the cause of the ghost image using the free trial provided by Browserstack, a mobile emulator. At allows you to view interactive content and inspect it with dev tools. I learned about it from this question: test mobile website in desktop browser.
My problem turned out to be that the css-image in the theme was pointing to my local address, which different from what it should have been on my remote server. The issue turned out not to be a desktop vs. mobile problem, but rather local vs. remote. The emulator reproduced my issue, and it allowed me to inspect and find the problematic code. Still I would love to know if there is a such a css-crawling tool, so I will leave this question open.
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.