Styling with CSS in Play Framework version 2.0.3

Running into issues when using CSS in Play Framework 2.0.3 and could really use some help spotting where I'm going wrong.

My view, called siteview.scala.html, is defined as:

@(name: String, records: List[Record])

@import helper._

@main(name) {
<html>
    <head>
    <link rel="stylesheet" type="text/css" href="@routes.Assets.at("stylesheets/main.css")">
    </head> 
    <h1>@name</h1>

    <ul>
          ...
    </ul>
</html>
}

The CSS file, main.less, is located in app/assets/stylesheets and looks like this:

h1 {color:#F6F9ED;}

@font-face {
    font-family: Gentium;
    src: url(fonts/GenBasR.ttf);
}
font-family: Gentium, Arial, Georgia;

My apologies for the messy style changes, I've been tweaking it trying to get it right! The asset route is the default one.

Play compiles the CSS without any syntax errors, but it's not getting loaded into the HTML. I even tried moving the file to the public folder, but got a duplicate file error, suggesting it's in the right place.

How can I get the HTML to display with the proper styling? I have a feeling I'm missing something obvious, but I'm new to web development and running out of ideas.

Answer №1

It may be helpful to avoid confusion by renaming the folder app/assets/stylesheets to app/assets/less or something similar. This way, you can easily distinguish between LESS and static assets. For instance, the paths will be different:

<!-- resolves to '/public/less/main.css' or (main.min.css) 
                                                   from app/assets/less folder -->
<link rel="stylesheet" type="text/css" 
                       href='@routes.Assets.at("less/main.min.css")'>

<!-- resolves to '/public/stylesheets/main.css' from 'public/stylesheets' folder -->
<link rel="stylesheet" type="text/css" 
                       href='@routes.Assets.at("stylesheets/main.css")'>

Keep the route as is:

GET     /public/*file      controllers.Assets.at(path="/public", file)

Answer №2

Despite following @biesor's suggested solution, I wasn't able to get it to work. I made the following addition to the routes file:

GET     /stylesheets/*file          @controllers.Assets.at(path="/public/stylesheets", file)

Subsequently, I linked the css file to my html page using the following method:

<link rel="stylesheet" media="screen" href="/stylesheets/core.css">

Although I feel like there might be a better way to include a css file, I haven't been able to find an alternative solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with Table Content Being Truncated After Conversion from HTML to MS Word 2003

I am experiencing an issue where the table content is being cut off on the right side of the page when converting from an HTML page into MS Word 2003. Below is a sample HTML code (where placeholder $CLOB_DATA will be replaced by large CLOB data): <html ...

Creating a unique tab spacing effect using HTML and CSS

I'm currently working on my personal website and I'm looking to create a tab-like effect (similar to word processors) for showcasing projects along with their descriptions. Here's an example layout: ReallyLong NameProject Project1 Descr ...

What is the best way to implement a CSS rule that is influenced by the number of siblings present within an element?

Is there a way to style an element differently based on the number of subelements it contains? <div class="wrapper"> <div class="element" /> </div> or... <div class="wrapper"> <div class="element" /> <div class="el ...

Issue with Arabic characters displaying incorrectly in Outlook 2007

I have encountered an issue with my newsletter application where the newsletters are in Arabic. When viewed in the browser, everything looks fine. However, when opened in Outlook 2007, strange text appears instead. Interestingly, if the email is marked as ...

Inconsistencies found with CSS Dropdown Menu functionality across various web browsers

Issue Resolved - See Update Below While working on creating a CSS-only dropdown menu, I encountered an issue where the submenu would disappear when the mouse entered a small 3-4px section within the first item on the submenu. Even though this problem occu ...

Display a message indicating unavailability when no events are scheduled and adjust the background color in FullCalendar

In one of my projects, I am utilizing jQuery FullCalendar to schedule appointments for doctors. The doctors should be able to specify their availability between 9 AM - 5 PM on weekdays. If this is not set, the background color of the spans of time not boo ...

The magic of CSS Pseudo-classes in Inline Styling

For the longest time, I've been under the impression that you cannot include in-line :hover{..} styles to an element. However, recently I stumbled upon this page which showcased examples like this. <a href="http://www.w3.org/" s ...

What class is utilized when multiple classes are specified?

When an element has two classes assigned to it and the CSS for the two classes conflict with each other, which one takes precedence? Is there a method to determine which one will be used? For instance: <p class='red small'>Some Text Here& ...

Tips for aligning content vertically within a header:

I'm currently working on creating a responsive header with two columns. My goal is to have the button in the right column vertically centered. I am aware of the method for centering items using 'top: 50%; margin-top: -xy px', but my button ...

Dynamic React animation with sliding elements

When jumping between the second and third "page" of content, I am unable to determine the reason why it is happening. The content is displayed as an absolute position. Check out the sandbox here: https://codesandbox.io/s/nostalgic-bhabha-d1dloy?file=/src ...

Is it necessary for HTML "buttons" to follow the same box-model as other elements?

I recently encountered an issue with the button element and the input element when using a type of button. In both Firefox and Chrome, I noticed a behavior that seems like a bug in recent releases. However, as form elements often have exceptions to W3 rule ...

Arrange the child elements of a div to be displayed on top of one another in an HTML document

I am struggling with a div containing code .popupClass { width: 632px; height: 210px; position: absolute; bottom:0; margin-bottom: 60px; } <div class="popupClass"> <div style="margin-left: 90px; width: 184px; hei ...

How can you use JavaScript to determine the width of a CSS element?

Is there a way to make the VarDisk2 element disappear when the width of VarDisk1 exceeds 70? <script> var VarDisk1 = document.querySelector("Disk1"); var VarDisk2 = document.getElementsByClassName("Disk2"); ...

What is the best way to retrieve the URL of a website using scrapy?

Currently, I am faced with the challenge of scraping the Amazon website using Scrapy. While I have successfully extracted items like product titles and prices, I am struggling to figure out how to extract the URL of a product (as shown in the image at the ...

Animating Elements with CSS and HTML

Struggling with my website project, specifically creating a login page. The issue arises when resizing the browser, causing elements to look misaligned and chaotic. Before: view image here After: view image here /* Bordered form */ form { margin-l ...

Tips for adding CSS attributes to a <style> tag in Internet Explorer

My current issue involves an ajax web application that loads all parts on a single page, specifically index.html. The inner parts being loaded in index.html have exceeded 32 pages (html, js, css). Now I am facing difficulties with the CSS files that need ...

Having trouble implementing absolute css positioning on my custom composite button

I encountered a peculiar issue that I have managed to work around, but I am still curious about why it is happening. Below is the code for my Composite class: import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.clie ...

How can the carousel item numbers be adjusted for proper display?

I'm currently working on an Angular app and have encountered a task related to displaying 5 cards using mdbootstrap. I want to showcase these cards in a carousel format, but with a twist - I only want the carousel functionality to be active on mobile ...

The Quintessential Bootstrap 5 Hero

I'm struggling to determine which classes to add or remove in order to achieve the same image positioning as shown in the preview of the Bootstrap Border hero with cropped image and shadows. My image isn't aligned with the edge of the hero conta ...

Is there a way to format the text into a curved half-capsule shape?

<div class="bg-primary rounded-pill"> <p class="text-right"> TOTAL AMOUNT </p> <p class="text-right"> 200 </p> </div> I would like the text within a div element to appear in a capsule shape. Is there a way t ...