change colors of buttons

Submitted by MeesterGijs on Thu, 09/13/2018 - 12:35
MeesterGijs's picture
Forums: 
Content creation

I was able to change all colors in fill the gaps, but now I'm adding drag and drop and I can't seem to change the colors of buttons,border, hover, etc. This is the code I used. Could I get some help, please?

/* H5P drag and drop */

.h5p-drag-text [aria-dropeffect] {

    font-family: H5PDroidSans, sans-serif;

    font-size: 1em;

    background-color: #fff;

    border-radius: 0.25em;

    border: 1px solid #3f3f3f !important;

    padding: 0.1875em 1em 0.1875em 0.5em;

    text-overflow: ellipsis;

    overflow: hidden;

    white-space: nowrap;

    width: 6em;

}

 

.h5p-drag-text [aria-grapped] {

    border: .1em solid #88deb4 !important;

    overflow: hidden;

    background: #88deb4 !important;

}

.h5p-drag-text [aria-grapped]:hover {

    background: #88deb4 !important;

}

 

.h5p-joubelui-button {

    background: #88deb4 !important;

}

.h5p-joubelui-button:hover {

    background: #88deb4 !important;

}

 

Summary: 
changing colors
thomasmars's picture

thomasmars

Thu, 09/20/2018 - 10:48

Hi,

Drag and Drop does not have the .h5p-drag-text class anywhere as far as I can see.
Go to the Drag and drop example, inspect the elements you want to change and make sure you have the correct classes for them: https://h5p.org/drag-and-drop#example=711.

MeesterGijs's picture

MeesterGijs

Wed, 10/03/2018 - 09:26

Sorry, I meant drag the words.

thomasmars's picture

thomasmars

Wed, 10/03/2018 - 13:29

The first rule seems valid at least.
How are you applying the styles ? Make sure they are actually added to the page, within the H5P iFrame.(you can see this by looking in the page sources for the iFrame through your browser's developer tools).
Do you have a publicly available page where we can see this to help you further ?

MeesterGijs's picture

MeesterGijs

Wed, 10/03/2018 - 14:56

Here you go:

https://metmeestergijs.nl/quiz/betrekkelijke-voornaamwoorden-lvl2/

thomasmars's picture

thomasmars

Thu, 10/04/2018 - 10:47

Hi,

Your css seems to be applied just fine. You just have to make sure your rules are as specific or more specific than the already applied rules. So when you want to override the hover effect of the grabbed draggable there is an existing rule for
".h5p-drag-text [aria-grabbed]:not(.ui-state-disabled):hover", so you have to use the same rule or a more specific one to override it. You can read more about css specificity at: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Best regards, Thomas

MeesterGijs's picture

MeesterGijs

Thu, 10/04/2018 - 11:13

This goes way over my head. Could you help me implement the created code?

thomasmars's picture

thomasmars

Fri, 10/05/2018 - 08:57

Hi,
I can not implement the css for you, you must try to implement them yourself.
A good place to get started with learning css and specificity in css is: https://css-tricks.com/specifics-on-css-specificity/
If you are unable to implement some of the rules you can get help in a general css/web/programming forum, but you must show what you have tried yourself first and where you are failing.

For instance if it is the ".h5p-drag-text [aria-grapped]:hover" selector you're having trouble with, you can change it to a more specific selector, like ".h5p-drag-text [aria-grabbed]:not(.ui-state-disabled):hover", as I noted  in my previous comment.