Jump to content

Changing Twitter Timeline background for dark theme

Recommended Posts


I'm using the default "Twitter Timeline" block on my board. I have both bright and dark styles installed into my forums. The issue I have is that when using the dark theme, the background of this block is still white and way too bright, which is quite uncomfortable for the users.


Is it possible to set: light color skin of the "Twitter Timeline" for the bright board theme and similarly dark for a dark the one?


Any help will be greatly appreciated, 


Edited by angle4cor
Link to comment
Share on other sites

The twitter timeline is in an iframe - the background colour on it is dictated by the URL retrieving the timeline (based on the 'Light'/'Dark' setting on the block), you'd have to manipulate the URL to modify the 'theme' parameter dependent on the theme being used.


  • configure block to use 'Light'
  • Theme 1 - light - all OK
  • Theme 2 - dark - manipulate the code to change 'theme' parameter from 'light' to 'dark'

Probably achievable by creating a new block (if using Pages) based on the existing Twitter timeline block and then modifying the content to allow you edit the template:

<div class='ipsPad_half'>
	<a class="twitter-timeline" data-lang="{$locale}" data-height="500" {{if $style}}data-theme="{$style}"{{endif}} {{if $color}}data-link-color="{$color}"{{endif}} href="https://twitter.com/{$username}?ref_src=twsrc%5Etfw">Tweets by {$username}</a> 		<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

It's the "{{if $style}}data-theme="{$style}"{{endif}}" entry there that would need something around it to check the theme in use and make the modification based on that.

Edited by Nathan Explosion
Link to comment
Share on other sites

22 minutes ago, angle4cor said:

I am not using Pages though.

Then you won't be able to do the above via a custom block.

Found another option though...you might be able to to do this at the theme template level itself by editing the following template:

core -> front -> widgets -> twitter

Change the following

{{if $style}}data-theme="{$style}"{{endif}}

to either:




Not sure how this will behave with regards to caching though.

Link to comment
Share on other sites

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...