Personalized CSS

Resolved sbazaars
(@sbazaars)

4 years, 8 months ago

Hi, there is any method to personalized the layout of the widget (Legacy) with CSS? I have investigated on the page and have seen that there are more class but all external to website telegram.org (exactly: https://telegram.org/css/widget-frame.css?45) so when i try to personalized this class seems that i can’t and the layout won’t change. So is a simple problem of “cascating sheet” or we can’t modified these class with the simple “custom CSS” section of WordPress? Thank you.

The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

Manzoor Wani
(@manzoorwanijk)

4 years, 8 months ago
Hi,
The widget is displayed in an iframe, that is why your website styles don’t work. We have a filter to add styles into the iframe via a WP/PHP filter. Here is an example to make the body background color red.
```
add_filter( 'wptelegram_widget_post_injected_styles', 'wptelegram_legacy_widget_styles', 10, 1 );
function wptelegram_legacy_widget_styles( $styles ) {
	// Add the custom styles here
	return $styles . '
	    body {
	    	background-color: red;
	    }
	';
}
```
Thread Starter sbazaars
(@sbazaars)

4 years, 8 months ago

Thank you very much it work 🙂

Manzoor Wani
(@manzoorwanijk)

4 years, 8 months ago

Great! You are welcome.

You may write a review.

Thread Starter sbazaars
(@sbazaars)

4 years, 3 months ago

Hi it’s possible to personalize also the Ajax Widget CSS? if yes how i can do this?

Michiel
(@michiel)

4 years ago

Hi! This is a great plugin!
The above code does not work with the Ajax Widget.
What should I do to make that work?
Many thanks!

Plugin Author Irshad Ahmad
(@irshadahmad21)

4 years ago

For ajax widget, you can use

wptelegram_widget_ajax_widget_injected_styles
in place of
wptelegram_widget_post_injected_styles
Michiel
(@michiel)

4 years ago
Thank you for getting back to me!
I tried the following but it seems not to work, is there something else I should change?

MANY thanks!!!
```
add_filter( 'wptelegram_widget_ajax_widget_injected_styles', 'wptelegram_legacy_widget_styles', 10, 1 );
function wptelegram_legacy_widget_styles( $styles ) {
	// Add the custom styles here
	return $styles . '
	    body {
	    	background-color: #000000;
	    }
	';
}
```
Plugin Author Irshad Ahmad
(@irshadahmad21)

4 years ago

That’s correct and it should work. May be some existing style there is overriding yours. Try adding !important to the value.

Michiel
(@michiel)

4 years ago

Bingo! That works!!

Thank you!