Changing CSS - Drupal
Submitted by Goldeedore on Thu, 07/20/2017 - 15:27
Forums:
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
Mon, 07/24/2017 - 10:57
Permalink
Show the work for what you
Show the work for what you have already tried and we may be able to point you in the correct direction.
Goldeedore
Mon, 07/24/2017 - 14:43
Permalink
Okay so I created a custom
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
Tue, 07/25/2017 - 10:27
Permalink
Depending on your setup your
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.
Goldeedore
Wed, 07/26/2017 - 11:07
Permalink
Okay so I changed my .module
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
Wed, 07/26/2017 - 13:23
Permalink
The most likely cause of this
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.
Goldeedore
Wed, 07/26/2017 - 17:10
Permalink
okay so my .module file now
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
Thu, 07/27/2017 - 10:18
Permalink
You should check that the
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.