How to change a css item in a template using django admin? - django

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

Related

Is it possible to use django's custom template tags to insert code in other blocks in the template?

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.

Wrapping a Joomla website into a div

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).

Smarty subtemplate blocks break when updated

I am attempting to create a template using Smarty for php. I would like the template to be reusable so I inheriting it and substituting values using blocks. This works fine except when I need to access these block values in sub-templates. I am calling these sub-templates using smarty's {include} function.
Example:
Template-Parent (template.tpl):
<html>
<head>
{include file=sub_template.tpl}
</head>
<body>
{block name=title}No Title Provided{/block}
</body>
</html>
Sub-Template (sub_template.tpl)
<title>{block name=title}No Title Provided{/block}</title>
Template-Child (template_child.tpl)
{extends file="template.tpl"}
{block name=title}My Website!{/block}
When I view the site, the output is:
<html>
<head>
<title>No Title Provided</title>
</head>
<body>
My Website!
</body>
</html>
After doing some reaserch I did see a note on smarty's website about enclosing {include} functions in dummy {block} tags but have had varied levels of success getting this to work.
Note:
If you have a subtemplate which is included with {include} and it
contains {block} areas it works only if the {include} itself is
called from within a surrounding {block}. In the final parent
template you may need a dummy {block} for it.(http://www.smarty.net/docs/en/advanced.features.template.inheritance.tpl)
Due to this, I have tried:
<html>
<head>
{block name=dummy}{include file=sub_template.tpl}{/block}
</head>
<body>
{block name=title}No Title Provided{/block}
</body>
</html>
This seems to work until I make any change to sub-template. As soon as a change to the sub-template is made, it once again stops responding to the block values set in the child.
Have I misunderstood what the notice was referring to about placing the {include} in dummy block tags or is this a bug with smarty? I am not currently using caching but my other thought was that maybe this is a sub-template caching problem.
Any insight would be greatly appreciated, thanks!
It is true that these templates are compiled and cached into the templates directory. This is why clearing the templates directory temporarily fixed the issue. The template caching is different than the explicit caching that smarty also supports. I have found that the template caching can be overridden with:
$smarty->compile_check = true;
$smarty->force_compile = true;
This allows changes to the template to be made with out needing to delete the cache after change while in development.

How to render a template with dynamic CSS?

I want to create a dynamic CSS file in a view and then render a template which loads that CSS file. Depending on the arguments given to the view, the CSS may have different values at certain places every time the view is called. How would I go about doing that? (I should add that I have no experience with writing files in Python/Django.)
Here is a simplified example of how I think it should work:
# urls.py
urlpatterns = patterns('',
(r'^myview/(?P<color>[0-9a-f]{6})/$', create_css_file),
)
# views.py
def create_css_file(request, color):
raw = "#charset 'UTF-8';\n\n"
raw += "body {\n"
raw += " color: #" + color + ";\n"
raw += "}\n\n"
f = open('mydynamic.css', 'r+')
f.write(raw)
return render_to_response('mytemplate.html', locals())
# mytemplate.html
{% extends "base.html" %}
{% block head %}
<link rel="stylesheet" media="screen" href="{{ f.name }}" />
{% endblock %}
For some reason, that doesn't work, although in the resulting HTML page's source code, it looks like the CSS file is loaded correctly. The f even arrives at the template correctly, because I can see its contents when I change the <link>... line to
<link rel="stylesheet" media="screen" href="{{ f }}" />
(finstead of f.name). But the HTML is rendered without the desired color setting. Can anybody tell my why that is?
I suspected some path issue, and I toyed around quite a bit with different paths, but to no avail.
Please do not advise me to prepare several hardcoded CSS files (as I have found in answers to similar questions), because there will be several hundred possibilities.
If you absolutely need to you can just create a css file dynamically.
You can create an entry in your urls.py. You can name urls anything you want this could look like a static .css file to the outside world but would be created dynamically.
(r'^(?P<color>[0-9a-f]{6})/dynamic.css$', dynamic_css)
def dynamic_css(request, color):
"""
Create a css file based on a color criteria,
or any other complicated calculations necessary
"""
# do custom element positionting.
return render_to_response('dynamic.css', {'color': color})
# dynamic.css
body {
background-color: {{ color }}
}
There is no reason to write css files for this. Now you can just include
<link rel="styleshee" type="text/css" href="/purple/dymamic.css" />
In your template.
As mentioned this shouldn't be used just for changing one color. That could be done in your template. If you had to do something like this it would probably be a good idea to implement cacheing as every time a page is requested it has to dynamically generate .css that could be performance overhead. This is more of an example to show you can name urls.py entries anything you want. And include them in any way you want in html ie. if you needed a custom javascript file dynamically created you could create an entry in urls.py and then create a view that generates a .js file.
views.py:
def create_css_file(request, color):
f = color
return render_to_response('mytemplate.html', locals())
template:
<body style = "color:{{f}}!important;">
Don't create css file on the fly it is unnecessary.
I went with #CatPlusPlus's suggestion: Calculating the necessary values in a view and passing the template a very long string (raw) which contains the entire CSS. In the template, I include it like so:
<style media="screen">{{ raw|safe }}</style>
Thanks everyone for your efforts!

How to define a html subtemplate inside a PlayFramework view?

From a master html template I'm calling #{doLayout} which renders my view html. I'd like to call a custom html template as well such as #{happyHeader} which I'd like to define inside my view html file. Something like this:
<html>
<body>
#{happyHeader}
<hr/>
#{doLayout}
</body>
</html>
And in my index.html have something like this:
<p>My happy doLayout main content here</p>
#{define happyHeader}
<h1>Nice header</h1>
#{/}
I've looked around StackOverflow and couldn't find a similar question, and neither do the custom template solutions in the Play Framework docs seem to cover this.
You do this with #{set} and #{get}.
You set the value in your index.html like this:
#{set 'happyHeader'}
<h1>Nice header</h1>
#{/set}
And you get it in your main.html like this:
#{get 'happyHeader' /}