Upfront - change format on page title

Hi,
I'm following along the tutorial for Upfront trying to get used to it. I can't seem to change the style of the page title. You can see my experimenting on the home page. http://natsfabricstash.com.au/

I want the word Home, which is the page title to look like the Heading 1. I've checked to see that the element is using the default style.

I really want to use Upfront because I want to use a WPMU theme with Marketpress but I'm not having fun with it yet. Scrolling through the theme settings box is painful. Can it be made bigger?

Nat.

  • Adam Czajczyk
    • Support Gorilla

    Hey Nat,

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

    To change the "look&feel" of the word "Home" (or any other text element) hover a cursor pointer over it and click on the red sprocket-wheel icon (see image). You'll find there a dropdown style list, so you may choose one or - if you're familiar with CSS basics - add your own.

    Another way would be to double-click on this text, select it (the same way as you would for copying it) and then use text tools that will pop-up in a tooltip.

    As for theme settings box, on some smaller screens it might be indeed a bit to small, however there's always the issue of finding a compromise between the size and usability. If we made it bigger, it could result in a smaller page preview which could also make editing more difficult :slight_smile:

    If you have any further questions, please ask. I'll be glad to assist you!

  • Natalie
    • Site Builder, Child of Zeus

    Hi Adam,
    Two questions. If I want to change the formatting of the page and post titles throughout my site I would use Theme Settings - Typography - Main Heading (H1) on the left of the Upfront screen? I have done that as you can see by the Heading 1 text sample on my page (www.natsfabricstash.com.au) but is had not had an effect on the page title. If that isn't how I globally change the format of the page titles then how do I do it?

    Secondly, I cannot select any of the text from the page content area in the way you would for copying.

    The ability to drag the bottom of the theme settings box to lengthen it to available screen space would be awesome.

    Nat

  • Adam Czajczyk
    • Support Gorilla

    Hey Natalie,

    I hope you're well today!

    Generally, changing a typography as you described should work unless the theme customization changes its behavior. However, I'd like to take a closer look at this. Could you please grant me a support access to your site?

    To do so, please follow this guide.

    As for selecting text: if you click on a text element it becomes "active" and you should then be able to double-click it and simply highlight with a mouse pointer. Sorry for not being specific enough!

    Let me know please if I can access your site!

    Regards,
    Adam

  • Natalie
    • Site Builder, Child of Zeus

    Hi Adam,
    Access is granted. It's pretty much a new install which I'm just playing with. I've changed a couple of colours, deleted some areas, added pages but nothing major. I tried all sorts of things to change that text. Is that text H1?

    Nat.

  • Adam Czajczyk
    • Support Gorilla

    Hey Nat,

    I hope you're well today.

    The word "Home" on your homepage is indeed "H1", however there's a class added (named "post-title": class="post-title") so it's quite possible that this class settings override the H1 css.

    That said, I've tried to access your site to check this but I'm getting the "invalid access token" error. This means that either the access has expired by now or something went wrong during the procedure. Could you please re-grant it for me once more?

    Regards,
    Adam

  • Adam Czajczyk
    • Support Gorilla

    Hey Natalie,

    I hope you're well today.

    I've checked your site and it seems like everything works fine there, however I owe you some clarification.

    As you can see on the "up-typography.png" image, I've changed the H1 font to "Oswald". This worked but affected all H1 elements (those biggest headings) on the site. I didn't save this change (nor did I save the next one) so here's how to replicate it:

    - open your front page in browser
    - enter "Upfront mode"
    - in the "Upfront panel" on the left select "Theme Settings"
    - now set the fonts (and other typography aspects)

    As I said, it affected the overall typography but you wish to change only the "HOME" word which is actually a "post title". Please take a look at "up-typography-css.png" screenshot then. Here's what to do:

    - first steps are the same as above but instead of changing typography from panel...
    - click on "add custom css rules"
    - add css rules regarding typography (in this case I've added "font-family:Impact;":wink: to the h1.post-title element.

    This is because the "Theme Settings" -> "Typography" panel allows you to set general typography rules. There are however some elements on the site that have their individual CSS classes assigned. If you wish those elements to stand-out from the rest, you'll have to add custom CSS rules.

    You may use Chrome's or Firefox'es "Inspect element" tool (under the right-click menu) to find out names of those classes but usually Upfront's "add custom css rules" CSS editor will only show you rules assigned to the currently selected layout block.

    Also, here's a description of CSS rules regarding fonts:
    http://www.w3schools.com/css/css_font.asp

    I hope this helped!

    Cheers,
    Adam

  • Natalie
    • Site Builder, Child of Zeus

    Hi Adam,
    I'm back! I understand now. I think were several things that threw me.
    Firstly that the Post Title's had a custom class of h1.post-title because I was expecting it to just be h1. Secondly, that I was trying to look for possible custom classes in the wrong place.

    The third thing that threw me was h1.post-title inherits the font family from h1 so if I change the h1 font family it should change the post title's font which I'm not seeing in Upfront. However if I have the actual page open in a separate browser and refresh it as I change the h1 font (and press save) the page reflects those changes. So is this an updating issue with the Upfront? So I was actually changing the post title font as part of changing the h1 font I just wasn't seeing that change reflected in the h1.post-title in upfront?

    Nat.

  • Natalie
    • Site Builder, Child of Zeus

    That is correct. I can see the changes in the page if I open the page to preview it out of upfront but in upfront I do not see the change even after I save the change. So what happens in your video does not happen.

    Nat.

  • Natalie
    • Site Builder, Child of Zeus

    Oops. Sorry. You should be able to get to the right one now. I've been 'playing' with the natsfabricstash.com.au site and intend to reset it to original settings so feel free to change things if you want to test anything.

  • Adam Czajczyk
    • Support Gorilla

    Hey Nat,

    Yes, it's working now :slight_smile:

    I've accessed your dashboard and played a bit with typography. For me, the changes on your site a reflected on a site's preview in a separate window as well as directly in Upfront editor. Please see the screencast here:

    http://screencast.com/t/ufub5UAPLba

    My point is that either there was some caching issue on your site (like a "persistent" browser cache) or some kind of a plugin conflict that's resolved now (for example after an automatic update).

    I might be missing something here as well, so if this is not a case and it still doesn't work for you would it be possible to record similar screencast for us?

    Cheers,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.