Grow your CSS skills. Land your dream job.

WordPress Custom HTML/JS Ruler Bar

  • # July 9, 2013 at 3:51 pm

    I have been trying to add these Accessibility options to my WordPress blog.
    http://antijingoist.github.io/web-accessibility/
    I am using the Twenty Twelve stock theme.

    Opendyslexic seems to work when I replace the font-family
    under the ‘custom font’ heading, simply to font-family: “Opendyslexic”;

    But I couldn’t get this to happen on the Twenty Eleven theme.

    AAAAANNYyyway. Basically all I want is the ruler bar following cursor added.

    I have tried adding

    (script src=”http://zearful.info/lexis/wp-content/plugins/antijingoist/js/jquery.js” type=”text/javascript”>(/script> (script src=”http://zearful.info/lexis/wp-content/plugins/antijingoist/js/highlight-3.js” type=”text/javascript”>(/script>
    (script src=”http://zearful.info/lexis/wp-content/plugins/antijingoist/js/symbolpop.js” type=”text/javascript”>(/script>
    (script type=”text/javascript”>
    $(document).ready(function(){
    $(‘body’).mousemove(function(event) {
    $(“#ruler”).css(‘top’, event.pageY – 30);
    $(“#ruler”).css(‘width’, $(window).innerWidth());
    });
    });
    (/script>
    (SCRIPT LANGUAGE=”JavaScript”>

    and then (body)
    (div id=”ruler” style=”height: 1.4em; background-color: rgba(0,0,0,.1); position: absolute; top=-100px; z-index: -1″>(/div)
    (/body)

    Buuuut I don’t know where to. I’ve tried it with HTML adder plugin for sidebar.
    CSS & JS toolbox plugin. But I have no idea what i’m doing.

    I got it working on my tumblr. Apart from Opendyslexic font.

    I tried editing the Style.css but no idea what i’m doing.

    Maybe the solution could be to create something with JS toolbox.
    So that every post made (with RAW HTML plugin installed.) triggers the ruler function.

    This way it will only appear in posts? aaaah I have no idea.
    But i’ve been at this for hours and don’t know what to do.

    It was of course easy for my own html webpage and tumblr wasn’t toooo bad.

    Wordpress seems very very limited.

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".