I have gone through some Joomla tutorials and I am not understanding how Joomla works. I have never encountered something where every aspect of it evades me. I'm not asking for a free ride.. just where to go or a basic idea of how this works.
I simply need to add a Panoramio javascript into the <head></head> section of a joomla website. In Word Press I simply download the header.php template and code away.
It's so confusing understanding Joomla. I do know not to paste directly into an "Article" page so do I have to install some sort of extension or tool to even get this to work?
I read to edit the index.php in my templates but I can't even find that. Am I the only person that can't understand Joomla at all? Even the beginner documentation seems to assume I know their system. Thank you in advance.
Be careful about which files you add code to. Editing core files like the index.php in the templates folder might not be the best solution. What if there is a template update? The file will get overridden. So just bare that in mind.
Before you add the script, it is good idea to get the name of current template:
$app = JFactory::getApplication();
$template = $app->getTemplate();
You can use the following to import a .js file the <head> tags:
$doc = JFactory::getDocument(); //only include if not already included
$doc->addScript(JUri::root() . 'templates/' . $template . '/file.js');
or you can add the Javascript there and then like so:
$doc = JFactory::getDocument();
$js = "
//javascript goes here
";
$doc->addScriptDeclaration($js);
Hope this helps
you can edit index.php file and other template files as css etc.
go to : Extensions->template manager
chose template TAB
Second from the left you see: "template name" Details and Files
here you can edit any template file directly on your server.
Menu can change depending on Joomla version, but that's the general idea.
You definitely aren't the only one. Joomla is meant to be able to handle anything you need it to do, and this makes it rather complicated.
Your best bet is to add the script to the template index.php file that you mentioned if you want it to be available throughout the entire site. If you just needed it for a particular module or component, you would instead want to load it there. In your case, since you are fairly new to Joomla, let's just get it loading!
Navigate to your base Joomla directory (where you installed Joomla) and look for the templates folder. Within this you should have several folders. Hopefully you know which template you are currently using and open that folder and there should be an index.php file in it. The top of this file should look similar to the header.php file from Wordpress. Add your script tag to the header element and it should load.
If you have no idea what the name of your current template is, go to Extensions->Template Manager on the backend. There should be two with stars to the right of them. One should be marked "administrator" and the other "site". The folder that you are looking for in the templates folder should match the name of the "site" template.
Here is a quick tutorial on what you need to do:
Joomla! templates are at the /templates folder (locate your template)
inside you find the index.php file (there you need to change stuff)
inside you will find a html page with some PHP inside it
locate the <head> tag
How add this:
$doc->addScript($this->baseurl.'/templates/'.$this->template.'/javascript/YOURSCRIPT.js', 'text/javascript');
Make sure that this line of code already exists:
$doc = JFactory::getDocument();
Footnote: Because you did not specifiy what Joomla! version you are using, this example is from Joomla! 2.5, the current LTS.
P.S. You can also insert the script the 'normal' way, after the <head> tag.
I am no expert in JavaScript but I have an AJAX application that works perfectly without modifying any template files. The thing is that it adds the JavaScript at the bottom of the page, not in the head section. I don't know if this is an issue but it works for me.
1) Go to Extensions->Module Manager
2) Create a new module. Call it JavaScript Footer (for example)
3) Under the Details tab set Show Title to Hide, set Position to Debug, set Status to Published and set Access to Public
4) Under the Custom Output tab, type
<script type="text/javascript" src="http://yourdomain.com/yourscript.js"></script>
I never did understand why some scripts are in the header while others are at the bottom of the body (Google Analytics for example) but it works for me.
Joomla is quite different from Wordpress. Actually, index.php is rather useless when customizing joomla template. You will have to explore the blocks of the template in the folder blocks found in your template. For example, to add a scripts in the header section just edit header.php in the directory your_template/blocks.
Related
I am developing a Google App Script project that will be used right from within a Google Sheet, with HTML files as dialogs. My project will be a mix of .gs files as well as HTML files for data entry, etc. I am trying to use the methodology explained here:
https://developers.google.com/apps-script/guides/html/best-practices#separate_html_css_and_javascript
to create global JavaScript and CSS modules that I can include in my HTML files rather than cutting and pasting inline code all over the place. This will be mainly useful for the data-saving routines which capture form data, serialize it, then save it to Sheets via the methodology outlined here (and many other places): http://railsrescue.com/blog/2015-05-28-step-by-step-setup-to-send-form-data-to-google-sheets/.
The problem I am having is with trying to call the "include" statement from my HTML files, namely, lines like:
<?!= include('JavaScript'); ?>
It doesn't work when I create a menu on the spreadsheet to display my HTML file as a dialog -- the text of the include line just shows up as literal output on the dialog, and code does not appear to be getting included (not in scope).
I know the Google example is primarily for pages delpoyed via a web app, but I'd like to use my HTML files as dialogs right inside the spreadsheet (e.g. from a menu or sidebar) -- that feels nice and tidy to me. But if I can't get includes to work, my code base is going to be a nightmare and it will be really, really hard to standardize CSS across the whole app. I don't want to be cutting and pasting all the time.
So, what is the secret behind this <?! tag, and why won't it work in my HTML files when they are called as dialogs? It is clear those lines are different from the get-go (maybe not in a bad way, but they don't work), as the Google Scripting console displays those lines oddly, as depicted in the screenshot below:
Please try adding:
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
More information can be found in Adding Style Sheets.
Figured it out. I was not properly understanding the way the HTML was being served up as a dialog. I was using this behind a custom menu option:
var html = HtmlService.createHtmlOutputFromFile(htmlFileName);
when I should have been using the more dynamic:
var html = HtmlService.createTemplateFromFile(htmlFileName).evaluate();
The latter generates a user interface object where the server-side script is executed and everything is included properly when I display the object with showModalDialog() (or showSidebar()).
I just had a complete misunderstanding of how the user interface object was being created, so now all scripting works inside my HTML files.
I'm developing a web application and I want add a js file in my project to use it. I tried to add in this way:
<spring:url value="/resources/scripts/gestion.js" var="gestion"/>
<script src="${gestion}" type="text/javascript"></script>
The js loads correctly, but the problem is that the page is not showing anything, if I put this code in the end of the jsp file, before of tag <div> the jquery and another js file of the project not work although I can see the content of the jsp.
Somebody can help me with this?
You should include it into src/main/webapp/WEB-INF/tags/util/load-scripts.tagx file.
This tag is used by src/main/webapp/WEB-INF/layouts/default.jspx which is used by Apache Tiles configuration file src/main/webapp/WEB-INF/layouts/layouts.xml to generate the final html output.
Good luck!
The folowing code inserted into joomla->customHTML module is not working however it works in ordinary LAMP.
document.getElementById("foo").innerHTML = "\"Lorem\" ipsum\
\"dolor\"\
\"sit amet\"\
";
Inserted by sourcerer system plug in.
Not suprisingly this works for both
document.getElementById("foo").innerHTML = "\"Lorem\" ipsum\"dolor\"\"sit amet\"";
Is there way to make this environment more stable?
Javascript doesn't allow multi-line strings, it's not php.
Also Joomla custom HTML module will usually strip <script> code
Besides custom HTML, there is an extension by nonumber.nl that allows you to insert javascripts easily in the page, the name is sourcerer if I'm not mistaken.
Creating local files on server and adding them to the page cleared all errors caused by collisions with joomla.
I am now also able to work with editors that i used to.
I simply created a .js .php .css files on server and add them with sourcerer plug-in to the page under joomla.
{source} //source tag for joomla sourcerer plug-in
<link href="/includes/comsettings/comstyle.css" type="text/css" rel="stylesheet" />
<?php
require './includes/comsettings/comsettings.php';
echo '<script src="./includes/comsettings/comsettings.js" type="text/javascript"></script>';
?>
{/source}
This way, all operations done by joomla editors to the source are overridden. Except, of course variables created by joomla for frame work (Example $_POST array is ,still, already set on all pages)
Every arcticle or customHTML module (created by joomla beckend) are created under public root directory that you installed joomla in. While inserting your files (custom ,non-joomla originated) to the page, you can navigate from root to any directory (readable/executable dirs) which your files created under it.
I'm pretty new to web development. What is the best practice in keeping the same sidebar and other elements across web pages on one's site? Do you store the sidebar html and call that? If so, how would one go about doing something like that?
There're many options to handle this problem but I've found easy one using jQuery. Use this if it suits your requirements.
Add the jQuery CDN in your HTML file.
Create a JS file as sidebar.js.
Copy all your HTML code of the sidebar and store as a string variable in a function of the JS file. as
function loadNavbarDiv() {
String navbar_code_str = '<nav><div>...</div></nav>
$('body').append(navbar_code_str);
}
Then in the HTML file, you want to add navigation bar, add folowing code in your <head>
<script src="sidebar.js"></script>
<script>
$(document).ready(function(){
loadNavDiv();
});
</script>
It's working fine for me.
Happy coding!
Here's one way to do it: use "include" files. No JavaScript required. The server does the work, instead of requiring the client to add the content.
SSI, or Server Side Includes, were first developed to allow Web
developers to "include" HTML documents inside other pages. If your Web
server supports SSI, it's easy to create templates for your Web site.
Save the HTML for the common elements of your site as separate files.
For example, your navigation section might be saved as navigation.html
or navigation.ssi.
Use the following SSI tag to include that HTML in each page.
<!--#include virtual="path to file/include-file.html" -->
Use that same code on every page that you want to include the file.
That page also describes some other approaches. But if you know this is called using include files, you can search for it more easily. For example, this article describes includes and how to call them from JavaScript if you must.
As long as you're only coding in html, you will need to copy your html into every page. You can store the css for the sidebar in one and the same file and call that on every page though.
Other scripting languages and frameworks might contain templates (php) or master pages (asp.net) for example which make it possible to use the same code in different pages.
i,
I purchased a WP theme recently.
Seems that this theme is injecting a footer link in a sophisticated way that I can't find how to remove.
usually it link to WP theme sites (wp2blog.com/ , themes.weboy.org/ ) , which aren't related to me at all.
I tried to see if this is a CSS or JS injection - but I just can't find where this code is hiding.
It is surely not on the footer.php file which I immediately monitored.
any ideas?
thanks for the quick comments.
The culprit was the itself
Apparently somehow it injected those spam links.
I removed it and now the links are gone.
Still it's interesting how it was done.
How can I see which scripts are being called by wp_footer() ?
By removing <?php wp_footer(); ?> you will probably break some of your plugins, as they hook into either the header or footer to load JS and CSS for functionality.
Edit footer.php to remove those links.
If you need to see what wp_footer puts into the source of your site, view source on the page to get the full html.
But if it's a paid theme, you get what you pay for.
Generally, they do it with something like this
<?php echo eval(base64_decode('aC453434...')); ?>
Basically, they just encode the PHP code in Base64, and then eval() the returned string.
Check in footer.php, and it may also call other functions in functions.php IIRC.
Also, check the license and/or docs supplied with the theme. It may be a problem or violation of terms to remove that. They probably went about obfuscating it for a reason.
Answer: They usually have to have another (php) file from which to call in the appropriate spammy links. Check your theme directory for suspicious subfolders or php files with only a couple of lines within them.
Could be that they are really sneaky and have put the calling of spammy links within the Theme Widgets php file. But that is the best advice I can give as WordPress developer myself (who obviously never would even dream of putting spammy links inside my themes - it is a nightmarish way of losing clients as well as one´s reputation) - however, You have done the wrong thing, never delete wp_footer(); that is an essential part of any working WordPress installation because it will be required by future plugins that You shall have to certainly install to get WordPress working properly - like minifying and caching plugins for example.
Run the theme through Exploit Scanner and the Theme Authenticity Checker. There's probably some type of base64. You could also just search the whole theme manually for base64 and/or eval and see if it returns anything suspicious.
It's possible you purchased a knockoff theme, or just a bad one.
Solution: Keep the spammy code then go the the html source of the RENDERED PAGE and copy what's missing (generally it's a footer in the bottom of the page and explicitly marked as such with a div).
Copy what's there in your template code instead of the spammy eval base64 code, and remove the extra links and you're done.
This is how I did it.