newpain01

newpain01

Loading custom CSS in specific template file

Is there any way to load a static CSS in a specific Phoenix template file?

For example, I have the main layout app.html.eex which loads a default /css/app.css and then I want to add another custom CSS only when I load a specific template, like index.html.eex?
I don’t want to add this CSS in layout because it’s being used only on a single page.

I can’t find any info about this in the documentation, so if anybody can help, I’ll be grateful!

Most Liked

voughtdq

voughtdq

Yes, with render_existing/3. Here is an example with css derived from the docs for render_existing/3:

In app.html.eex:

<%= render_existing(@view_module, "styles." <> @view_template, assigns) %>

Now you can achieve this two ways. Either with a function in the view module:

def render("styles.index.html", %{conn: conn}) do
  style = static_path(conn, "/css/custom.css")
  ~E(<link rel="stylesheet" type="text/css" href="#{style}">)
end

or by creating a template called styles.index.html.eex:

<link rel="stylesheet" type="text/css" href="<%= static_path(@conn, "/css/custom.css") %>">
jakemorrison

jakemorrison

One way to do this which may perform better is to set an id on the body tag for the page in your layout e.g.

id=“page-mycontroller-myaction”

Then you can write CSS rules in a common style sheet which apply to that page, e.g.

#page-mycontroller-myaction h1 {
color: green;
}

By putting everything in a single style sheet, you reduce the number of http requests to the server and make it more cachable.

newpain01

newpain01

Thanks for your suggestion @jakemorrison. Reducing the number of requests is something I am looking into and, when possible, trying to put everything together.

In this specific project, I have two themes with two different layouts, an admin and frontend theme, so I am looking for the best way to completely separate their assets and only load what is needed for that specific layout, otherwise it’s too much unnecessary CSS to bundle together.

Where Next?

Popular in Questions Top

Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
JulienCorb
I am trying to implement my new.html.eex file to create new posts on my website. new.html.eex: &lt;h1&gt;Create Post&lt;/h1&gt; &lt;...
New
jaysoifer
Is there a way to rollback a specific migration and only that one ("skipping" all the other ones)? Would mix ecto.rollback -v 2008090...
New
johnnyicon
Hi all, I've just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I'm trying to use Postg...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers' Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New
srinivasu
How to handle excepions in elixir? Suppose i have A, B, C ,D, E modules. and each module has get() function. A.get() method will call th...
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New

Other popular topics Top

Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I fore...
New
KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 35953 110
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New
AstonJ
Please see the new poll here: Which code editor or IDE do you use? (Poll) (2022 Edition) It’s been a while since we first asked this, I...
208 31107 143
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
axelson
This post is a wiki (feel free to hit the edit button near the bottom right of this post to add your own changes!) This post collects co...
239 47849 226
New
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New

We're in Beta

About us Mission Statement