theme customizer - Change image using only CSS

admin管理员组

文章数量:1023282

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 6 years ago.

Improve this question

I'm using the twenty fifteen theme.

I have a logo set using the WP Customizer.

I want to have the image change on mobile or tablet view.

The breakpoint is anything smaller than 59.6875em.

I'm using this code:

@media only screen and (max-width: 59.6875em) {
  .custom-logo {
    content: url(".png");
        width: 300px;
  }
}

It works in Chrome but not Firefox.

I've tried adding :before and :after and adding an a tag, as suggested on other answers, but none of that works.

Can anyone suggest what's wrong, and how I can get this to work on Firefox?

Here is the html:

<div class="site-branding">
    <a href="/" class="custom-logo-link" rel="home" itemprop="url"><img src=".png" class="custom-logo" alt="Seed" itemprop="logo" srcset=".png 248w, .png 150w" sizes="(max-width: 248px) 100vw, 248px" width="248" height="248"></a>
</div>

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 6 years ago.

Improve this question

I'm using the twenty fifteen theme.

I have a logo set using the WP Customizer.

I want to have the image change on mobile or tablet view.

The breakpoint is anything smaller than 59.6875em.

I'm using this code:

@media only screen and (max-width: 59.6875em) {
  .custom-logo {
    content: url("https://www.example/example/wp-content/uploads/Logo_Wide_2x.png");
        width: 300px;
  }
}

It works in Chrome but not Firefox.

I've tried adding :before and :after and adding an a tag, as suggested on other answers, but none of that works.

Can anyone suggest what's wrong, and how I can get this to work on Firefox?

Here is the html:

<div class="site-branding">
    <a href="https://www.example/example/aa00/" class="custom-logo-link" rel="home" itemprop="url"><img src="https://www.example/example/aa00/wp-content/uploads/sites/2/2019/04/cropped-Logo_248_2x.png" class="custom-logo" alt="Seed" itemprop="logo" srcset="https://www.example/example/aa00/wp-content/uploads/sites/2/2019/04/cropped-Logo_248_2x.png 248w, https://www.example/example/aa00/wp-content/uploads/sites/2/2019/04/cropped-Logo_248_2x-150x150.png 150w" sizes="(max-width: 248px) 100vw, 248px" width="248" height="248"></a>
</div>

• css
• theme-customizer
• theme-twenty-fifteen

Share Improve this question edited Apr 22, 2019 at 17:55 Jim Duggan asked Apr 22, 2019 at 13:54 Jim DugganJim Duggan 8933 silver badges99 bronze badges 1

• did you try to clear the browser cashe ? – Atef Commented Apr 22, 2019 at 14:26

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

Instead of trying to change the URL of the img tag, use your media query to hide the image and change the :before of your <a>. Like this...

@media screen and (max-width: 59.6875em) {
    .site-branding img {
        display:none;
    }
    .site-branding a::before {
        content: url("https://www.example/example/wp-content/uploads/Logo_Wide_2x.png");
    }
}

This can be done with classes for each screen size and media queries. I saw this answered on this page originally: https://stackoverflow/questions/34984737/display-a-different-logo-on-mobile-and-desktop

<style>
/* hide mobile version by default */
.logo .mobile {
display: none;
  }

/* when screen is less than 59.6875em wide
 show mobile version and hide desktop */
@media (max-width: 59.6875em) {
.logo .mobile {
  display: block;
}
.logo .desktop {
  display: none;
}
}
</style>

<div class="logo">
  <img src="/images/logo_desktop.png" class="desktop" />
  <img src="/images/logo_mobile.png" class="mobile />
</div>

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 6 years ago.

Improve this question

I'm using the twenty fifteen theme.

I have a logo set using the WP Customizer.

I want to have the image change on mobile or tablet view.

The breakpoint is anything smaller than 59.6875em.

I'm using this code:

@media only screen and (max-width: 59.6875em) {
  .custom-logo {
    content: url(".png");
        width: 300px;
  }
}

It works in Chrome but not Firefox.

I've tried adding :before and :after and adding an a tag, as suggested on other answers, but none of that works.

Can anyone suggest what's wrong, and how I can get this to work on Firefox?

Here is the html:

<div class="site-branding">
    <a href="/" class="custom-logo-link" rel="home" itemprop="url"><img src=".png" class="custom-logo" alt="Seed" itemprop="logo" srcset=".png 248w, .png 150w" sizes="(max-width: 248px) 100vw, 248px" width="248" height="248"></a>
</div>

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 6 years ago.

Improve this question

I'm using the twenty fifteen theme.

I have a logo set using the WP Customizer.

I want to have the image change on mobile or tablet view.

The breakpoint is anything smaller than 59.6875em.

I'm using this code:

@media only screen and (max-width: 59.6875em) {
  .custom-logo {
    content: url("https://www.example/example/wp-content/uploads/Logo_Wide_2x.png");
        width: 300px;
  }
}

It works in Chrome but not Firefox.

I've tried adding :before and :after and adding an a tag, as suggested on other answers, but none of that works.

Can anyone suggest what's wrong, and how I can get this to work on Firefox?

Here is the html:

<div class="site-branding">
    <a href="https://www.example/example/aa00/" class="custom-logo-link" rel="home" itemprop="url"><img src="https://www.example/example/aa00/wp-content/uploads/sites/2/2019/04/cropped-Logo_248_2x.png" class="custom-logo" alt="Seed" itemprop="logo" srcset="https://www.example/example/aa00/wp-content/uploads/sites/2/2019/04/cropped-Logo_248_2x.png 248w, https://www.example/example/aa00/wp-content/uploads/sites/2/2019/04/cropped-Logo_248_2x-150x150.png 150w" sizes="(max-width: 248px) 100vw, 248px" width="248" height="248"></a>
</div>

• css
• theme-customizer
• theme-twenty-fifteen

Share Improve this question edited Apr 22, 2019 at 17:55 Jim Duggan asked Apr 22, 2019 at 13:54 Jim DugganJim Duggan 8933 silver badges99 bronze badges 1

• did you try to clear the browser cashe ? – Atef Commented Apr 22, 2019 at 14:26

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

Instead of trying to change the URL of the img tag, use your media query to hide the image and change the :before of your <a>. Like this...

@media screen and (max-width: 59.6875em) {
    .site-branding img {
        display:none;
    }
    .site-branding a::before {
        content: url("https://www.example/example/wp-content/uploads/Logo_Wide_2x.png");
    }
}

This can be done with classes for each screen size and media queries. I saw this answered on this page originally: https://stackoverflow/questions/34984737/display-a-different-logo-on-mobile-and-desktop

<style>
/* hide mobile version by default */
.logo .mobile {
display: none;
  }

/* when screen is less than 59.6875em wide
 show mobile version and hide desktop */
@media (max-width: 59.6875em) {
.logo .mobile {
  display: block;
}
.logo .desktop {
  display: none;
}
}
</style>

<div class="logo">
  <img src="/images/logo_desktop.png" class="desktop" />
  <img src="/images/logo_mobile.png" class="mobile />
</div>

本文标签： theme customizerChange image using only CSS