1

In this content editor I have referenced a .js file. If I want to style it with .css file can I connect it also as a link in the same content editor?

For example:

Content Link:

menu.js; menu-style.css

I tried it but with no success. What is the right way to do this?

Thank you

Improve this question
1

4 Answers 4

Reset to default
2

You can add <style></style> tag above <script> tag. Define your css inside tag.

e.g.

<style>
.ClassName{display:none;}
</style>

OR

You can provide the path of your .css file from .js file as below:

<link rel="stylesheet" type="text/css" href="menu-style.css">
Improve this answer
2
  • First of all thank you for your answer. Is this not going to delay the load process for .css?
    – Alexandros Charalambous
    Dec 9, 2016 at 9:38
  • No, Page loads the css first.
    – Rishi Jagati
    Dec 9, 2016 at 9:40
2

Another alternative

JSLinks can reference multiple JS and CSS files, on SPOnline also to any https URI

They were created in SP2013 for CSR - Client Side Rendering, but you can use them to load any file.

These files are loaded very early on, so if you execute JS code you have to wait for the DOM to be ready

And that is all JSLink does, it loads files, so the execution is not tied to the webpart you attach it to.

You find the JS Link setting in Document/ListView WeParts

Improve this answer
4
  • Thanks for your answer. I've been struggling with the JSLink for hours and it maked things more complex.
    – Alexandros Charalambous
    Dec 9, 2016 at 9:45
  • That is called learning.. Blogs about JSLink are deep dives into CSR technology. If you forget CSR and think of JSLinks as the SCRIPT or LINK tags you use to reference external files in an HTML file it makes more sense.. that is all JSLink does: it includes external files
    – Danny '365CSI' Engelman
    Dec 9, 2016 at 10:17
  • Learning is always good but the problem is that in Content Editor I can't see any JSLink or the Miscellaneous tab.
    – Alexandros Charalambous
    Dec 9, 2016 at 10:33
  • JSLinks are only on Documents/ListView WebParts, if you have one on the page you can 'abuse' that JSLink to load any file you want (on that page) Note it is not better then ONE linked CEWP file, but it can do multiple links (actually for CSS it is better to do JSLink, as they load very early on, so you won't get HTML and then later CSS be applied
    – Danny '365CSI' Engelman
    Dec 9, 2016 at 11:23
1

You can create one file (html/txt).Use link tag for css and script tag for yous js file in newly created file and refer in Contnt editor webpart.

 <script src="http://XXXXXXXXXX.js"></script>
 <link href="http://XXXXXXXXXXX.css" rel="stylesheet" />
Improve this answer
1

You can embed the links for JavaScript and CSS files in the content editor web part as we are using in HTML pages.

Or we can write css and JavaScript directly mentioned by @Rishi Jagati in his answer.

As shown below:

 <script src="http://srv1:902/trials/Assets/jquery-1.7.1.min.js"></script>
 <script src="http://srv1:902/trials/Assets/jquery.ba-hashchange.min.js"></script>
 <script src="http://srv1:902/trials/Assets/jquery.easytabs.min.js"></script>
 <link href="http://srv1:902/trials/Assets/tabs.css" rel="stylesheet" />

Reference:

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.