Changing CSS - Drupal

Hello, I'm a bit of a noob programming wise and would simply like to make the text size in the questions and  answers bigger.

I know an explanation for this exists at https://h5p.org/documentation/for-developers/visual-changes but I don't quite understand how to use the hook or what to write in my CSS file to just make the text size larger in general.

Any help in this matter would be much appreciated!

Thanks in advance.

thomasmars's picture

Show the work for what you have already tried and we may be able to point you in the correct direction.

Okay so I created a custom module that I put in drupal\sites\all\modules. In my .module file I have the following :

<?php

function h5pcss_h5p_styles_alter(&$styles, $libraries, $mode) {

  if (isset($libraries['H5P.MultiChoice']) && $libraries['H5P.MultiChoice']['majorVersion'] == '1'){

$styles[] = (object) array(

      

      'path' => 'C:\xampp\htdocs\drupal\sites\all\themes\h5pcss.css',

     

      'version' => '?ver=3'

    );

};

};

While inspecting the page with my quiz, I identified (maybe erroneously) the following CSS as what sets the text size:

html.h5p-iframe .h5p-content {

    font-size: 16px;

    line-height: 1.5em;

    width: 100%;

    height: auto;

}

So in my own CSS, I set font-size to 20px instead of 16px. This didn't change anything so now I'm stumped

Thanks in advance

 

thomasmars's picture

Depending on your setup your web server may not be able to load the .css file at that location. You can see in the network panel of your developer console in your browser whether the .css file is actually getting loaded. This is the first step, make sure that your styles are actually applied, then you can modify the css as much as you want.

A more robust solution, that will work on any system is using a drupal relative url, that points to your module, for instance drupal_get_path('module', 'h5pcss'). The code looks fine, make sure that your module is being loaded and the code is actually running. See https://www.drupal.org/docs/7/creating-custom-modules for more info on making drupal 7 modules.

Okay so I changed my .module file to use the drupal relative url and my module was already enabled. When I check the network panel, my .css is indeed not being loaded. What could be the cause of this?

thomasmars's picture

The most likely cause of this is that your script is not properly pointing to the correct path of your css file.
How does your code look now, where is your .css file located and what is the path to your module ?

You can debug this by printing out the path to your .css file in your php script, and then comparing it to your webserver path, they should match.

okay so my .module file now looks like this :

<?php

function h5pcss_h5p_styles_alter(&$styles, $libraries, $mode) {

  if (isset($libraries['H5P.MultiChoice']) && $libraries['H5P.MultiChoice']['majorVersion'] == '1'){

$styles[] = (object) array(

      

      'path' => drupal_get_path('module','h5pcss') . '/h5pcss.css',

  

     

      'version' => '?ver=3'

    );

};

};

And I tried putting the .css file in a few places without any success...

- C:\xampp\htdocs\drupal\sites\all\modules\h5pcss

- C:\xampp\htdocs\drupal\sites\all\modules\h5pcss\h5pcss

- C:\xampp\htdocs\drupal\sites\all\themes\h5pcss

The path to my module is C:\xampp\htdocs\drupal\sites\all\modules\h5pcss

 

thomasmars's picture

You should check that the file is exposed on your file server.
What does the path evaluate to ? ( 'path' => drupal_get_path('module','h5pcss') . '/h5pcss.css', ).
It probably evaluates to something like 
sites/all/modules/h5pcss/h5pcss.css, and /sites/all/modules/h5pcss/h5pcss.css?ver=3 when version is added. Make sure that you can access the file through your server, e.g. through http://localhost/sites/all/modules/h5pcss/h5pcss.css?test123, if this is not possible make sure that your file is in the correct place, and that your web server allows access to it.