12 September 2014, 16:58

Hi there!

Is there anywhere that there is a list of the CSS that is customisable for page skins?

I found that the Coffee skin by Dirk Meyer has been a good skin to learn from, however, trying to find IDs and classes that can be customised for the skin via the Advanced tab under Edit skin is a bit difficult.

Thanks,

Teresa

15 September 2014, 7:31

Hi Teresa

Currently virtually all of CSS2 commands can be used for page skins via the advanced tab. There is some limitations as the css is passed through htmlpurifier to clean out potentially bad code.

There are some patches in review to improve what can be added https://reviews.mahara.org/#/q/status:open+project:mahara+branch:master+topic:css-whitelist,n,z

To see what can (potentially) be styled you can look at the theme/raw/static/style/style.css file as that has the bulk of page styles in it. You can also look at theme/raw/templates/skin/style.tpl to see what the basic styles the skin takes.

Hope that helps

Cheers

Robert

16 September 2014, 0:08

Hi Robert,

Excellent, thanks for that - will look at the CSS in the theme folders - I just wasn't sure where to start.

Cheers,

Teresa

16 September 2014, 11:39

Sorry to ask a second question about the Page Skins Custom CSS.

Is there a way of getting comments to 'stay' in the Custom CSS?

For example:

/* This makes the page heading background transparent*/
#top-wrapper {
background: transparent;
}

/* This makes the page footer background transparent*/
#footer-wrap {
background-color: transparent;
}

#footer {
background-color: transparent;
}

/* This will change the colour of the tabbed navigation in a collection*/
ul.colnav li a, ul.colnav li a:link, ul.colnav li a:visited, ul.colnav li a:active {
background:#A2F7FF;
color:#9F0DF6
}

Thanks,

Teresa

16 September 2014, 12:45

Currently I believe the html purifier strips out the css comments.

I'll add it to this bug report about css issues with the skin advanced tab form.

Cheers

Robert

16 September 2014, 15:02

Thanks Robert,

Cheers,
Teresa

02 October 2014, 8:12

Hi Teresa,

what did you find useful? Would you have some skins to share at a later time?

02 October 2014, 15:09

Hi Dirk,

I found your Default Coffee beans skin really useful, I was able to look at it and understand what colours were affected by which settings applied.

For example, I was initially getting really mixed up between page background and skin background.

And your Custom CSS helped me to understand how to change the page header and footer to transparent (or coloured), as well as other settings.

I am developing some documentation, as well as 'learning' skins for our students, so they can learn how to create and use skins for their own pages.

I will be sharing the skins I create publicly. :-D