创建自定义SuiteP子主题

自SuiteCRM 7.10起,SuiteP主题开始具有4个子主题,分别称为DawnDayDuskNight。本文介绍了如何“分叉”其中一个,并启动您自己的新子主题。我将基于Day创建一个名为Noon的新子主题,并进行一些更改以增加应用程序某些部分的对比度。

分叉现有的子主题

我首先进行编辑custom/themes/SuiteP/themedef.php,然后在结尾处的相似行旁边添加以下内容:'Noon' => $app_strings['LBL_SUBTHEME_OPTIONS_NOON'],现在我们需要在几个地方添加新标签:custom/modules/Users/language/en_us.lang.php

<?php
$mod_strings = array (
  'LBL_SUBTHEME_OPTIONS_NOON' => 'Noon',
);

这里有一个稍微不同的$app_strings地方: custom/Extension/application/Ext/Language/en_us.NoonThemeLabel.php

<?php
$app_strings['LBL_SUBTHEME_OPTIONS_NOON']= 'Noon';

接下来,我们复制看起来最接近我们想要的子主题的子目录,并从SuiteCRM安装的根目录中发出以下命令:

cp -R themes/SuiteP/css/Day themes/SuiteP/css/Noon

此时,只需执行快速修复和重建,该子主题即可运行,并且可以从用户的个人资料的Advanced选项卡中进行选择。

编译样式

为了能够编译此CSS,您需要安装SASS编译器。在Ubuntu上,可以通过SuiteCRM目录执行以下操作:

composer require leafo/scssphp

然后,您可以在每次更改任何.scss文件时使用以下命令进行编译:

./vendor/bin/pscss -f compressed themes/SuiteP/css/Noon/style.scss > themes/SuiteP/css/Noon/style.css

请注意,即使您没有更改style.scss,也始终使用此确切命令,而是使用另一个.scss文件,因为这是包含所有其他文件的主文件。

自定义样式

有几个.scss文件可以更改。

themes/SuiteP/css/variables.scss themes/SuiteP/css/color-palette.scssthemes/SuiteP/css/style.scss

这是我尝试color-palette.scss添加一些对比的一些调整:

顶级菜单 C2C3C$ > 555555

刻字 817C8D > 111

侧边栏 929798 > 626768 707d84 > 303d44

color-palette.scss更改后的完整外观如下所示:

//********************
//* color palette
//********************
$color-1: #000000;
$color-2: #31708F;
$color-3: #333333;
$color-4: #378CBE;
$color-5: #3C763D;
$color-6: #444444;
// See list view
$color-7: #4B97C4;
$fg-color-7: #111;
$color-8: #555556;
$color-9: #555557;
$color-10: #5CB85C;
$color-11: #CCE3F0;
$color-12: #666666;
$color-13: #303D44;
$color-14: #677785;
$color-15: #6A6578;
$color-16: #6EA674;
$color-17: #6A80E6;
$color-18: #757083;
$color-19: #777777;
$color-20: #626768;
$color-21: #79996A;
$color-22: #808F9C;
$color-23: #829EB5;
$color-24: #8499AB;
$color-25: #888888;
$color-26: #8A6D3B;
$color-27: #93A0AB;
$color-28: #303D44;
$color-29: #89b3ac;
$color-30: #99534D;
$color-31: #999999;
$color-32: #A2A5AF;
$color-33: #3E7291;
$color-34: #c4e3f5;
$color-35: #76C1B7;
$color-36: #ABC3D7;
$color-37: #B29EB5;
$color-38: #BBE6A5;
$color-39: #555558;
$color-40: #C4C3C7;
$color-41: #C9D2DA;
$color-42: #CCE8E2;
$color-43: #5FA9D4;
$color-44: #FFFFFF;
$color-45: #E2E7EB;
$color-46: $color-7;
$color-47: #E6D5A5;
$color-48: #E6E6E6;
$color-49: #FF0000;
$color-50: #FFFFFF;
$color-51: #F5F5F5;
$color-52: #F8F8F8;
$color-53: #63AAD4;
$color-54: #FAF7CF;
$color-55: #FAFAFA;
$color-56: #4B97C4;
$color-57: #A5E6E6;
$color-58: #A94442;
$color-59: #AFAABF;
$color-60: #B3C0C7;
$color-61: #C7254E;
$color-62: #CCCCCC;
$color-63: #D9EDF7;
$color-64: #E6E6E6;
$color-65: #DFDFDF;
$color-66: #DFF0D8;
$color-67: #E0DDEB;
$color-68: #E3E3E3;
$color-69: #E5E5E5;
$color-70: #E67C73;
$color-71: #ECE9F5;
$color-72: #EDEBF5;
$color-73: #F2DEDE;
$color-74: #F5F5F5;
$color-75: #F7F7F7;
$color-76: #F8F8F8;
$color-77: #F9F2F4;
$color-78: #F9F9F9;
$color-79: #FCF8E3;
$color-80: #FFFFFF;
$color-81: #F08377;
$color-82: #FFFFFF;

请注意,我只是自定义了一些“快速取胜”,可以更改并影响应用程序中很多地方的几种颜色。此后,还有许多其他事情需要调整。

滚动至顶部