WordPress.org

Forums

WP Accessibility
[resolved] Change toolbar size (7 posts)

  1. Jamie.
    Member
    Posted 1 year ago #

    Hi,

    I'm currently creating a wordpress site for a local charity organisation which will be used frequently by people with disabilities, as such accessibility features are a must. Whilst this plugin is good, I wondered if it would be possible to enlarge the toolbar icons for resizing text and such. I tried downloading the sprite.png, resizing and re-uploading, but that hasn't helped too much.

    Any help would be appreciated. Thanks.
    Website

    http://wordpress.org/plugins/wp-accessibility/

  2. Jamie.
    Member
    Posted 1 year ago #

    I've managed to resize the box the image is in now, and created some new icons to display, though the first image repeats in all 3 boxes?

  3. Joe Dolson
    Member
    Plugin Author

    Posted 1 year ago #

    Doesn't look like you're using WP Accessibility anymore, so I guess there's nothing I can say for this. Best of luck.

  4. Jamie.
    Member
    Posted 1 year ago #

    I am. Perhaps you caught me at a time where I either uninstalled and reinstalled to reset it for the moment, since I had to speak to my client, or when I was browsing for alternative solutions. (only thing that came close was ATbar and that's pretty broken at least on my site). Regardless of whether or not you'l still help me, I'll be keeping the plugin.

    Many Thanks.

  5. Joe Dolson
    Member
    Plugin Author

    Posted 1 year ago #

    I see it again now - it must have been a timing thing. It looks, right now, like you've reset the styles back to the default; is that right?

    Do you still have the styles you'd modified it to as of yesterday - it would be easier for me to give advice based on those.

    You're on the right track - you need to change the size of the icons and edit the CSS to increase the size of the toolbar, but I'm not sure what would be causing the image repeat effect that you described.

  6. Jamie.
    Member
    Posted 1 year ago #

    /*
    	Accessibility styles
    	chris@inathought.com
    */
    .focusable:focus {
    	outline: none !important;
    }
    
    .has-focus {
    	background: yellow;
    }
    
    fieldset fieldset {
    	margin: 0 0 16px 0;
    }
    
    fieldset fieldset legend {
    	border-bottom: none !important;
    	font-size: inherit;
    	margin: 0 !important;
    }
    
    fieldset p {
    	font-size: inherit !important;
    	line-height: 1.3 !important;
    }
    
    .a11y-toolbar {
    	position: fixed;
    	z-index: 99999;
    	top: 43%;
    	left: 0;
    }
    
    .a11y-toolbar ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    /* 	box-shadow: 0 0 3px #888; */
    	border-top-right-radius: 4px;
    	border-bottom-right-radius: 4px;
    }
    
    .a11y-toolbar ul li {
    	display: block;
    	height: 80px;
    	width: 80px;
    }
    
    .a11y-toolbar .icon {
    	display: inline-block;
    	background: url('../img/sprite.png') transparent no-repeat;
    	height: 80px;
    	width: 80px;
    	margin-top: 3px;
    }
    
    .a11y-toolbar .icon-adjust {
    	background-position: 0 0;
    }
    
    .a11y-toolbar .icon-tint {
    	background-position: 0 -16px;
    }
    
    .a11y-toolbar .icon-font {
    	background-position: 0 -32px;
    }
    
    .a11y-toolbar .icon-white.icon-adjust {
    	background-position: -16px -16px;
    }
    
    .a11y-toolbar .icon-white.icon-tint {
    	background-position: -16px 0;
    }
    
    .a11y-toolbar .icon-white.icon-font {
    	background-position: -16px -32px;
    }
    
    .a11y-toolbar ul li a {
    	display: block;
    	height: 80px;
    	width: 80px;
    	background: #e2e2e2;
    	text-align: center;
    	line-height: 24px;
    	border-top: 1px solid #f5f5f5;
    	border-bottom: 1px solid #d2d2d2;
    }
    
    .a11y-toolbar ul li a:hover {
    	background: #0066cc;
    }
    
    .a11y-toolbar ul li a.active {
    	background: #0066cc;
    }
    
    .a11y-toolbar ul li:first-child a {
    	border-top-right-radius: 4px;
    }
    
    .a11y-toolbar ul li:last-child a {
    	border-bottom-right-radius: 4px;
    }
    
    .a11y-toolbar .offscreen, .a11y_stylesheet_path {
    	position: absolute; left: -999em;
    }
    
    .desaturated {
    	filter: grayscale(100%)!important;
    	-webkit-filter: grayscale(100%)!important;
    	-webkit-filter: grayscale(1)!important;
    	-moz-filter: grayscale(100%)!important;
    	-ms-filter: grayscale(100%)!important;
    	-o-filter: grayscale(100%)!important;
    	filter: gray!important;
    }
    
    .fontsize, .fontsize h1, .fontsize h2, .fontsize  h3, .fontsize h4 , .fontsize h5, .fontsize  h6, .fontsize  p, .fontsize  li, .fontsize  label, .fontsize  input, .fontsize  select, .fontsize  textarea, .fontsize legend, .fontsize  code, .fontsize  pre , .fontsize dd, .fontsize dt, .fontsize blockquote  {
    	font-size: 125% !important; line-height: 1.4;
    }
    
    .fontsize li li { font-size: 110% !important; }
    
     .fontsize .a11y-toolbar ul li {
    	line-height: 20px !important;
    	font-size: 75% !important;
    }
    
     .fontsize .a11y-toolbar ul li a {
    	line-height: 24px !important;
    }

    as you can see, all I've changed in the code is all the size 24 to 24's to 80x80
    Then just uploaded the new image to replace the old ones which can be found here.

    sorry for being a nuisance, I have very little coding knowledge.

    I unfortunately won't be able to upload this stylesheet for you to view until tomorrow.

  7. Joe Dolson
    Member
    Plugin Author

    Posted 1 year ago #

    You'll need to adjust the background-position numbers proportionately with your increase in size for the icons. The background-position indicates where a given image will be shown.

    This may take a bit of tweaking, but it shouldn't take too long, even using trial and error.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • WP Accessibility
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic