Hi there,
You can change the styling of the button with some CSS.
To add custom CSS, firstly set up a child theme or activate a custom CSS plugin. If you have Jetpack installed then you can enable its custom CSS module.
Enter the following snippet in either the editor for your CSS plugin or the style.css file of your child theme in order to change the background colour and font size of the button:
#infinite-handle span {
background: #333;
font-size: 13px;
}
Change the value of #333 to any HEX code of your choice. If you’d like to experiment with different colours, try a few Google searches to get a list of HEX codes and their corresponding values. Here’s an example of a site that I’ve used before:
http://www.color-hex.com/
You can also increase/decrease the value of font-size to your liking.
If you let me know more specifics around the changes you’re trying to make to the button, I’ll be happy to guide you further.
Thread Starter
ssiu
(@ssiu)
I tried that exact code into both the “Simple Custom CSS” plugin from Jetpack, and the child theme and the box looks exactly the same! (White lettering on a black background)
I also tried inspecting the element in my Google Chrome browser and it said this
#infinite-handle span button, #infinite-handle span button:focus, #infinite-handle span button:hover {
display: inline;
position: static;
padding: 0;
margin: 0;
border: none;
line-height: inherit;
background: 0 0;
color: inherit;
cursor: inherit;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
}
It says color: inherit, but I’m not sure what it’s inheriting from!
Hi there,
You’ll need to change the values in the custom CSS in order to make a difference to the way the box looks.
For example, if you’d like a purple background to the box and larger text, then you could replace #333 with #663399 and increase 13px to 16px:
#infinite-handle span {
background: #663399;
font-size: 16px;
}
Can you give that another try and let me know how you get on?
Thanks!
Thread Starter
ssiu
(@ssiu)
Thanks so much for responding!
So I put that code
#infinite-handle span {
background: #663399;
font-size: 16px;
}
in both the child theme and the Custom CSS plugin, but the page still looks the same!
I’m currently seeing the following in Jetpack’s CSS file:
#infinite-handle span {
background: #333;
border-radius: 1px;
color: #eee;
cursor: pointer;
font-size: 13px;
padding: 6px 16px;
}
Did you previously add the above to the Jetpack editor? If so, please remove it now via Appearance > Edit CSS as it’s overriding your new custom CSS.
In addition, it’s only necessary to add custom CSS to either your child theme or your plugin’s editor. Try to keep all of your custom CSS in one place only in order to prevent any confusion in the future.
Thread Starter
ssiu
(@ssiu)
When I go to Appearance > Edit CSS, all the stylesheet there says is `/*
Welcome to Custom CSS!
To learn how this works, see http://wp.me/PEmnE-Bt
*/`
I uploaded the screenshot of it here: http://openstephanie.com/wp-content/uploads/2016/07/Screen-Shot-2016-07-01-at-11.38.35-AM.png
I also realized that what I was plugging all my CSS into was a plugin called Simple Custom CSS that I forgot I had installed! Thanks for the tip, I will move everything just to the child theme!
Thread Starter
ssiu
(@ssiu)
I actually plugged the original CSS into the Jetpack page you told me to go to (Appearance > Edit CSS) and it worked! It must have written over whatever was in the Jetpack CSS! Thank you so so SO much for all your help!
Yay, I’m glad you’ve got the CSS working! If you’d like any extra guidance on customising your button or other aspects of your theme then feel free to start a new thread. We’ll be happy to help from there.
