customizing appearance

Hey Bijee,

Thanks for the comment!

You can add any style options to your existing CSS files to trick out my “base settings” all you’d like. The simplest way is to modify the existing CSS for the plugin at /plugins/better-click-to-tweet/assets/css/styles.css

Keep in mind that those files are overwritten on a plugin upgrade, so keep a copy of whatever changes you make to save your changes again after an upgrade.

To force compatibility across multiple themes, I found that I had to include several !important declarations throughout that file. For that reason, it is not as simple to override the CSS from another location (such as your theme or child theme’s style.css file), but it is possible there, too.

If you initiate a change in your theme’s style.css that doesn’t seem to be working, the first step is to remove the corresponding !important declaration in my plugin’s css file.

Here, if it’s helpful, is a list of div and link classes that you can play with to change the appearance of your bctt boxes, given the above-referenced limitations:

.bctt-click-to-tweet
.bctt-click-to-tweet:after
.bctt-ctt-text a
.bctt-ctt-text a:hover
a.bctt-ctt-btn
.bctt-ctt-btn:hover

Does that help?

Also, I am working on a way to make my plugin more customizable for geeks (like myself) without sacrificing the simplicity of the plugin for users who are not interested in that sort of customizability. Stay tuned!

can you help me a bit? I am trying to change the text color and to align the text and the button to the left in line with the rest of the post.

I was able to remove the border using .bctt-click-to-tweet { border: none; }
but then i put in .bctt-click-to-tweet .bctt-ctt-text a { color: #d2a76a; } to try to change the color and that didnt work.

Can you help me with putting together the proper code. I am a learning geek, lol…

Great news, Bijee. (and the reason I took so long to respond)

Update the plugin to version 4.1!

Now customizing the appearance of the box is as simple as copying the entire file at /wp-content/plugins/better-click-to-tweet/assets/css/styles.css to the root of your /uploads directory, and changing the file name to bcttstyle.css

From there, any of the changes made to that file will show up on the front page. Plus, future updates to the plugin won’t affect the style.

Let me know if I can help further there.

I am not sure what all of that means… well I know how to copy the file folder but not sure what you mean by the root of your uploads.

I found a great article on updating the original click to tweet button and i just replaced the link classes you gave me about to format my own and IT WORKED!! I did it through custom CSS, so that should do the trick right??

Oh, sorry for doing that annoying developer thing where they talk over your head. My bad.

Yes, if you’ve got it working, that’s great. I’ll clarify for the sake of anyone else reading along, and in case you are interested in learning more.

The root of the /uploads folder means to put the individual file in the /uploads folder, but not in one of the folders in that folder. (normally the uploads folder is arranged by year and then month, with folders for each. I diagrammed it out below if that helps. ignore if it doesn’t.)

You need to have a file named bcttstyle.css in that folder. Copying and pasting the content from this link gives you a starting point for that file so that you don’t have to start totally from scratch.

Here’s the structure mapped out.
uploads
-bcttstyle.css
-2015
–01
–02
–03-
–04
-2014
–01
–02
–03
–04
–etc

In the next few days (if I can find the time) I plan to write a tutorial to explain this over at my site.

Thanks again for using my plugin. If you’ve found it useful, a good rating and/or a donation goes a long way!