Support » Plugin: WP Telegram Widget and Join Link » Personalized CSS

  • Resolved sbazaars

    (@sbazaars)


    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)
  • 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)

    Thank you very much it work 🙂

    Great! You are welcome.

    You may write a review.

    Thread Starter sbazaars

    (@sbazaars)

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

    Michiel

    (@michiel)

    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)

    For ajax widget, you can use

    wptelegram_widget_ajax_widget_injected_styles
    in place of
    wptelegram_widget_post_injected_styles

    Michiel

    (@michiel)

    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)

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

    Michiel

    (@michiel)

    Bingo! That works!!

    Thank you!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Personalized CSS’ is closed to new replies.