Hot answers tagged

7

If you have deployed the CSS file to the Style Library or an Assets library, make sure it is checked in as a major version and approved. It could be possible that your page layout is not published and approved as well. This is the typical symptom when an asset is not approved, it works fine for admins but not general users.


7

You can put your script inside an EditModePanel control. Setting the PageDisplayMode property determines when it shows on the page. I use them for setting different CSS on a page layout during editing and they would be perfect in your scenario. Look at some of the OOTB page layouts for examples.


6

You would want to create an alternate css file. In it you would do .ms-pub-contentLayout { background-color: rgba(255, 255, 255, 1); } Save this css file in your site, then apply it using the Alternate CSS URL option in the MasterPage options, accessible via Site Settings, Master page, Alternate CSS section aka /_layouts/15/ChangeSiteMasterPage.aspx.


6

Add an id: <pre id="myId" .... And then hide it with jquery: addNewTest = function() { $('#myId').hide(); }); or without jquery: addNewTest = function() { document.getElementById('myId').style.display = 'none'; });


5

I have been using Mavention minifier tool. It is working as expected and you can apply this on the particular files that you wanted. MaventionMinifiedCssFileGenerator - for minifying CSS files MaventionMinifiedJsFileGenerator - for minifying JavaScript files MaventionObfuscatedJsFileGenerator - for minifying and obfuscating JavaScript files are the ...


5

easiest and best way for adding custom CSS is to add Alternate CSS URL from following web url in Central Administration Web App (port 3000 ) http://portal:3000/_layouts/15/ChangeSiteMasterPage.aspx Notes: first upload your css to below default and recommended location. you should already know that you can add this location to your windows mapped ...


5

I guess you could always use a site collection token in your URL. ~sitecollection URLs and tokens in SharePoint 2013 If that don't work out for you, this blog post has a lot of great examples when working with masterpages and references. Use Site Url in SharePoint Update Try using a scriptlink instead. I'm unsure if encoding is needed thought. Try to ...


5

You can use ~sitecollection instead of ~Site <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/awesome.css %>" runat="server" /> For html master page, it will be: <!--SPM:<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/awesome.css %>" runat="server" />-->


4

A ductape patch is adding a negative margin-top <div style="margin-top:-200px"> YOUR CONTENT </div>


4

You wanna target the specific webpart where you wanna change the link color, otherwise every link on the page will change font color. Use F12 Developer tools to find the ID of the specific webpart you wanna change the link text for. Insert the name/ID instead of my example (#WebPartWPQ5) and then use the CSS i provided below (SP2013). <style ...


4

Find id of that WP. Something like WebPartTitleWPQ4. Edit that page and insert script editor WP and add <style> <style> #WebPartTitleWPQ4 h2 { background-color: #000; color: #fff; } </style> EDIT Find where is title. For ex. <style> #WebPartTitleWPQ4 h2 { background-color: #000; } #WebPartTitleWPQ4 h2 span { ...


4

You need the following piece of CSS to ensure that the menu items on the global navigation menus do not break into multiple lines and that the width of the drop-down menu extends to fit the length of the menu items' text: /* Disable menu text wrapping. */ #DeltaTopNavigation ul.dynamic { white-space: nowrap; word-wrap: normal; width: auto !important; ...


3

You can put the code of loading external css file in JS only. Give it a try for below code: var cssId = 'myCss'; // you could encode the css path itself to generate id.. if (!document.getElementById(cssId)) { var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.id = cssId; link.rel = ...


3

If you are only looking to affect things within the main content portion of the page (and not the page title bar, quicklaunch, etc.), on wiki pages all the content is in a div with an ID like ctl00_PlaceHolderMain_WikiField. Knowing that, you could set up your CSS selectors to always start with div[id$='WikiField'] so that you will only be targeting ...


3

How about using the WebEssentials Extension. Bundling and minifying is just one feature you would get out of it. Others are: A lot of compilers and linters for CSS/JS. Additional Debugging functionality Bundling via XML (CSS/JS/Sprites) Better Intellisense and a lot more just check their homepage Btw. these Tools are added in VS2015 by default and are ...


3

Most likely because your admin page has more content on the page thus pushing the footer down. You can fix the footer to the bottom with: footer { background: url('/_layouts/15/images/ForFarmers.Connect.Branding/bgfooter.png') right bottom no-repeat; z-index:100; position:fixed; bottom:0px; width: 100%; height: 160px; } But it will cover the ...


3

I would recommend adding a custom action to the web object at the root. The guys at pattern and practice explains it well Basically create a css file with what you need, put it somewhere and add the custom action using (var clientContext = new ClientContext(rootUrl)) { clientContext.Credentials = new SharePointOnlineCredentials(username, pwd); var ...


3

Most often there are no IDs. And hardcoding IDs (generated by SharePoint) in CSS rules will get you in trouble sometime in the future. When you add,(re)move other WebParts the IDs can change. Learn how to use CSS selectors to target with metadata used in other attributes. http://www.w3schools.com/cssref/css_selectors.asp Although not perfect, the ...


3

If you are using SharePoint, you have to live within the limitations that SharePoint gives you. One of those is the inability to name the divs. If you rename a DIV, then SharePoint won't know what to do with them. I do quite a bit of work on the client in SharePoint. If you can provide me with a use-case on why you feel you need to change the DIV name, ...


3

If you look at the screen capture above, you will see that the Web Part Title exists in a SPAN included in an H2 with the class ms-webpart-titleText. If you are using jQuery, you could do something like the code below to find the specific web part. var webpart; var webPartTitle = "Some Specific Web Part"; $("h2.ms-webpart-titleText").each(function() { ...


3

I've used that type of mega menu style before in a few sites. Here is a snippet of css below that I use to get those columns like in your example. It assumes you're starting with the default seatle master, so if you've got your own custom master you might need to edit some of the classes. #DeltaTopNavigation ul.static > li.dynamic-children > ...


3

All content editors are rendered as part of single HTML document. CSS styles don't have scope, they affect entire page. It's a common practice to use content editors to hide SharePoint UI elements (like ribbon buttons) that are not part of the web part. You can create single root elements per each CE and assign ID value: <div id="navigation-div"> ...


2

@BM- really hit the jackpot on this one. Really nice solution. I noticed though that you need to add the correct class to the under s4-workspace. Like this: <div class="ms-dnd-dropbox" id="ms-dnd-dropbox" style="display:none;"> <span class="ms-attractMode ms-noWrap" id="ms-dnd-dropboxText" style="line-height: 324px;">Drop here...</span> ...


2

I had a similar problem to this, and indeed had attempted a solution similar to @Sean M. However, this runs into a more bizarre problem if you have more than one library part on the page, especially if they are in different relatively positioned divs. Intiially I tried: .ms-webpart-chrome {position: relative;} #ms-dnd-dropbox {left: auto !important; top: ...


2

I had the same issue and as you said none of the CSS of Script did work for me as well. So I have to patch something with below script. This should be considered as a last option if you have any other solution available. So if you try this, you will have your issue fixed with below script: var interval = null; //Defines the start interval variable ...


2

You can try following taken from here. It is recommended for adding in html master page. <!--SPM:<SharePoint:CssRegistration ID="CSSCustom" Name="&lt;% $SPUrl:~sitecollection/SiteAssets/css/FileName.css %&gt;" runat="server" After="Themable/corev15.css"/>--> I did this in ugly way! <link rel="stylesheet" ...


2

If you use file system then during system backup those files will not get backed up. This is the same case with system migration. All files in file system needs to be moved separately. On the other hand if you use libraries then those files will be placed in the content database and will be included in backup as well as system upgrade etc. If you place ...


2

I usually save the Style files to a document library, and add a content editor web part to the pages I try to edit and pass the url to my stylesheet. This way I don't mess around with the Master page, and if anything goes wrong I can just delete my CEWP.


2

Ok, here's what's happening: // select ALL elements that are .block .title h2 span and loop through them $(".block .title h2 span").each(function(index) { // find the length of the text of THIS PARTICULAR element var x=$(this).text().length; // if the length of THIS PARTICULAR element is > 29 if(x > 29) { // change the ...


2

If this is an App part, the content is inside an IFRAME. You'll first have to get the IFRAME then myChart Something like this: document.getElementById('iframeIDhere').contentWindow.document.getElementById('myChart')



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