Ewoud

Override widget css

11 posts in this topic

Hi there,

On my testsite I installed your twitter module and most of it works great. The only problem is that the image and the name of the twitter username on top of the module are not looking that great. The image is too big and the text has the wrong size and font.

Looking at the css I see that the css is used from a widget at: http://widgets.twimg.com/j/2/widget.css.

Is there a way to override that? My url is http://vngv1.graphiqs.nl/.

Also, sometimes the feed is empty. Any ideas what causes that? I see a competitor has the same issue at the same time. So maybe the problem lays with twitter itself?

Thanks,

Ewoud

Share this post


Link to post
Share on other sites

Hi Ewoud.

I'm sorry for my late.

But today i visit your site and see that the module is still normal.

In truth, you can override CSS of the module as we did with some parameters that allow you set color of text and background.

You can see the module class and reference how we did it to do what you want.

Thanks

Share this post


Link to post
Share on other sites

Hi tronghm,

Thanks for your reply

But today i visit your site and see that the module is still normal.
I did some changes in the Template css that make it look ok. I installed a new version of the template, so you can now see what I mean.
In truth, you can override CSS of the module as we did with some parameters that allow you set color of text and background.

You can see the module class and reference how we did it to do what you want.

Where did you do that? In the module parameters I see the possibility to change a couple of colours in 'Appearance'. But how can I change the size of the avatar and font? And what module classes are avialable?

Also, in IE8 there is a problem with the layout of the tweets and avatar. They are really close together. Is it possible to do something about that? It is only in IE8 and I know Microsoft is stopping support for IE8 within a year but untill then people are still using it.

Thanks.

Share this post


Link to post
Share on other sites

Hi please try add this code


$document = JFactory::getDocument();
$document->addStyleDeclaration('
.twtr-avatar{
width: 50px !important;
height: 50px !important;
}
.twtr-img{
width: 48px !important;
height: 48px !important;
}
.twtr-img img{
width: 48px !important;
height: 48px !important;
}');

to file /mod_bt_twitterfeeds/tmpl/default.php after line

defined( '_JEXEC' ) or die( 'Restricted access' );

and change value to what you want but notice real size of avatar image is 48px * 48px

Share this post


Link to post
Share on other sites

That helped a lot but I was actually referring to the profile avatar in the top blue part of the module. But I found out that adding the following code helped me:


}
.twtr-widget-profile img.twtr-profile-img{
width: 36px !important;
height: 36px !important;

Then I thought that I could also override the following code in the same file to get the font of the text next to the profile avatar a bit bigger but that doesn't work unfortunately. Any suggestions for that?


{
.twtr-widget h3 {
font-size: 18px!important;

Share this post


Link to post
Share on other sites

HI.

As i saw in your last message, there is problem with your code, some brackets { are wrong. Your code should be


.twtr-widget-profile img.twtr-profile-img{
width: 36px !important;
height: 36px !important;
}
.twtr-widget h3 {
font-size: 18px !important;
}

Share this post


Link to post
Share on other sites

Unfortunately it doesn't work. I was able to see that for a split second but I cannot check it anymore at this moment because the feed is empty again. Is this caused by Twitter or the module?

The code I have now is as follows:


.twtr-widget h3 {
font-size: 18px !important;
}
.twtr-avatar{
width: 50px !important;
height: 50px !important;
}
.twtr-img{
width: 48px !important;
height: 48px !important;
}
.twtr-img img{
width: 40px !important;
height: 40px !important;
}
.twtr-widget-profile img.twtr-profile-img{
width: 36px !important;
height: 36px !important;
}');

Share this post


Link to post
Share on other sites

Most of the time the feed is not empty, only now and then it is for a couple of minutes.

The code for the font isn't working because if I check the element, it shows the code striked through.

Share this post


Link to post
Share on other sites

Hi.

Please add this id "#twtr-widget-1" or your class suffix to the code like this. Can apply to css that doesn't affect

1st solution:

#twtr-widget-1 .twtr-widget h3 {
font-size: 18px !important;
}
...

2nd solution:

I will give you full code in using class suffix case to avoid error


$document->addStyleDeclaration('
.bt-twitter'. $moduleclass_sfx . ' .twtr-widget h3 {
font-size: 18px !important;
}
.bt-twitter'. $moduleclass_sfx . ' .twtr-avatar{
width: 50px !important;
height: 50px !important;
}
.bt-twitter'. $moduleclass_sfx . ' .twtr-img{
width: 48px !important;
height: 48px !important;
}
.bt-twitter'. $moduleclass_sfx . ' .twtr-img img{
width: 48px !important;
height: 48px !important;
}');

?>

Share this post


Link to post
Share on other sites

Hi,

I am not sure how and what I should do with your first solution because I do not understand what you are saying, but I have implemented your second solution and added a few more lines to also resize the profile avatar and to change the font of the name on top (VNG Verzekeringen).


$document = JFactory::getDocument();
$document->addStyleDeclaration('
.bt-twitter'. $moduleclass_sfx . ' .twtr-widget h3 {
font-size: 18px !important;
font-family: Tahoma, Arial, Helvetica;
}
.bt-twitter'. $moduleclass_sfx . ' .twtr-widget-profile img.twtr-profile-img{
width: 38px !important;
height: 38px !important;
}
.bt-twitter'. $moduleclass_sfx . ' .twtr-avatar{
width: 50px !important;
height: 50px !important;
}
.bt-twitter'. $moduleclass_sfx . ' .twtr-img{
width: 36px !important;
height: 36px !important;
}
.bt-twitter'. $moduleclass_sfx . ' .twtr-img img{
width: 36px !important;
height: 36px !important;
}');
?>

So I am almost there but I like to change 2 more things.

1. Below VNG Verzekeringen you see the twittername VNG_V. I want to change the font of that name as well.

2. I would like to have a bigger margin between the profile avatar and the words VNG Verzekeringen and VNG_V. Those words need to go to the right a little bit.

Thanks.

Share this post


Link to post
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now