Color Themes and Background Schemes

[Hendrik du Toit]

From what I can gather from the documentation, it seems there are only three colors available in some form of combination: Black, white and blue?

For corporate identities I need more.  Am I missing something or is there a work around.  Please help.

[Iwan Vosloo]

Hi Hendrik.

We use bootstrap https://getbootstrap.com/ to do the styling. Bootstrap
can be compiled using sass
(https://getbootstrap.com/docs/5.0/customize/sass/). When you do this
you can customise it more by assigning colors to variables. What all you
can customise here I'm not familiar with. (This is something we have not
yet spent time on.)

Ideally we should be able to let you compile your own bootstrap version
from sass, and be able to set any bootstrap variable via some
abstraction provided by Reahl.

What you can do now is to supply your own CSS as is briefly alluded to
at the bottom of https://www.reahl.org/docs/5.0/tutorial/styling.d.html.

It also depends what you want to do: do you want the same site to be
able to be themed differently depending on certain conditions (such as
the domain name used), or do you just want to customise it once. There
are different ways to achieve each of these goals.

I am writing this hastily, but will elaborate more if need be.

Perhaps we should have a quick offline discussion about your
requirements and see how we can help depending on your requirements?

Regards
-Iwan

> --
> You received this message because you are subscribed to the Google
> Groups "Reahl discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to reahl-discus...@googlegroups.com
> <mailto:reahl-discus...@googlegroups.com>.
> To view this discussion on the web, visit
> https://groups.google.com/d/msgid/reahl-discuss/42c538da-d5e9-4d7c-9ece-8606adc23f0en%40googlegroups.com
> <https://groups.google.com/d/msgid/reahl-discuss/42c538da-d5e9-4d7c-9ece-8606adc23f0en%40googlegroups.com?utm_medium=email&utm_source=footer>.


--

Reahl, the Python only web framework / www.reahl.org

[Iwan Vosloo]

Hi Hendrik,

We have created a little example of how to customise styling with
bootstrap by compiling it from scss sources. Here's a short
writeup...(we plan to add a proper howto later):

To customise a bootstrap, the best is to compile it with sass from
source and change one of its many variables. Here's what all you can
change in this way:
https://getbootstrap.com/docs/4.6/getting-started/theming/

You can of course also add your own CSS on top of that too.

Once you can get a customised bootstrap compiled, you need to link it
into your site, and there are two ways to do that, the simplest of which
is referred to here: https://www.reahl.org/docs/5.0/tutorial/styling.d.html

(The other is to use your own Library -
https://www.reahl.org/docs/5.0/devmanual/ownwidget.d.html#shipping-javascript-and-css-code)

To compile bootstrap, you can follow these steps:

(This is a slightly modified set of instructions from
https://getbootstrap.com/docs/4.6/getting-started/build-tools/#sass )

1) Install node (on ubuntu 20.04 this is:
"sudo snap install --classic node")
(Sorry, I don't have a Windows machine so I don't know how to install
node on windows)
2) Then, git clone bootstrap's repository inside of your project (in a
directory called bootstrap at the top level):
git clone https://github.com/twbs/bootstrap.git bootstrap
3) Go to the directory in which you cloned bootstrap (cd bootstrap)
4) Do a git checkout v4.5.2, and a git switch v4.5.2-custom
5) Still inside "bootstrap" directory, do npm install

(Modified instructions from
https://dev.to/chrissiemhrk/how-to-setup-sass-in-your-project-2bo1 :)

6) Create a subdirectory directory in your project next to bootstrap,
called scss
7) create a file scss/custom.scss with the following contents:
(everything before the @import is just example customisations)
----------------------------------------------
$body-bg: #000;
$body-color: #a08a78;


$theme-colors: (
"primary": #0074d9,
"danger": #ff4136,
"custom-color": #900
);

$enable-rounded: false;
$enable-shadows: true;

@import "../bootstrap/scss/bootstrap";
---------------------------------------------
8) from the root of your project, run:
npm init
npm install node-sass
9) edit the file created (package.json) and a script underneath "test":
"sass": "node-sass scss/ -o css/ --recursive"
10) Run "npm run sass" - it will output the resultant css in css/custom.css


Now you have your customised CSS. The next step is to use it from your
Reahl app.

If you have an HTML5Page subclass, then you can follow the steps on
https://www.reahl.org/docs/5.0/tutorial/styling.d.html to just add the
static directory for the css, and add a link to it in the header. (Just
use the correct filename and directory name from the instructions above.)

If you don't have your own HTML5Page subclass, you can create a Library
as per
https://www.reahl.org/docs/5.0/devmanual/ownwidget.d.html#shipping-javascript-and-css-code
:


In your web.config.py, create a new library by adding this:
---------------------------------------------
from reahl.web.libraries import Library


class CompiledBootstrap(Library):
def __init__(self):
super().__init__('custom')
self.egg_name = 'bootstrapsass' # << NB, your project here
self.shipped_in_directory = 'css'
self.files = [
'custom.css'
]

web.frontend_libraries.add(CompiledBootstrap())
---------------------------------------------

(See also
https://www.reahl.org/docs/5.0/web/libraries.d.html?#reahl.web.libraries.LibraryIndex.add)


If you need more variation than what bootstrap provides via variables,
you can add your own CSS (or scss) to that custom.scss file too.


It is also possible to create a Library that changes which stylesheet it
includes at runtime based on, for example headers, the URL or any info
derived from the request if you need to.

I hope this can get you going!

Regards
Iwan

--

[Iwan Vosloo]

Hi Hendrik,

We have created proper examples now. This will be part of the 5.1
release, but for now you can access them from github:

A starting example for customising CSS is described here:
https://github.com/reahl/reahl/blob/master/reahl-doc/doc/howto/customisingcss.rst

With the relevant code:
https://github.com/reahl/reahl/tree/master/reahl-doc/reahl/doc/examples/howtos/bootstrapsass


We added another example for multihomed sites:
https://github.com/reahl/reahl/blob/master/reahl-doc/doc/howto/multihomed.rst

With its code here:
https://github.com/reahl/reahl/tree/master/reahl-doc/reahl/doc/examples/howtos/bootstrapsassmultihomed

-i


--