Title: Adding element with HTML, CSS and js
Last modified: April 30, 2017

---

# Adding element with HTML, CSS and js

 *  [pranaman](https://wordpress.org/support/users/pranaman/)
 * (@pranaman)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/adding-element-with-html-css-and-js/)
 * I found a ‘pen’ on codepen.io that I liked, altered, and embedded it and another
   on [http://admaticonsulting.com/home-animation2/](http://admaticonsulting.com/home-animation2/)
   using the codepen plugin.
 * Problem is, it shows a top tab with ‘HTML’, ‘CSS’, ‘JS’, … which I don’t want.
   I just want the result – the grey circle with the cog, and I’d like it centered
   in that first third of that part of the page.
 * Can’t seem to figure it out.
 * I tried a few plugins, including “CSS & Javascript Toolbox”, but I don’t see 
   how to add all 3 elements and getting errors when I pasted the HTML: [https://www.screencast.com/t/3SkaMSoj](https://www.screencast.com/t/3SkaMSoj)
 * The pen is: [http://codepen.io/chipower/pen/oZMwyp](http://codepen.io/chipower/pen/oZMwyp).
 * I’ve imagined a plugin or some way that allows me to add the HTML, CSS, and JS,
   just like I see on codepen to a section on my WP page.
 * Can I do that? If so, how?

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [linux4me2](https://wordpress.org/support/users/linux4me2/)
 * (@linux4me2)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/adding-element-with-html-css-and-js/#post-8958448)
 * If you’re just pasting the HTML on a page, and not using it as your main menu,
   you can just:
    1. Paste the HTML into the source of the page using the Text view of the editor.
    2. Paste the CSS in the Custom CSS box for the Customize option for your theme.
    3. Save the javascript for the pen to a file, say, mycustomjs.js, and [enqueue it](https://developer.wordpress.org/reference/functions/wp_enqueue_script/#usage)
       using the functions.php of your [child theme](https://codex.wordpress.org/Child_Themes).
 * Note that there are a couple of things you will need to change to get the pen
   to work on your site. Some of the classes used in the HTML, CSS, and JS may conflict
   with those of your theme, so they would need to be changed. For example, if your
   theme already uses the class “menu-button”, you won’t be able to use the same
   class in the pen without causing conflicts. The javascript uses a “$” for jQuery,
   which will conflict with the other javascript on WordPress, which uses a non-
   conflict jQuery structure. You should use a text editor to search-and-replace
   all those “$” with “jQuery” to fix that.
 *  [linux4me2](https://wordpress.org/support/users/linux4me2/)
 * (@linux4me2)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/adding-element-with-html-css-and-js/#post-8958544)
 * You made me curious, so I tried the pen out on a test site. If you want to make
   it really simple, you can add the javascript and the HTML to the source of the
   page in the editor, and then put the CSS in the custom CSS for your theme. I 
   have it working on Twenty Thirteen without any errors, but as I said, it will
   depend on your theme.
 * Here’s the HTML and javascript to go in the source of your page:
 *     ```
       <div class="menu-button"><img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/9/92/Cog_font_awesome.svg" />
       <div id="1" class="mini"><img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/9/92/Cog_font_awesome.svg" /></div>
       <div id="2" class="mini"><img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/9/92/Cog_font_awesome.svg" /></div>
       <div id="3" class="mini"><img class="icon" src="https://upload.wikimedia.org/wikipedia/commons/9/92/Cog_font_awesome.svg" /></div>
       </div>
       <script type="text/javascript">
       jQuery(document).ready(function() {
       jQuerymenuOpen = false;
       jQuery('.menu-button').click( function() {
         if( jQuerymenuOpen ) {
           if( jQuery('.menu-button').hasClass('shrink-menu') ) {
             jQuery('.menu-button').removeClass('shrink-menu');
             jQuery('#1').removeClass('left');
             jQuery('#2').removeClass('diag');
             jQuery('#3').removeClass('down');
           }
           jQuery('.menu-button').addClass('grow-menu');
           jQuery('#1').addClass('revLeft');
           jQuery('#2').addClass('revDiag');
           jQuery('#3').addClass('revDown');
           jQuerymenuOpen = false;
         }
         else {
           if( jQuery('.menu-button').hasClass('grow-menu') ) {
             jQuery('.menu-button').removeClass('grow-menu');
             jQuery('#1').removeClass('revLeft');
             jQuery('#2').removeClass('revDiag');
             jQuery('#3').removeClass('revDown');
           }
           jQuery('.menu-button').addClass('shrink-menu');
           jQuery('#1').addClass('left');
           jQuery('#2').addClass('diag');
           jQuery('#3').addClass('down');
           jQuerymenuOpen = true;
         }
       });
       });
       </script>
       ```
   
 * And here’s the CSS:
 *     ```
       .menu-button {
         background: #202020;
         width: 5em;
         height: 5em;
         border-radius: 50%;
         margin: 1em;
         cursor: pointer;
         position: relative;
         margin-right: auto !important;
         margin-left: auto !important;
       }
   
       .icon {
         width: 100%;
         height: 100%;
         padding: 25%;
       }
   
       .mini {
         position: absolute;
         top: 3em;
         right: 3em;
         width: 1em;
         height: 1em;
         border-radius: 50%;
         background: #202020;
       }
   
       .shrink-menu {
         -webkit-animation: shrink-menu .5s 1;
         -moz-animation: shrink-menu .5s 1;
         -o-animation: shrink-menu .5s 1;
         animation: shrink-menu .5s 1;
         -webkit-animation-fill-mode: forwards;
         -moz-animation-fill-mode:    forwards;
         -o-animation-fill-mode:      forwards;
         animation-fill-mode:        forwards;
       }
   
       @-webkit-keyframes shrink-menu {
         0% {
           width: 5em;
           height: 5em;
           margin: 1em;
         }
         100% {
           width: 4em;
           height: 4em;
           margin: .5em;
         }
       }
   
       @-moz-keyframes shrink-menu {
         0% {
           width: 5em;
           height: 5em;
           margin: 1em;
         }
         100% {
           width: 4em;
           height: 4em;
           margin: .5em;
         }
       }
   
       @-o-keyframes shrink-menu {
         0% {
           width: 5em;
           height: 5em;
           margin: 1em;
         }
         100% {
           width: 4em;
           height: 4em;
           margin: .5em;
         }
       }
   
       @keyframes shrink-menu {
         0% {
           width: 5em;
           height: 5em;
           margin: 1em;
         }
         100% {
           width: 4em;
           height: 4em;
           margin: .5em;
         }
       }
   
       .grow-menu {
         -webkit-animation: grow-menu .5s 1;
         -moz-animation: grow-menu .5s 1;
         -o-animation: grow-menu .5s 1;
         animation: grow-menu .5s 1;
         -webkit-animation-fill-mode: forwards;
         -moz-animation-fill-mode:    forwards;
         -o-animation-fill-mode:      forwards;
         animation-fill-mode:        forwards;
       }
   
       @-webkit-keyframes grow-menu {
         0% {
           width: 4em;
           height: 4em;
           margin: .5em;
         }
         100% {
           width: 5em;
           height: 5em;
           margin: 1em;
         }
       }
   
       @-moz-keyframes grow-menu {
         0% {
           width: 4em;
           height: 4em;
           margin: .5em;
         }
         100% {
           width: 5em;
           height: 5em;
           margin: 1em;
         }
       }
   
       @-o-keyframes grow-menu {
         0% {
           width: 4em;
           height: 4em;
           margin: .5em;
         }
         100% {
           width: 5em;
           height: 5em;
           margin: 1em;
         }
       }
   
       @keyframes grow-menu {
         0% {
           width: 4em;
           height: 4em;
           margin: .5em;
         }
         100% {
           width: 5em;
           height: 5em;
           margin: 1em;
         }
       }
   
       .left {
         -webkit-animation: left .5s 1;
         -moz-animation: left .5s 1;
         -o-animation: left .5s 1;
         animation: left .5s 1;
         -webkit-animation-fill-mode: forwards;
         -moz-animation-fill-mode:    forwards;
         -o-animation-fill-mode:      forwards;
         animation-fill-mode:        forwards;
       }
   
       .diag {
         -webkit-animation: diag .5s 1;
         -moz-animation: diag .5s 1;
         -o-animation: diag .5s 1;
         animation: diag .5s 1;
         -webkit-animation-fill-mode: forwards;
         -moz-animation-fill-mode:    forwards;
         -o-animation-fill-mode:      forwards;
         animation-fill-mode:        forwards;
       }
   
       .down {
         -webkit-animation: down .5s 1;
         -moz-animation: down .5s 1;
         -o-animation: down .5s 1;
         animation: down .5s 1;
         -webkit-animation-fill-mode: forwards;
         -moz-animation-fill-mode:    forwards;
         -o-animation-fill-mode:      forwards;
         animation-fill-mode:        forwards;
       }
   
       @-webkit-keyframes left {
         0% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
         100% {
           top: 1.5em;
           right: 5em;
           width: 2em;
           height: 2em;
         }
       }
   
       @-moz-keyframes left {
         0% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
         100% {
           top: 1.5em;
           right: 5em;
           width: 2em;
           height: 2em;
         }
       }
   
       @-o-keyframes left {
         0% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
         100% {
           top: 1.5em;
           right: 5em;
           width: 2em;
           height: 2em;
         }
       }
   
       @keyframes left {
         0% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
         100% {
           top: 1.5em;
           right: 5em;
           width: 2em;
           height: 2em;
         }
       }
   
       @-webkit-keyframes diag {
         0% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
         100% {
           top: 4em;
           right: 4em;
           width: 2em;
           height: 2em;
         }
       }
   
       @-moz-keyframes diag {
         0% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
         100% {
           top: 4em;
           right: 4em;
           width: 2em;
           height: 2em;
         }
       }
   
       @-o-keyframes diag {
         0% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
         100% {
           top: 4em;
           right: 4em;
           width: 2em;
           height: 2em;
         }
       }
   
       @keyframes diag {
         0% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
         100% {
           top: 4em;
           right: 4em;
           width: 2em;
           height: 2em;
         }
       }
   
       @-webkit-keyframes down {
         0% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
         100% {
           top: 5em;
           right: 1.5em;
           width: 2em;
           height: 2em;
         }
       }
   
       @-moz-keyframes down {
         0% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
         100% {
           top: 5em;
           right: 1.5em;
           width: 2em;
           height: 2em;
         }
       }
   
       @-o-keyframes down {
         0% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
         100% {
           top: 5em;
           right: 1.5em;
           width: 2em;
           height: 2em;
         }
       }
   
       @keyframes down {
         0% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
         100% {
           top: 5em;
           right: 1.5em;
           width: 2em;
           height: 2em;
         }
       }
   
       .revLeft {
         -webkit-animation: revLeft .5s 1;
         -moz-animation: revLeft .5s 1;
         -o-animation: revLeft .5s 1;
         animation: revLeft .5s 1;
         -webkit-animation-fill-mode: forwards;
         -moz-animation-fill-mode:    forwards;
         -o-animation-fill-mode:      forwards;
         animation-fill-mode:        forwards;
       }
   
       .revDiag {
         -webkit-animation: revDiag .5s 1;
         -moz-animation: revDiag .5s 1;
         -o-animation: revDiag .5s 1;
         animation: revDiag .5s 1;
         -webkit-animation-fill-mode: forwards;
         -moz-animation-fill-mode:    forwards;
         -o-animation-fill-mode:      forwards;
         animation-fill-mode:        forwards;
       }
   
       .revDown {
         -webkit-animation: revDown .5s 1;
         -moz-animation: revDown .5s 1;
         -o-animation: revDown .5s 1;
         animation: revDown .5s 1;
         -webkit-animation-fill-mode: forwards;
         -moz-animation-fill-mode:    forwards;
         -o-animation-fill-mode:      forwards;
         animation-fill-mode:        forwards;
       }
   
       @-webkit-keyframes revLeft {
         0% {
           top: 1.5em;
           right: 5em;
           width: 2em;
           height: 2em;
         }
         100% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
       }
   
       @-moz-keyframes revLeft {
         0% {
           top: 1.5em;
           right: 5em;
           width: 2em;
           height: 2em;
         }
         100% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
       }
   
       @-o-keyframes revLeft {
         0% {
           top: 1.5em;
           right: 5em;
           width: 2em;
           height: 2em;
         }
         100% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
       }
   
       @keyframes revLeft {
         0% {
           top: 1.5em;
           right: 5em;
           width: 2em;
           height: 2em;
         }
         100% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
       }
   
       @-webkit-keyframes revDiag {
         0% {
           top: 4em;
           right: 4em;
           width: 2em;
           height: 2em;
         }
         100% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
       }
   
       @-moz-keyframes revDiag {
         0% {
           top: 4em;
           right: 4em;
           width: 2em;
           height: 2em;
         }
         100% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
       }
   
       @-o-keyframes revDiag {
         0% {
           top: 4em;
           right: 4em;
           width: 2em;
           height: 2em;
         }
         100% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
       }
   
       @keyframes revDiag {
         0% {
           top: 4em;
           right: 4em;
           width: 2em;
           height: 2em;
         }
         100% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
       }
   
       @-webkit-keyframes revDown {
         0% {
           top: 5em;
           right: 1.5em;
           width: 2em;
           height: 2em;
         }
         100% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
       }
   
       @-moz-keyframes revDown {
         0% {
           top: 5em;
           right: 1.5em;
           width: 2em;
           height: 2em;
         }
         100% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
       }
   
       @-o-keyframes revDown {
         0% {
           top: 5em;
           right: 1.5em;
           width: 2em;
           height: 2em;
         }
         100% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
       }
   
       @keyframes revDown {
         0% {
           top: 5em;
           right: 1.5em;
           width: 2em;
           height: 2em;
         }
         100% {
           top: 3em;
           right: 3em;
           width: 1em;
           height: 1em;
         }
       }
       ```
   
 * If you end up using this, you should download and host the images on your own
   site.
 *  Thread Starter [pranaman](https://wordpress.org/support/users/pranaman/)
 * (@pranaman)
 * [9 years ago](https://wordpress.org/support/topic/adding-element-with-html-css-and-js/#post-9082550)
 * thank you, I may recreate it and try it that way
 * I had a friend help, and we used a js-enabling plugin. it took him about an hour,
   and he got it going here: [http://admaticonsulting.com/home-animation2/](http://admaticonsulting.com/home-animation2/).

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Adding element with HTML, CSS and js’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 3 replies
 * 2 participants
 * Last reply from: [pranaman](https://wordpress.org/support/users/pranaman/)
 * Last activity: [9 years ago](https://wordpress.org/support/topic/adding-element-with-html-css-and-js/#post-9082550)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics