Padding on buttons for entire site

Tagged: , , ,

Author Posts

beezeyeview March 26, 2018 at 6:22 pm

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

I am using Divi by ElegantThemes and wanted to make universal padding to all the buttons using Microthemer. The code refuses to change the padding with the following code. By default the button is set as inline-block.

.et_pb_button {
	font-family: Poppins !important;
	font-size: 16px !important;
	text-align: center !important;
	text-transform: uppercase !important;
	-webkit-box-shadow: 0 1px 16px 2px rgba(0, 0, 0, 0.09) !important;
	-moz-box-shadow: 0 1px 16px 2px rgba(0, 0, 0, 0.09) !important;
	box-shadow: 0 1px 16px 2px rgba(0, 0, 0, 0.09) !important;
	padding-top: 12px !important;
	padding-right: 50px !important;
	padding-bottom: 12px !important;
	padding-left: 50px !important;
	display: inline-block !important;
}

The active-styles.css is showing a red upside down question mark at the end of every line of code. Is this normal?

code screenshot

Sebastian March 27, 2018 at 8:15 pm

Hey,

Would you mind sending me a link to your website? It depends what the upside down question mark is doing. If your text editor is displaying it as a warning that !important is used, and so it is only a linting device, it may not explain why your padding isn’t sticking. If it is a badly encoded extra character, that might explain why things aren’t working.

Microthemer adds !important to all styles by default, but this can be turned off via General > Preferences CSS/SCSS > Always add !important. It is on by default because !important allows beginners to override theme styles without understanding CSS specificity right off the bat.

If you can send me a link to your site I should be able to advise you more specifically.

Thanks,
Sebastian

beezeyeview March 28, 2018 at 11:25 pm

Hi Sebastian. I disabled the important tag feature, thank you.

I have a couple sites that I have using MT and they both insert the inverted question mark at the end. It didn’t seem to affect the code.

The latest was corrected by redefining the class that was used. So, the inverted question mark remains – it appears in TextWrangler when viewing. Did you see the screen shot in the original post?

Sebastian March 30, 2018 at 10:27 am

Yes, I saw your screenshot. That’s what made me think the inverted question mark might be something added by your code editor. The color scheme is a bit different to Microthemer’s code editor. If you view the code MT generates via View > Generated CSS & JS, you probably won’t see inverted question marks when !important is used, or for any other reason. Instead, you would see a warning icon in the left gutter, which says ‘Use of !important‘ when you hover over it.

However, are you saying that the inverted question marks remain when viewing the code in Text Wrangler even after you have turned of the auto-add !important feature?

Cheers,
Sebastian

P.S. I’m glad you were able to fix your padding issue by adjusting the selector class. If you would prefer to send me a link to your site privately, you can do so via our contact form. I should be able to advise you better then 🙂

beezeyeview March 30, 2018 at 2:35 pm

Sebastian,

Yes, the inverted question mark still appears in Text Wrangler even after the important feature is turned off.

Here is a comparison of TextWrangler (v 5.5.2), Atom, and the MT view in Chrome. It does appear that TextWrangler is the culprit here.

code editor comparison

Sebastian March 31, 2018 at 3:58 pm

Hey,

Thanks for clarifying with the screenshot. I’m away in Poland over Easter, but when I get on Wednesday I will install Text Wrangler on Monika’s Mac and get to the bottom of this. I agree that the inverted question marks probably aren’t doing much harm in terms of interfering with your CSS styles, but I would like to address the root cause nonetheless.

Cheers,
Sebastian

Abland April 1, 2018 at 12:31 pm

@beezeyeview @Sebastian

This might shed some light on the inverted question mark:
https://groups.google.com/forum/#!topic/bbedit/P7x-7-uJlkA
and
https://stackoverflow.com/questions/30485195/strange-character-for-empty-line-in-textwrangler-and-cat-v

beezeyeview April 2, 2018 at 1:38 pm

@Abland

That worked, thank you. Opened TextWranger with the file, selected Text > Normalize Line Ending and it removed the inverted question mark.

Sebastian April 4, 2018 at 11:58 am

@Abland thanks so much for picking this up over Easter, and providing @beezeyeview with a solution.

I will take a look at MTs code to see if I can mitigate this issue arising in the first place.

Thanks again,
Sebastian

You must login or register to reply to this topic.