Call

Tag Archives: CSS

CSS Snippet

0
Filed under Web Developement

This is a snippet of the CSS code I use when starting new project. The are not rquired and can be removed

body {
	margin: 0;
	padding: 0;
}

/* I don't link the link styling defaults */
body a {
	text-decoration: none;
}


body a:hover {
	text-decoration: underline;
}

/* If I want a border I use my own style */
img{ 
	border: none;
}


.fltrt {
	float: right;
}

.fltlft { 
	float: left;
}

.clrflt { 
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/* Used for image Opacity / Transparency styling */
img.opacity {
	opacity:0.4;
	filter:alpha(opacity=40);	
}

img.opacity:hover {
	opacity:1;
	filter:alpha(opacity=100);	
}

/* My prefered forms style */
fieldset
{
	border: 1px solid #999999;
	background-color: #F4F4F4;
	margin-top: 25px;
	margin-right: auto;
	margin-bottom: 25px;
	margin-left: auto;
}

label{
	width: 200px;
	float: left;
	text-align: left;
	margin-right: 0.5em;
	display: block;

}

input{
	border-right: #999 1px solid; 
	border-top: #999 1px solid; 
	border-left: #999 1px solid; 
	border-bottom: #999 1px solid;
}

textarea {
	border-right: #999 1px solid; 
	border-top: #999 1px solid; 
	border-left: #999 1px solid; 
	border-bottom: #999 1px solid; 
}

5 CSS Tips

0
Filed under Web Developement

When creating an external CSS(Cascading Style Sheet) it is advisable to stick to the following rules:

You may, or may not be aware that it is possible to have “links” to several style sheets. It is sensible to take advantage of this and use filenames for different divisions or classes.

The filename should end with a .CSS extension.

If your website is hosted on a Linux server, please bear in mind that Linux filenames are case sensitive, so it is advisable to stick to only using lowercase.

Avoid using special characters and spaces in CSS filenames. Only use charaters a-z, number 0-9 and use underscore (_), or hyphens (-) in places of spaces.

Always check how your web pages will look in other version of Internet Explorer (IE). If you need to make a CSS change that is only applicable to a specific browser version, use a conditional comment (see below) in your HTML source. Please remember that this is only applicable to Microsoft’s IE and cannot be used with other browsers link Firefox.

<!--[if IE 7]>
<style type="text/css">
body {background-image:url('bgdesert.jpg')}
</style>
<![endif]-->

“Rebranding” SharePoint using Content Editor Web Part and CSS

0
Filed under Microsoft, SharePoint

As discussed in the SharePoint: Hide View All Site Content and Recycle Bin Post. The same instructions can be adapted to hide other unwanted SharePoint content.

Below is a selection of CSS code that can be used to “rebrand” SharePoint using a Content Editor Web Part:

<style>
/* breadcrumbs */
.ms-titlearea {
  display: none;
}
/* Tabs */
.ms-banner {
 display: none;
}
/* Title Bar */
.ms-pagetitle {
  display: none;
}
/* Search function */
.ms-searchform {
display: none
}
/* Welcome and help stuff */
.ms-globallinks {
 display: none
}
/* Remove shadings from right */
.ms-sitetitle {
     background-color: white
}
</style>

SharePoint: Hide View All Site Content and Recycle Bin

0
Filed under Microsoft, SharePoint

Sometimes it nessary to hide View All Site Content and the Recycle Bin on a SharePoint page. This can be accomplished by using a Web Part, CSS and JavaScript.

Choose Site Actions, Edit Page.

SharePoint Edit Page

SharePoint Edit Page

Add a new Content Editor Web Part(in Miscellaneous) to the page.

Choose Edit, Modify Shared Web Part.

Modify Shared Web Part

Modify Shared Web Part

Put the following two code section into the Source Editor:

<style>
.ms-navframe {
  display: none;
}
</style>
<script language="JavaScript">
document.getElementById('onettopnavbar1002-1').style.visibility='hidden';
document.getElementById('onettopnavbar1002-2').style.visibility='hidden';
document.getElementById('onettopnavbar1002-3').style.visibility='hidden';
document.getElementById('onettopnavbar1002-4').style.visibility='hidden';
</script>

Choose the OK button and now the View All Contant and Recycle bin should disappear.

Exit Edit Mode to complete.