Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix for being unable to style some elements #5

Open
Lartsch opened this issue Apr 30, 2020 · 1 comment
Open

Fix for being unable to style some elements #5

Lartsch opened this issue Apr 30, 2020 · 1 comment

Comments

@Lartsch
Copy link

Lartsch commented Apr 30, 2020

Hey,
when I first tried this solution, I could successfully style most elements and definitely those, which were loaded by web parts.
But some other elements could not be styled because the styles were applied before those were loaded (for example: the "share" & "follow" button in the top right corner of modern pages, or the "Sharepoint" label or the tenant logo in the top header).
I could make styling those elements possible by loading the content of the custom css file into a newly placed <style> tag, like this:

if (cssUrl) {
		const head: any = document.getElementsByTagName("head")[0] || document.documentElement;
		fetch(cssUrl).then(function (response) {
			// The API call was successful!
			return response.text();
		}).then(function (css) {
			// This is the CSS from our response as a text string
			head.insertAdjacentHTML("beforeEnd", "<style type='text/css'>" + css + "</style>");
		}).catch(function (err) {
			// There was an error
			console.warn('Something went wrong.', err);
		});
    }

I am not sure if this is a good solution, but it works and makes it possible to style all elements.
@hugoabernier If you advocate this solution, you might want to change it in your code

Best wishes

@hugoabernier
Copy link
Owner

It seems like a good solution, but I'd have to try it to see.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants