CSS Changes

Submitted by Miki on Wed, 05/31/2017 - 18:22
Miki's picture
Forums: 
Content creation

Hello Guys,


Got a question for updating/changing CSS.

I am using wordpress website and H5P plugin with all current libraries.

I read tutorial for updating CSS but I haven't tried it because I tried this way:

 

I made Interactive Course on h5p.org,

downloaded it,

changed the file extension from .h5p to .zip,

extracted that zip file.

found .css files containing rules for button color, progress bar color and question feedback font color(this is what I want to change)

made the changes,

than I selected all files previously extracted and packed them back to .zip

changed .zip back to .h5p

Uploaded that .h5p file to my wordpress site,

Upload was sucessful but no changes are visible :(, still default colors for button, progressbar etc are showing.

 

Can you please help, is it possible to do it this way? Did I missed something?

I need several color variations for several interactive courses, I figured this would work.

 

Let me know if you have any ideas?

Cheers,

Miki

 

 

tomaj's picture

tomaj

Thu, 06/01/2017 - 10:42

Hi Miki,

The reason why you can't see the changes, has to do with versioning. Only one version of a content type would be saved. If you turn on developer mode, uploaded ,h5p-files would overwrite the old ones of the same version.

That said. This is not a good approach, because you will not be able to update a Content Type (and get bugfixes), without losing your changes.

Using the php hook will enable you to on the fly add css-files to the Content Type. And this will not break when you install a upgrade. So I really recommend you use this approach.

- Tom

Bonus protip: If you assosiate the .h5p file extension with your zip program, you will be able to open .h5p files directly in it, without renaming it to .zip.

Miki's picture

Miki

Thu, 06/01/2017 - 12:42

So if I understood, when I turn on developer mode and upload my h5p file with custome changes it will overwrite plugins default css and I will get my changes on the website? But next time when I upload a file with diffrent css changes it will overwrite that one?

Reason why I am asking and trying to do this is because I want to have several color schemes for buttons and progress bar for different courses.

Thanks for the tip! :)

tomaj's picture

tomaj

Thu, 06/01/2017 - 14:05

Yea, it will always overwrite, if you have developer mode enabled.

Be aware that the .h5p file, is just a format for "transportation". When accessing content, it will use a unpacked common version of the library, and it will look up the content.json, from a database table, instead of the file.

- Tom

Miki's picture

Miki

Thu, 06/01/2017 - 14:11

Ok to make sure I understood, to have a several interactive courses with different color scheme I would have to create several custom.css files and include them in wordpress on separated pages each coresponding to desired interactive course. Is this correct?

I am trying to add custom css now.

Cheers,

 

Miki's picture

Miki

Thu, 06/01/2017 - 14:26

I was able to add custom CSS and change colors by using instructions from the link you gave me earlier.

It looks good. Now, I want to have several color schemes,

example:
page 1 - will have interactive courses with orange as main color on this page.
page 2 - same but, main color is blue
page 3 - main color green
etc...

How can I acheive this?
Maybe a css plugin in wordpess that allows custom css for post,page etc.

tomaj's picture

tomaj

Fri, 06/02/2017 - 07:51

Hi Miki,

I've never seen anyone do what you are trying to do here. So it's a bit of unbroken ground.

I belive that the content id, is represented in the dom.

You can use that as part of your css selector! Like this:

[data-content-id="21180"] .h5p-button {
  background-color: orange;
}

- Tom

Attachments: 
Image icon cpdom.png
Miki's picture

Miki

Fri, 06/02/2017 - 12:43

Good Idea!


Yes I am always doing something unordinary :)
Like how I managed to bug out interactive course by doing something no-one did as Falcon said. Which produced a bug.

Thanks Tom for all your help!

Miki

tomaj's picture

tomaj

Tue, 06/06/2017 - 08:59

I'm happy to be of help!

- Tom

Miki's picture

Miki

Fri, 06/02/2017 - 12:54

Since you have nothing from Thank you :), only satisfaction I guess and that is important!
But I own you a beer ! or 10 .

Cheers,
Miki

tomaj's picture

tomaj

Tue, 06/06/2017 - 09:01

No worries! :)

And you can buy me a beer at H5P Con, if you are planning to come to Tromsø in September.

- Tom

Miki's picture

Miki

Tue, 06/06/2017 - 11:47

Everything is possible !

Miki's picture

Miki

Wed, 06/14/2017 - 13:16

Hi,

I relalized that there is a problem with CSS selector!

I did everything you suggested and I was able to customize colors for several interactive courses. The only problem remains BUTTON color.

It somehow grabs latest css ID and its value and uses it across all other interactive courses.

All other elements are ok except the button color.

Do you know what problem might be?

 

Here is example of last entry I did, it uses that color for other buttons and overrides their content id and value. (please see attached image)

[data-content-id="5"] .h5peditor .ui-dialog .h5p-joubelui-button, .h5peditor .h5p-joubelui-button, .h5p-joubelui-button

{
    background: #226872 none repeat scroll 0 0;
}

Thanks!

[url=https://ibb.co/mttwF5][img]https://thumb.ibb.co/mttwF5/css.jpg[/img][/url]

Attachments: 
Image icon css.PNG
tomaj's picture

tomaj

Thu, 06/15/2017 - 07:22

It's the commas that are in there, that are creating multiple (3) css selectors.

[data-content-id="5"] .h5peditor .ui-dialog .h5p-joubelui-button, 
.h5peditor .h5p-joubelui-button, 
.h5p-joubelui-button {
    background: #226872 none repeat scroll 0 0;
}

- Tom

Miki's picture

Miki

Thu, 06/15/2017 - 10:44

Hi Tomaj thank you for all your help!

May i bother you to show me the solution? I am not best with css, it has bean a long time.

What I need, is how to avoid those multiple overwrites of a css.
How to correctly write down a css for a button.
Should I just create separate rules so I avoid doing commas?

Best regards,
Miki

tomaj's picture

tomaj

Fri, 06/16/2017 - 07:18

Sure, this should be fine:

[data-content-id="5"] .h5p-joubelui-button {
    background-color: #226872;
}
Miki's picture

Miki

Fri, 06/16/2017 - 10:58

Thanks Tomaj, I did that alerady, it worked!

 

Now I don't now how to put multiple atribute selectors so it works! If that is possible at all?

To avoid copying css rules for each data content id i wanted to create something like this:
[data-content-id="2"][data-content-id="7"][data-content-id="8"][data-content-id="9"] .h5p-joubelui-button
{
    background: #1e6b8a none repeat scroll 0 0;
}

I tried several ways but it was a no go.

Cheers,

tomaj's picture

tomaj

Mon, 06/19/2017 - 06:36

Use comma to seperate the "whole" rules:

[data-content-id="2"] .h5p-joubelui-button,
[data-content-id="7"] .h5p-joubelui-button,
[data-content-id="8"] .h5p-joubelui-button,
[data-content-id="9"] .h5p-joubelui-button 
{
    background: #1e6b8a none repeat scroll 0 0;
}
Miki's picture

Miki

Mon, 06/19/2017 - 10:26

Perfect!
I shell test this out.

Best regards,
Miki