Customize CSS for Follow Button

P.S. I was also wondering if the the update for showing media on the widget version will be released soon. ?? Thanks.

Below is the custom css I would like to use for the Follow button.
display:inline-block;
padding:6px 12px;
margin:5px;
font-size: 11px;
font-weight: 600;
line-height:1.428571429;
text-align:center;
white-space:nowrap;
vertical-align:middle;
cursor:pointer;
border:1px solid transparent;
border-radius:4px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none
background-color: #fff;
border-color: #ccc;
color: #333;
width: 150px;

I also wanted to add a border around the box with the tweets with this CSS code but it isn’t working:
div.rotatingtweet {
padding-left: 10px;
padding-right: 10px;
border:2px solid black;
}

I downloaded the development version and I also am using the shortcode method and it works properly except it wont show the images for some reason still.
I includes this:
show_media =’1′
Below is the code I use:

[rotatingtweets screen_name=’atsunamatsui’ tweet_count =’10’ show_media =’1′ links_in_new_window =’1′ show_follow =’1′ show_meta_screen_name =’0′ show_meta_via =’0′ large_follow_button =’1′ no_show_count =’0′ include_rts =’1′ show_meta_reply_retweet_favorite =’1′]

The media is showing up now. I just need help adding border around the box with the tweets and customizing the follow twitter button.
I got the border around the box to work but I want there to be some padding between each tweet.

Thanks

• This reply was modified 8 years, 4 months ago by crazyonepiece182.

If I can’t make customization to the follow button, can I at least change the button color to black?

Hi there.

There are two different problems here.

1. Changing the current button means changing the CSS in an iframe created by Twitter (via some JavaScript) – and that isn’t easily possible. You can read more about changing CSS in an iframe here.

Currently the only real solution to this would either be:

1. to switch off the Twitter JavaScript (which I could probably add a switch for – since it already switches off for people who have ‘do not track’ enabled) and write your own – or
2. change Rotating Tweets to include its own Twitter button that popped open the relevant Twitter window and was style-able in the same way as the rest of the plug-in

2. Changing the border round all the tweets is pretty straightforward. Something like:

#content #main .rotatingtweets {
	border: solid thick #007acc;
}

should do it. If that doesn’t work, you might need to make your CSS selector more ‘specific’. You can read about CSS specificity here.

• This reply was modified 8 years, 4 months ago by Martin Tod.
• This reply was modified 8 years, 4 months ago by Martin Tod.