ixxxl
October 14, 2021, 6:18am
1
good day, is it possible to place CSS in doc. library and to use it to all form, in one style ? For now i use in every form.. and colors in company was changed and i need to make all forms in new style. there hundreds forms .it takes a lot of time to change by one.
ps. like a JS from central doc library we use. works fine.
Hello @ixxxl ,
Yes, you can use an external file with CSS, the same way as you do with the JS.
ixxxl
October 14, 2021, 10:10am
3
@mnikitina
The css i will call from js code? I mean to put call code in js section? thank you, i wilk try
ixxxl
October 15, 2021, 7:45am
4
@mnikitina
Hi, i tried this
with css ontent
.title {
font-size: 3em;
align: center;
}
.hint {
font-style: italic;
}
.fd-toolbar-side-commands{
visibility: hidden;
}
.header{
background: rgba(64, 120, 85, 0.3)
}
.row1{
background: rgba(64, 120, 85, 0.2)
}
.row2 {
background: rgba(64, 120, 85, 0.1)
}
.partext{
text-align: center;
font-size: 24px;
color: #407855;
}
.rosu{
text-align: center;
font-size: 24px;
color: #520444;
}
.nametext{
font-size: 20px;
color: #407855;
font-weight: bold;
}
.nametext2{
font-size: 16x;
color: #414A4E;
font-weight: 600;
text-align: right;
height: 25px !important;
}
.k-grid-toolbar {
display:none!important;
}
.k-grid-header .k-header
{
color: green;
font-weight: bolder;
text-align: center;
height: auto;
white-space: normal;
}
.k-grid-header th.k-header {
vertical-align:top;
}
.k-grid-header th.k-header > .k-link {
max-height: 65px;
white-space: normal;
vertical-align: text-top;
text-align: center;
}
.title-style {
font-size: 16px;
font-weight: bolder;
ext-decoration: underline;
}
.totals {
font-weight: bolder;
color: black;
}
/*.button-style {
color: $themePrimary !Important;
background-color: $theme:greenLight !Important;
border-color: $themePrimary !Important;
}*/
/*.button-style:hover {
color: $themePrimary !Important;
background-color: $themePrimary !Important;
border-color: $themePrimary !Important;
}*/
.pay-amount {
color: #414A4E !Important;
}
.retension-amount {
color: #EF553B !Important;
}
.facility-amount {
color: #FA9600 !Important;
}
.net-amount {
color: #02835E !Important;
}
.meal-ticket {
color: #64A50F !Important;
}
.black {
color: #414A4E !Important;
}
.exemption-amount {
color: #780000 !Important;
}
.btn-outline-primary:not(:hover){
background-color:transparent !important;
}
.back {
color: #F6F7F9
}
.button1 {
background-color: /* #00694B !important; */ #253746 !important;
border-color: #ffffff !important;
color: #ffffff !important;
}
.button1:hover {
background-color: #40c1ac !important;
border-color: #40c1ac !important;
}
/*.button1:hover {
background-color: #02835E !important;
border-color: #02835E !important;
}*/
.button2 {
background-color: #253746 !important; ;
color: #ffffff !important;
border-color: #006648 !important;
}
/*.button2 {
background-color: #006648 !important;
color: black;
border-color: #006648 !important;
}*/
.button2:hover {
background-color: #40c1ac !important;
color: white;
border-color: #40c1ac !important;
}
.bold {
font-weight: bold;
}
.ascunde{
display: none;
}
and have some errors and css doesn't work
Hi @ixxxl .
Try:
fd.created(function(){
var imported = document.createElement('link');
imported.href = 'https://intranet/procese/DocJS/CSS.css';
imported.rel = 'stylesheet';
imported.type = 'text/css';
document.head.appendChild(imported);
});
Note: in your if condition you should have the syntax of: if (set == 1) instead of if (set = 1)
Hope this helps!
2 Likes
ixxxl
October 15, 2021, 4:16pm
6
@stormanh
Thank you! now works perfect!!
1 Like
On line 5, you are creating a script tag, but should instead create a link tag.
Another solution (perhaps better) would be to add the following to the CSS of every form that needs to load the same styles:
@import url("/intranet/procese/DocJS/CSS.css");
1 Like
ixxxl
October 20, 2021, 5:12am
9
@ShareSquared
Hello, i tried to put in css:
and error come backs. is it correct i made?
I believe it is up to the server to resond with the correct MIME type.
Also, it looks like the import url may be wrong. Try
@import url('/procese/DocJS/CSS.css');
Ultimately, it must be the absolute or relative URL of the actual css file.
We put ours in SiteAssets library when working in SharePoint...
1 Like
ixxxl
October 21, 2021, 5:26am
11
@ShareSquared
Now works, thank you !!
1 Like