I need to make a footer in Liferay and use theme for it. What's the simpliest way to do it?
I have created new theme, filled _diffs folder with other folders, but it's empty and I couldn't find relevant docs about this. Should I copy all basic files there? What should I change to create footer?
In Liferay, theme's portal_normal.vm serves as the template to
construct HTML structure of the page. There you define your header,
body and footer includes.
When you will look at the portal_normal.vm of classic theme, you will observe following HTML snippet:
<footer id="footer" role="contentinfo">
<p class="powered-by">
#language ("powered-by")
Liferay
</p>
</footer>
This is the footer of the page. This is what you need to implement. However, it's not necessary to use footer tag at all, as you can simply use div or table based structure with bootstrap or customized CSS classes for your footer, it's upto your requirement.
Remember! Classic theme is just like a sample provided by Liferay, so, it's not good idea to directly customize it.
Everybody needs a whole customized view of the site, and for this the best idea is to create a custom theme (that's what you are doing!), that will give you full control over your look-n-feel.
To kick-start, you can initially copy required folders from classic theme to your customized theme's (_diffs folder) and start changing bit by bit.
Related
I am new to liferay and using liferay-ce-portal-7.0-ga3 i have placed a blog and able to write contents in it. i want to change the blog portlet design by adding thumbnail preview to it . My current view is it has either title,abstract and full content view. How could i customize to get blog view
You can customize Liferay's appearance through Application Display Templates (ADT). Unfortunately there's no sample for the OOTB appearances, but when you go to your site's (or the global site's) Configuration area, you can find/edit/create ADTs there. Depending on the markup and CSS, as well as your typical image size etc., the actual ADT you write would be different, thus impossible to include anything here.
The editor however, has some autocomplete and some predefined entries/fields, that should give you a starting point. E.g. when you just open a blank editor and hit the "Blog Entries" field, you'll end up with
<#-- Application display templates can be used to modify
the look of a specific application. Please use the
left panel to quickly add commonly used variables.
Autocomplete is also available and can be invoked
by typing "${". -->
<#if entries?has_content>
<#list entries as curBlogEntry>
${curBlogEntry.title}
</#list>
</#if>
You'll find what you can do with BlogsEntry in it's javadoc, make sure to follow the BlogsEntryModel superclass link as well to see more.
I'll have to leave the exercise to generate proper markup and styling to you though.
I am trying to customize the Liferay UI by using custom theme using base as as "_Styled" theme.
I have my own css files which I coped to _diff/css folder of theme and imported them "custom.css" file .However its breaking the presentation of liferay.In my custom CSS I have styles defined for all the standard tags like body,div etc which is impacting the liferay UI too.
How can I resolve this conflict? Thanks in advance!
Quick (and not the best) solution is to remove contents of liferays css file (for example "base.css") and save this empty file in /diff/css/ folder of your theme. This way the base.css will get overriden with your new empty file and thus no styles will get loaded. And your custom.css will be the only stylesheet that is taken into account.
Well, of course it all has an effect on the rest of Liferay as well. Liferay provides quite a bit of the HTML DOM of your page, and if you change the presentation of all of those elements, you'll have to take care to style Liferay's elements too.
Is this a conflict? No. Let's go for the simplest case: You declare div {color:green;}. Of course, now everything, your components as well as Liferay's components, use green text. If you only want to style your own portlets, you might want to specify some portlets: div.portlet-my-own-application {color:green;}
I know that color is a too simple usecase, but I hope it illustrates the solution strategy.
Rather than following Artem Khojoyan's suggestion to override Liferay's base.css, I'd recommend to take a look at the resulting css, what's effective etc., and simplify your own css - adapt it to be used within Liferay - by inspecting the effective CSS for every elements that looks off. Firebug or any of it's relatives are your friend.
I'm afraid, with the details "I'm doing something which has an effect on Liferay UI" there's nothing much more to help you. In fact, I'd hope that what you do has an effect on Liferay's UI... You'll just need to find the proper CSS code
Ideally if your styles are loaded from custom.css, then will overwrite liferay default styles.
In some cases, to overwrite a style in css, you can use !important
for example, liferay default style
body {
background-color: #fff
}
You can specify your style to consider irrespective of order of loading
body {
background-color: red !important;
}
How to remove sign in functionality, which will display on right top corner of the Liferay portal guest page?
I tried to delete the #sign-in from custom.css file of classic theme which is the default theme for Liferay, but it did not work.
Instead of changing css in custom.css file of classic theme because it will not load changes of css, provide below css in Control Panel >> Site Pages >> Look and Feel >> CSS field.
#sign-in{
display:none;
}
I think the normal way would be to delete/comment out the velocity script code in theme's portal_normal.vm file.
<!--
#if(!$is_signed_in)
<li>
$sign_in_text
</li>
#end
-->
Then you can be sure, that there is no login code in your generated jsp files.
The solution provided by you did not worked for me. But I did changes to your code it started working.
the Change I did is as follows:
.sign-in{
display:none;
}
Instead of '#' I used '.', then its worked for me.
Thank you for the Solution.
I am playing with Orchard CMS. The problem is that comments are formatted as plain text and even <p> tags are not generated.
How to make possible a basic formatting such as <p> or may be <b>, <i>?
You override the view ListOfComments.cshtml within your own theme, then you can change what is output to the ui.
Orchard allows you to override any view/shape within your theme, hence allowing you to basically do whatever you like.
When a list item has an attachment, SharePoint automatically renders a paperclip image for that particular row, which indicates that the item has an attachment. Is there any way to change the image that is rendered?
The site is in a shared hosting environment, so I can't simply replace the image on the file system. Also, there are other lists that are part of the same site that should use the default image.
Is there any way to change the image that is rendered for items with an attachment on an individual list basis?
EDIT: Following is the HTML that is rendered:
<td class="ms-vb2">
<img align="absbottom" src="http://devsandbox/_layouts/images/attach.gif" alt="Attachment"/>
</td>
The only real way you'll be able to do this is to use jQuery (or some other javascript library). You'll need to locate the elements you want to update on the page and change the URL's
$('img[src*=attach.gif]').each(function() {
$(this).attr('src', '/path/to/new/image.png');
}
My jQuery may be a touch wrong but that should be near enough to give you an idea of what to do
Edit - The best way to have this down would be via a custom WebPart which renders the JavaScript. This way it can easily be dropped into any page you want
i don't know which element off the top, but I would look for it in one of the stylesheets and use SharePoint designer to do the replacement work for a specific list.
Use Firebug to inspect the element that you want to revert. This will tell you the css class and other properties used by that element. Then write your own class and add it to the core.css file or if you want, add it to the css for the Site/Site Collection through the MasterPages link in Site Settings.
EDIT
I used firebug to look at an image in SharePoint and here is how it is rendering.
<img id="img_1-2_" class="rpo-gif rpo-gif-2" border="0" style="padding: 0px;" alt="Expand/Collapse" src="/_layouts/images/minus.gif"/>
As you can see it is using a class and setting a src to '/_layouts/images/minus.gif'. Well you can go find that file in the 12Hive directory and then replace it with an image of your choice that has the same name.