CSS // Can you use an external style sheet to format a HTML block?

CSS // Can you use an external style sheet to format a HTML block?

by Thomas Hanley -
Number of replies: 5
Hi,

I have had a look through the Moodle docs and through this Blocks forum but I can't find the answer to this question.

I have placed a custom HTML block on the front page of my site (containing one line of text and an image which is a link to an external website).

I would like to have some control of layout/font/appearance so I decided to use a little bit of CSS. I had to resort to writing the CSS inline within the HTML which is not ideal.

Is there a css file somewhere within Moodle's site configuration files that controls the appearance of the HTML block specifically? Or is their a CSS file for *all* blocks. Or should I just accept that for a custom HTML block I have to write the CSS inline?

Any feedback would be appreciated.

~thomas

Average of ratings: -
In reply to Thomas Hanley

Re: CSS // Can you use an external style sheet to format a HTML block?

by Ann Adamcik -
Blocks in general are styled with the .sideblock selector in your theme's stylesheet(s). The html block can be styled by adding styles to a .block_html selector. Added to your theme stylesheet, the styles will apply to all html blocks on your site.
Average of ratings: -
In reply to Thomas Hanley

Re: CSS // Can you use an external style sheet to format a HTML block?

by Itamar Tzadok -
If you want to control the appearance of only specific content within a block you can always put the content in a div and assign to it your own custom class that you can add to the theme's css. If for some reason you have to do it inline, instead of writing the styles inline you can import your custom css file into the block so that you make any changes in that file and not in the block. smile
Average of ratings: -
In reply to Itamar Tzadok

Re: CSS // Can you use an external style sheet to format a HTML block?

by Thomas Hanley -
Hi Ann and Itamar,

Thank you both for your very helpful responses. I now have a better understanding of how Moodle works. smile

I have many happy hours of CSS dabbling ahead of me smile

All the best

~thomas



Average of ratings: -
In reply to Thomas Hanley

Re: CSS // Can you use an external style sheet to format a HTML block?

by Ratana Lim -
you can use the import method to specify the external style sheet.

example:

$this->content->text .= <<<INCLUDE_STYLE
<style type="text/css">
<!--
@import url("http://example.edu/gs/example.css");
-->
</style>
INCLUDE_STYLE;


Average of ratings: -
In reply to Ratana Lim

Re: CSS // Can you use an external style sheet to format a HTML block?

by Richard Clay -

Thanks, this helped me out 2 years on when creating a custom block.

Adding the code allowed me to create a specific stylesheet to add styling to the block.

Average of ratings: -