So, I have a website with the Hueman theme. It’s all working properly on the live domain name but I needed to make some changes so I downloaded the whole website (files and database) on my local computer to make the changes and publish them on the live site.
What happened is extremely intriguing, at least to me. The header has a large background image done through css from Appearance > Customize > Advanced Options > Additional CSS and that image on the live site is an Amazon S3 link (all my media files go there) but when I set up the site locally the link in the "Additional CSS" changed to point to WordPress’ uploads directory on the live site and obviously that’s a 404 error.
The plugin which handles my S3 upload is "WP Offload Media Lite" and I have the "Amazon Web Services" plugin as well.
Here is my live site additional css:
/* You can add your own CSS here. Click the help icon above to learn more. Use this field to test small chunks of CSS code. For important CSS customizations, it is recommended to modify the style.css file of a child theme. http//codex.wordpress.org/Child_Themes */ /*@import url('https://fonts.googleapis.com/css?family=Kalam&display=swap'); */ html { max-width: 100%; overflow-x: hidden; } #header { background: url(https://imagecurve.s3.eu-central-1.amazonaws.com/wp-content/uploads/2020/12/21134758/Book-on-a-pebble-beach-propped-open-with-a-stone-hero-1920x650-1.jpg) center 0px no-repeat; } nav#nav-header { background: #33363b !important; opacity: 0.9; } #nav-header.nav-container { box-shadow: none; -webkit-box-shadow: none; } #nav-header li a { font-weight: bold; } #header .pad { max-width: 480px; margin: 80px auto; background: rgb(68, 68, 68); opacity: 0.8; padding: 30px 30px 20px; padding-top: 28px; padding-bottom: 30px; text-align: center; } #header .site-title, #header .site-description { float: none; } #header .site-description { font-size: 17px; color: rgb(255, 255, 255); font-weight: 500; text-align: center; line-height: 40px; padding: 0; font-style: normal; margin-left: 0; } /* Subscribe form */ .widgetGuts .success { background: #01c01e; } .widgetGuts .subscribeButton { background: #3b8dbd; color: #fff; padding: 8px 14px; font-weight: 600; display: inline-block; border: none; cursor: pointer; -webkit-border-radius: 3px; border-radius: 26px; } #frm-subscriptionFrontsimplesubscribe-2 dl dt:first-child { margin-bottom: 5px; } #simplesubscribe-2 > h3 { font-size: 20px; } .post-meta .post-date { display: none; } /* Contact forms */ .wpcf7-form span.wpcf7-not-valid-tip { position: static; display: inline-block; width: 100%; margin-top: 8px; } .wpcf7-form input[type=text], .wpcf7-form input[type=email] { width: 100%; } .wpcf7-submit { border-radius: 26px !important; } .nf-form-cont .submit-wrap input { background: #3b8dbd; color: #fff; padding: 8px 14px; font-weight: 600; display: inline-block; border: none; cursor: pointer; -webkit-border-radius: 3px; border-radius: 3px; } article.post-26078 > .post-inner, article.post-28116 > .entry { max-width: 800px; } #frm-subscriptionFrontsimplesubscribe-2 #frm-email { width: 100%; padding: 6px 8px; box-sizing: border-box; border-radius: 3px; border: 1px solid #c7c7c7; } #header-widgets { float: none; } #header-widgets p { margin-bottom: 0; } .ap-form-field .wp-switch-editor { height: 25px; } .social-links li:nth-child(3), .social-links li:nth-child(5) { display: none; } #header .site-description { font-size: 22px !important; } #explore-legends { background: #dff3d5; border: 2px solid #82b965; padding: 65px 0 25px 0; text-align: center; margin-bottom: 20px; border-radius: 18px; } #explore-legends h3 { color: #8a8989; margin-bottom: 0; font-family: 'Kalam', cursive; } #explore-legends a { background: #82b965; display: inline-block; padding: 7px 12px; text-align: center; color: white; clear: right; margin: 12px 0 35px 0; border-radius: 13px; width: 100%; max-width: 165px; box-sizing: border-box; font-weight: bold; } #explore-legends i { font-style: italic; color: #5d5d5d; } @media(max-width: 1200px) { #header-widgets { margin-top: 5px; display: block !important; } } @media(max-width: 1280px) { #header { background: url(https://imagecurve.s3.eu-central-1.amazonaws.com/wp-content/uploads/2020/12/21134754/Book-on-a-pebble-beach-propped-open-with-a-stone-hero-1280x500-1.jpg) center 0px no-repeat; } } @media(max-width: 1024px) { #header { background: url(https://imagecurve.s3.eu-central-1.amazonaws.com/wp-content/uploads/2021/01/06051411/Book-on-a-pebble-beach-propped-open-with-a-stone-hero-1024x420-2.jpg) center 0px no-repeat; } } @media (max-width: 785px) and (min-width: 720px) { #nav-header li:nth-last-child(2) { display: none; } } @media(min-width: 720px) { #nav-header li:last-child { float: right; } #nav-header li:nth-last-child(2) { float: right; } } @media (max-width: 720px) { #header .container .group.pad { max-width: 252px; } #header .site-title { padding: 0; } } @media (max-width: 580px) { .wp-pagenavi span.extend { display: block; } } @media (max-width: 480px) { #header .container .group.pad { margin: 50px auto; } #header { background: url(https://imagecurve.s3.eu-central-1.amazonaws.com/wp-content/uploads/2021/01/06051527/Book-on-a-pebble-beach-propped-open-with-a-stone-hero-480x520-2.jpg) center center no-repeat; } }
Here is my local additional css:
/* You can add your own CSS here. Click the help icon above to learn more. Use this field to test small chunks of CSS code. For important CSS customizations, it is recommended to modify the style.css file of a child theme. http//codex.wordpress.org/Child_Themes */ /*@import url('https://fonts.googleapis.com/css?family=Kalam&display=swap'); */ html { max-width: 100%; overflow-x: hidden; } #header { background: url(https://www.imagecurve.com/wp-content/uploads/2020/12/21134758/Book-on-a-pebble-beach-propped-open-with-a-stone-hero-1920x650-1.jpg) center 0px no-repeat; } nav#nav-header { background: #33363b !important; opacity: 0.9; } #nav-header.nav-container { box-shadow: none; -webkit-box-shadow: none; } #nav-header li a { font-weight: bold; } #header .pad { max-width: 480px; margin: 80px auto; background: rgb(68, 68, 68); opacity: 0.8; padding: 30px 30px 20px; padding-top: 28px; padding-bottom: 30px; text-align: center; } #header .site-title, #header .site-description { float: none; } #header .site-description { font-size: 17px; color: rgb(255, 255, 255); font-weight: 500; text-align: center; line-height: 40px; padding: 0; font-style: normal; margin-left: 0; } /* Subscribe form */ .widgetGuts .success { background: #01c01e; } .widgetGuts .subscribeButton { background: #3b8dbd; color: #fff; padding: 8px 14px; font-weight: 600; display: inline-block; border: none; cursor: pointer; -webkit-border-radius: 3px; border-radius: 26px; } #frm-subscriptionFrontsimplesubscribe-2 dl dt:first-child { margin-bottom: 5px; } #simplesubscribe-2 > h3 { font-size: 20px; } .post-meta .post-date { display: none; } /* Contact forms */ .wpcf7-form span.wpcf7-not-valid-tip { position: static; display: inline-block; width: 100%; margin-top: 8px; } .wpcf7-form input[type=text], .wpcf7-form input[type=email] { width: 100%; } .wpcf7-submit { border-radius: 26px !important; } .nf-form-cont .submit-wrap input { background: #3b8dbd; color: #fff; padding: 8px 14px; font-weight: 600; display: inline-block; border: none; cursor: pointer; -webkit-border-radius: 3px; border-radius: 3px; } article.post-26078 > .post-inner, article.post-28116 > .entry { max-width: 800px; } #frm-subscriptionFrontsimplesubscribe-2 #frm-email { width: 100%; padding: 6px 8px; box-sizing: border-box; border-radius: 3px; border: 1px solid #c7c7c7; } #header-widgets { float: none; } #header-widgets p { margin-bottom: 0; } .ap-form-field .wp-switch-editor { height: 25px; } .social-links li:nth-child(3), .social-links li:nth-child(5) { display: none; } #header .site-description { font-size: 22px !important; } #explore-legends { background: #dff3d5; border: 2px solid #82b965; padding: 65px 0 25px 0; text-align: center; margin-bottom: 20px; border-radius: 18px; } #explore-legends h3 { color: #8a8989; margin-bottom: 0; font-family: 'Kalam', cursive; } #explore-legends a { background: #82b965; display: inline-block; padding: 7px 12px; text-align: center; color: white; clear: right; margin: 12px 0 35px 0; border-radius: 13px; width: 100%; max-width: 165px; box-sizing: border-box; font-weight: bold; } #explore-legends i { font-style: italic; color: #5d5d5d; } @media(max-width: 1200px) { #header-widgets { margin-top: 5px; display: block !important; } } @media(max-width: 1280px) { #header { background: url(https://www.imagecurve.com/wp-content/uploads/2020/12/Book-on-a-pebble-beach-propped-open-with-a-stone-hero-1280x500-1.jpg) center 0px no-repeat; } } @media(max-width: 1024px) { #header { background: url(https://www.imagecurve.com/wp-content/uploads/2021/01/Book-on-a-pebble-beach-propped-open-with-a-stone-hero-1024x420-2.jpg) center 0px no-repeat; } } @media (max-width: 785px) and (min-width: 720px) { #nav-header li:nth-last-child(2) { display: none; } } @media(min-width: 720px) { #nav-header li:last-child { float: right; } #nav-header li:nth-last-child(2) { float: right; } } @media (max-width: 720px) { #header .container .group.pad { max-width: 252px; } #header .site-title { padding: 0; } } @media (max-width: 580px) { .wp-pagenavi span.extend { display: block; } } @media (max-width: 480px) { #header .container .group.pad { margin: 50px auto; } #header { background: url(https://www.imagecurve.com/wp-content/uploads/2021/01/Book-on-a-pebble-beach-propped-open-with-a-stone-hero-480x520-2.jpg) center center no-repeat; } }
The live site is here.
I tried googling but nothing sensible was found. I am confused, how could this happen?
