Tag Info

Hot answers tagged

9

Does SharePoint 2013 have support for responsive design or do you have to create it from stratch? No, there is no built in out of the box support for responsive design in SharePoint 2013. Responsive design is different from Mobile friendly design, and as such I think it's best to do your page layout and not rely on a framework. Others feel different, ...


8

I know you asked for 2013 but I'm leaving the 2010 one here too in case anyone go crazy like you did. 2010 When any ribbon tab is open (other than the 'browse' one) it forces a 135px height on its container, which is a sibling of the #s4-workspace container, see where I am going? #s4-ribbonrow[style='height: 135px;'] ~ #s4-workspace #s4-leftpanel { ...


7

SPUtility provide us a method called - MakeBrowserCacheSafeLayoutsUrl(string, boolean) and other overload methods. Based on last modification this itself generate a MD5 hash code and append it to css or js urls. We don't have to worry about finding version numbers or generating id based on creation date, this is already handled. I have used this in my ...


5

You can simply do this by including the following part in your html master. <!--SPM:<SharePoint:CssRegistration Name="/_catalogs/masterpage/custom/css/custom-core.css" After="corev15.css" runat="server"/>--> In the file »custom-core.css« you can simply override existing styles.


5

There are custom SharePoint CSS classes that you may need to overwrite to change the colour of the hovering. Using IE developer tools I found that the two classes you're looking at are .ms-welcome-hover and .ms-siteactions-hover the welcome hover class obviously being the top bar for the page. This code in your custom CSS should change it to a blue ...


4

After long investigation I found solution. It is both SharePoint and IE 8 specific problem. IE 8 loads styles in different order, than IE 10. In IE 8, after my custom css, class .ms-core-needIEFilter was loaded. The class has gradient inside. I added to my custom CSS following code: .ms-core-needIEFilter #suiteBarLeft { background-color:transparent; ...


4

You can do so by using Delegate Controls which is by default included in master pages. There is a delegate control on master pages called AdditionalPageHead and it allows you to add multiple controls to it. This means you can write a SharePoint FEATURE and register your own control which adds references to the JS files. It is described in detail at: ...


4

If you don't apply any particular style to a table inserted in a CEWP, it'll get applied the class ms-rteTable-default. So, instead of what you have done, you can override -in your custom css file- that class: .ms-rteTable-default{ -ms-name:"Tabell - test"; border:1px solid $borderColor; // sass syntax margin: 8px 0; width:98%; } Just make ...


3

If it's SharePoint on-premises then the best way is to create a Solution with a Feature with a <Control> element targeting the AdditionalPageHead delegate control. Then you can easily turn it on/off and it works regardless of which master page you choose. For guidance see Adding jQuery to Every Page in SharePoint with Delegate Controls


3

Starter Master Pages is a great resource for learning about SharePoint 2010 master pages and a good starting point for SharePoint 2010 branding projects From _starter_publishing.master <!-- s4-ca is the main body div --> <div class="s4-ca"> <div class="s4-notdlg"> <!-- links for I like it and Tags and Notes ...


3

You could use the build-in design manager introduced in SP2013. Through this you can add a custom masterpage and in it place references to custom CSS files which you have to place in the Style Library. Here's a guide which should get you started.


3

Add your Content Editor WebPart Set Chrome to None Add HTML like this: <div class="ms-comm-adminLinks ms-core-defaultFont ms-noList"> <div class="ms-webpart-titleText"> My Web Part </div> <ul class="ms-comm-adminLinksList"> <li class="ms-comm-adminLinksListItem"> <a class="ms-link" ...


3

Add New Item and add Sharepoint/Office Module type in project Add the Folders and Files to the Module In the elements file use this format:- <?xml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <Module Name="Scripts" Url="Style Library/Scripts"> <File ...


3

In SharePoint, the main viewport of the webpage is not the html or body elements. Instead, they use div#s4-workspace, which is meant to take up 100% of the height and width (minus the ribbon). Try adding your overflow-y to this element: #s4-workspace { overflow-y: scroll; }


3

In order to overcome the tedium that ensues at the onset of every SharePoint 2010 design project, I have created a simple snippet of CSS that is intended to reset the SharePoint interface styles to inherit from your default document styles. Take a look at the SharePoint 2010 CSS Reset from Kyle Schaeffer. I didn't test it yet, but it seems to do exactly ...


3

It's possible to use plain link tag in your master page header if you can't use <SharePoint:CSSRegistration ... />, as in the case where you want to use the media attribute. <link type="text/css" rel="stylesheet" media="only screen and (min-width: 1024px)" href="Style/default.css" /> <link type="text/css" rel="stylesheet" media="only screen ...


3

Since it is CSS attributes, the server will not send any of the pictures until the browser parses the CSS and request one of the images based on how it interprets the CSS. Too me, I do not see why this shouldn't work. Just give it a try and then use fiddler or similar to se which requests and responses are sent between the browser and the server. To ...


3

Many of the class/id names have changed. Some slightly, some significantly and some are still the same. Off the top of head and from briefly flipping through my notes a few (related to quick-launch and navigation): /*2010 quick launch or current navigation*/ #ms-quickLaunch { your styles } /*2013 quick launch or current navigation*/ #sideNavBox { your ...


3

Based on Zimmergren's blogpost regarding new delegate controls in SP 2013: Create a module with the following in the Elements file <?xml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <!-- DelegateControl reference to the SuiteLinksDelegate Delegate Control --> <Control ...


2

Make the column Publishing Image required in the associated ContentType of your PageLayout. EDIT: To do this - Go to your Content Type settings: Site Settings -> Site Content Types -> your Content Type -> your column (Publishing Image) -> Here you can set the option 'Required'. Note that this setting applies to all PageLayouts associated with this ...


2

I inspected the green box with the F12 developer tools and found it: The outer box has id="Ribbon.Calendar". You can search for that in the markup to further inspect the inner elements. Edit Why can't you target them? I just did. I tested with: #Ribbon\.Calendar { font-size:12px; } Is it because you aren't escaping the .? Special characters in CSS ...


2

According to the ONET for Community sites it uses a page layout called welcomelayout2.aspx Located at ~SiteCollection/_catalogs/masterpage/welcomelayout2.aspx Full Module for default page: <Module Name="TopicsDefaultPage" Url="$Resources:osrvcore,List_Pages_UrlName;" Path=""> <File Url="Default.aspx" Type="GhostableInLibrary" > ...


2

You can inject a css file into that dialog use some code like this: var myIframe = document.getElementById('myIframeId'); var link = document.createElement("link"); link.href = "http://example.com/mystyle.css"; link.type = "text/css"; link.rel = "stylesheet"; document.getElementsByTagName("head")[0].appendChild(link); visit here for detail.


2

I can confirm that it does it in my lab environment with using IE8... Vanilla 2013 install with default 2013 master. I'm guessing it's an IE8 limitation of not being able to process the gradient filter under zoomed condition. I'd probably write a custom CSS class to push a background color separately and see if that takes in scenarios where the gradient ...


2

The short answer: When working with rich text editors that allow you to modify the HTML source, yes. The longer answer: It can be tricky. SharePoint has a lot of CSS and JavaScript involved to make it look the way it does. Sometimes you'll find that you'll apply a css style and it simply does not seem to work as expected. For this try the !important ...


2

You can add the layouts mapped folder to your project and keep javascript and css files there.You can then use ScriptLink class to register the js and CssRegistration class to register the css in the Page_Load method of the webpart. Following is the example: private const string script = "/_layouts/JQuery/JS/jquery.min.js"; ScriptLink.Register(Page, script ...


2

there's a way of getting JS included in all pages using Custom Actions, should work with SharePoint 2013 as well: Edit: Sorry, here's the actual how-to on using CustomActions to reference JavaScript files: How to add custom JavaScript code to all SharePoint 2010 pages (CustomAction) but just in case, ScriptLink registration in SharePoint 2013 sandbox ...


2

This thread might provide some clarity. Masterpage and CSS are not applied in IE 8 If IE8 is indeed loading CSS in a different order than more modern browsers, you might have to be more specific in your CSS as outlined in the thread.


2

Please concentrate on the following css classes: .ms-welcome-hover .ms-siteaction-hover and adjust the background colors: for the font color adjust this here:


2

Don't use Css in this case. Use JQuery instead because you have inheritance of styles and you can hide other things. put the following code in a script javascript tag $("#ID_AboutMe").closest("li").hide(); I assume that you have jquery library referenced



Only top voted, non community-wiki answers of a minimum length are eligible