How to call a CSS from another external file(document library)

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.

@mnikitina
The css i will call from js code? I mean to put call code in js section? thank you, i wilk try

@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

@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

@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

@ShareSquared
Now works, thank you !!

1 Like