Selecting layouts

Hi, I have a question in changing the design of my web.

I have a purchased theme in folder A, I have put the folder to priv/static so the folder be priv/static/a

then I tried to change my code on layout templates to set the css file at /a/css/site.css

It never loaded the css from the template I wanted.

Anyone can help please?

Thanks

1 Like

What do you mean by “template”?

With Phoenix “templates” refer to *.eex files which are served from lib/app_name_web/templates,

not priv/static/

e.g.:

  • lib/app_name_web/templates/layout/app.html.eex
  • lib/app_name_web/templates/page/index.html.eex

Within such an .eex template it is possible to refer to static assets which are served from priv/static/,

e.g. in app.html.eex:

<link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">

so to refer to your css file you would change that to:

<link rel="stylesheet" href="<%= static_path(@conn, "/a/css/site.css") %>">
2 Likes

Thank you for replying.

Sorry I mean themes, not template.

I tried
<link rel="stylesheet" href="<%= static_path(@conn, "/a/css/site.css") %>">
it didn’t work. It always says file not found.

I bought a theme (a) and want to use that theme on my phoenix application.

I just want to put my theme in a folder, the use it resources like css, js etc

so far all the documentation I see it install the library manually, let say if themes need jquery, it will add jquery to the mix as dependency, can I just use all in the theme folder without install it manually?

Any advice?

1 Like

Go into lib/app_name_web/endpoint.ex and look for

  plug Plug.Static,
    at: "/", from: :jslib, gzip: false,
    only: ~w(css fonts images js favicon.ico robots.txt)

and add the new folder a to the others

  plug Plug.Static,
    at: "/", from: :jslib, gzip: false,
    only: ~w(a css fonts images js favicon.ico robots.txt)

https://til.hashrocket.com/posts/1a3639476e-serve-static-filesdirectories-in-phoenix

3 Likes

Thank you very much, it works!!

You really help me.

2 Likes