SharePoint 2010 html rich text editor styles menu in ribbon not showing up - sharepoint

Guys i have a serious problem, like in the image below , the styles menu is not showing for html rich editor in sharepoint 2010, i included the *.css file and the PrefixStyleSheet
any help ? :(

Did yor read http://msdn.microsoft.com/en-us/library/ms551040.aspx and especially the first section which specifies how to set the PrefixStyleSheet-property of the RTE-control? If you then add css-classes with the specified stylesheet-prefix in your css, they should show up in the Styles or Markup Styles section depending on the context of the editing.
Have you done the above steps?
If you set PrefixStyleSheet to, for example "Test", your css should look like this to have a H1 show up in the Markup Styles section:
H1.TestElement-H1
{
-ms-name: "Heading 1";
}
and markup:
<PublishingWebControls:RichHtmlField id="Content" PrefixStyleSheet="Test" FieldName="PublishingPageContent" runat="server" />

Get a copy of corev4.css and do a search for ms-rte. Keep searching untill you get to a bit that looks like this:
H1.ms-rteElement-H1 {
-ms-name: "Heading 1"
}
.ms-rteElement-H1 {
FONT-SIZE: 2em; FONT-WEIGHT: normal
}
Use the supplied values to build your own styles and Markups.
Assuming your prefix is PrefixStyleSheet="myPrefex"
Markup Styles seem to require 2 css entries each. So if you wanted a markup style called "HEADING ONE!!!FTW" that was 2em bold you would have:
H1.myPrefexElement-H1 {
-ms-name: "HEADING ONE!!!FTW";
}
.myPrefexElement-H1 {
FONT-SIZE: 2em; FONT-WEIGHT: bold;
}
Markup styles are applied to existing HTML tags, so it appears the logic behind rolling your own is to overload the HTML tag with your own class name and give it a label, then flesh out your class with the actual css goodness.
Items in the STYLES drop down seem to only require a single line:
.myPrefexStyle-Bold {
-ms-name: "Bold Bits";
font-weight:bold;
}
But besure to include the -ms-name attribute as this determines the text that appears in the drop down (If you dont have this attribute you end up with blanks)
PS: Dont forget to include your own css stylesheet in the master or layout or page. I ended up putting in my master page with: <SharePoint:CssRegistration ID="CssRegistration2" Name="<% $SPUrl:~SiteCollection/Style Library/MyCustomMarkup.css %>" After="corev4.css" runat="server"/>
[offtopic]Ive only just started with sharepoint, but boy is it a dogs breakfast behind the scenes! The horror, the horror![/offtopic]

To use a custom style prefix you must set both PrefixStyleSheet and Stylesheet property:
<PublishingWebControls:RichHtmlField AllowFontsMenu="True" FieldName="Page Content" runat="server" PrefixStyleSheet="custom-rte" Stylesheet="<% $SPUrl:~sitecollection/Style Library/custom_rte.css %>"/>
Remember that doing this you will overwrite all dropdowns, colors and other options in RTE, so if you want to only change the Styles dropdown you still must to copy all the default rules.

Related

rich:autocomplete truncates selected text for display

I have a rich:autocomplete dropdown selector in my application. In the dropdown list that appears as the user begins entering text, the strings that have been loaded into the list of selections will happily display out to the entire width of the dropdown. However, once you make a selection only about 34 characters of the string will be displayed, with the result that the end user has to scroll left and right in the input box to see the entire string, see here (StackOverflow won't allow me to post inline images yet): http://imgur.com/Y9LLaBi
Here's the offending table cell in the frontend XHTML file. It uses the JSF and richfaces namespaces and there's a backing bean that creates the autocomplete suggestion list and executes other business logic, but I believe this is the only relevant code:
<td height="20" class="addborderright addborderbottom inputbox" colspan="4">
<!-- nb: richfaces autocomplete to ensure proper name entry -->
<h:message styleClass="errormsg" for="campusName" />
<rich:autocomplete id="campusName" length="50" mode="client" minChars="1"
layout="table" autofill="true" selectFirst="true"
onselectitem="javascript:executeAction(
'#studentComplaintCampusInformationBean.formName}',
'populateCampusAddressFieldsLink');"
value="#{studentComplaintCampusInformationBean.campus.operatingName}"
autocompleteList="#{studentComplaintCampusInformationBean.registeredCampusNameList}"
style="width:370px" fetchValue="#{fn}" var="fn" maxlength="100">
<rich:column>#{fn}</rich:column>
</rich:autocomplete>
</td>
To make the dropdown box left-justify text and be the same as the width of the input field the following CSS is at the top of the XHTML file:
<style>
.rf-au-fnt{
text-align: left; float: left;
}
.rf-au-lst-dcrtn .rf-au-lst-scrl {
width: 370px; !important
}
</style>
However, there doesn't appear to be a CSS property relating to the width of the displayed text in the input box, so it appears cut off to the end user, and only fills about half the available space in the input box! Could someone please help? Thanks!
rf-au-fnt is the class of the input, you're already overriding it so just add the width.
As a sidenote, rather than directly overriding the RichFaces classes you should set a class for the component and then write stylesheets like
.myAutocomplete .rf-au-fnt {text-align: left; float: left; width: 370px !important
}
This way you don't change something you wouldn't want to.

Attempting to change the colour of one link without a colour without the option

So I have been attempting different variations of trying to use #dc6820 in my code to change only one link source for a layout I'm helping someone with. Usually, I don't have too much trouble, but no matter what I've tried, it just remains the same (or I muck up the coding and have to redo it)
This is the section I'm attempting to change:
< div id="info" >
< br >posted < a href="{Permalink}">{TimeAgo}< /a> {block:RebloggedFrom}
**via < a href=" {ReblogParentURL}">{ReblogParentName}< /a>{/block:RebloggedFrom}
{block:ContentSource}(< a href="{SourceURL}">© < a href="{SourceURL}">{SourceLink}<
/a>){/block:ContentSource} {block:RebloggedFrom} < a href="{ReblogParentURL}"
target="_#nk">< /a>{/block:RebloggedFrom}**
with < a href="{Permalink}">{NoteCountWithLabel}< /a>
{block:HasTags}< div id="tags">♡{block:Tags} #< a href="{TagURL}">{Tag}< /a>
{/block:Tags}< /div>{/block:HasTags}</div></div>
{/block:Posts}
{block:PostNotes}< div id="notes">{PostNotes}</div>{/block:PostNotes}
{/block:Posts}</div></div></div>
< /div>
I'm attempting to change the section between asterisks (via --> /block:RebloggedFrom}
Edit// I've attempted the style change referenced below to, unfortunately, no results :(
Here's a link to the pastebin with the section (hopefully) without the errors pastebin.com/qNAbZAhQ –
First, let's clean-up that HTML and make sure our tags are closed.
HTML
<div id="info">
{block:Date}
posted <a class="time" href="{Permalink}">{TimeAgo}</a>
{/block:Date}
{block:RebloggedFrom}
via <a class="reblog" href="{ReblogParentURL}">{ReblogParentName}</a>
{/block:RebloggedFrom}
{block:ContentSource}
(<a class="source" href="{SourceURL}">© {SourceTitle}</a>)
{/block:ContentSource}
{block:NoteCount}
with <a class="notes" href="{Permalink}">{NoteCountWithLabel}</a>
{/block:NoteCount}
{block:HasTags}
<div id="tags">
♡
{block:Tags}
#<a class="tag" href="{TagURL}">{Tag}</a>
{/block:Tags}
</div>
{/block:HasTags}
</div>
As you can see, in addition to closing tags (and removing unnecessary elements) and wrapping everything in its correct block, I added different class attributes to each type of link so that you can go into the stylesheet in the head and add your colors. For example...
CSS
<style type="text/css">
a.reblog {
color: #DC6820;
}
</style>
or
<style type="text/css">
.reblog {
color: #DC6820;
}
</style>
or even
<style type="text/css">
.reblog:link {
color: #DC6820;
}
</style>
That latter would allow you to use CSS state selectors to change the color of the link depending on the state of the link, e.g. active, hover, visited.
You can add a style attribute to your a tag as such
< a href=" {ReblogParentURL}" style="color: #dc6820;">
Of course you need to add this to all your a tags that you want to change.

Auto-Centered Fluid-Width TabPanels with Max-Width Limit

I'm trying to create a Tab Panel that auto adjusts to fit the width of each of the tab content boxes, & also has a Max-Width of 900px, & also stays auto centered on the screen. I can get them to work individually, but not all 3 together.
You can see at this webpage that I've got the Max-Width: 900px working & the Auto-Centering working, but not Fluid-Width Auto-Adjust (it always stays at 900px instead of reducing its width for the slimmer tab content boxes, see the tabs "WATCH THE FILM" & "SCREENINGS" specifically): http://www.shellshockeddoc.com/
Here is my CSS for the tab content group so far:
#TabbedPanels2 .TabbedPanelsContentGroup {
max-width:900px;
margin-left:auto;
margin-right:auto;
margin-top:105px;
}
& here is the HTML:
<div id="TabbedPanels2">
<h2 align="center">TAB HEADLINE 1</h2>
<p align="center">Tab Content 1. This tab contains content about 850px wide.</p>
<h2 align="center" >TAB HEADLINE 2</h2>
<p align="center">Tab Content 2. This tab contains content about 350px wide.</p>
etc
</div>
Thanks a lot in advance! I'm pretty new to CSS & appreciate all the help I can get.

Unable to render vertically lay out addition of two numbers with MathJax and MathML

I would like to render two numbers on a web page like this:
123
+ 456
______
I've found this example:
<mstack>
<mn>496</mn>
<msrow> <mo>+</mo> <none/> <mn>28</mn> </msrow>
<msline/>
</mstack>
but MathJax doesn't support mstack, msrow and msline elements.I've attempted to use a mtable
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mtable id="test" columnalign="right">
<mtr><mtd></mtd><mtd><mn>12321</mn></mtd></mtr>
<mtr><mtd><mo>+</mo></mtd><mtd><mn>45665445</mn></mtd></mtr>
</mtable>
</math>
</body>
with this CSS:
<style type="text/css">
#test
{
border-bottom:1px solid black;
}
</style>
but the bottom border is overlapping the lower number. Is there a way to achieve this layout with MathJax/MathML?
You can see examples of this kind of layout in the MathML spec at
http://www.w3.org/Math/draft-spec/mathml.html#chapter3_presm.elemmath.examples
If, once the document has loaded, you select the button "convert and display with MathJax" then the MathML3 mstack markup will be transformed to some MathML2 that MathJax understands. The relevant javascript is all available linked from that page.
Also relevant is the discussion between myself and the MathJax developer at
https://groups.google.com/forum/#!msg/mathjax-users/wa85p5TAIe4/hgUoLEXrweoJ

CSS: Positioning components using margins

In the image below, you can see i have two tabs help and Instructions, i want to place these two tabs next to each other where the Help tab currently is. When i use the margin-left: property, only the help button moves to the left and the instructions button stays in the same place.
The css i am using to configure this:
.v-csslayout-topbarapplicant .v-button,
.v-csslayout-topbarapplicant .v-nativebutton,
.v-csslayout-topbarapplicant-invert .v-button,
.v-csslayout-topbarapplicant-invert .v-nativebutton {
float: right;
display: inline;
margin-right:0px;
margin-left: 268px;
margin-top: -18px;
padding: 0 3px 2px 0;
line-height: 11px;
}
How can i change the spacing so that both tabs (vaadin components) move together?
You need to make sure both items are wrapped with a div. Then you set the margin-left to that div, not only one of the items.
There's no way of telling in the CSS that you posted which items are being manipulated. If both of these items, "help" and "Instructions", are in the CSS you posted, then you to need to change it so that both items exist as one, meaning in one div. If only one of these items exist in your CSS that you posted, then you have only one of them being manipulated with the CSS, and that one is floating right. Ensure both items are floated in the same direction and they are wrapped. Apply the margin to this wrapper div.
The general structure should look like this:
CSS:
#help, #instructions {
float: right;
}
div#wrapper {
margin-left: 268px;
] /* wrapper containing both items, "help" and "Instructions" */
HTML:
<div id="wrapper">
<div id="help"></div>
<div id="instructions"></div>
</div>
I think that you are having some inheritance problems.
I would suggest first checking what inheritance this property is following, and if you still have problems I would then create separate divs for Help and Instructions, where instructions has a different right margin. I hope this helps! This type of problems are stubborn.

Resources