I created a theme and copied the navigation.ftl from Liferay Classic Theme but in my theme, The navigation title is showing up as shown in the below screen-shot.
If I am logged in as an Administrator, I am able to edit the text and make it blank and Save and it goes away. But when i refresh the page, it comes back which i think is a bug.
But my question is, What do i do in the theme so that the title doesn't show up at all anywhere.
The code snippet from navigation.ftl
<#assign VOID = freeMarkerPortletPreferences.setValue("portletSetupPortletDecoratorId", "barebone") />
<div aria-expanded="false" class="collapse navbar-collapse" id="navigationCollapse">
<#if has_navigation && is_setup_complete>
<nav class="${nav_css_class} site-navigation" id="navigation" role="navigation">
<div class="navbar-right">
<#liferay.navigation_menu default_preferences="${freeMarkerPortletPreferences}" />
</div>
</nav>
</#if>
</div>
<#assign VOID = freeMarkerPortletPreferences.reset() />
I had the same issue and found that in my custom theme (starting from the Styled theme using the Theme Generator) the portlet.ftl file had the line:
<h2 class="portlet-title-text">${portlet_title}</h2>
The portlet.ftl in the Classic theme has:
<#if portlet_display.getPortletDecoratorId() != "barebone">
<h2 class="portlet-title-text">${portlet_title}</h2>
</#if>
I added that #if statement around the h2 to my portlet.ftl and now the title is not displayed if Barebone is the chosen decorator for a portlet. This works whether Barebone is set through a template or through the Look and Feel menu in the admin.
I was able to hide the title (of Navigation Menu portlet) using the following CSS in my custom theme
.portlet-static.portlet-static-end.portlet-barebone.portlet-navigation .portlet-content.portlet-content-editable .portlet-title-text {
display:none !important;
}
Edit: The above solution worked when I logged in as an Administrator only.
I replaced it with the following to hide it for Regular users as well:
section#portlet_com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet.portlet h2.portlet-title-text {
display:none !important;
}
Related
my question on the picture. In VSCode i have simple problem, when i write some tags in HTML file i have blur selection in string beggining. I tried to get back default settings, but it couldn't help.
<div class="hh1">
</div>
<div class="hh2">
</div>
<div class="hh3">
</div>
As per the comment, uninstalling the indent-rainbow extension looks like it will remove this
I'm using TinMCE to edit site content and need to add a custom piece of HTML via a button using TinyMCE plugin so when i click the button the following content gets added:
<div class="custom">
<a class="header">title</a>
<a class="delete">delete</a>
<p>Some text</p>
</div>
This is all working however I want to add a link so when I click delete the div gets removed from the TinyMCE content.
Is it possible?
Thanks
If you are using tinyMCE 4.X, it can be done using the <> source code editor option under tools. when you open it, you will see the html source code for what you have entered in the tinyMC editor.
<div class="custom">
<a class="header">title</a>
<a class="delete" onclick="this.parentNode.remove();">delete</a>
<p>Some text</p>
</div>
just make sure you have added anchor's onclick as extended_valid_elements
e.g.
tinymce.init({
...
extended_valid_elements : "a[onclick]"
... });
for more.... check this out :
http://www.tinymce.com/wiki.php/Configuration:extended_valid_elements
I'm working on Liferay 6.1 bundled with Tomcat 7.0. I've created my own layout using the liferay plugin. It looks like:
<div class="MyLayout" id="main-content" role="main">
<div class="portlet-layout">
<div class="portlet-column portlet-column-only" id="column-1">
$processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
</div>
</div>
<div class="portlet-layout">
<div class="portlet-column portlet-column-only" id="column-2">
$processor.processColumn("column-2", "portlet-column-content portlet-column-content-only")
</div>
</div>
<div class="portlet-layout">
<div class="aui-w25 portlet-column portlet-column-first" id="column-3">
$processor.processColumn("column-3", "portlet-column-content portlet-column-content-first")
</div>
<div class="aui-w75 portlet-column portlet-column-last" id="column-4">
$processor.processColumn("column-4", "portlet-column-content portlet-column-content-last")
</div>
</div>
I want to programmatically set this layout as default layout for all pages. How can I achieve this ? Any valuable suggestions will be appreciated.
You can set the default layout by configuration of liferay. Create a portal-ext.properties in the bundles-folder and put this two properties for default layout:
layout.default.template.id = MyLayout
default.layout.template.id = MyLayout
You must set both properties, else the portal throws exception by startup.
PS: Ask me, if this solution isn't for you, and you want realy to set the layout programmaticaly.
You can check the code in the seven-cogs-hook which comes bundled with liferay.
I'm trying to use jQuery show and hide which seem to work ok in Safari, when I try it on the iPhone, it doesn't work at all. Here is my code;
<script type="text/javascript">
$("#showSearch").click(function () {
$("#searchform").show(1000);
});
</script>
It's a button that when clicked, will show the search form. The form doesn't show on iPhone. Also when I add $('#showSearch').remove(); in there, it doesn't get removed, even if I add a function as the second parameter of show() it still doesn't hide the button.
Thanks for your help.
jQuery Docs:
http://api.jquery.com/show/ (Shows)
http://api.jquery.com/hide/ (Hides)
http://api.jquery.com/remove/ (Deletes)
http://api.jquery.com/toggle/ (Show/Hide)
Live Example:
http://jsfiddle.net/qQnsj/1/
JS
$('#viewMeButton').click(function() {
$('#viewMe').toggle(); // used toggle instead of .show() or .hide()
});
$('#removeMeButton').click(function() {
$('#removeMe').remove();
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<div id="viewMe">
Hello I'm in the div tag, can you see me?
</div>
<br />
<button id="viewMeButton">Show / Hide</button>
<br />
<div id="removeMe">
Click the button to remove me
</div>
<br />
<button id="removeMeButton">Remove Me</button>
</div>
</div>
I know this is an old question, but I recently had a similar problem. Hopefully this will help someone else if they find this question, too.
I was trying to hide a set of ui-block-* elements in a JQM grid. On the same grid cells, my media query for the iPhone was setting display: block !important. That was winning.
The !important directive was unnecessary in my case and when I removed it the calls to hide() and show() began working as expected.
I’m working on asp.net web site in .net 4.0 framework (VS 2010) in Win XP SP2.
In site.master page I have a control and it is populated dynamically. All is well in populating the control, but when mouse is hover on this menu item, it displays correct, but it pushes the content of page below (in my example, the content of “MainContent” is pushed below).
I tried changing the property of div, but no joy.. any help will be much appreciated.
Content of Site.Master
**<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="mnuMain" runat="server" BackColor="#FFFFCC" CssClass="menu">
<DynamicItemTemplate>
<%# Eval("Text") %>
</DynamicItemTemplate>
</asp:Menu>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="footer">
</div>**
Sample code to add it dynamically
**MenuItem item = new MenuItem();
MenuItem item1 = new MenuItem();
item.Text = "Main Menu";
item1.Text = "sub menu1";
item.ChildItems.Add(item1);
mnuMain.Items.Add(item);**
You have got a clear on the div that wraps the menu. Instead of clear the wrapper should be floated.
Is there any CSS relate to the mark up above?