I have a pretty straight forward question, in regards to joomla templates.
The end result being : http://css3playground.com/flip-card.php
What I want to do is simple, in a sense, but need to know where to look;
I want to have the entire page wrapped in two divs, all the PHP code, to which class i can define in css and drop in some javascrpt so I can apply page transitions to that div. All of which I know how to do except for where to do it in, the PHP structure of joomla is new to me.
and also, after the first step is accomplished, create a second div after the content that would be dynamically loaded with content from clicked links on the page from within the template, but thats two questions at once lol.
Any ideas on the first part?
If you just want to use a div to encompass the entire template, do exactly that: wrap the template in a div and give it a custom class or id:
<html>
<head>
//stuff here
</head>
<body>
//insert the wrapper here
<div id="wrapper">
//template structure here
</div>
</body>
</html>
The file you want to edit will likely be named index.php located at public_html/templates/your_template/index.php.
For some templates, such as those by Yootheme, you will instead want to edit the file at public_html/templates/your_template/layouts/template.php (or /public_html/templates/your_template/styles/current_profile/layouts/template.php if you're using a profile other than the default).
Related
when loading something slow, I show a splash screen using
<div wire:loading class="my-splash-screen-spinner">
Loading.....
</div>
the problem is, there are still overflow scroll bars on the body or html tag.
I want to remove those. What is the way?
My question is basically: when livewire goes to loading state, how can I add a css class to the body? with that css class, I can remove the overflow from body.
Is there a way to listen to loading via livewire javascript and then do something on loading and on stop loading? (add remove class to body)
You probably forgot to add
<head>
#livewireStyles
</head
I am looking to add additional layout parameters like the #inner for the layout. For example #title for the <title>#title</title> and an area for onload javascript for individual pages.
window.onload = function () {
#onload_js
}
These are set in the layout, so I am not sure the best way to handle these in Phoenix. Thanks :D.
For the page title, you can simply pass a value through from your controller:
def edit(conn, params) do
render(conn, "edit.html", page_title: "Edit The Thing")
end
<head>
<title><%= assigns[:page_title] || "Default Title" %></title>
</head>
Note that this uses assigns[:page_title] instead of #page_title or assigns.page_title as they will error if the :page_title key is not present in assigns.
For including templates (your script example) there is render_existing/3 (and the docs for the same function in the latest version of Phoenix).
The documentation gives a similar example to what you requested so I have copied it here for convenience:
Consider the case where the application layout allows views to dynamically render a section of script tags in the head of the document. Some views may wish to inject certain scripts, while others will not.
<head>
<%= render_existing view_module(#conn), "scripts.html", assigns %>
</head>
Then the module for the #inner view can decide to provide scripts with either a precompiled template, or by implementing the function directly, ie:
def render("scripts.html", _assigns) do
"<script src="...">"
end
To use a precompiled template, create a scripts.html.eex file in the templates directory for the corresponding view you want it to render for. For example, for the UserView, create the scripts.html.eex file at web/templates/user/.
Lets say I have html view like <div ng-controler="contr">....</div> and a js controler. Supposed that i want to use this view on bottom left and right top of my main page, in the center of one of the sub pages and so on... What are my best options of reusage? I saw that i can inject the whole html into a string and call "compile" like this but this does not seem "elegant"
Put it in a spearate html file, or add to the template cache, and include it with the ng-include directive. I'll automatically create a new scope.
<ng-include src="'template.html'"></ng-include>
<ng-include src="'template.html'"></ng-include>
<script type="text/ng-template" id="template.html">
<div ng-controler="contr">....</div>
</script>
I'm writing a custom template tag that wraps an HTML element with some code to make it editable. This is backed up by some CSS, and JS that takes care of sending the data to the server to save it.
This component requires the inclusion of
<script type="text/javascript" src="../myscript.js"></script>
at the bottom of the page and
<link rel="stylesheet" type="text/css" href="../mystyle.css">
at the top.
I already have two "js" and "css" template blocks in the page template.
My question - is there a way for for the custom template tag to include these scripts once in the relevant page blocks, if my tag is present?
IE I put in:
{ % mytag %} <div>editable element</div> { % endmytag %}
and the "js" and "css" template blocks gets populated with the relevant script\link tags?
(I don't want to preinclude those in every page, as only some of my pages will use this tag)
You might try using Django-Sekizai from within the template your custom tag renders to add CSS and JS files to another block, which is what Sekizai is designed to do. I use it extensively with Django-CMS based projects, but I haven't tried your use case.
I would like to know if there is some way to change a css class from a template page using django admin.
I would like to put the django tag inside of css file.
example:
body {
background-color: {{ body.color }};
width: {{ body.width }};
}
You could also include your CSS file using template tags. That would demand a style tag but considering the dynamic approach here it's really not much of an issue:
<html>
<head>
<style type="text/css">
{% include 'templates/mytemplate.css' %}
</style>
</head>
<body></body>
</html>
The template could then be what you described above. Then the CSS template would have access to whatever data your base template has access too.
Depending on your use case you might also do something with blocks but I'm not sure that is worth exploring at this point.
Just off the top of my head:
Create a Model to store the CSS values you want
Register the Model to show up in the Admin Screens
In your views, return these values as a dictionary
In the template, use the values as you suggested