We Keep Coding

can't set backgroundImage in react?

Hey Guys I'm trying to build my portfolio site , I want to make the main page of the portfolio have a back ground image and when I navigate to other parts of the portfolio the background is just color , I handled setting the backgroundColor successfully but can't do the backgrounImage correctly .
Here is my code.
componentDidMount(){
this.props.changePage("Main Page");
document.body.style.backgroundImage="url('background.jpg')";
}
that's the code inside the main page component but there seems to be something wrong , is it a problem with the syntax itself or the approach itself is wrong ?
EDIT 1!!
that's the code I used for backgroundColor and it's working why isn't it working with the backgroundImage .
componentDidMount(){
this.props.changePage("About Me");
document.body.style.backgroundColor='black';
}

Set the className of element where you want to display your image equal to .bgImage.In CSS file(named as App.css) write down the code as given below that targets .bgImage and sets its background to the URL or Path provided and import the CSS file in your main file using import './App.css';
.bgImage {
background: url(./media/hero.jpg) no-repeat center center;
//some other properties
}

Your background image is in the wrong directory for create-react-app. Move ./src/background.jpg to ./public/background.jpg.

toggle button to resize div

I would like to create a clickable icon in which once i click on it i will be able to change the size of a div to make it full size for the browser. This is what i have for html and wanted to know what possible ways to handle this functionality.
<div>
<a (click)="onResize($event)" class="icon-resize"></a>
</div>
the html that i would like to expand is:
<div id="editview">
<iframe id="editFrame"></ifram>
</div>
public onResize(event:any) {
event.target.innerWidth;
}

If you want screen full Windows with ifram you can use anmation with angular.
try Watch :
https://coursetro.com/posts/code/63/Angular-4-Animation-Tutorial
with animtation triger you can apply css width:100% for full screen

How to add a text logo in a React app?

I can't figure out how to change the logo.
The code that the current logo sits in looks like this.
var brand = (
<div className={classes.logo}>
<p className={classes.logoLink}>
Material Dashboard
</p>
</div>
)
Here's what I'm not understanding though, the logo itself says something different than "Material Dashboard" so I'm not sure where that's coming from.
All I want to do is change the logo. Any help would be greatly appreciated.

classes.logo is probably a css class (inspect with chrome browser to see the value of the class attribute, for example xxx). Go to the css file and find the line with .xxx { ... and you should be able to change the logo

How to make custom TinyMCE button in Wordpress change icon on hover

I created TinyMCE plugin for Wordpress editor to insert Youtube videos. Everything works fine except this button has no hover state (like the default buttons have). I explored the code and found a difference - default buttons are spans with background-image sprite, and my custom button is a plain image. There's no option in TinyMCE addButton() function to insert a span, only image:
ed.addButton('p2_youtube_button', {
title : 'Insert Youtube video',
cmd : 'mceYoutube',
image: url + '/shortcode-youtube.png'
});
Is there a way to solve this little problem?
To illustrate how it looks (the red Youtube icon should be gray and turn red on hover):
http://d.pr/aszC

I noticed that the Crayon Syntax Highlighter plugin has managed to do this. It is a bit of code to read through, I found the tinyMCE specific part in /wp-content/plugins/crayon-syntax-highlighter/util/tag-editor/crayon_tinymce.js . I hope this helps.
The style which causes the highlight is here:
.wp_themeSkin span.mce_crayon_tinymce {
background: url(images/crayon_tinymce.png);
}
.wp_themeSkin .mceButtonEnabled:hover span.mce_crayon_tinymce,
.wp_themeSkin .mceButtonActive span.mce_crayon_tinymce {
background-position: -20px 0;
}
The image uses the same size as the other TinyMCE icons:

There are additional parameters you can pass to the addButton method that give you some options for how you skin your button.
If you remove the image property and replace it with icon, you can use a font-ified icon instead. This is a multi-step process, which starts with actually building your icon font. Here's a good tutorial that walks you through the process. The tutorial author recommends IcoMoon as a reliable way to build your icon fonts. There are probably others.
The way that I use is similar to #feonix83's approach, using CSS instead. Following the way WordPress itself does it, you lay your icons out in a sprite sheet, with the "hover" state 20px above the "off" state. If you don't know what I'm talking about, take a look at the defalt WordPress icon sprite sheet: wp-includes/images/wpicons.png
If you remove the image property altogether, TinyMCE just puts a span of class mceIcon inside the button anchor block. It's quite easy then to style that element and use the background-image referencing your sprite sheet. You use background-position to set the offset for the appropriate icon.
There's one additional trick that you can use to help you target only your buttons. You can add a class property to the addButton call and pass any number of classes. You will need to manually specify a specific class that can be used to target that button in particular, but you can also pass in an additional class that can be used to style all your buttons at once, since they won't automatically inherit the styles that WordPress uses.
class: "my-buttons my-specific-button"
Here's the CSS that I use. Note that this approach works best when each button has its own individual sprite sheet, as opposed to the WordPress approach that loads all the icons at once, though that approach has some performance benefits that are not to be ignored:
.mceButtonEnabled:hover span.mceIcon.my-buttons { background-position: 0 0; }
span.mceIcon.my-buttons.my-specific-button { background: url( images/my_button.png ) no-repeat 0 -20px; }

Facebook Like Button

Is there a way to change the text next to the Facebook Like button to white, instead of the "#808080" color it is set to?

The only thing you can change (on the text) is the colorscheme. either 'light' or 'dark'.
You can change the background color of the iframe. But not the text in CSS style... unfortunately.

The class of the Like button is like_link stat_elem as_link, but I'm not seeing any #808080 deceleration. I'll post some working code once I find it.