Styles Question

[Rebekah Smith]

Hello,

If anyone could point me in the right direction I would appreciate it. I am using the 2016 theme. I am using a child theme. I have (or had) enough knowledge of CSS styles to customize typography. I don't live and breathe WP but can usually get by with  instructions. I want to define some paragraph styles that would be available globally. Per a tutorial, I added code using the "customizer". I also tried editing the site/child theme using the WP interface. After a few more tutorials, including stuff on theme.json, I feel like I must be off track. I am not trying to learn how to make a new theme from scratch. Maybe it's just that I think it should be simple. Somewhere I saw that CSS changes can't be seen in the editor (???) So I switched to a live page to see if I could have any effect there. No luck.

Thank you for any tips. Rebekah

Ps - Could the administrator of this group please add my other email address to this group? S...@40WattMountain.com Thanks

[Nick Ciske]

The custom stylesheet in the customizer is applied to every page, so that'll work (and has live preview).

Adding it to your styles.css file in the child theme will also work (and be applied to all pages on the frontend) and is the best long term option.

If you've added a rule, but it's not taking effect, you like have a selector specificity issue -- i.e. the theme is overriding your custom style.

p{} will be applied to all pragraph elements, but anything more specific will override it.

body p{} is more specific.

For 2016 you can target just p tags in the main content area:

body .site-content p{}

OR

body #content p{}

As IDs (the #) are more specific than classes.

And so on... (let's just avoid !important as it generally is more trouble than it's worth).

It may also be caching (shift + refresh can help in this case).

That should get you where you want to go... good luck!

Nick Ciske

CTO @ LuminFire

https://LuminFire.com/

[Rebekah Smith]

Nick, This was helpful. Thank you for pointing me in the right direction. It seemed crazy that making adjustments to the formatting would be so complicated, so I'm glad I posted a question and I'm super grateful for the response. 

I did struggle to get things to work but eventually there was some positive feedback (something changed!) to keep me going. Now it seems so simple. Nevertheless, I continue to be stymied by a few things that “should be simple.” For example changing the font face or size doesn’t seem to be straight forward. Using CSS in the customizer, I can make text red, I can change the margins, background, padding… But I can’t seem to change the face or size. While I see that I can make a font bigger using the block editor presets, I wanted to make a paragraph style that I could reuse. As it is, I have to select each paragraph and change the size to “medium” in the block editor.

If anyone has any tips about a better way to make the default text bigger on certain pages/certain paragraphs, let me know. In the meantime, I’ll keep poking around.

Thanks!

--
You received this message because you are subscribed to the Google Groups "Minneapolis St. Paul WordPress User Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mpls-stpaul-word...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/mpls-stpaul-wordpress/4dd560f7-8c6e-4be7-9b20-2a8975a2b3e9n%40googlegroups.com.

[Nick Ciske]

CSS is not complicated or very complicated depending on a lot of factors. 

Complicated was the way we used to have to style HTML (tables, spacer gifs, cross browser testing, polyfills, etc)!

If you were starting with a basic HTML document and adding some CSS, it's relatively simple (these days!) and there are more tutorials than any one human could ever read.

However, you're trying to alter styling on a very deep stack (cascade) of styles:

Browser Styles

WP Theme Styling

Block Editor Styles

Any Plugin Styles

Customizer Styles

Local Styles

The CSS engine is reading all of that, building a massive cascade of rules modifying and overriding other rules and then rendering the content in milliseconds (talk about complicated!).

Changing font size/color is relatively easy in CSS. Changing font face is more difficult as you have limited "safe" options and need to load web safe fonts to use them in CSS. This is not desktop publishing (which also had all these issues before PDFs).

What it sounds like you're trying to do is visually style specific paragraphs but that is not really what CSS is for -- it styles things based on a rule set and (ideally) semantic HTML. CSS can do that, but you need to set things up properly first.

The size buttons in the block text editor are there for convenience / non developers, but are not the proper way to build global styles. This has long been the battle between WYSIWYG and "developer" approaches to theme building and styling of web sites -- what works fast vs best and what is maintainable long term are often opposites.

One way to think of it is by flipping your perspective... instead of applying styling to a specific paragraph -- ask why is that paragraph being presented differently? e.g. is it a block quote, callout, pullquote, etc? You'd then semantically mark that (and possible use a different HTML tag or combo of tags + classes) then write CSS rules to style those wherever they happen to appear. If there is no semantic reason, you can still style things by adding a class with associated styles.

In your specific case/theme, that may be a new block type or a custom class on a <p> block.

This is main issue with the block editor in WordPress -- you either have to install or build blocks (or use a block builder plugin) or become a developer to extend it.

An alternative is to use a page builder like Beaver Builder which gives you far more control over the design but again you can override every time or build a system... but rarely both (though you can save bits and re-use them). This is just a different approach and has it's own set of drawbacks.

Some 3rd party themes offer a UI for typography options as well -- but this just automates the CSS in the background.

Note: the more fonts/weights you load, the heavier the toll on your initial page download, so don't go overboard!

PS- Be wary of Divvy or Elementor (and especially WP Bakery) as they have serious performance and usability issues in my experience (and are not great at global styles either). I know some people here love these tools, but I've had to rescue enough sites from the these tools that I cannot in good conscience recommend them.

Hopefully that helps?

Nick

[Jodi Stammer]

I’m a big fan of Beaver Builder. But I wonder if it would make sense to just start with a more robust theme? I don’t know a lot about what’s out there, but I hear good things about GeneratePress. I still use Mai Pro (Genesis), which has several templates to choose from, along with decent control of styling. I also use Beaver Builder to give me more layout control. I still have a lot of frustration with the basic block editor.

 

Jodi

--

You received this message because you are subscribed to the Google Groups "Minneapolis St. Paul WordPress User Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mpls-stpaul-word...@googlegroups.com.

To view this discussion visit https://groups.google.com/d/msgid/mpls-stpaul-wordpress/a55e72d1-90d4-42be-a99f-553ae6658378n%40googlegroups.com.

[Barbara Schendel-Kent]

I am deeply this be verbal ecosystem, and I can say without hesitation that if you use Beaver Themer (along with the builder) and the free BB theme, then your theme becomes as powerful, flexible and customizable as any page. I use it for every single site I build, and will never go back to a third-party theme.

To view this discussion visit https://groups.google.com/d/msgid/mpls-stpaul-wordpress/011301dc8b5b%24c95332f0%245bf998d0%24%40gmail.com.