CODEWITHSUNDEEP
htmlcsswordpressanimationtoggle
Roger W
Roger W

Reputation: 107

Toggle switch (HTML + CSS) working / not working

Hi and hope that someone can help. The following code seems to work fine as standalone HTML + CSS files but doesn't seem to work when pasted into a Wordpress page. I'm using a CSS plugin on the site to add CSS to my pages (Simple Custom CSS and JS) and don't really have issue with that, but wonder why the transitions don't work when hosted on a Wordpress site. Thanks for your interest. Code follows.

#toggleSwitch {
  display: grid;
  place-content: center;
/*  height: 100vh; */
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fefefe;
}

label {
  pointer-events: none;
}
label .input {
  display: none;
}
label .input:checked + .toggle-wrapper {
  box-shadow: 0 8px 14px 0 rgba(18, 51, 215, 0.12);
}
label .input:checked + .toggle-wrapper > .selector {
  left: calc(100% - 50px);
  background-color: #004B88; /*#3957ee;*/
}
label .input:checked ~ .notification > .selected:before {
  content: " ON";
}
label .toggle-wrapper {
  position: relative;
  width: 120px;
  height: 60px;
  background-color: #eaeaea;
  border-radius: 999px;
  margin: auto;
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 8px 14px 0 rgba(0, 75, 136, 0.12);
}
label .toggle-wrapper .selector {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  background-color: #FC0; /* #ee5f39;*/
  transition: left 0.25s ease;
  border-radius: 50%;
}
label .notification {
  font-size: 30px;
  width: 100%;
  text-align: center;
  color: #004B88;
}
label .notification .selected:before {
  content: "OFF";
  font-size: 40px;
/*  border-bottom: 2px solid;*/
}
<body>
<div id="toggleSwitch">
<h2 style="text-align: center; color: #004B88;">Toggle the Attend Anywhere service ON or OFF</h2><br /><br />
<label for="toggle">
  <input class="input" type="checkbox" id="toggle"/>
  <div class="toggle-wrapper"><span class="selector"></span></div>
  <p class="notification">Attend Anywhere is currently<br /><span class="selected"></span></p>
  </label>
</div>
  
</body>

Upvotes: 0

Views: 726

Answers (1)

liquidRock
liquidRock

Reputation: 357

The best way to modify WordPress pages is to make template php files and your own CSS file that is registered and enqueued in a functions file or another php file that will load such things in the <head>. Enqueueing is the recommended method and will work if your CSS is written correctly. No need to use a plug-in. It may seem daunting at first if you've never done it, but it's not difficult.

How to enqueue a CSS file:

// register main stylesheet
wp_register_style( 'my-stylesheet', get_stylesheet_directory_uri() . '/library/css/style.css', array(), '1', 'all');

// enqueue stylesheet
wp_enqueue_style( 'my-stylesheet' );

You can also use conditionals to enqueue things:

if (is_page('about'){
    wp_enqueue_style( 'my-stylesheet' );
}

If you are using a premade theme, it will likely be enqueueing a stylesheet already, so you can just add your CSS to that. Even boilerplate themes should have a primary CSS file. You can simply enqueue your own though and leave the original alone if you like. Just make sure the file name and the path is correct.

To make a template page you can modify one from the existing theme and (1) properly name it if it dynamically loads (like a single template) or (2) give it a template name so it can be chosen from the dropdown menu on the post creation page.

Here's an example of a simple WordPress template. Notice the commented text on top which is the template name:

<?php
/*
 Template Name: About
*/
?>
<?php get_header(); ?>

            <div id="content">
                <div id="inner-content" class="wrap cf">
                    <main id="main">
                        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

                            <h1><?php the_title(); ?></h1>
                            
                            <?php the_content(); ?>
                        
                        <?php 
                        endwhile;
                        else :
                        endif; 
                        ?>
                    </main>
                </div>
            </div>
<?php get_footer(); ?>

Upvotes: 1

Related Questions