Style-Scripts

From OpenFOAMWiki

I'm not very good with CSS. If somebody wants to improve the look of the Wiki by providing a CSS: send it to me and I'll have a look.

Emphasis should be on

  • Clear readability (for instance dark backgrounds are problematic with formulas)
  • Usage of the Bootstrap-conventions
  • Compactness
Bgschaid (talk)21:21, 27 October 2014

Can the text colours be upped a bit on the black ink? I do agree that high contrast text is a pain for the eyes, but too little contrast is also bad :(

Wyldckat (talk)13:59, 8 November 2014

You mean something like

p {
  color: rgb(50,50,50);
}

instead of the current

p {
  color: rgb(119,119,119);
}

To try it out you can use the developer tools built into Firefox. In the "Style"-tab (sorry. My Firefox speaks German so I've got to guess the translation) on top of the list of the included style-sheets there is a "New". After pressing that there is a text-pane where one can add CSS (just copy/paste the above)

I like the idea behind the original CSS to keep the main text light because that way emphasis is more visible. But your opinion is valued. Is 50 enough? I'd still like the text to be lighter

Bgschaid (talk)15:20, 8 November 2014

I wouldn't say 50, but 80 seems to the right amount.

 
p {
  color: rgb(80,80,80);
}

Although I couldn't figure out in which CSS the paragraphs were defined... probably was looking at the code too fast :(

By the way, where can we edit our personal CSS styles? All I could find were the generic ones:

  • Chameleon (default | Preview)
  • Chick (Preview)
  • MySkin (Preview)
  • Nostalgia (Preview)
  • Simple (Preview)
  • Standard (Preview)
  • bootstrapskin (Preview)

or did I interpret the news incorrectly or even dreamed about reading them?

Wyldckat (talk)15:34, 8 November 2014

No. There is an additional CSS (custom.css I think) that I'll have to add. Directly modifying the CSS you "see" is not a good idea as they are generated on the server and/or are part of the bootstrap framework (which is updated through new package-system of the Wiki-software. So changes would be lost the next time around). I'll implement that change (adding darker fonts) on monday

Thanks for pointing out that the old-school skins (Chick, Nostalgia etc) are enabled. I disabled them on the test installation because the new front-page doesn't look good with them (the old design was one big table. Because of this it didn't "reformat" on mobile devices. The new design is just one long page on non-Bootstrap-Skins). I'll disable these on monday too

The thing for trying other CSS I was referring to in the news was the bookmarklet in http://bootswatch.com/help/. You install that in the bookmark bar of the browser. When you click it you get a drop-down in the upper right corner that lets you select a pre CSS-style. The problem is that this only changes the current page. So I mainly used it to select the current style. Having chameleon with a different CSS is a) on one hand easy: I've only got to add two files. But this changes it for everyone b) in reality hard: if I want the user to choose there must be a second instance of chameleon that the user can choose (which only differs in these two files) and that (the second instance) doesn't play well with the "package manager". Also is the name of the skin hardcoded into the PHP-files of it (this is why I can't solve this with symbolic-link-trickery). My approach was "if somebody comes up with a better color-scheme or disgust about the current one is expressed by a number of people I'll think about 'splicing' the skin"

Another way to override the Wiki-CSS is https://addons.mozilla.org/de/firefox/addon/stylish/#id=2108

Bgschaid (talk)17:34, 8 November 2014

I should have looked for the news page again :(

How about having a dummy point on the template for allowing a user-side chosen Javascript to be placed there automatically, which would change the CSS on the client's side only? The Javascript could be something like as follows, which is something I have as a compressed form as a bookmark:

function() {
    var newSS, styles = '* { background: #E9E9E9 ! important; color: #000000 !important } :link, :link * { color: #3333EE !important } :visited, :visited * { color: #551A8B !important }';
    if (document.createStyleSheet) {
        document.createStyleSheet("javascript:'" + styles + "'");
    } else {
        newSS = document.createElement('link');
        newSS.rel = 'stylesheet';
        newSS.href = 'data:text/css,' + escape(styles);
        document.getElementsByTagName("head")[0].appendChild(newSS);
    }
})();

But I guess the template doesn't allow for this kind of hacking :(

Anyway, if and when I get annoyed with the colouring, I'll share a bookmark here for quickly changing only the text colours, since it's hard to please everyone ;)

Wyldckat (talk)18:28, 8 November 2014

I guess if the user wants this kind of hacking he will use something like the GreaseMonkey-extension anyway. That way he doesn't have to rely on the goodwill of the server administrator.

Bgschaid (talk)16:25, 11 November 2014
 
 

The slighly darker value has now been added for the main text

Bgschaid (talk)16:27, 11 November 2014

Sorry for the late reply, but lists weren't affected by this change :(

For example, see this section: FAQ/General#Where_is_FoamX.3F

Wyldckat (talk)13:21, 30 November 2014

I'll have a look

Bgschaid (talk)16:13, 30 November 2014

Hi Bernhard,

OK, lists are still in a different colour:

  • Here is an example with a different colour...
  1. And another example

But now I bring more details on another issue, where the first line of code blocks are too much to the left, as shown here: Contrib_blockMeshDG#Download

The reason for this is because the css entry ".mw-body ul" from the stylesheet file from here:

http://openfoamwiki.net/load.php?debug=false&lang=en&modules=ext.bootstrap.styles&only=styles&skin=chameleon&*

has this:

text-indent: -2ex;

it's looks to me that this indentation can be removed, since it's doesn't affect much... oh, it's because of the Main Page...

Curiously enough, ".mw-body ol" has this same indent parameter set to "0".

And it seems that these are also the entries that need the colour update. If I'm not mistaken, we can fix all of these issues if you change this:

.mw-body ol {
    text-indent: 0;
}
.mw-body ul {
    list-style: outside none none;
    text-indent: -2ex;
}

To this:

.mw-body ol {
    text-indent: 0;
    color: #505050;
}
.mw-body ul {
    list-style: outside none none;
    text-indent: 0;
    color: #505050;
}

.panel-body ul {
    text-indent: -2ex;
}

Best regards,
Bruno

Wyldckat (talk)02:54, 4 April 2015