nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

As we transition to the new Hyland Community, some post links may be temporarily disrupted as we finalize redirects. We apologize for the inconvenience and are working to resolve this as quickly as possible. Details.

CSS include not loading

drozes

Hi guys;

One of my custom webscripts is grabbing a bunch of files and construction a website out of them.
(example. in a component folder, i have head.html, nav.html and footer.html).

The site source looks exactly as it should.
The head.html links some CSS files - which when clicked loads the css document as expected.

***The issue - Although it appears the CSS file was linked correctly - none of the css rules are being applied. firebug itself says there are no rules for that file.

Anyone have an idea of what is happening?

//Sample source of the render webpage from my webscript.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
   <!–  HEADER COMPONENT –>
   <title>Sample Customization</title>
   <link rel="stylesheet" href="/testing-site-custom/css/style.css" type="text/css" media="screen" />


   </head>
<body>
   <div class="header">
      Header Stuff
   </div>
   <div class="navigation">
      <ul>
         <li>Home</li>
         <li>Section1</li>
         <li>Section 2</li>
      </ul>
   </div>
   
   <div id="wrapper">
      <p>tests Is this working?</p>
   <div>


   <div class="footer">

      Footer Content

   </div>

</body>
</html> 
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Find more posts tagged with

Comments

scouil

Is your server accessible from the outside so that we can see for ourselves?

Otherwise:
- Try clear your browser cache
- Monitor the "network" tab in firebug and check that the css file is correctly loaded.

drozes

Unforunitly my company doesn't allow us to open ports.

Tried both your suggestions already with no luck.

Thank you very much for your effort though!

drozes

The CSS file is located in the Document Repo. When someone goes to the url, it get's served up through a template for a css file.

Could this be an issue? The browser itself can navigate to the file - which tells me this shouldn't be an issue.

drozes

So because the CSS is being deliveried through a template, it seems that it is setting the content-type as text/html - where I'll need it to be text/css.

Does anyone have a suggestions of how to configure this? Setting headers in my template?

scouil

You can try to import it via freemarker.
Since it'll be included in your html it shouldn't cause any problem.
But you won't see it as a distinct file anymore.

drozes

Thanks for the reply Scouil,

Unfortunately that solution won't work for me. There may be 7-9 css files and need to ensure we keep our source code as clean as possible.

Thanks for the reply though!

scouil

The code will be as clean. With files separated the same in your file system.
Actually it might even be cleaner since you can the externalize some text/path/etc.

It's just that if you browse the source code with your web browser everything will be appended.

drozes

Yup, I agree the actual source will be very clean.

But need to keep CSS external - it allows the user's to cache common css files and it reduces load times.

thanks agian though for your efforts!

rdanner

If the CSS is loading from a webscript but not taking effect it is most likely due to the mimetype. If the mimetype is not set properly in the response header it will not work in most browsers (assuming the extension is not .css on the url)

You can register custom mimetypes with share/alfresco/webscripr container

in a spring context file in share or alfresco:

   <bean parent="webscripts.formatmap">
      <property name="formats">
         <props>
            <prop key="css">text/css</prop>
         </props>
      </property>
   </bean>
‍‍‍‍‍‍‍‍‍

Then set your webscript type to CSS

drozes

Hey Russ;

I've added the bean to my spring context.

The CSS file alone is not being served through a webscript. A webscript is loading a head.html - containing the top section of an HTML page along with css and js links.

The actual CSS file itself is being served through a template. Am i am able to set the mimeType of a template? (The file itself is set to the proper mimeType).

rdanner

Hey Russ;

I've added the bean to my spring context.

The CSS file alone is not being served through a webscript. A webscript is loading a head.html - containing the top section of an HTML page along with css and js links.

The actual CSS file itself is being served through a template. Am i am able to set the mimeType of a template? (The file itself is set to the proper mimeType).

All, we're having the same conversation here: https://forums.alfresco.com/en/viewtopic.php?f=52&t=44160&p=129685#p129685