where should I add Google Tag Manager code?
From the documentation of GTM I should copy one script into head tag and another one at the start of body tag.
As far as i could research for liferay it should be added to the theme. Where exactly should I add the GTM code, (head and body code)
Any advice would be helpful, thanks! :)
I also had to configure the GTM. Finally I had to edit the Liferay Theme.
I did it by adding theme settings:
<head>
<title> $ {the_title} - $ {company_name} </title>
<meta content = "initial-scale = 1.0, width = device-width" name = "viewport" />
<#liferay_util ["include"] page = top_head_include />
$ {google_tag_manager_header_script}
</head>
<body class = "$ {css_class}">
$ {google_tag_manager_body_script}
...
</body>
where:
<#assign google_tag_manager_header_script = getterUtil.getString (themeDisplay.getThemeSetting ("google.tag.manager.header.script")) />
<#assign google_tag_manager_body_script = getterUtil.getString (themeDisplay.getThemeSetting ("google.tag.manager.body.script")) />
and in the liferay-look-and-feel.xml I added:
<setting key = "google.tag.manager.header.script" value = "" type = "textarea" configurable = "true"> </setting>
<setting key = "google.tag.manager.body.script" value = "" type = "textarea" configurable = "true"> </setting>
you can use by the optimal way like JBaeza said or without Theme Settings if you use the theme only for one site.
In the last case you can paste the head script before < / head > and the body script next to the < body > tag on the portal_normal.ftl
Regards!
Related
Is possible to change between 2 CSS files?
For example: I have the default Bootstrap theme, but I want to make a dropdown list with a list of themes, so the user can select the theme that he wants. Searching I find that you can have something like that:
<link type="text/css" rel="stylesheet" href="../Content/bootstrap.min.css" title="default"/>
<link type="text/css" rel="alternate stylesheet" href="../Content/bootstrap.min.cosmo.css" title="cosmos"/>
And you can change with a JavaScript function:
<script>
function setActiveStyleSheet(title) {
var i, a, main;
for (i = 0; (a = document.getElementsByTagName("link")[i]) ; i++) {
alert(a.href);
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
</script>
But when I click a button, I think that the page refresh and returns to the default theme.
Is there any way to permanently change the theme?
Yes you can! You must get the url of the css file and add it to the BundleConfig and refresh the page. If you need some reference to workout with it take a look of this link
You need to persist which is the active stylesheet on client side. Probably via cookies.
I have a page with the following html in the <head> section
<link rel="stylesheet/less" type="text/css" href="/css/shared/default.less" />
<link rel="stylesheet/less" type="text/css" href="/css/shared/shared.less" />
If you use Google Chrome you can open the inspector and see it load these files. They are meant to be loaded only once however.
I need to dynamically load LESS files so I have a javascript function that does the following.
var cssurl = "/css/"+device+"/404.less";
var link = document.createElement('link');
link.rel = "stylesheet";
link.type = "text/less";
link.href = cssurl;
less.sheets.push(link);
less.refresh();//load less file dynamically
When you look under the Google Chrome Inspector under the Network tab, a problem appears.
The problem is the less.refresh() loads not only the new less file I was pushing (404.less in my example) but it also loads the default.less and shared.less again (unnecessarily); I only want it to load the new 404.less file since shared and default have already been loaded.
Does anyone know how to do this?
In most cases it makes sense to recompile all code on less.refresh();. less.refresh(); runs the complete compile process, which loads all less files from the DOM. The less compiler finds the Less code based on the rel="stylesheet/less" attribute.
Cause you are able to add an extra resource before less.refresh(); you should also be able to remove them. You can remove resource already load by removing the rel="stylesheet/less" attribute before calling less.refresh();.
Example code:
var matches = document.querySelectorAll('link[rel="stylesheet/less"]');
[].forEach.call(matches, function(match) {
match.setAttribute("rel","");
});
var cssurl = "/css/"+device+"/404.less";
var link = document.createElement('link');
link.rel = "stylesheet";
link.type = "text/less";
link.href = cssurl;
less.sheets.push(link);
less.refresh();
I have a website that uses classic ASP to render settings for CKEditor 3.
On the serverside I have:
<%
Dim Editor
Set Editor = New CKEditor
Editor.basePath = "/ckeditor/"
Editor.Config("contentsCss") = "/Styles/Editor.css"
Editor.Config("templates_files") = "/templates/news.js"
Editor.Config("width") = 570;
Editor.editor "Html", Html
Set Editor = Nothing
%>
And in news.js I have:
CKEDITOR.addTemplates('news',
{
imagesPath: CKEDITOR.getUrl('/JavaScripts/ckeditor_3.6.3/templates/images/'),
templates:
[
{
title: 'News Template',
//image: 'template1.gif',
html:
'<h3>Template 2</h3>' +
'<p>Type your text here.</p>'
}
]
});
And it renders:
<script type="text/javascript" src="/ckeditor/ckeditor.js?t=C3HA5RM"></script>
<script type="text/javascript">//<![CDATA[
CKEDITOR.replace('Html', {"contentsCss": "\u002FStyles\u002FEditor.css","templates_files": "\u002Ftemplates\u002Fnews.js","width": 570});
//]]></script>
It seems like it takes the path provided (/templates)... and does a 404 with each letter from it.... i.e /t /e /m ...
What might be missing?
According to the documentation, the templates_files should be an array of strings, even if you use only one file, so the correct configuration is
Editor.Config("templates_files") = Array("/templates/news.js")
I'm developing a web part which needs some custom CSS files. So I'm using the CssRegistration class to add them to the page header.
The code registers 4 CSS files which got deployed to the layouts folder by the web part feature. A fifth CSS files is optionally registered when there's a path to it set in the web part's property AdditionalCss. The CSS files should be inserted in the header after all SharePoint CSS files and should be sorted in the order they were added by code.
The code I used is the following:
var contentCss = new CssRegistration
{ Name = "/_layouts/MyWebPart/css/content.css",
RevealToNonIE = true };
if (SPContext.Current.Web.UIVersion == 4)
contentCss.After = "corev4.css";
else
contentCss.After = "core.css";
Controls.Add(contentCss);
var customCss = new CssRegistration
{ Name = "/_layouts/MyWebPart/css/cn_custom.css",
After = contentCss.Name, RevealToNonIE = true };
Controls.Add(customCss);
var styleCss = new CssRegistration
{ Name = "/_layouts/MyWebPart/css/styles.css",
After = customCss.Name, RevealToNonIE = true };
Controls.Add(styleCss);
var colorsCss = new CssRegistration
{ Name = "/_layouts/MyWebPart/css/colors.css",
After = styleCss.Name, RevealToNonIE = true};
Controls.Add(colorsCss);
if (!string.IsNullOrEmpty(AdditionalCss))
{
var webPartCustomCss = new CssRegistration
{ Name = AdditionalCss,
After = colorsCss.Name,
RevealToNonIE = true };
Controls.Add(webPartCustomCss);
}
When I add the web part to a page all CSS files are added to the page as expected. Except the files are sorted in the wrong order.
Without the custom CSS file the order is: (link's rel- and type-attribute were removed for a better overview)
...
<link href="/_layouts/1033/styles/Themable/corev4.css"/>
<link href="/_layouts/MyWebPart/css/colors.css"/>
<link href="/_layouts/MyWebPart/css/content.css"/>
<link href="/_layouts/MyWebPart/css/cn_custom.css"/>
<link href="/_layouts/MyWebPart/css/styles.css"/>
With the custom CSS file the order is:
...
<link href="/_layouts/1033/styles/Themable/corev4.css"/>
<link href="/_layouts/MyWebPart/css/cn_custom.css"/>
<link href="/sites/mysite/Style%2520Library/de-de/test.css"/>
<link href="/_layouts/MyWebPart/css/styles.css"/>
<link href="/_layouts/MyWebPart/css/content.css"/>
<link href="/_layouts/MyWebPart/css/colors.css"/>
As you can see both cases provide a totally different order and the CSS files were never sorted in the order they were added by code.
With this strange behavior the whole CssRegistration class is not very useful as you cannot
relay that the CSS files are always in the same order. This makes designing with CSS nearly impossible.
Have you looked at the "After" property of the CssRegistration control? I think that if you don't specify an order using this property then the results are in alphabetical order in your source. This doesn't exactly match what you see but there may be something else going on that is causing your inconsistent behavior.
http://www.wictorwilen.se/Post/What-is-new-with-the-CssRegistration-control-in-SharePoint-2010.aspx
I'm facing a problem with TinyMCE. When I enter a style tag in the HTML editor of TinyMCE, it removes the tags when I click update.
<style type="text/css">
.newclasss { color:#c9c9c9; }
</style>
My valid elements are follows:
<script type="text/javascript">
var valid_elms = "hr[class|width|size|noshade]";
valid_elms += "span[class|align|style],";
valid_elms += "font[face|size|color|style],";
valid_elms += "img[href|src|name|title|onclick|align|alt|title|";
valid_elms += "width|height|vspace|hspace],";
valid_elms += "iframe[id|class|width|size|noshade|src|height|";
valid_elms += "frameborder|border|marginwidth|marginheight|";
valid_elms += "target|scrolling|allowtransparency],style";
extended_valid_elements: valid_elms
</script>
Can anyone help please??
Since style tags are not valid XHTML, TinyMCE disabled the ability to add them outside of the tags.
You have to add style tags to the valid children configuration
valid_children : "+body[style]"
Edit: This solution applies to version 3.4.2
Source
"hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style],img[href|src|name|title|onclick|align|alt|title|width|height|vspace|hspace],iframe[id|class|width|size|noshade|src|height|frameborder|border|marginwidth|marginheight|target|scrolling|allowtransparency],style[type]"
Let me know how that works for you
If you put tinyMCE in fullpage mode, you can put styles in the <head>
<script type="text/javascript">
tinyMCE.init({
plugins : "fullpage",
});
</script>
It's a bit hacky but I'm using TinyMCE 4 and was in a pinch, so I added a <script> tag in the TinyMCE editor's Source Code view and used jQuery to change the styles.
<script>$("#signup").css("font-weight", "bold");</script>
This assumes that TinyMCE has been setup not to disallow script tags, and your page already has jQuery included in it like mine did, if not you could use standard javascript to change styles.
For me, I need to do the following in TinyMCE 4.5.7:
tinyMCE.schema.addValidChildren("body[style]")