change css for facebook comments box - css

I've been trying to add a different background color to the facebook comments box on my site.
I've tried`'
and I've tried to add a which wraps the code. But nothing seems to work.
How do I change the background color of the comments box?

you may use the light theme and put the FBDIV inside another container..then change the background of container... of course you can't edit the css becouse the comment plugin loads inside an iframe... You can use FBML but it's deprecated.

Related

WordPress Custom Background design

I would like to know how to create a custom background.
There is currently an active site, that i am trying to figure out how i can do the same or similar
https://suscopts.org/
enter image description here
Well, I'm not sure if you want to know how to create such a background pattern or don't know how to set the background of a wordpress website.
This seems like a repeated background pattern. Searching for something like "seemless pattern" could help. This images are small and repeated, so you don't need to load a big background image.
In the CSS you can use 'background-image' and 'background-repeat' on the body element.
You can use right click in your browser to select inspector to inspect the website. You should find the element wich has the css set for the background image. Start with the html tag and work your way inside, followed by body, div id page, etc, what ever this page structure looks like. You then have the element you need to target in your css file to give it the background attribute. The CSS file of a wordpress site is found in the Themes folder and is called style.css
Hope this gives you a start.
If you want to clearify your question I am happy to give you a more detailed answer.

angular material default style/animation not working after custom theme

I recently have a problem with my application after I add/edit the theme.css file. Some of angular material style is not applied anymore such as position and animations and background color.
What I have done to the Theme.css file:
The original theme.css
After edit, trying to acheive different theme for different user.
After I have modified the theme, so now I can acheive that the app can change the color base on what class is defined in enviornment.ts file.
in app.component.html
however, problem come after.
all dialog/dropdown/datepicker/popup's background became transparent, So I define a class and force them to have a white background.
everything inside a dialog become abnormal, as picture shown below, all input/select has no border, and no material animation when click/active on the input field.
From the picture above, you will see the button has no color style even I have define them.
however, there is no problem if the input field is not in a dialog, you can see the style and animation is still applied as the picture shown below.
Anyone have experienced this? I have been trying to solve this problem for 4 days and still no clue about it.? I would be really thankful if someone could help me.
regard
This problem is because after we adding custom theme class, we have to configure the Overlaycontainer.
This link will help to solve this issue.
https://material.angular.io/guide/theming#multiple-themes

How to change background size/zoom in wordpress theme?

I have a webpage using a wordpress theme:
The problem is: can you see the white space between the lateral menu and the text? and the white space between the text and the right corner? I want to delete it, like making zoom to the important part of the webpage.
Anyone knows how can I do it? what file and with what vars of the wordpress template I need to play to change this part?
I think you might need to specify your WordPress theme. Can you?
Do you mean you want to get rid of the side navigation or the styling?
if its the side navigation that you do love to get rid of i suggest you get the secondary menu turn off and for the white spaces i suggest you might need to have a little custom css to play with.
for the side nav i suggest you try this additional css to get the white spaces off
.site-navigation li{border-top:0;}
.secondary-navigation{border-bottom:0}
or you can install other css plugins such as simple custom css, css hero,etc
hope that will helps

How to override styles in Iframe?

I am using the twitter follow us widget from https://twitter.com/about/resources/followbutton and I would like to change the color of the text. Right now the text is aqua blue which doesn't work well on my sites background.
Is there a way to override the styling inside the iframe? If so, how?
There's no way to modify the DOM or style of the content in an iframe. The best you can do is link to a different-styled iframe, as twitter offers both light and dark themes.
EDIT: That being said, there are several parameters in the <a> tag that can be used to customize the theme even further. Try modifying the data-button, data-text-color, and data-link-color parameters to your liking!

Applying a specific CSS to TinyMCE

I'm using content_css: and have a script in place that allows me to change the css applied to a TinyMCE component based on a CMS project code.
I found a problem when I have a site that has a colour set as the background and then white for the text.
The TinyMCE looked to start applying the css correctly but when it reached the text the background changed back to being white with black text, but it then goes on to apply some of the styles, this means that my hyperlinks (on this particular site) look to disappear as I have defined the colour as white.
Is there something I can change that will apply the correct background colour in the tinyMCE tool without affecting the actual outcome of the site's css?
To get the css to be applied to the tinyMCE editor, you need to make sure the body tag has a background and color value too, else it will not pull this through and instead use what looks to be a default style.

Resources