How can I add CSS style into backend of my own template in Joomla? I'm trying to develop my own template for Joomla. Is there a solution to add CSS style to backend of template?
Regards Adrian
Yes, you can make a new template for backend too
If you are experienced web designer you can use the Admin Custom CSS (thekrotek.com) plugin – which allows you to redesign the Joomla back-end and build an individual and unique style with your custom CSS. Remember to enable the plugin and create a custom.css file in the administrator/templates/your_template/css/ folder.
I have found the following solution that works, even though it is certainly not technically the prettiest.
Add to templateDetails.xml:
<field
name="EigenesCSS"
type="textarea"
default=""
label="Eigens CSS"
description="Fügen Sie hier Ihr persönlicher CSS Code ein."
rows="10"
cols="5"
filter="raw"
/>
After that, add the following code in the head area of the index.php file after the regular links to the CSS files ($doc->addStyleSheet):
if (!empty($this->params->get('EigenesCSS'))) {
echo '<style>' . $this->params->get('EigenesCSS') . '</style>';
}
It is important that the code is loaded after the other CSS files, because this is the only way to overwrite the standard CSS definitions.
Related
I am using Zurb's Panini site generator. I am using a CMS that outputs a html file written in markdown to the pages folder. My goal was to have the template file convert the markdown to html.
I've tried to have the markdown get converted before it enters the template file but haven't found a way with the CMS I am using (NetlifyCMS). The CMS also needs to be very user friendly for non-technical users.
<!-- This is the part of the template file -->
<article class="cell medium-5 cell-block-y location-info-container">
<h1 class="location">{{title}}</h1>
{{#markdown}}
{{> body}}
{{/markdown}}
</article>
When running foundation build everything works as expected except for the markdown content is still markdown. I have tried to find a workaround but with no luck so I am open to a solution or workaround. Also, a quick apology in advanced, due to client restrictions I am unable to post links and have the project on a private repository.
You have to add a markdown helper using marked or another markdown library.
https://github.com/zurb/panini/blob/dev/readme.md
What bit bothers me about django, is that I see in many examples that raw javascript is included in html with <script> tag. I would like to have it in independent files which are included in every page in <head> tag so that html stays clean. So that I will call something like {% add_jscript %}some js code{% endaddjsscript %} anywhere in the template to add js code. After all processing when the page is generated and it will dynamically collects all portions of added js code from processed templates and serve it as one js file.
Some app already does this or am I forced to do this on my own ?
I use django-sekizai (https://github.com/ojii/django-sekizai/) for this kind of thing. If I understand you correctly, I believe that is what you are looking for.
I know I'm a bit late to the party, but another option you could try (shameless plug) is a django app i've been working on which will allow you to inject django variables directly into external javascript files, a la Require.js
django-js-variable-injector
I am developing a Magento extension and would like to run some jQuery script in the footer of the html template.
I have manually edited page.xml layout file to load my jQuery source and manually edited the footer.phtml template file to test my code, but I now want to package it up into an extension. The question is how to do this within my extension configuration, to tell magento to load the new jQuery source library in the header, and to append code somewhere in the footer (or anywhere) in the magento generated theme html.
Create a custom Magento Module
Use this module to add a customer Package Layout Update XML File
Use this Package Layout Update XML files to add a javascript src link to a (CDN?) jQuery, and add a custom block to the before_body_end block
Use this custom block to output your needed Javascript code
Use Magento Connect System->Magento Connect->Package Extensions to package up your customer Magento Module file, as well as any other files on the system you used (phtml template, jQuery files if not using a CDN, etc) into an Extension.
Wouldn't it be easier to use a static block? This way the client or yourself could update the jQuery right in the admin area without going into code. You could also add logic with multiple blocks if you needed. You can display a static block in a template like so:
<?php echo $this->getChildHtml('staticblockname') ?>
Otherwise you might want to read this tutorial on creating a module (which you call an extension): http://magento4u.wordpress.com/2009/06/08/create-new-module-helloworld-in-magento/
What’s the best way to keep related files together in Django?
In addition to our HTML templates, most views have at least one additional JavaScript file, and possibly an additional CSS file. For example:
item_detail.html
item_detail.js
item_detail.css
We want to keep these files side-by-side if possible, so we don't have to look in two or three directories to find them.
Update: I do know that it’s dumb to defeat caching and that’s not what I’m asking. Each page loads several JavaScript and CSS items that are properly cached. For example:
<!-- at top of file -->
<link rel="stylesheet" href="/master/css/site-main.css">
<!-- at bottom of file -->
<script type="text/javascript" src="/master/js/jquery.js"></script>
<script type="text/javascript" src="/master/js/site-main.js"></script>
That part is fine.
In addition to this, each page loads page-specific JavaScript and CSS:
<link rel="stylesheet" href="/static/css/widgets/item_detail.css">
<script type="text/javascript" src="/static/js/widgets/item_detail.js"></script>
In this example, item_detail.js would have event handlers that are needed on the item detail page (only).
Unfortunately this means that I now have several parallel directory structures for this view:
my_site
widgets
item_detail.html ← This is the view
static
css
item_detail.css ← This is the view-specific CSS
js
item_detail.js ← This is the view-specific JavaScript
What I want is this:
my_site
widgets
item_detail.html ← This is the view
item_detail.css ← This is the view-specific CSS
item_detail.js ← This is the view-specific JavaScript
Due to the way views work in Django, it’s not clear to me that this is possible.
If you are just organizing stuff for development, you can symlink you template dir with all template, css and js files to directory you are serving static files too.
So from your example: add my_site/widgets to Django TEMPLATE_DIRS config and cp -s my_site/widgets to directory you have your static files in.
This is dirty hack and, please, don't use it in production as it is very insecure IMHO. But if you want to have neatly organized project in development stage - then I see this as one possible solution.
And also consider that this might give you loads of headache when you move from development to production as stuff WILL fail.
I agree with freiksenet. A solution to the problem he adresses could be aggregating the various css and js files. The whole site then uses just one css and one js file. The first load would be higher, yes, but a big part of the speed of a site is in downloading files, and if caching is done right, aggregation of these files helps imho.
I unfortunately don't have an answer to your main question.
I keep javascript in files separated by function and combine them into a single minified js file with a pre-commit hook (right after the tests run).
for example: I have several jquery-ui dialogs on the site I'm currently working on. Each dialog's functionality is broken off into it's own js file for maintainability. And all the needed js files are "included" on the development pages using a short base.js file like so:
function include(filename) {
document.write(unescape("%3Cscript src='" + filename + "' type='text/javascript'%3E%3C/script%3E"));
}
// include-js (external)
include('/site_media/jquery-plugin1.js');
include('/site_media/js-sources/dialog1.js');
my pre-commit hook does a regex on this file...
include\('/site_media/(.*)'\);
and feeds all the files into YUI compressor.
So I guess the answer to your question is... I put them wherever makes sense to me logically, because on the live site, it'll all be in the minified JS file(s) anyway
You don't want to have your templates available as static files -- they may contain sensitive information or details about the page's implementation which are not appropriate for the public to see.
CSS and JS do not have to be segregated into separate directories -- simply place them in the static/ directory.
my_site/
widgets/
item_detail.html
static/
item_detail.css
item_detail.js
One approach I’m testing:
my_site/
widgets/
item_detail.html
item_detail.css
item_detail.js
These are not shared statically. Instead, in the HTML template:
<script type="text/javascript" charset="utf-8">
{% include "widgets/item_detail.js" %}
</script>
(Similar code for CSS.) I would only do this for page-specific JavaScript and CSS, not site-wide stuff that can benefit from caching.
This dumps the actual JavaScript and/or CSS right into the template, yet allows me to keep them in separate files for development purposes. This is nice, development-wise but defeats some JavaScript and CSS caching, but only for page-level stuff that’s not re-used on any other page.
I am using Joomla! CMS to develop a website. In the not-so-distant past I customized a template to schlep up a website. It was fun and interesting to tear apart the code to de-joomla!-fy the template. So interesting that in fact, I am flirting with the idea of making my own template from scratch.
So, if I am to pursue this, where do I start? Do you know of any really good reference material, or should I just play with the code all day until things work out? I prefer to do tons of reading (for the concepts) before I go at it.
Create a HTML page with the layout you want, inclusive of stylesheets and Javascript
(1.5/2.5 is Mootools based)
(Joomla 3.x is jQuery based)
Adding Javascript
Keep the template initially very basic.
Save this page as index.php page.
The default directory layout is:
css
html
com_<componentname>/ mod_<modulename> (used to override the base templates of Components and Modules)
images
js
templateDetails.xml
index.php
favicon.ico
Change/Add the different Joomla constructs
Also updating the related templateDetails.xml with positions and file locations etc.
See a current template for an example of the layout.
Ex.
<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
Header section:
<jdoc:include type="head" />
Your different Modules:
<?php if($this->countModules('search')) : ?>
<jdoc:include type="modules" name="search" />
<?php endif; ?>
<jdoc:include type="module" name="breadcrumbs" />
Your Main Content tag is:
<jdoc:include type="component" />
To allow your template the ability to display debug information add:
<jdoc:include type="modules" name="debug" />
For more advanced additions to a template have a look at the default templates (ja_purity, Beez).
To override component and module layouts copy the layout files of the component or module into a similarly named directory below the html directory of your template and change it.
Edit...
Extra utilities.
To highlight the used module names in a browser add tp=1 to the end of your URL ex. yourdomain.com?tp=1
To View an inactive but installed Template add template=template_name. ex. yourdomain.com?template=Beez
These two can be combined, like this. yourdomain.com?template=Beez&tp=1
For more information look at:
Joomla Template Tutorial Part 1 - Joomla Template Concepts
How to Create Your First Joomla Template
Joomla! Docs: Template Development
Google Joomla templates
The time-honored method of learning how to do code/templates/anything is to "steal" from someone who already knows how to do it and then modify that until:
you're happy with the outcome; and/or
you've learned enough to be able to go it alone.
I suggest that would be the quickest route to success. Theory is fine but you'll learn faster by doing, and making mistakes.