We have a need to include long title for Sharepoint's (2007) built in webpart. title runs across and users are having to scroll left to right. Is there a way to introduce wrapping to the web part title? I tried few html tag but they are not working.
You should add this little snippet of css that will override the way the space are rendered in the title (and will thus allow proper wrapping) in either your master page, a separate style sheet or one linked with the master page that you are using (do not edit core.css although)
.ms-WPTitle nobr { white-space: normal !important; }
The easiest way is to include it inline within your master page, you'll have versioning for your master page if you want to roll back this change and it won't require to create another style sheet and attach it in the master page or load it as an alternate stylesheet.
In the relevant master page, at the end of the head tag, add this style overriding
<head>
<!-- ootb head content kept above -->
<style type="text/css">
.ms-WPTitle nobr { white-space: normal !important; }
</style>
</head>
Related
I tried liferay-hook.xml:
<custom-jsp-dir>/WEB-INF/custom_jsps</custom-jsp-dir>
<custom-jsp-global>true</custom-jsp-global>
and create file on /WEB-INF/jsp/html/common/themes/top_js-ext.jspf and put all my <link href="" rel="stylesheet" type="text/css"> there. but it will applied to all pages on my page. I want to know on how to apply global styling on selected portlet on liferay. Thanks.
The best way to introduce global CSS styles is through your theme, not through a JSP override. Create a theme that contains the CSS you'd like to use. This way, Liferay will include your CSS in the minified version, compact all files to be downloaded in just a single request. Plus, your changes are probably relevant for a specific theme anyways.
Use your browser's DOM inspection tools to analyse the CSS selector you need. Each portlet declares specific classes that you can easily address. e.g.
.portlet-navigation {
background-color: red;
}
I am using primefaces schedule, i want to change the color of event header which is saved in DB,
scheduleEvent.setStyleClass(".event-consultation .fc-event-skin .fc-event-head");
using this class i want to change the background-color property with the color saved in DB. how can i change color got from db here?
I don't try it, but I guess the following should work:
<style type="text/css">
.yourclass .fc-event-inner{
background-color: #{yourBackBean.backGroundProperty};
}
</style>
....
scheduleEvent.setStyleClass("yourclass");
This way, you specify in-page CSS style that set as color-background the value of a backBean property that you previously loaded from DB.
Of course, you can create an application scope backBean and hardcode the EL in an external CSS file. Your choice.
Hope it helps!
Edit to clarify
You have to put the <style> html node inside <h:head>. I just tested it in a project to change background color of a <p:menuBar> this way:
<h:head>
... some stuff of mine, not relevant
<style type="text/css">
.ui-menubar,.ui-menu-child,.ui-menu {
background: #{sessionBean.bckgColor} !important;
}
</style>
</h:head>
And it works like a charm. I don't know what css style do you have to adapt to custom the event component of <p:schedule>, I am telling you how to write a custom CSS reading values from DB or whatever, using EL.
Maybe you need to use !importan css attribute to override original values as I did.
I am using a script that adds scollbars to a doc library webpart which works fine on sites using the "default.master" system master page, but once I attempt to use my custom master page it breaks the jquery and the scrollbars do not appear.
Any idea on what I can look at in my custom master page to fix this? I am using a CEWP and not directly including the jquery inside my master page.
scollbar script (just in case)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"
type="text/javascript"></script>
<style type="text/css">
<!--
.DataGridFixedHeader { position: relative; top: expression(this.offsetParent.scrollTop);}
-->
</style>
<script type="text/javascript">
$(function(){
var $table = $("TABLE[ID^='onetidDoclibViewTbl0']",
"#MSO_ContentTable");
<!--WRAP TABLE IN SCROLL PANE-->
$table.wrap("<DIV style='OVERFLOW: auto; HEIGHT: 250px'></DIV>");
<!--FROZEN HEADER ROW-->
$("TR.ms-viewheadertr:first", $table).addClass("DataGridFixedHeader");
});
</script>
Did you check the browser console to see if the jquery is being correctly loaded? Or if there is another script error? This script seems to be fine but if you have a script error on the page before this it will never be loaded.
Depending on parent html tag of an SVG object, I would like it's path color to change. Can this be done with SVG? For instance, if a logo is in the header I want it to be red, if it is in the footer I want it to be blue. Here's an example:
<style type="text/css">
#header-img {
fill:blue;
}
#footer-img {
fill:black;
}
</style>
...
<header>
<object id="header-img" type="image/svg+xml" data="myimg.svg" />
</header>
...
<footer>
<object id="footer-img" type="image/svg+xml" data="myimg.svg" />
</footer>
Granted, this can't be done, but is there an alternative without using JavaScript?
Starting again, this is the best question/answer to your problem that I can find:
How to apply a style to an embedded SVG?
It's possible for you to add a linked stylesheet to the file you wish to embed by hand...
Thereby avoiding the use of JavaScript.
I would argue that you should try not to ask redundant questions.
We'd have both done well to have sourced this earlier.
Yes you can.
SVG elements can be manipulated in much the same way as any other HTML/DOM element. For example, with Raphael JS (http://raphaeljs.com/) you could, at the very least, find the absolute position of a vector/SVG element in the browser window, compare that to the absolute position of your header/footer and, using JQuery, trigger an event to change the colour of the SVG.
Raphael additionally renders VML graphics for old versions of IE. So it's well worth looking into.
That said, if you're not planning to use JavaScript, then do it with CSS instead.
Updated with a working example, found here;
http://jsfiddle.net/Zp6HS/4/
Replacing the 'circle' element with your custom path, and the css properties you want to change.
Can't you use the 'parent of' operator in css? Like so:
<style>
header > svg {
fill:blue;
}
body > svg {
fill:black;
}
</style>
I'm having an issue setting Page.Title for a page from the codebehind of a usercontrol (sublayout).
We have a layout, MainLayout.aspx. I can set the page title from the codebehind of this page, and it works fine. However, if, after this, I try to set the page title in the codebehind of MySublayout1, the new value is set for the Page.Title property, but the change is not reflected on the page.
I've tried moving the code from the Page_Load to the OnInit events for both the page and the control, but nothing seems to work. Any idea why this doesn't work?
The best approach for this is creating an new rendering or sublayout that renders the -section of your page. So you can set the values in literals or sc:text controls in the sublayout instead of setting only the Page.Title from codebehind.
This way you can set more properties all at once like the meta-keywords and meta-description, based on the current Sitecore Item.
I'd add the following to the layout or sublayout that is in it:
<head runat="server" id="_Head">
<title><sc:FieldRenderer ID="frTitle" runat="server" FieldName="title" /></title>
</head>
Also make sure that you call DataBind(); or set Sitecore.Context.State.DataBind to true.
If you want the Sublayout to override the title set in the Layout, you can move the code in the Layout to Page_Init and use Page_Load in your Sublayout.
If that doesn't work, then your Sublayout may have trouble accessing the Page. You can try using WebUtil.CurrentPage.Title to access the current page title. It might also require that you set runat="server" on the head and title elements as follows:
<head runat="server">
<title runat="server"></title>
You can simply use this:
< title> <%=Sitecore.Context.Item["PageTitleFieldName"] %> < /title>
It works fine to render page title from given field.