Adding Custom CSS tags to theme.js?

  • keress

    (@keress)


    4 years, 1 month ago

    I’m under the impression that I should use theme.js to add custom css tags to my 2022 child theme. At the above link, I want the header to go wall-to-wall, not be indented the way it is. I’ve found the .wp-site-blocks to be the tag that needs to be changed. changing to padding-left: 0; padding-right: 0; will do the trick. I don’t understand why, but changing the var(–wp–custom–spacing–outer); to zero doesn’t do it.

    I’ve been writing css styles for years. My instinct is just to use the ‘Additional CSS’ area to add those tags, (which I know how to get to) but I’ve been told I should be doing it through the theme.js and the settings available in the Template Editor. I’m not finding any instructions on how to add custom css to theme.js, and the settings I need to change don’t seem accessible in the template editor. Just adding the usual code:
    .wp-site-blocks {
    padding-left: 0;
    padding-right: 0;
    }
    to theme.js doesn’t do anything. Adding it to “Additional CSS” does work. I’d be happy to just do it via block settings in the template, but have tried to do it every way available (that I can see) and I can’t touch that indenting.

    What is the best method for me to be doing this, doing what FSE is supposed to do?

    Also, I’ve tried to set the image on the right of the banner to go to the right margin, but no settings in the template editor are helping me do that. I have it set to right justify, but that’s not doing what I expect.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • webfed

    (@webfederatie)

    4 years, 1 month ago

    Adding css to a .js file is new to me.
    Your question might be answered here Child theme css

    MaxD

    (@max-dayala)

    4 years, 1 month ago

    For changing the padding on the .wp-site-blocks div I think you are doing it the correct way by putting your changes in style.css of your child theme. I don’t think there is currently a way to do the same via the Editor.

    The twentytwentytwo style.css says the following:

    * Alignment styles.
 * These rules are temporary, and should not be relied on or
 * modified too heavily by themes or plugins that build on
 * Twenty Twenty-Two. These are meant to be a precursor to
 * a global solution provided by the Block Editor.

    So, just monitor updates to the theme in the future to see if it can be done via the editor.

    You should have been able to set the outer spacing (–wp–custom–spacing–outer) to zero via the theme.json file in your child theme. (Note .json not .js). However, this would affect far more than the .wp-site-blocks div so probably wouldn’t give the result you want.

    {
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
        "custom": {
            "spacing": {
                "outer": 0
            }
        }
    },
    "styles" : {
    }
}

    You can use Javascript to modify the CSS but usually you’d only do this when you want to write different CSS based on some sort of dynamic run-time logic.

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

The topic ‘Adding Custom CSS tags to theme.js?’ is closed to new replies.