Change toolbar size

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?

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

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.

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.

/*
	Accessibility styles
	[email protected]
*/
.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 80×80
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.

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.