Blocksy additional css not recognized

  • Resolved blogdropper

    (@blogdropper)


    6 years, 3 months ago

    Hi, in Blocksy customize > general > additional css I have

    
p {margin: 0 auto;
   width: 20%;
   text-align: justify;
   color: red}

    This is a Gutenberg Paragraph block – I would like it to occupy a 20% wide column in the middle of the page but only text-align and color are being applied. Why is this?
    Any help much appreciated

Viewing 8 replies - 1 through 8 (of 8 total)
  • Theme Author Creative Themes

    (@creativethemeshq)

    6 years, 2 months ago

    @blogdropper unfortunately this is not how things work… you have to add a more specific selector.

    First of all, add a class name to your paragraph, after this you will be able to catch only this paragraph and won’t mess all others, and add this css code – .test-paragraph { --blockMaxWidth: 20% }.

    Let me know if this works for you.

    Thread Starter blogdropper

    (@blogdropper)

    6 years, 2 months ago

    Hi, thanks for this – is there a way to automatically add this to all paragraph blocks?What I’m trying to do is reduce the content width for the site so that all content occupies 1 central column, what’s the best way to do this?
    Thanks for your help
    david

    Thread Starter blogdropper

    (@blogdropper)

    6 years, 2 months ago

    When I put your css into Additional CSS (and add the class to the paragraph) the “–blockMaxWidth” throws an error, but it works.

    Thread Starter blogdropper

    (@blogdropper)

    6 years, 2 months ago

    Hi, the solution I found was to put all paragraph blocks into a group block, and add to the group block additional classes: “test-block” with the following css in customizer core Additional CSS:

    
p {
     text-align: justify;
     }
h1.page-title{display: none}
.test-group {--blockMaxWidth: 80% }
.wp-block-group{margin-top: -7em}

    Is that an acceptable solution?
    I understand blockMaxWidth is output from compiled css. Is there a list of these variables, and how/when to use them?
    Thanks for your help

    • This reply was modified 6 years, 2 months ago by blogdropper.
    • This reply was modified 6 years, 2 months ago by blogdropper.
    • This reply was modified 6 years, 2 months ago by blogdropper.
    Theme Author Creative Themes

    (@creativethemeshq)

    6 years, 2 months ago

    @blogdropper there is another simpler way to do that, simply set your page structure to be Narrow Width and after that set a smaller value in Customizer -> General -> Narrow Container Max Width.

    Let me know if this works for you.

    Bjarne Oldrup

    (@oldrup)

    6 years, 2 months ago

    Edit: Team Author beat me to this – same suggestion here, use the customizer.

    I don’t think the built in (wordpress core) CSS validation knows about CSS Custom Propertis (variables), and that is why it warns you. That doesn’t mean it doesn’t work, variables are supported by all modern browsers.

    So if the custom css works for you, its totally acceptable.

    That said, it appears to me, that you are trying to accomplish with css, what you might as well just configure in the customizer? There are settings for both narrow and wide blocks built in (screenshot attached). Page titles are also configurable in the customizer.

    https://i.postimg.cc/435dfwSH/screenshot-labs-oldrup-net-2020-02-10-17-16-17.png

    Best regards,
    Bjarne

    • This reply was modified 6 years, 2 months ago by Bjarne Oldrup.
    Thread Starter blogdropper

    (@blogdropper)

    6 years, 2 months ago

    Thanks, works perfectly.
    Need to learn to ask the right question from the beginning and saw everybody including myself alot of time.
    Thanks all for your help, much appreciated

    Theme Author Creative Themes

    (@creativethemeshq)

    6 years, 2 months ago

    @blogdropper you’re welcome 😉

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Blocksy additional css not recognized’ is closed to new replies.