Custom CSS for edit-page in Wiki

Custom CSS for edit-page in Wiki

by Phillip Mertens -
Number of replies: 4

Hi,

I want to change the CSS for all wikis on my site but nothing else.

This Post helped me change the style of the view.php tab.

This CSS works for one single page:
.cmid-3547 h3 {font-size: 1.8em;}

This works for all wikis:
#page-mod-wiki-view h3 {font-size: 1.8em;}

But it only affects the veiw.php-tab. When I edit a page it looks different. How can I change the edit.php-tab as well?

I tried this:
#page-mod-wiki-view, #page-mod-wiki-edit h3 {font-size: 1.8em;}

Unfortunately this changed the menu and other elements as well.

Average of ratings: -
In reply to Phillip Mertens

Re: Custom CSS for edit-page in Wiki

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers

Is it just the h3 size you want to change?

What version of Moodle are you using?

Average of ratings: -
In reply to Jon Bolton

Re: Custom CSS for edit-page in Wiki

by Phillip Mertens -
I use Moodle 3.11.12 and the Boost Theme.

I don't like how the Wiki looks in Boost and want it to look more like Wikipedia.
So these are all my changes so far:

.cmid-3547 h3 {
    font-weight: 400;
    font-size: 1.8em;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #b2b2b2;
    padding-bottom: 3px;
}

.cmid-3547 .wiki_headingtitle h3 {
    font-weight: normal;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.cmid-3547 h4 {
    font-weight: 300;
    font-size: 1.5em;
    margin-bottom: 0.25em;
    border-bottom: 1px solid #b2b2b2;
    padding-bottom: 3px;
}

.cmid-3547 h5 {
    font-weight: 600;
    font-size: 1.2em;
    margin-bottom: 0.25em;
}

.cmid-3547 img {
    max-width: 100%;
    height: auto;
}

.cmid-3547 code {
    font-size: 100%;
}
Average of ratings: -
In reply to Phillip Mertens

Re: Custom CSS for edit-page in Wiki

by Jon Bolton -
Picture of Particularly helpful Moodlers Picture of Testers
If you inspect the page, you will see html code similar to

body id="page-mod-wiki-edit" class=" etc

You need to replace the id with a #
and the class with a .

so the selector is 

#page-mod-wiki-edit for the edit page
and #page-mod-wiki-view for the view page

any changes to CSS will affect everything on that page so you need to be more specific.

You have specified a particular wiki, .cmid-3547 - so changes will only affect that one wiki and not all wikis on your Moodle.

but .cmid-3547 h3 will affect all h3 tags on the page.

If you only want to target the elements on the edit page, eg. h3 tags, then use

#page-mod-wiki-edit.cmid-3547 #region-main h3 {
Average of ratings: Useful (1)
In reply to Jon Bolton

Re: Custom CSS for edit-page in Wiki

by Phillip Mertens -
Thank a lot. I found the mistake in my original code.

WRONG:

#page-mod-wiki-view, #page-mod-wiki-edit h3 {font-size: 1.8em;}

Correct:
#page-mod-wiki-view h3, #page-mod-wiki-edit h3 {font-size: 1.8em;}

That's why it was styling all elements on the page.

Here is my complete Custom CSS for the Wiki Activity:
https://github.com/margomius/moodle-wiki-custom-css
Average of ratings: Useful (1)