custom.css

Pierre

Hi!

I´ve been searching the forum for custom.css and all seem to say that the best way to see what code to put in the custom.css file to change a module is to open the index.html file in a browser and look at the code of the separate locations. However, when I do this, I can’t seem to see any specific class names except for the ones showing the region, and then a container class for each region. If I for example want to change the compliments text to bold I can´t do it without affecting all of the modules.

Can anybody explain how I should go about finding the specific classes for each module?

Thanks in advance!
Pierre

yo-less

@Pierre Take a look at the following code in the compliments.js file:

	wrapper.className = "thin xlarge bright";

Among other things, it tells the mirror to print the message in extra large letters.

You have two options:

You can change the extra large letter size for all modules
You can redefine the letter size for the compliments module

To change the extra large letter size for all modules, add the following code to your custom.css file:

.xlarge {
  font-size:  YOURFONTSIZE px;
}

Instead of YOURFONTSIZE, you pick something you like. This is a good option if it doesn’t break any of your other existing modules because they become harder to read or start changing their layout, because this way, even when you update your mirror, the CSS file info will remain the same.

The other option would be to change the code of the compliments.js file to, say:

	wrapper.className = "thin myXlarge bright";

Next, you would have to define this new style myXlarge in your custom.css file:

.myXlarge {
  font-size:  YOURFONTSIZE px;
}

This way, you wouldn’t affect any of the other modules but you would have to change the compliments.js file after every update of the mirror.

I’m not aware of any way to change global css styles (such as: “xlarge”) for only a specific module using the custom.css file. Does anyone else have any idea whether that can be done?

Pierre

Thanks for the thorough answer! I tried the second method although knowing the risk of it all disappearing when the next update. I´m clotting down all the changes in a txt-file so that I can change it back after the update.

Great explanation! Thanks!

yo-less

@Pierre Nice to know I could help you :)

strawberry 3.141

a proper solution would be to do your changes in the custom.css only, so you’ll not lose your modification by an update

in general you do the following rule

.MODULE_NAME .CLASS_TO_CHANGE {
    /*CSS RULE*/
}

.compliments .xlarge {
    font-weight: bold;
}

this will only affect your compliments module

ianperrin

@yo-less said in custom.css:

I’m not aware of any way to change global css styles (such as: “xlarge”) for only a specific module using the custom.css file. Does anyone else have any idea whether that can be done?

Each of the modules are wrapped in a div element with a class corresponding to the name you use to define the module in the config file e.g.

<div class="module compliments">
...
</div>

So to change the styles of a particular module, you can use the following in the custom.css file

.compliments .xlarge {
    font-size: 10pt;
}

ianperrin

Looks like @strawberry-3-141 beat me to the reply ;)

strawberry 3.141

@ianperrin maybe i was quicker, but I learned it out of your contribution to my module ;)

yo-less

@ianperrin Thanks for the clarification. I could swear I tried using “.compliments .xlarge” before posting as my own module css files use the same syntax and it looked like it didn’t work, but I’ve just tried it again and it’s working as it should :). Great to know.

MichMich

Totally off topic, but it’s so freaking awesome to see you guys discuss stuff I just made up on the fly … 😂