SCSS top level file for SuiteP

💬 General Discussion
1

Hello

To compile the custom extended theme you would do something like this after changing any scss file
themes/SuiteP/css/CUSTOM/style.scss [COMPILE TO] themes/SuiteP/css/CUSTOM/style.css

What is the top level file for the default layout? For example if I want to compile login.scss?

I tried
sass themes/SuiteP/css/suitep-base/login.scss modules/Users/login.css

But it’s throwing an error
Error: Undefined variable.

Which is probably because I shouldn’t be compiling that single file but rather the top level one instead

2

Hey @robert_sinclair,

You should be able to run a Robo command to compile the whole theme in one go if that works better for you? Try running ./vendor/bin/robo build:suite-p.

Let me know how well or if at all this works for you :+1:

3

Thank you, strange but I don’t have robo in bin folder. :frowning:

just have the following Screen Shot 2020-04-17 at 10.41.50 AM

I have some robo stuff here, but i don’t see any executable /lib/Robo/config.php

My version is:
Version 7.10.10
Sugar Version 6.5.25 (Build 344)

Should I install a specific package to make this work?

When I execute “./vendor/bin/robo” from the command line in suitecrm’s root folder I get
-bash: ./vendor/bin/robo: No such file or directory

4

Hhmm maybe it doesn’t come with the zip package.

you can make a backup of your vendor directory (just in case) and then install composer and run this:

composer install

I think the package is produced with a vendor generated with composer install --no-dev, which has less stuff in it.

Warning: never user composer update or composer upgrade unless you really want to run SuiteCRM with untested version of compnents. Always use composer install, which updates only stuff that we asked to be updated.

5

got it, i did it and it worked thank you! But it’s not recompiling the /modules/Users/login.css :-/

I ran the command and here are the results, btw I think it’s ./vendor/bin/robo build:suitep without a dash in suite-p otherwise it throws an error

1-CRM_new — mcgillimmo@server1:~:public_html:tools — -bash — 170×38 2020-04-17 11-50-14
1-CRM_new — mcgillimmo@server1:~:public_html:tools — -bash — 170×38 2020-04-17 11-50-14918×244 31.8 KB

Is there something else I can try to recompile the login.css file specifically? Or may be I shouldn’t even be going through SASS for that specific file at all?

Thank you for your help!

6

I think these two files are unrelated:

  1. modules/Users/login.css
  2. themes/SuiteP/css/suitep-base/login.scss

The second one is included by style.scss and its content ends up bundled in style.css.

The first one is not even scss, so no need to compile it, I guess. It’s possible you can customize it in custom/Users/login.css, but you’re probably better off just adding the styles you need in a custom/themes/yourtheme/css/style.css. Note that for this last file, you don’t need to use a full copy with everything, you can just put in a couple of styles and they are conveniently appended to the main style.css file.

7

haha yeah i think i’m not even changing the right file

for this specific example, I’m just trying to change the following CSS element

div.p_login .p_login_top a {

This shows to users before they login, so I’m not sure what theme would need to be compiled. Is it Dawn? If the system doesn’t know user’s preferences does it show Dawn theme by default?

I changed the SCSS file in dawn and recompiled the whole thing but it’s not changing the login screen’s CSS

Thank you again for your help! I’d love to make a quick video afterwards to explain to others how this works

8

You can see in your browser’s console, at the login screen, which file it’s using for the CSS. I just checked and it was from Dawn in mine. but maybe this changes if you change some default in Admin area, I don’t recall.

I added a file called

custom/themes/SuiteP/css/Dawn/style.css

with contents

div.p_login .p_login_top a {
    height: 100px!important;
}

then ran a quick rm cache/themes/SuiteP/css/Dawn/style.css just to make sure I am not seeing cached stuff and I was able to mess up my login screen effectively:

image

It might be worth exploring if there’s a way to place a custom CSS file that would get applied to ALL sub-themes, not just Dawn…

2 Likes
9

need to be extra careful as PGR mentioned some components are untested, I’m still checking but I suspect it may have resulted in the install getting hacked through phpunit framework