How do I add custom CSS to my project?

Hi,

I'm currently trying to add CSS from Material Design Lite to my project.

I have no idea if it's even possible with construct 2 to style buttons, list objects etc. with something like this. As I have no experience with this, I would like to know what approach would be best to do this.

Any help is greatly appreciated!

Thanks

Yes, it's possible, there are quite a few posts and tutorials, try googling.

Here is one:

https://www.scirra.com/tutorials/1283/c ... -textboxes

dop2000 ,

Thanks a lot for your answer!

I've tried replacing the dots in the file with "#" and when I use the id of that in my project it almost works. The problem is that for example a floating action button lacks the color and ripple effect which should also be inside the css file.

The file is also very large and a lot more complex so it is difficult for me to recreate what is shown in the tutorial.

It would be cool if someone could show me how to get the material.css from this file fully working in Construct 2.

Thanks again!

I don't quite have the time time to comb through am 11,000+ line CSS file, but I will save you some time by saying that you can style Constructs HTML elements by simply targeting their element followed by their type - rather than a class or id.

For example:

Textbox:

input[type="text"]{ /*Your CSS*/}

Button:

input[type="button"]{ /*Your CSS*/}

And so on.

If you require more granular control, you can style the elements by inlining the styles through editing the exports .html file

EDIT//

Having read your latest post - I would simply suggest editing the exported HTML file to include the material CSS as an external stylesheet and adding the classes and extra attributes outlined in the tutorial to the existing form elements (being careful not to change the ids, as I assume that's how Construct knows how to tie in event logic)

Thanks Elliott for your reply ,

I'd like to try editing the html file to include the material css as an external stylesheet as you described. What would be the way to do that though?

I have no idea where I would find the existing form elements and what I would have to change.

Can someone give me a more detailed explanation on how that would be done?

Any help is greatly appreciated! Thanks

If you export the project as HTML5, you can edit the buttons by editing the index.html in a text editor like Brackets or VS Code

You can also use the Text object's "Set web font" action to load your css file dynamically. It's a bit of a hack but it works. Otherwise, this plugin will most likely be better and easier.

However, adding CSS classes to form controls is not as easy. I guess you could hack them in with some "Execute Javascript" from the browser object. However, I believe a custom made behavior would serve you better.

Thanks for all the help so far!

Maybe the error lies in the css that i tried to edit. So here is a small segment of what I changed (I only changed the .mdl-button--fab to #mdl-button--fab)

#mdl-button--fab {
  border-radius: 50%;
  font-size: 24px;
  height: 56px;
  margin: auto;
  min-width: 56px;
  width: 56px;
  padding: 0;
  overflow: hidden;
  background: rgba(158,158,158, 0.20);
  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);
  position: relative;
  line-height: normal; }
  .mdl-button--fab .material-icons {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-12px, -12px);
            transform: translate(-12px, -12px);
    line-height: 24px;
    width: 24px; }
  .mdl-button--fab.mdl-button--mini-fab {
    height: 40px;
    min-width: 40px;
    width: 40px; }
  .mdl-button--fab .mdl-button__ripple-container {
    border-radius: 50%;
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black); }
  .mdl-button--fab:active {
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    background-color: rgba(158,158,158, 0.40); }
  .mdl-button--fab:focus:not(:active) {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
    background-color: rgba(158,158,158, 0.40); }
  .mdl-button--fab.mdl-button--colored {
    background: rgb(255,64,129);
    color: rgb(255,255,255); }
    .mdl-button--fab.mdl-button--colored:hover {
      background-color: rgb(255,64,129); }
    .mdl-button--fab.mdl-button--colored:focus:not(:active) {
      background-color: rgb(255,64,129); }
    .mdl-button--fab.mdl-button--colored:active {
      background-color: rgb(255,64,129); }
    .mdl-button--fab.mdl-button--colored .mdl-ripple {
      background: rgb(255,255,255); }[/code:2w0wjpdz]
When I load the edited material.css in my project and set the id of a button to "mdl-button--fab" it changes the form of the button to a circle as it should but it
doesn't have the colour that it should have. Also all the ripple effects that should come with the css do not appear.
The file from Material Design contains some more files such as a material.js or a material.min.js file which I don't know the use of. Maybe those need to be implemented aswell?
Editing the exported .html file hasn't worked yet either. I can't seem to find the buttons from my project in that file.
@Magistross How would the "Execute Javascript" method work? Can you explain to me how you would do that?
Thanks again for all the answers!

First, give your button an Id if you didn't before. If you don't have a Browser object, add it also. Then, using the Browser object's "Execute Javascript", execute this little snippet :

"document.getElementById('exampleId').className = ""mdl-button"";"[/code:132djd9a]

Magistross ,

Thanks a lot! Using "Execute Javascript" works flawlessly!