Best way to edit CSS using Upfront

Is it possible to shed some light on the best way to edit the CSS using upfront? Should I edit the child style sheet? Is it best to edit each text box?

I hope I am making sense.

  • Bojan Radonic

    Hey @Julius,

    How are you doing today?

    You shouldn't edit theme files as there are global CSS rules as well as styles per specific element where you can add these changes.

    There is a pretty good blog post related to adding CSS to Upfront and the best ways to do it. Please check the following: https://premium.wpmudev.org/blog/upfront-custom-css/

    If you have any additional questions please let me know

    Cheers,
    Bojan

  • Julius

    So my understanding is that:

    1. If I want to make global change to elements like the styling for paragraphs and H1 headings, I should do so in the section where you add custom css rules. Therefore, I don't have to add the css to the theme files. Right?

    What happens to the styling I have created/added after upfront is updated? What impact would it have on the child theme? Do I need a child theme?

    2. In order to find the correct element that I want to make global changes to, I should use the Google inspector tool and then search and find that element. Right?

    3. I noticed that I can style specific elements, does this over ride the global styling?

  • Bojan Radonic

    Hey again @Julius,

    1. If I want to make global change to elements like the styling for paragraphs and H1 headings, I should do so in the section where you add custom css rules. Therefore, I don't have to add the css to the theme files. Right?

    You should never edit theme files. All global changes should be added to "add custom CSS rules" which can be found under Theme Settings in Upfront editor, please see screenshot.

    If you check the same screenshot you'll see different options to change text styles as well, select Typography and you should be able to select type of text (example H1) and apply different styles to it below.

    What happens to the styling I have created/added after upfront is updated? What impact would it have on the child theme? Do I need a child theme?

    No you do not. Panino is already a child theme so you can't create child theme from it. Good news is that all layout changes including CSS are saved in the database so updating theme will not affect added CSS in any way.

    2. In order to find the correct element that I want to make global changes to, I should use the Google inspector tool and then search and find that element. Right?

    Yes for global CSS that would be the best way of doing it.

    3. I noticed that I can style specific elements, does this over ride the global styling?

    Styling specific elements should override global styling unless there is an issue with specificity or use of !important.

    Also, is it true to assume that when I make the css style changes within the upfront system versus the theme css file the changes are noticed immediately.

    They should be immediate, however sometimes there were cases where changes were not displayed in editor when custom CSS has been used so if this happens just try saving and checking the front without editor (in these cases changes are applied to front end regardless).

    Hope this helps

    Cheers,
    Bojan

  • Jean-Claude

    Hi there,

    In the blog post entitled "Upfront Part 4: Tweaking Elements with Custom Code" (https://premium.wpmudev.org/blog/upfront-custom-css/), Victor Ivanov writes:

    Open up CSS Styles & Anchor Settings panel at the bottom of the settings dialogue, then click add new style. This will bring up a familiar code panel at the bottom of the browser. You will notice that unlike the Global Theme CSS panel, this one has the Available element selectors: section on the left. This section is there on for all elements and it is designed to help you with styling by giving CSS selectors for that element.

    Can you or someone please provide a specific workflow example of how to use the Available Element Selectors to format an element in question from within the Global Theme CSS Panel? While it may be obvious to someone who is well versed in working with CSS and Upfront in general, it is not self-evident how one actually uses the Available Element Selectors to does this, and as Victor admits, he doesn't go into the details as to how to do this.

    Also, in the element's appearance settings, in the Advanced Settings section, there is a setting called 'Anchor Element' with a checkbox next to it. What does this setting do and why would one either set or unset this setting when formatting the element in one's layout?

    Thanks,
    Jean-Claude

  • Jean-Claude

    Perhaps this is part of the reason why it is not obvious to me how to use an Available Element Selector within the CSS Styles & Anchor Settings panel... if I click on one of the Available Element Selectors, I get the following error in Chrome's console:

    Uncaught TypeError: Cannot read property 'insert' of undefined
    at N.n.addSelector (main.js:84)
    at HTMLDivElement.dispatch (jquery.js?ver=1.12.4:3)
    at HTMLDivElement.r.handle (jquery.js?ver=1.12.4:3)
    addSelector @ main.js:84
    dispatch @ jquery.js?ver=1.12.4:3
    r.handle @ jquery.js?ver=1.12.4:3

    This this feature broken?

  • Bojan Radonic

    Hey there Jean-Claude,

    I've made a quick video showing how available elements in CSS work, what you can do is simply use predefined CSS selectors to add CSS for specific parts in any of the Upfront elements, please see the video here: https://screencast.com/t/7DQ2K4vuq

    As you can see I'm simply editing preset for contact form element, and by hovering on any of those predefined classes you'll see that the parts that are affected are being highlighted so you know exactly what you're going to change.

    On my end everything worked properly so this means the issue you're having is probably caused by a conflict with another plugin that you're using. Since this is unrelated to the question you've opened in this thread would you mind opening new one so we can have these issues separated?

    Before you do could you please run a conflict test by temporarily deactivating all other plugins that you're using just so you see which one is conflicting with Upfront if any, once you do deactivate all plugins if this starts working for you, you can activate them one by one to see which one exactly is the culprit.

    Once you do that you can open a new thread here: premium.wpmudev.org/forums/#question , please add the info that you've found while testing for conflicts and also Grant Support access via our WPMU DEV Dashboard plugin so we can take a look at your site.

    Cheers,
    Bojan