Save
Saving
  • A AUR

    Hello,

    I'm currently setting up Toggle Dark Mode function but the texts color can't apply when I switch to dark mode.

    Here's the CSS code i'm using now:

    .dark-mode .toggle-dark {
      background-color:#E5E0D8;
    }
    .toggle-dark {
      height: 12px;
      width: 12px;
      background-color:#000000;
      border-radius: 50%;
      display: inline-block;
      position:fixed;
      margin-top:1%;
      right:1%;
      cursor: pointer;
      transition: all 600ms ease;
      -webkit-transition: all 600ms ease;
    }
    .toggle-dark:hover {
      background-color: #00FF93;
    }
    .dark-mode {
    	color: #E5E0D8 !important;
    	background-color: #1F2020 !important;
    }
    

    HTML:

    <span class="toggle-dark"  onclick="myFunction()"></span>
    <script>
    function myFunction() {
       var element = document.body;
       element.classList.toggle("dark-mode");
    }
    </script>
    

    And link to my website: https://aur-form.co/

    Does anyone know what could be the problem?
    Thank you in advance!

    posted in General Discussion read more
  • A AUR

    Hello @Richard,

    My website is using the ImageHover Addon and I have the same problem! I'm trying the methods you've said above and I'm now using this CSS:

    • .lay-imagehover-region img{
      transform:translate(-90%,-90%) !important;
      }

    and here's what I've got so far:

    截圖 2021-04-27 下午2.53.jpeg
    截圖 2021-04-27 下午2.53.35.jpg

    As you can see the images have positioned indeed but it's still not ideal. What I'm trying to lay out is that the top-right corner of the images would be aligned to the blue point and the green dashed line.
    I'm wondering if this is possible and would like to know what CSS code I should use.

    Here's the link of the page: https://aur-form.co/archive/

    Looking forward to your reply. Thank you!

    posted in General Discussion read more