how to add custom CSS?

Hello @bg17aw,

For now, there is no way to add custom css from plugin’s settings. But you can do it programmatically by using wpmm_head hook.

// this snippet can be placed inside functions.php of your active theme
add_action('wpmm_head', 'wpmm_custom_css');

function wpmm_custom_css(){
 echo '<style>
       /* your css code */
       </style>';
}

Thanks.

• This reply was modified 7 years, 1 month ago by George J.

@bg17aw : I`m using Divi too; as it didnt accepted my overwrites, I changed the CSS directly in /wp-content/plugins/wp-maintenance-mode/assets/css/style.min.css

@johannes68 In a future release there will be a custom css setting. I can’t give you an ETA because I don’t have time to contribute anymore, but I’ll try to pass the request to the owner of the plugin. ??

Thanks.

Hi, George J, thank you very much. I think H1-H3 and the top and bottom margins of the main items would be enough ?? Btw – thank you very much for this free and great plugin!

I tried adding the custom code to my child theme’s functions.php like @georgejipa suggested, and it broke my site (error 500). I tried rewriting the style or style.min.css like @johannes68 suggested, but nothing seems to happen; I’ve tried refreshing and deleting the browser cache, but multiple browsers still don’t see the changes. Am I missing something?

@azurite: please post the content of functions.php + the snippet you used (on pastebin), to see why it broke the website.

• This reply was modified 6 years, 11 months ago by George J.
• This reply was modified 6 years, 11 months ago by George J.
• This reply was modified 6 years, 11 months ago by George J.

Here’s the Pastebin: https://pastebin.com/k5AcZ9in

I feel like I’m missing something obvious, like whitespace or a quotation or something. Help would be sincerely appreciated!

@azurite:

 
add_action('wpmm_head', 'wpmm_custom_css');

function wpmm_custom_css() {
	echo '<style>
		@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
		
		@font-face {
			font-family: "AnsleyDisplay-Light";
				src: url("https://seventh-star.net/fonts/AnsleyDisplay-Light.woff") format("woff");
			font-weight: normal;
			font-style: normal;
		}
		
		h1 {
			font-family: "AnsleyDisplay-Light";
		}
		
		p {
			font-family: "Source Sans Pro", sans-serif;
			text-shadow: 1px 1px 1px #000;
		} 
		</style>';
}

I recommend to move “AnsleyDisplay-Light” font on your hosting if you want avoid cross-origin issues.

• This reply was modified 6 years, 11 months ago by George J.
• This reply was modified 6 years, 11 months ago by George J.
• This reply was modified 6 years, 11 months ago by George J.

Hi there,
AnsleyDisplay-Light is on my hosting; I’m using a Multisite/Network installation and Domain Mapping, and I haven’t figured out how to properly refer to the hosted WOFF files in the CSS when it’s a multisite…

@azurite: this could be a solution (if you have different domains) https://zinoui.com/blog/cross-domain-fonts

Later edit: but if it is a multisite installation (with mapped domains), then the font should be available on all mapped domains:

example.com/fonts/font.woff
example2.com/fonts/font.woff
example3.com/fonts/font.woff

• This reply was modified 6 years, 11 months ago by George J.
• This reply was modified 6 years, 11 months ago by George J.

@georgejipa
Could you please write where exactly we need to put this ‘add_action’ code? I don’t see any functions.php section in plugin code…
I have created the second file in wp-content, and I would like to change the ‘Contact us’ button color (text, frame, and highlight) to #B93995 and overall font to Comfortaa…

Google fonts suggests these two:
<style>
@import url(‘https://fonts.googleapis.com/css?family=Comfortaa&#8217;);
</style>
or
<link href=”https://fonts.googleapis.com/css?family=Comfortaa&#8221; rel=”stylesheet”>

I would be very very grateful if you can please show me where it should go to change these two things, or write these two parts of the code for me ?? I suck at coding!

@ladyboomboom: Place that hook/action inside functions.php file from your active theme folder.

add_action('wpmm_head', 'wpmm_custom_css');

function wpmm_custom_css() {
	echo '<style>
		@import url("https://fonts.googleapis.com/css?family=Comfortaa");
		
                // the css you need
		</style>';
}

Also, please don’t post same reply in multiple threads.

• This reply was modified 6 years, 7 months ago by George J.
• This reply was modified 6 years, 7 months ago by George J.
• This reply was modified 6 years, 7 months ago by George J.
• This reply was modified 6 years, 7 months ago by George J.

Ok, sorry for that.

I now get the destination, but still have no idea where exactly I need to paste it – replace the current “add action”?

}
add_action( ‘after_setup_theme’, ‘twentyseventeen_setup’ );

If so then it seems not to work for the font change, neither in header, nor button or countdown, plus now I have this error 500 message.

Also don’t know how to assign “the css I need” (which is I suppose color change of text and border) to that particular contact button…

I’m a beginner. Would appreciate more detailed info.
I think that one universal solution for full copy-paste would be useful for many users ??

• This reply was modified 6 years, 7 months ago by ladyboomboom.

@ladyboomboom at the end of the file.

add_action('wpmm_head', 'wpmm_custom_css');

function wpmm_custom_css() {
	echo '<style>
		@import url("https://fonts.googleapis.com/css?family=Comfortaa");
		
		body {
			font-family: "Comfortaa", "Helvetica Neue", Arial, sans-serif !important; 
		}

		.contact_us {
			background-color: #B93995 !important;
			border-color: #B93995 !important;
		}
		</style>';
}

Keep in mind that the purpose of support is to fix bugs or problems. So any desired customizations/changes fall into the user’s responsibility.

If you don’t have the experience to do the customizations, I advise hiring someone from Fiverr or any other Fiverr-like platform.

@georgejipa

Thank you so much for help, it worked! I like to learn myself, but somehow found it difficult to start as it comes to coding, probably it will take me ages to figure out, I just thought it is something easy enough to ask for help. And the right solution once sawn can be remembered, and repeated ?? Fiverr is a good idea, will surely consider it when it comes to creating my full website. Thank you once again, I’m sure a lot of people will also find it useful. Good day! ??

• This reply was modified 6 years, 7 months ago by ladyboomboom.