how and where to add CSS style in sharepoint - sharepoint

SharePoint 2010 is upgraded to SharePoint 2013 and the problem I see the font-szie is very big. I checked and compared ms-vb class should have font-size 8 and font-type : verdana, arial etc.
Where can I add these 2 properties in my site? I don't have access to the " _layout/15/1033/ " folder.
I don't want to create for everypage a contenteditor and adding a style.
Where can I add these the styles then? I do have access to the site via SharePoint Designer 2013.
The change should only affect the site collection and the sites within... not the parent sites.
.ms-vb or td.ms-vb
{
font-size: 8pt;
font-style: "verdana, arial";
}
NOTE: I may not update Masterpage (no rights). There are many site collections and different people are responsible for it. I'm just responsible for my site collection with 160 subsites. So is there a way to add a CSS class in somewhere for ONCE and get ONLY my site collection be affected?
in otherwords, is there a place to CSS class or file that only affects the current site colleciton? or in another words is there a CSS at SITE collection level. (current site collection)?

You should create a new style sheet or add an override within the existing style.css located in _catalogs/masterpage/style.css. Then reference this from the masterPage. Or if you want to be bad, add the script element directly in the MP
<script>
.ms-vb or td.ms-vb
{
font-size: 8pt !important;
font-style: "verdana, arial" !important;
}
</script>

If you have the security rights to create or edit the site masterpage, you can add a style element that will be applied to all pages in that site, or even better, link to a new CSS file you create in the Style Library.
EDIT: if you don't have the ability to edit a masterpage, you can "Specify a CSS file to be used by this site and all sites that inherit from it" in the Site Master Page Settings under Alternate CSS URL.
/_layouts/15/ChangeSiteMasterPage.aspx

Related

Infopath Form Web Part shifts/moves page off center

As you can see in the image below, when the InfoPath web part is placed on the SharePoint page (SharePoint 2013), it moves the page content area of the center.
This has happened on multiple pages. I can't seem to find any information about why this is happening.
Any help would be appreciated.
This is somehow a bug in SharePoint 2013 (check here). A quick resolution would be to add the following CSS to the page (in a hidden Content Editor WebPart or a Script Editor WebPart):
#sideNavBox {
display: none;
}
Paste this code in a script editor web part. Where it says WPQ2 change the 2 to the number of that webpart. You can find that by using Google Chrome inspect element. Modify the margins css to your liking.
<style type="text/css">
#MSOZoneCell_WebPartWPQ2 {
margin-left:-200px;
margin-top:-150px; }
</style>

Use Liferay theme css in Portlets

I would like to define all our styles in a the custom Liferay theme we developed. I want to know if it is possible to use css classes defined in the theme in portlets project. We need to avoid duplicate css files in every portlet project. The aim is that the theme controls all look and feel aspects of our portlets and so if we change the theme (or deploy portlets in another portal container) portlet styles change.
You think this is possible ?
Thanks in advance ..
What you want to do is the recommended way to style both the theme and the Portlets.
Portlet styles should only be affect the layout within the Portlet it belongs. All other styles; colors, fonts, etc., should be defined in the theme's custom.css.
I would advise you to try styling the existing Portlet classes before introducing new ones. Then, if you're really stuck, edit portlet.vm.
Take a look at Liferay's Political Theme:
custom.css
...
.portlet {
margin-bottom: 10px;
.portlet-topper {
padding: 0;
.portlet-title {
...

Liferay 6.1 how to remove header section for embedded portlet

I am working on Liferay 6.1 and I want to remove portlet header section completely for one of the portlet( This should not be visible for admin even)
Header section is edit,minimize,maximize,delete and title bar.
I have tried removing border but in vain. Also tried additional style sheet options
PortletId is correct as I am able to change other styles
p_p_id_top_WAR_SecondPortletProjectportlet_.portlet-borderless-bar {
display:none;
}
p_p_id_top_WAR_SecondPortletProjectportlet_.portlet-topper {
display: none;
}
p_p_id_top_WAR_SecondPortletProjectportlet_.portlet-title {
display: none;
}
Try this code
p_p_id_top_WAR_SecondPortletProjectportlet_ .portlet-borderless-bar {
display:none;
}
p_p_id_top_WAR_SecondPortletProjectportlet_ .portlet-topper {
display: none;
}
p_p_id_top_WAR_SecondPortletProjectportlet_ .portlet-title {
display: none;
}
As you are using css class you need to give space before using it.
More Info css .class selector
Edit: Sorry, I misread your question - You're explicitly asking about an embedded portlet. Disregard my answer, I'm not deleting it as this question might be found by others that are looking for this solution for non-embedded portlets.
I'm suggesting a slightly different approach than you ask for:
Don't display portlet borders. This will do the job if you also uncheck the "Display Edit Controls" checkbox in the dockbar. However, it will allow you to move the portlets on the page, configure them as you need.
Alternatively, specify in your theme that you don't want to show the borders by default - this way you don't have to change each single portlet's borders, but they're all gone at the same time (provided the current border-display-setting is on default):
in liferay-look-and-feel.xml add this line:
<setting configurable="true"
key="portlet-setup-show-borders-default"
type="checkbox"
value="false" />
When you disable borders, some handle will only appear if a) "Display Edit Controls" is checked AND the user is hovering the mouse over a portlet.
After that, don't grant the full Administrator role to people that you don't want to see the controls at all. Instead create an alternative role with permissions that match your requirements - this typically involves setting portlet preferences for the single portlets, configuring permissions for them as well as changing/modifying pages (try them out, I can't name them from the top of my head)

How to list and edit html of all web part in sharepoint 2007?

I am new in sharepoint and I have to do a very simple modification in all web part. We have lots of web part containing very simple html. The html only contain a link and an image.
Web developers had put full links to pages and images and it cause some problems. I want to scan all of the web parts html and replace full links by relative links.
Is it possible ? We have tons of pages and links. Doing it manually will take 2 weeks!!!
Thanks!
EDIT #2:
Now the question is: Is it possible to list all aspx files in my website?
I know how to access the web parts content with a url :
using (SPLimitedWebPartManager manager = web.GetLimitedWebPartManager(
"ca/Pages/Home.aspx", PersonalizationScope.Shared))
{
foreach (System.Web.UI.WebControls.WebParts.WebPart wp in manager.WebParts)
{
System.Console.WriteLine(wp.Title);
if (wp.GetType().Equals(typeof(Microsoft.SharePoint.WebPartPages.ContentEditorWebPart)))
{
Microsoft.SharePoint.WebPartPages.ContentEditorWebPart thisWebPart = wp as Microsoft.SharePoint.WebPartPages.ContentEditorWebPart;
System.Console.WriteLine(thisWebPart.Content.InnerText );
System.Console.WriteLine(thisWebPart.Content.InnerXml);
}
}
}
EDIT #1:
As requested their is an example:
I want to remove "http://www.mywebsite.com" from all shared webparts with code like this:
<A title="" href="http://www.mywebsite.com/Pages/Career.aspx" target=""><IMG style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; BORDER-LEFT: 0px solid; BORDER-BOTTOM: 0px solid" src="http://www.mywebsite.com/images/Career.jpg" border=0></A>
In content editor web part the content is stored under content tag
<Content xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor"><![CDATA[<p>test document test document</p>]]></Content>
what i can suggest here is to open the site in sharepoint desginer and use the find and replace option for all pages
I am not sure if I got what's required exactly. What about writing a program that do that? Detect the links by regex and replace them.
If you want to actually change the content in Sharepoint, it could be difficult to do this in code. Every webpart works differently, so there's no standard solution for all web parts. For example, a CQWP can pull data from various lists, so the way to make the change for that webpart would be to change the data in the lists it pulls from. Other webparts might pull data from SQL Server, Reports, have IFrames in them, etc. Some webparts might even have the URLs hardcoded in a custom DLL, which you could only change by modifying the solution/feature that the DLL is a part of and redeploying the updated version.
However, an alternate solution is to write a Response Filter, which will take the output of Sharepoint and dynamically do a find/replace every single time a page is requested from Sharepoint. See http://aspnetresources.com/articles/HttpFilters for more information on how to do that.
Two parts to this, the first is to loop through all web part pages in your site - quite a few examples out there so not going to muddy things by repeating that here.
The second part is to update the Content property and save - seem like this is the missing part of your puzzle for updating the Content Editor Web Part (CEWP) programatically so :-
using System.Xml;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebPartPages;
private void updateContentEditor(SPWeb web, string pageUrl)
{
using (SPLimitedWebPartManager manager =
web.GetLimitedWebPartManager(pageUrl, PersonalizationScope.Shared))
{
foreach (WebPart wp in manager.WebParts)
{
if (wp.GetType() == typeof(ContentEditorWebPart))
{
ContentEditorWebPart cewp = wp as ContentEditorWebPart;
cewp.Content.InnerXml;
// See http://justgeeks.blogspot.com/2009/02/i-found-to-be-bit-tricky-to-update.html
XmlDocument xmlDoc = new XmlDocument();
XmlElement xmlElement = xmlDoc.CreateElement("MyElement");
// Do you change logic here
xmlElement.InnerText =
contentEditor.Content.InnerText.Replace(BEFORE, AFTER);
// Save changes
contentEditor.Content = xmlElement;
manager.SaveChanges(cewp);
}
}
}
}

SharePoint 2007 - How To Change Attachment Paperclip Image

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.

Resources