Need help with final CSS overrides - flashcards

Submitted by Mai Britt Hjems... on Mon, 12/17/2018 - 21:11
Forums: 
Developers

Hi there,

I got CSS styles working for my H5P Flashcard setup with your H5PMods plugin ;)

Only a few questions remain now;
1) I'd like to remove/hide the light colored content boarder. But I can't figure out the class to call? Border: none; does not seem to work.

2) I have changed my background color of the content area. However, the bg on the previous and next still has the original blue bg color. If I change the h5p-flashcard-overlay class, it also affects the overlay that is used over the image in the h5p-clue area. Can't figure out what to call, to only affect the overlay in the previous and next area?

3) I would like to remove the frame and shadow that is around the h5p-clue area image. Can't figure out what class to call?

4) Is it possible to make part of the image text bold. Or to add a heading over the image text?

See visual example in the attachment!

Can anyone assist or advice me on how to solve these last remaining things? Your help will be much appreciated. Thanks!

Attachments: 
Plain text icon custom-h5p.txt
Image icon Untitled-1_0_0.jpg
Summary: 
Searching for Flashcard classes
Content types: 
Flashcards

Mai Britt Hjems...

Mon, 12/17/2018 - 21:57

In case others are looking for the answer to this;
I managed to remove the content border and bottom block of the h5p-actions in the h5p.css file directly, and NOT as an override in my custom.css

.h5p-content {
  position: relative;
  /*background: #fefefe;
  border: 1px solid #EEE;*/
  border-bottom: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

Still searching for solutions to the other few things. Please help...anyone?

Mai Britt Hjems...

Mon, 12/17/2018 - 22:59

And I also found the answer to my questin 2)


Question:
I have changed my background color of the content area. However, the bg on the previous and next still has the original blue bg color. If I change the h5p-flashcard-overlay class, it also affects the overlay that is used over the image in the h5p-clue area. Can't figure out what to call, to only affect the overlay in the previous and next area?

Answer:
.h5p-flashcards .h5p-card > .h5p-flashcard-overlay{
        background-color: #3d3d3d !important;
}
Place in your custom css with h5pmods!