PANVEGA’s Blog

DotNet Development, SharePoint Customizing, Silverlight, MS Infrastructure and other tips and tricks

Archive for the ‘CSS’ Category

CSS Styles for your GlobalLinks in the Core.css

Posted by PANVEGA on July 13, 2009

So usually Mozillas Firebag or IE´s DeveloperTool bar are perfect for editing the CSS Styles for your SharePoint pages.  But sometimes there are some fairly hard styles to catch though, even with the assistance of on of these add-ons. Within your SharePoint site you want to customize the colors or background a little.

Generally, styles I primarily use to change the main elements of Site Actions are as follows, though a quick search for “ms-menuUI” in core.css will lead you to the quick realization that this list is not near exhaustive:

DO NOT MODIFY THE CORE.CSS. But the classes into a seperate CSS file and reference it in your MasterPage. Read the rest of this entry »

Advertisements

Posted in CSS, MasterPage, MOSS | Tagged: , , | Leave a Comment »

Custom Table Format with the SP HTML Webpart

Posted by PANVEGA on June 2, 2009

When editing content in a SharePoint Publishing site, you can select from 5 predefined table formats when inserting a table. The image on the left lists the table formats available to select from. Although the table formats are worth consideration, they may not match the unique fonts, colors, and other branding defined elsewhere within your web site.

Microsoft Office SharePoint Server 2007 includes an advanced Rich Text Editor that supports predefined table formats. The Rich Text Editor in SharePoint Server 2007 reads the predefined table formats from cascading style sheets that are linked to the page.

You can view the OOTB styles by going to “http://yourportalsite/_layouts/1033/styles/HtmlEditorTableFormats.css


TableTemplate

Read the rest of this entry »

Posted in CSS, MasterPage, MOSS, WebParts | Tagged: , , , | Leave a Comment »

Custom CSS Styles in the SP RichText Editor DropDown

Posted by PANVEGA on May 26, 2009

When creating content on a publishing site through a Page Content HTML editor there are some basic styles that come OOTB: The styles are actually conditional and different styles appear based on the type of content selected. Create your own set of standard header and section styles that are easily available to your content authors directly within the content editor.  These styles appear in the seldom-used “Styles” menu within the content editor toolbar.  By default, you’ll notice this menu is populated with three header styles that are just about everything but useful. Read the rest of this entry »

Posted in CSS, MasterPage, MOSS, SPDesigner, WebParts | Tagged: , , , | 1 Comment »

Retrieve all available values “Itemstyles.xsl”

Posted by PANVEGA on April 16, 2009

A good practice to follow when you are going to use some fields from a List or a Library in your ContentQuery Webpart is to retreive all available values.

You can find this file in the document library called ‘Style Library’ in the root of the site collection ( /Style Library/XSL Style Sheets/ItemStyle.xsl ). Open the file in an editor of choice (eg. Microsoft Office SharePoint Designer). Next check it out to be able to make changes to the file.

More about CQWP and Webparts in general follow these  links to one of my posts:

https://panvega.wordpress.com/2009/01/07/introduction-in-the-content-query-webpart

https://panvega.wordpress.com/2008/06/03/customize-itemstylexsl-for-contentquery-webpart

At the bottom of the XSL sheet, right before the </xsl:stylesheet>, I put in the following code:

<xsl:template name="ShowValues" match="Row[@Style='ShowValues']" mode="itemstyle">
  <xsl:for-each select="@*">
    P:<xsl:value-of select="name()" /><br />
    V:<xsl:value-of select="." /><br /><br />
  </xsl:for-each>
</xsl:template>

This comes in handy when you are trying to write custom code in your web part and need the “proper” name of a field opposed to the GUID (e.g. “General Information” would be “General_x0020_Information”). The “P” is the parameter in the case above and the “V” is the value being passed. In some cases the stored field name is differenr from the current presentet value.

This works for any web part that is referencing your new custom Item Style XSL file.

Posted in CSS, MOSS, XSLT | Tagged: , , | 2 Comments »

SharePoint MasterPages CSS Registrations Approaches

Posted by PANVEGA on April 1, 2009

If you look closely to the CSS Registration in the MasterPage Header,  there are tokens here that the system replaces at runtime. Let’s examine one further, looking at the source code and then what is rendered in the browser for an example site:

1. Example

<SharePoint:CssLink runat=”server” DefaultUrl=”/Style Library/yourCSSfile1.css”/>
<SharePoint:CssRegistration name=”<% $SPUrl:~sitecollection/Style Library/yourCSSfile2.css %>” runat=”server”/>

Rendered as:

<link rel=”stylesheet” type=”text/css” href=”/_layouts/1033/styles/controls.css?rev=EhwiQKSLiI%2F4dGDs6DyUdQ%3D%3D”/>
<link rel=”stylesheet” type=”text/css” href=”/_wpresources/RadEditorSharePoint/4.5.0.0__1f131a624888eeed/RadControls/Editor/CssEditor.css”/>
<link rel=”stylesheet” type=”text/css” href=”/Style%20Library/yourCSSfile1.cs”/>
<link rel=”stylesheet” type=”text/css” href=”/_layouts/1033/styles/core.css?rev=yc7T90GBeB5Wkb4r5wtwNg%3D%3D”/>

<link rel=”stylesheet” type=”text/css” href=”/Style%20Library/yourCSSfile2.css”/>

SharePoint reders the default MasterPage CSS references and your custom CSS as well, when your apply for instance:

<SharePoint:CssLink runat=”server” DefaultUrl=”/Style Library/yourCSSfile1.css”/> Read the rest of this entry »

Posted in CSS, MasterPage, MOSS | Tagged: , , | 2 Comments »

Modify the SP Print Preview with CSS Media Types

Posted by PANVEGA on March 30, 2009

When working with the MS Sample MasterPages for instance I could not print the whole page when using a browsers print preview. No more these tons of tables anymore Yessss! However the MasterPage classes are applied to the default Media Type in the core.css, which does not of course affect the standard SP MasterPages when printing.

Definitions:

  • Media Types allow you to specify how documents will be presented in different media. The @media rule allows different style rules for different media in the same style sheet. The document can be displayed differently on the screen, on the paper, with an aural browser, etc.
  • The master page almost always defaults to DEFAULT.MASTER . DEFAULT.MASTER refers to a file called CORE.CSS. Thus, any web pages that use this template will always use CORE.CSS when processing styles.
  • Microsoft has made available four sample master page sets compatible with the Application Templates for Microsoft Windows SharePoint Services 3.0 to showcase some of the customization options master pages provide. The download includes four master page sets; each set has a distinctive look and feel and comes in five color variations: blue, orange, red, purple, and green.

http://www.microsoft.com/downloads/details.aspx?FamilyId=7C05CA44-869A-463B-84D7-57B053711A96&displaylang=en

The main content wasn´t visible in the print preview.  After a little quick digging I quickly discovered this code in the core.ss. All the important classes are set to display:none.

@media print{
.ms-leftareacell,.ms-globallinks,.ms-siteaction,.ms-areaseparatorleft,.ms-rightareacell,.ms-areaseparatorright,
.ms-areaseparatorcorner,.ms-titlearealeft,.ms-titlearearight,.ms-searchform,.ms-banner,.ms-buttonheightwidth,.ms-buttonheightwidth2{
display:none;
}
} Read the rest of this entry »

Posted in CSS, MasterPage, MOSS, SPDesigner | Tagged: , , , | 2 Comments »

Customizing Styles of Table of Contents WebPart (TOC)

Posted by PANVEGA on February 11, 2009

I this post I gonna show you how easy it is to customize the default Tabel of Contents Webpart. This webpart can list pages, lists and subsites of a specific site, and this in a custom organization and presentation. When using it on the default master page, it shows the content in different levels with some nice indentation applied to it. The main modification is to the XSLT that the web part uses when rendering the contents.

the TOC Web Part consists of the following files to amend:

  • Header.xsl
  • LevelStyle.xsl
  • TableOfContentsMain.xsl

The solution  is adding custom CSS styles unit to the xsl templates. Luckily, the table of contents is one of those webparts which uses XSL style sheets to format its data and makes those available in the Style Library within your SharePoint site collection. Once inside this style sheet (LevelStyle.xsl), one can easily be edited to the different styles. Read the rest of this entry »

Posted in CSS, MOSS, SPDesigner, WebParts, XSLT | Tagged: , , , , | 9 Comments »

Differents between Class and ID in CSS

Posted by PANVEGA on February 12, 2008

In this short post I gonna explain in easy words the main differents between a CSS Class and CSS ID.

Introduction:

CSS IDs are similar to classes in that they define a special case for an element. Notice that an ID’s CSS is an HTML element, followed by a “#”, and finally ID’s name. The end result looks something like “element#idname”. Also, be sure to absorb the fact that when an ID is used in HTML, we must use “id=name” instead of “class=name” to reference it!

  • ID = A person’s Identification (ID) is unique to one person.
  • Class = There are many people in a class.
  • Classes and ID’s don’t have any styling information to them all by themselves. They require CSS to target them and apply styling.

The key thing to know is that IDs identify a specific element and therefore must be unique on the page – you can only use a specific ID once per document. Many browsers do not enforce this rule but it is a basic rule of HTML/XHTML and should be observed. Classes mark elements as members of a group and can be used multiple times, so if you want to define a style which will be applied to multiple elements you should use a class instead.

In my opinion the most important difference is that ID can be called by Javascript’s getElementByID function.I had to use the function many times and it is always very helpful calling the ID.

document.getElementById(“Headline”).style.visibility = “visible”;

Read the rest of this entry »

Posted in CSS, JavaScript | Tagged: , | Leave a Comment »