Apply Custom Styles to the New (Modern) SharePoint Pages

Question

I'm rather new to SharePoint in Office 365, but I have figured out how to customize and override styles in the traditional site master pages. I'm now attempting to remove or at the very least shrink the new title area that comes with the modern page layout (see link below). The title are takes up entirely way too much space for my liking.

I have yet to find any documentation as to how this might be accomplished. Has anyone had figured out how to style the SharePoint modern pages yet?

Answer 1

I was able to remove the spacing by opening the page in the SharePoint designer advanced editor and changing the following:

Change:

<mso:PageLayoutType msdt:dt="string">Article</mso:PageLayoutType>

To:

<mso:PageLayoutType msdt:dt="string">Home</mso:PageLayoutType>

That doesn’t automatically set the page to be the site home page, and I really don’t know what other effects it might have. I realize it is a bit of a hack, but it did seem to correct the spacing issue.

Answer 2

create a custom master page or change the existing master.

1. go to siteSettings --> master pages and page layouts

   select your master page that used.

2. in at top ribbon 'File',

   to edit click: edit Document.

   to create a new click: download a copy

3. edit the file: add a style tag to change and override the css like #pageTitle {font-size: 15px}

4. save the changes (if it's a new master page, upload to master pages list)

   at last checkIn + publish the masterPage