new UI theme
188 views
Skip to first unread message
jonas.we...@jda.com
Nov 25, 2019, 3:44:54 PM11/25/19
to SimpleSAMLphp
Hi,
I really like the new UI theme ('usenewui' => true).
What is the easiest way to customer colors and to modify some basic information, e.g. change "SimpleSAMLphp" on the top?
a) Can I easily modify the existing default one?
b) Do I have to copy it as a module? If so which part to I have to copy, so that I get an exact copy of the new UI them, which I then can modidy?
Cheers Jonas
Tim van Dijen
Nov 26, 2019, 3:50:17 AM11/26/19
to SimpleSAMLphp
Hi Jonas,
You can create a custom theme module as per instructions:
Within your module, you can override the main templates.. You only need to copy the ones you want to override.
The best approach here is to start and override the base template to include some custom CSS.. Perhaps override header/footer templates if you want to incorporate some corporate style...
Then, if you really want to do some fancy stuff, you could consider adding a theme controller class.. This part, unfortunately, hasn't been properly documented yet, but it can be used to add some more dynamics to your theme (i.e. different backgrounds based on the season, or on some configuration settings).. I can get you an example if this is interesting for you..
If you have any further questions or need help, let me know!
- Tim
Op maandag 25 november 2019 21:44:54 UTC+1 schreef jonas.we...@jda.com:
Jonas Weismueller
Nov 27, 2019, 5:31:40 AM11/27/19
to simple...@googlegroups.com
Hi Tim,
do I have to set 'usenewui' => true if I want to write a twig theme?
Or I just pointing to the new theme as 'theme.use' => my_module:my_theme' enough?
If you another example, which I can look at, I would highly appreciate.
Cheers Jonas
--
This is a mailing list for users of SimpleSAMLphp, not a support service. If you are willing to buy commercial support, please take a look here:
https://simplesamlphp.org/support
Before sending your question, make sure it is related to SimpleSAMLphp, and not your web server's configuration or any other third-party software. This mailing list cannot help with software that uses SimpleSAMLphp, only regarding SimpleSAMLphp itself.
Make sure to read the documentation:
https://simplesamlphp.org/docs/stable/
If you have an issue with SimpleSAMLphp that you cannot resolve and reading the documentation doesn't help, you are more than welcome to ask here for help. Subscribe to the list and send an email with your question. However, you will be expected to comply with
some minimum, common sense standards in your questions. Please read this carefully:
http://catb.org/~esr/faqs/smart-questions.html
---
You received this message because you are subscribed to a topic in the Google Groups "SimpleSAMLphp" group.
To unsubscribe from this topic, visit
https://groups.google.com/d/topic/simplesamlphp/bFDPdQv6nQY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to
simplesamlph...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/simplesamlphp/127f19f4-2b2b-4c7f-bc44-1ba3f18485c7%40googlegroups.com.
To the extent permitted by law, we may monitor electronic communications for the purposes of ensuring compliance with our legal and regulatory obligations and internal policies. We may also collect email traffic headers for analyzing patterns of network traffic and managing client relationships. For additional information see https://jda.com/privacy-policy.
Tim van Dijen
Nov 27, 2019, 5:57:44 AM11/27/19
to SimpleSAMLphp
Hi Jonas,
Yes, you have to set 'usenewui' to true to enable Twig.
I can turn my own corporate theme into an example, but that may not happen within a reasonable amount of time for you..
- Tim
To unsubscribe from this group and all its topics, send an email to simple...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/simplesamlphp/127f19f4-2b2b-4c7f-bc44-1ba3f18485c7%40googlegroups.com.
Jonas Weismueller
Nov 27, 2019, 9:37:43 AM11/27/19
to simple...@googlegroups.com
Hi Tim,
the overwrite works pretty well.
I just don’t understand which css file to copy as an overwrite when using twig templates.
My module currently looks like:
modules/my_module/
modules/my_module/default-enable
modules/my_module/themes
modules/my_module/themes/theme1
modules/my_module/themes/theme1/default
modules/my_module/themes/theme1/default/_header.twig
modules/my_module/themes/theme1/default/includes
modules/my_module/www
modules/my_module/www/logo.jpg
modules/my_module/www/resources
modules/my_module/www/resources/default.css
modules/my_module/enable
Which already works for modifications of “modules/my_module/themes/theme1/default/_header.twig”
How can I overwrite the default.css ?
I copied it from “www/resources/default.css” maybe this was the wrong one and maybe the wrong destination to replace it?
You received this message because you are subscribed to the Google Groups "SimpleSAMLphp" group.
To unsubscribe from this group and stop receiving emails from it, send an email to
simplesamlph...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/simplesamlphp/d7f355e2-56f6-4830-bc83-f9ca73800e57%40googlegroups.com.
Jaime Pérez Crespo
Nov 27, 2019, 9:47:54 AM11/27/19
to noreply-spamdigest via SimpleSAMLphp
Hi Jonas,
On 27 Nov 2019, at 15:37, 'Jonas Weismueller' via SimpleSAMLphp <simple...@googlegroups.com> wrote:
> Hi Tim,
> the overwrite works pretty well.
> I just don’t understand which css file to copy as an overwrite when using twig templates.
You don’t "have to" overwrite the main CSS (meaning you can do it, but it’s not necessary).
> My module currently looks like:
> modules/my_module/
> modules/my_module/default-enable
> modules/my_module/themes
> modules/my_module/themes/theme1
> modules/my_module/themes/theme1/default
> modules/my_module/themes/theme1/default/_header.twig
> modules/my_module/themes/theme1/default/includes
> modules/my_module/www
> modules/my_module/www/logo.jpg
> modules/my_module/www/resources
> modules/my_module/www/resources/default.css
> modules/my_module/enable
>
> Which already works for modifications of “modules/my_module/themes/theme1/default/_header.twig”
>
> How can I overwrite the default.css ?
>
> I copied it from “www/resources/default.css” maybe this was the wrong one and maybe the wrong destination to replace it?
That’s not the CSS you see in the new user interface, but the old. Now we are using SASS, and the sources can be found in “src/css”. We build everything with webpack, and the minimized result ends up in “www/assets/css/“.
Regarding the destination… you are in control of that, since you are overwriting the header. Just point it to wherever you are going to have your CSS.
If you don’t need very significant modifications to the theme, I’d recommend you to just extend the current SASS stylesheet, modifying whatever you need in your own SASS file, then build it to “yourmodule/www/assets/css/“, and make the header template point at that file.
--
Jaime Pérez
Uninett / Feide
PGP: 9A08 EA20 E062 70B4 616B 43E3 562A FE3A 6293 62C2
https://keybase.io/jaimeperez
"Two roads diverged in a wood, and I, I took the one less traveled by, and that has made all the difference."
- Robert Frost
On 27 Nov 2019, at 15:37, 'Jonas Weismueller' via SimpleSAMLphp <simple...@googlegroups.com> wrote:
> Hi Tim,
> the overwrite works pretty well.
> I just don’t understand which css file to copy as an overwrite when using twig templates.
> My module currently looks like:
> modules/my_module/
> modules/my_module/default-enable
> modules/my_module/themes
> modules/my_module/themes/theme1
> modules/my_module/themes/theme1/default
> modules/my_module/themes/theme1/default/_header.twig
> modules/my_module/themes/theme1/default/includes
> modules/my_module/www
> modules/my_module/www/logo.jpg
> modules/my_module/www/resources
> modules/my_module/www/resources/default.css
> modules/my_module/enable
>
> Which already works for modifications of “modules/my_module/themes/theme1/default/_header.twig”
>
> How can I overwrite the default.css ?
>
> I copied it from “www/resources/default.css” maybe this was the wrong one and maybe the wrong destination to replace it?
Regarding the destination… you are in control of that, since you are overwriting the header. Just point it to wherever you are going to have your CSS.
If you don’t need very significant modifications to the theme, I’d recommend you to just extend the current SASS stylesheet, modifying whatever you need in your own SASS file, then build it to “yourmodule/www/assets/css/“, and make the header template point at that file.
--
Jaime Pérez
Uninett / Feide
PGP: 9A08 EA20 E062 70B4 616B 43E3 562A FE3A 6293 62C2
https://keybase.io/jaimeperez
"Two roads diverged in a wood, and I, I took the one less traveled by, and that has made all the difference."
- Robert Frost
Jonas Weismueller
Nov 27, 2019, 10:39:43 AM11/27/19
to simple...@googlegroups.com
Hi,
thank you for your explanation.
I tried:
# head my_module /themes/theme1/default/_header.twig -n1
<link rel="stylesheet" type="text/css" href="{{baseurlpath}}module.php/my_module /www/my.css">
# cat my_module /www/my.css
#header {
height: 6rem;
background: linear-gradient(141deg, #0048b8 0%, #25db00 51%, #e8410c 75%);
}
I guess I am almost there.
Cheers Jonas
https://urldefense.proofpoint.com/v2/url?u=https-3A__keybase.io_jaimeperez&d=DwIFaQ&c=ToVbMNJY2W2sI6cHZmZYL1a1DSDW03K-K6TT0TaILp0&r=9zdQN32gHAfxQ6dDr3Ud0nbpPLlas6qu5ytmTgTj6h4&m=IeromZs3-g1af5vaKHIEllKZaAcyZhGj6La9gJKM-eU&s=EXi8wxg5a85hLgEFrKxJWPsNwQSRFlymc5HOBQ4JNyk&e=
"Two roads diverged in a wood, and I, I took the one less traveled by, and that has made all the difference."
- Robert Frost
Before sending your question, make sure it is related to SimpleSAMLphp, and not your web server's configuration or any other third-party software. This mailing list cannot help with software that uses SimpleSAMLphp, only regarding SimpleSAMLphp itself.
Make sure to read the documentation:
https://urldefense.proofpoint.com/v2/url?u=https-3A__simplesamlphp.org_docs_stable_&d=DwIFaQ&c=ToVbMNJY2W2sI6cHZmZYL1a1DSDW03K-K6TT0TaILp0&r=9zdQN32gHAfxQ6dDr3Ud0nbpPLlas6qu5ytmTgTj6h4&m=IeromZs3-g1af5vaKHIEllKZaAcyZhGj6La9gJKM-eU&s=SQcDJr2beMmm7J2XxhM-TGDOtFcgQtRLeWN1ZnrsJy4&e=
If you have an issue with SimpleSAMLphp that you cannot resolve and reading the documentation doesn't help, you are more than welcome to ask here for help. Subscribe to the list and send an email with your question. However, you will be expected to comply with some minimum, common sense standards in your questions. Please read this carefully:
https://urldefense.proofpoint.com/v2/url?u=http-3A__catb.org_-7Eesr_faqs_smart-2Dquestions.html&d=DwIFaQ&c=ToVbMNJY2W2sI6cHZmZYL1a1DSDW03K-K6TT0TaILp0&r=9zdQN32gHAfxQ6dDr3Ud0nbpPLlas6qu5ytmTgTj6h4&m=IeromZs3-g1af5vaKHIEllKZaAcyZhGj6La9gJKM-eU&s=dPQYfRB0jttHgCmoRxsQIiunQEztU5jpkglS1HyateU&e=
thank you for your explanation.
I tried:
# head my_module /themes/theme1/default/_header.twig -n1
<link rel="stylesheet" type="text/css" href="{{baseurlpath}}module.php/my_module /www/my.css">
# cat my_module /www/my.css
#header {
height: 6rem;
background: linear-gradient(141deg, #0048b8 0%, #25db00 51%, #e8410c 75%);
}
I guess I am almost there.
Cheers Jonas
"Two roads diverged in a wood, and I, I took the one less traveled by, and that has made all the difference."
- Robert Frost
--
This is a mailing list for users of SimpleSAMLphp, not a support service. If you are willing to buy commercial support, please take a look here:
https://urldefense.proofpoint.com/v2/url?u=https-3A__simplesamlphp.org_support&d=DwIFaQ&c=ToVbMNJY2W2sI6cHZmZYL1a1DSDW03K-K6TT0TaILp0&r=9zdQN32gHAfxQ6dDr3Ud0nbpPLlas6qu5ytmTgTj6h4&m=IeromZs3-g1af5vaKHIEllKZaAcyZhGj6La9gJKM-eU&s=NdF6jcuAZr9izhuH90yUVIWG6k79YHwToYdv_IXgwuU&e=
This is a mailing list for users of SimpleSAMLphp, not a support service. If you are willing to buy commercial support, please take a look here:
Before sending your question, make sure it is related to SimpleSAMLphp, and not your web server's configuration or any other third-party software. This mailing list cannot help with software that uses SimpleSAMLphp, only regarding SimpleSAMLphp itself.
Make sure to read the documentation:
If you have an issue with SimpleSAMLphp that you cannot resolve and reading the documentation doesn't help, you are more than welcome to ask here for help. Subscribe to the list and send an email with your question. However, you will be expected to comply with some minimum, common sense standards in your questions. Please read this carefully:
---
You received this message because you are subscribed to the Google Groups "SimpleSAMLphp" group.
To unsubscribe from this group and stop receiving emails from it, send an email to simplesamlph...@googlegroups.com.
To view this discussion on the web visit https://urldefense.proofpoint.com/v2/url?u=https-3A__groups.google.com_d_msgid_simplesamlphp_97D47DF4-2DE300-2D4414-2D8697-2D748F1D8F708A-2540uninett.no&d=DwIFaQ&c=ToVbMNJY2W2sI6cHZmZYL1a1DSDW03K-K6TT0TaILp0&r=9zdQN32gHAfxQ6dDr3Ud0nbpPLlas6qu5ytmTgTj6h4&m=IeromZs3-g1af5vaKHIEllKZaAcyZhGj6La9gJKM-eU&s=SHBPMAIatLlJPPP1q4fEBhB-tGQe9y87A__tg0Z6LSg&e= .
You received this message because you are subscribed to the Google Groups "SimpleSAMLphp" group.
To unsubscribe from this group and stop receiving emails from it, send an email to simplesamlph...@googlegroups.com.
Jaime Pérez Crespo
Nov 27, 2019, 12:33:18 PM11/27/19
to noreply-spamdigest via SimpleSAMLphp
On 27 Nov 2019, at 16:39, 'Jonas Weismueller' via SimpleSAMLphp <simple...@googlegroups.com> wrote:
> Hi,
> thank you for your explanation.
> I tried:
> # head my_module /themes/theme1/default/_header.twig -n1
> <link rel="stylesheet" type="text/css" href="{{baseurlpath}}module.php/my_module /www/my.css">
>
> # cat my_module /www/my.css
> #header {
> height: 6rem;
> background: linear-gradient(141deg, #0048b8 0%, #25db00 51%, #e8410c 75%);
> }
>
> I guess I am almost there.
Almost indeed!
> Hi,
> thank you for your explanation.
> I tried:
> # head my_module /themes/theme1/default/_header.twig -n1
> <link rel="stylesheet" type="text/css" href="{{baseurlpath}}module.php/my_module /www/my.css">
>
> # cat my_module /www/my.css
> #header {
> height: 6rem;
> background: linear-gradient(141deg, #0048b8 0%, #25db00 51%, #e8410c 75%);
> }
>
> I guess I am almost there.
The “www” directory is never part of the URL. Basically, it’s the root directory for any contents publicly available for your module, in the same way as it is with SimpleSAML.
Also, the baseurlpath is always lacking the initial /, so you should write the following:
<link rel="stylesheet" type="text/css" href=“/{{baseurlpath}}module.php/my_module/my.css">
--
Jaime Pérez
Uninett / Feide
PGP: 9A08 EA20 E062 70B4 616B 43E3 562A FE3A 6293 62C2
Jonas Weismueller
Nov 28, 2019, 6:52:18 AM11/28/19
to simple...@googlegroups.com
Hi Jaime,
it works perfectly now.
Thanks a lot.
Cheers Jonas
On 27.11.19, 18:33, "'Jaime Pérez Crespo' via SimpleSAMLphp" <simple...@googlegroups.com> wrote:
On 27 Nov 2019, at 16:39, 'Jonas Weismueller' via SimpleSAMLphp <simple...@googlegroups.com> wrote:
> Hi,
> thank you for your explanation.
> I tried:
> # head my_module /themes/theme1/default/_header.twig -n1
> <link rel="stylesheet" type="text/css" href="{{baseurlpath}}module.php/my_module /www/my.css">
>
> # cat my_module /www/my.css
> #header {
> height: 6rem;
> background: linear-gradient(141deg, #0048b8 0%, #25db00 51%, #e8410c 75%);
> }
>
> I guess I am almost there.
Almost indeed!
The “www” directory is never part of the URL. Basically, it’s the root directory for any contents publicly available for your module, in the same way as it is with SimpleSAML.
Also, the baseurlpath is always lacking the initial /, so you should write the following:
<link rel="stylesheet" type="text/css" href=“/{{baseurlpath}}module.php/my_module/my.css">
--
Jaime Pérez
Uninett / Feide
PGP: 9A08 EA20 E062 70B4 616B 43E3 562A FE3A 6293 62C2
https://urldefense.proofpoint.com/v2/url?u=https-3A__keybase.io_jaimeperez&d=DwIFaQ&c=ToVbMNJY2W2sI6cHZmZYL1a1DSDW03K-K6TT0TaILp0&r=9zdQN32gHAfxQ6dDr3Ud0nbpPLlas6qu5ytmTgTj6h4&m=dkacPEyV3y1PisAGTnBCeBgcvp37mABwxpTxc7yk3uU&s=7MjWlNkBGxcYKdfcWSWqTxfpxT5mMq-ApmTiHxAZTR8&e=
"Two roads diverged in a wood, and I, I took the one less traveled by, and that has made all the difference."
- Robert Frost
Before sending your question, make sure it is related to SimpleSAMLphp, and not your web server's configuration or any other third-party software. This mailing list cannot help with software that uses SimpleSAMLphp, only regarding SimpleSAMLphp itself.
Make sure to read the documentation:
https://urldefense.proofpoint.com/v2/url?u=https-3A__simplesamlphp.org_docs_stable_&d=DwIFaQ&c=ToVbMNJY2W2sI6cHZmZYL1a1DSDW03K-K6TT0TaILp0&r=9zdQN32gHAfxQ6dDr3Ud0nbpPLlas6qu5ytmTgTj6h4&m=dkacPEyV3y1PisAGTnBCeBgcvp37mABwxpTxc7yk3uU&s=lSBWZv_icWUG3yxhvRKtJhTM7g-pEi0CNwMRnDc14Vc&e=
If you have an issue with SimpleSAMLphp that you cannot resolve and reading the documentation doesn't help, you are more than welcome to ask here for help. Subscribe to the list and send an email with your question. However, you will be expected to comply with some minimum, common sense standards in your questions. Please read this carefully:
https://urldefense.proofpoint.com/v2/url?u=http-3A__catb.org_-7Eesr_faqs_smart-2Dquestions.html&d=DwIFaQ&c=ToVbMNJY2W2sI6cHZmZYL1a1DSDW03K-K6TT0TaILp0&r=9zdQN32gHAfxQ6dDr3Ud0nbpPLlas6qu5ytmTgTj6h4&m=dkacPEyV3y1PisAGTnBCeBgcvp37mABwxpTxc7yk3uU&s=Xmf9vMzw3b7KKCDve5lxm3o8U74jZAQcxSGWnV_SJTI&e=
it works perfectly now.
Thanks a lot.
Cheers Jonas
On 27.11.19, 18:33, "'Jaime Pérez Crespo' via SimpleSAMLphp" <simple...@googlegroups.com> wrote:
On 27 Nov 2019, at 16:39, 'Jonas Weismueller' via SimpleSAMLphp <simple...@googlegroups.com> wrote:
> Hi,
> thank you for your explanation.
> I tried:
> # head my_module /themes/theme1/default/_header.twig -n1
> <link rel="stylesheet" type="text/css" href="{{baseurlpath}}module.php/my_module /www/my.css">
>
> # cat my_module /www/my.css
> #header {
> height: 6rem;
> background: linear-gradient(141deg, #0048b8 0%, #25db00 51%, #e8410c 75%);
> }
>
> I guess I am almost there.
Almost indeed!
The “www” directory is never part of the URL. Basically, it’s the root directory for any contents publicly available for your module, in the same way as it is with SimpleSAML.
Also, the baseurlpath is always lacking the initial /, so you should write the following:
<link rel="stylesheet" type="text/css" href=“/{{baseurlpath}}module.php/my_module/my.css">
--
Jaime Pérez
Uninett / Feide
PGP: 9A08 EA20 E062 70B4 616B 43E3 562A FE3A 6293 62C2
"Two roads diverged in a wood, and I, I took the one less traveled by, and that has made all the difference."
- Robert Frost
--
This is a mailing list for users of SimpleSAMLphp, not a support service. If you are willing to buy commercial support, please take a look here:
https://urldefense.proofpoint.com/v2/url?u=https-3A__simplesamlphp.org_support&d=DwIFaQ&c=ToVbMNJY2W2sI6cHZmZYL1a1DSDW03K-K6TT0TaILp0&r=9zdQN32gHAfxQ6dDr3Ud0nbpPLlas6qu5ytmTgTj6h4&m=dkacPEyV3y1PisAGTnBCeBgcvp37mABwxpTxc7yk3uU&s=_KiwLk6yZ1a6m1tF90z4dyv-FCY9kVjMpB5gkw99cMs&e=
This is a mailing list for users of SimpleSAMLphp, not a support service. If you are willing to buy commercial support, please take a look here:
Before sending your question, make sure it is related to SimpleSAMLphp, and not your web server's configuration or any other third-party software. This mailing list cannot help with software that uses SimpleSAMLphp, only regarding SimpleSAMLphp itself.
Make sure to read the documentation:
If you have an issue with SimpleSAMLphp that you cannot resolve and reading the documentation doesn't help, you are more than welcome to ask here for help. Subscribe to the list and send an email with your question. However, you will be expected to comply with some minimum, common sense standards in your questions. Please read this carefully:
---
You received this message because you are subscribed to the Google Groups "SimpleSAMLphp" group.
To unsubscribe from this group and stop receiving emails from it, send an email to simplesamlph...@googlegroups.com.
To view this discussion on the web visit https://urldefense.proofpoint.com/v2/url?u=https-3A__groups.google.com_d_msgid_simplesamlphp_4284FB2C-2D38B1-2D4C43-2D9EB1-2D0441552A65A4-2540uninett.no&d=DwIFaQ&c=ToVbMNJY2W2sI6cHZmZYL1a1DSDW03K-K6TT0TaILp0&r=9zdQN32gHAfxQ6dDr3Ud0nbpPLlas6qu5ytmTgTj6h4&m=dkacPEyV3y1PisAGTnBCeBgcvp37mABwxpTxc7yk3uU&s=CdFOuvKj_TSXfo7LcIyTZfZrlGh07f-_Djw4n-p7xMQ&e= .
You received this message because you are subscribed to the Google Groups "SimpleSAMLphp" group.
To unsubscribe from this group and stop receiving emails from it, send an email to simplesamlph...@googlegroups.com.
LLC Platform
Mar 2, 2021, 4:35:14 AM3/2/21
to SimpleSAMLphp
Hi,
I'm trying to follow your discussion in order to control new UI of my installation.
Please see the attached snap, I can't catch the effect of the custom css file (styles.css).
Any help please?
Regards,
Reply all
Reply to author
Forward
0 new messages