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

JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
beno
I will often find my self writing things similar to: case some_value do nil -&gt; something() "" -&gt; something() _ -&gt; somethi...
New
New
RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
fayddelight
I tried installing elixir 1.11.2 erlang 23.3.4 via asdf in my zsh shell. Enabled the versions locally and globally. When I list them ...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
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 t...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New

Other popular topics Top

TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
274 41539 114
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New
saif
Hello everyone, Long time lurker first time poster here. I’ve recently begun working on Elixir full-time again! :raised_hands: It’s been...
New
KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 36128 110
New
Qqwy
Update: How to use the Blogs &amp; Podcasts section You can post links to your blog posts or podcasts either in one of the Official Blog...
3271 126479 1222
New
dogweather
I wrote this comment on r/haskell, and it’s not popular there. :wink: But I think I’m on to something… Haskell reminds me of Java, and e...
New

We're in Beta

About us Mission Statement