3

At the moment I am creating site followed by adding background and logo separately.

Is there a way to do achieve this at site collection level so that it will be inherited automatically to every sub-site created.

  • by background do you mean you are applying some css? – Akshay Randive Aug 27 '17 at 13:00
  • by designer .. i think it is not practicable...becuase you want the classical branding solution. That allows you to set the css and masterpage (with logo). Look here dev.office.com/sharepoint/docs/general-development/… – Sascha Aug 27 '17 at 18:53
  • yes apply css so that i reflect in all the sites created – Rinu Aug 28 '17 at 12:20
0

The best (and modern) way to achieve this is to add a javascript via custom action and than replace the content. I'd recommend to use JQuery.

Example for the Logo:

JQuery:

$('#suiteBar .ms-core-brandingText').html('HTML_OF_YOUR_LOGO');

Plain Javascript:

document.getElementById('suiteBar').getElementsByClassName('ms-core-brandingText').item(0).innerHTML = 'Logo';

If you want to style your site via CSS (e.g. add a background) you could add alternate CSS:

Add Alternate CSS

clientContext = SP.ClientContext.get_current();
website = clientContext.get_web();
website.set_alternateCssUrl('/SiteAssets/css/global.css');
website.update();
clientContext.executeQueryAsync(function(){alert('success');}, function(sender, args){alert('failed: ' + args.get_message());});

(this is javascript you can add via your JS console in the Browser (F12 => Console))

Add JS as a custom action:

var clientContext = SP.ClientContext.get_current();
var website = clientContext.get_web();
var collUserCustomAction = website.get_userCustomActions();
var customActionOBJ = collUserCustomAction.add();
customActionOBJ.set_location('ScriptLink');
customActionOBJ.set_title('Global JS');
customActionOBJ.set_sequence(1000);
customActionOBJ.set_scriptBlock('document.write(\'<script type="text/javascript" src="/SiteAssets/javascript/global.js"></scr\' + \'ipt>\');\n ');
customActionOBJ.update();
clientContext.executeQueryAsync(function(){alert('success');}, function(sender, args){alert('failed: ' + args.get_message());});

The best way is to include central JS as custom action and styles as alternate CSS and then include othe files from there (best via SOD or CSS-include).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.