Defining Upfront Theme Branding Colors (Spirit)

Hi there
1. I have changed the theme colors in the Upfront / Theme Settings / Colors but the 'green' from the original Spirit theme still appears on many places (for example the mobile nav, on 404 page background…) I managed to change those two in the CSS, but it is nor obvious where else this green might appear. I see this green also still on the blog page for which I did not add custom CSS yet.
Do you have a list of elements that use this green color and are not automatically changed after having changed the "Theme Settings/Colors"?
3. The Heading h2 has set a color in "Theme Settings/Typography" but in mobile h2 appears black (unless I manually go to Upfront mobile view and manually select each title and assign the color. Is that a bug?
3. I managed to edit the 404 page by entering a non-existing URL to access that page. Where can I see ALL pages that I need to adjust to make sure the theme branding is coherent?
4. Pathbar/Breadcrumps: do I need to adjust the pathbar manually on each page/blog?
5. How to change the Slug of an existing page? Cannot find a field on Upfront to change the slug, tried to change it on the WP backend which did not work at all…. Finally I created a new page and entered the correct slug in the beginning. Is it not possible to later change it?
6. How to add a transition to the background image of a region and have the region background transparent?

Thank you for your support
(I read through all the tutorials on your blog https://premium.wpmudev.org/blog/upfront-pages-posts/ for the basic it is great but it would help to have more details! And searched through other Q&A on your Support page…)

  • Adam Czajczyk

    Hello Harito,

    I hope you're well today and thank you for your questions!

    As you ask about a lot of various issues here, let me go through these questions one by one :slight_smile:

    1. I have changed the theme colors in the Upfront / Theme Settings / Colors but the 'green' from the original Spirit theme still appears on many places (for example the mobile nav, on 404 page background…) I managed to change those two in the CSS, but it is nor obvious where else this green might appear. I see this green also still on the blog page for which I did not add custom CSS yet.

    There are indeed some places that has to be changed "manually" and in most cases the simplest way is to open particular page in "Upfront mode" and change settings of an element, e.g. background color of a region. CSS change may be more universal though and if you asked me I would most likely advise doing just that.

    Do you have a list of elements that use this green color and are not automatically changed after having changed the "Theme Settings/Colors"?

    Currently, there's no such list. We're aware of some inconsistency here and our developers are still working on identifying and fixing it. I'm pretty sure that with Upfront 1.0 most of these issues should be gone (although I'm not able to give you any ETA on this).

    The Heading h2 has set a color in "Theme Settings/Typography" but in mobile h2 appears black (unless I manually go to Upfront mobile view and manually select each title and assign the color. Is that a bug?

    I'd say that this is a good example of what I wrote above so hopefully this should be fixed in one of upcoming Upfront releases.

    I managed to edit the 404 page by entering a non-existing URL to access that page. Where can I see ALL pages that I need to adjust to make sure the theme branding is coherent?

    Unless you're using any plugins that create "virtual pages" (meaning pages that are generated dynamically by plugin in run-time) this and search result page should be all, I think.

    Pathbar/Breadcrumps: do I need to adjust the pathbar manually on each page/blog?

    I'm not quite sure to what you're referring here. Is it a region above post that says (by default) "HOME / BLOG"? If so, that's a simple text field and yes, you would want to manually adjust it for post as this is not any automated "breadcrumbs module".

    How to change the Slug of an existing page? Cannot find a field on Upfront to change the slug, tried to change it on the WP backend which did not work at all…. Finally I created a new page and entered the correct slug in the beginning. Is it not possible to later change it?

    You should be able to change slug via Upfront editor. In order to do this, double click on post (while viewing single post) in order to edit it, then in "Publish" box expand "Categories, Tags & URL" section and click on "Edit" next to "Post URL" option. You should be able to change your post's slug there.

    Changing slug via WP back-end editor should also work. That said, if you're using any caching plugin (such as e.g. W3 Total Cache) it may be interfering so I'd suggest emptying cache and turning it off for the time of editing. If this still doesn't work for you, please start a new thread on our support forum regarding this single issue only and giving as much details on this (e.g. what have you already tried) as possible.

    How to add a transition to the background image of a region and have the region background transparent?

    There's no "transition effects" available for backgrounds currently in terms of animations. As for transparency: while editing region's background (the "pen" icon in upper right corner of region -> little green "gear" icon next) please click on color square under the "BG Color" label and a color selection box will appear including transparency level slider.

    I hope that helps!

    If you have any further or other questions please ask and I'll be glad to assist. It would be great though if you could start separate threads for single questions as this will help me and my colleagues respond faster and provide solutions faster in case further investigation would be necessary.

    Best regards,
    Adam

  • harito

    Hi Adam
    Thanks for your fast answering!
    I found the place to change the Slug for a Post.
    I cannot find where to change the Slug for a Page.
    I cannot find where to change the publishing date for a Page on Upfront, should I manage this from the WP Backend?
    CSS customization I find cumbersome, would like to have an overview…. Understand the main focus of Upfront is to have the drag-n-drop function working, but a place with CSS files as overview and to see all the customization made in one place could be helpful?
    Best regards
    Monika

  • Adam Czajczyk

    Hello Monika!

    I cannot find where to change the Slug for a Page.

    You should be able to change Page slug by following these steps:

    - open the page in your browser and enter "Upfront mode"
    - double click on "main text/content" of the page and similar "Publish" box should pop-out as for posts
    - in this box please expand "Categories, Tags & URL" and there's a "Post URL" edit link

    I've tested this on my setup just to make sure that's working so please give it a try.

    I cannot find where to change the publishing date for a Page on Upfront, should I manage this from the WP Backend?

    For both posts and pages there's a "Publish on" label followed by date and green "Edit" link inside the very same box I mentioned above.

    CSS customization I find cumbersome, would like to have an overview…. Understand the main focus of Upfront is to have the drag-n-drop function working, but a place with CSS files as overview and to see all the customization made in one place could be helpful?

    You're totally right about "drag-n-drop" experience and our developers are still working on making Upfront themes more and more "drag-n-drop". We're hoping to bring you totally new quality with Upfront 1.0. I'm not able to give you any estimated arrival time on this release yet but we should soon enter a "full-featured-drag&drop" stage.

    As for CSS. Most of the customization will take place inside an editor that comes up when you switch Upfront's left panel to "Theme settings" mode and click on "add custom CSS rules" link. Other than that, if there's any place in Upfront that allows you to enter CSS editor, the theme will keep track of proper CSS file.

    Upfront is not designed to be edited directly (as any other "standard" WP Theme) by editing theme files so aforementioned Upfront edtor(s) is the best and, actually, only way. In case you have any questions about CSS adjustments or need any assistance with this, just start a thread here and either me or one of my colleagues we'll be glad to help you!

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.