How do I style the modal window using CSS?

For most Themes in the TwineSocial system, when a user clicks a post, the detail modal is opened allowing the user to see more context and information about the post. The main Hub is easily styled from the CSS pane in the TwineSocial Admin Console, but what about the modal window?


When you embed a TwineSocial Hub on a page, we open the modal inside the parent page, not inside the iframe. We do this in order to use as much room as possible when displaying the modal, providing a more seamless, immersive experience. Because of this, CSS located in the TwineSocial app cannot apply to the modal, since it is not opened in the same element. 

CSS targeted to your modal needs to be on your parent page. Generally, it does not mater where you place that. Just so long as it is somewhere in the page on which you have embedded our script you will be good to go. Now, when you open the modal, your CSS styling will apply. 


You may have noticed that when viewing your Hub using the "View my Hub" link in the Admin Console, CSS entered in the CSS pane applies to the modal. This is because there is no parent page for it to be opened in since both the page and the TwineSocial Hub are hosted at TwineSocial.com. Feel free to use this for testing, but be sure to transfer CSS for the modal to the parent page's CSS file or <style> section. 

Feedback and Knowledge Base