White title on white background on new posts and new pages

When I create a new blog page it automatically creates a title at the top. Right now the automatic title defaults to white on a white background. When I highlight it to try to change the color or the size, it doesn't create options to do so. How do we change it?

  • Adam Czajczyk

    Hello Terri,

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

    I have visited your site and I noticed that you're using Fixer which is an Upfront child theme. The issue that you described is a result of current typography settings of your site. Please go to your site, enable Upfront editor, switch the main Upfront panel to "Theme Settings" and select the "Main Heading (H1)" from the "Type Element" drop-down list.

    I think that's set to white so it affects all H1 tags on site (and a post title is indeed a H1 tag). In order to change it, please follow these steps:

    - go to the single post page (existing post) but d not double-click it/highlight anything there
    - switch Upfront main panel to "Theme Settings" again
    - select "Main Heading (H1)" from "Type Element" typography drop-down box
    - click on white circle under the "Color" label and select another color
    - click Upfront's "Save" button and you should get a prompt asking:

    "Do you wish to save layout just for this post or apply it to all posts? [This post only] [All posts of this type]"

    - select "All posts o this type"

    This would change the post title color and apply this change to all posts (including those that you will create in future).

    Best regards,
    Adam

  • Terri

    Hi Adam,

    Thanks for the feedback - I was able to successfully follow your instructions for the posts and was able to fix the titles to the black colour and size I wanted. However, because it seems that H1 is a default preset for all titles, even the titles on each scroll down section on the frontpage all changed to smaller. When I changed each one manually back to their original size, I noticed then (probably because of the preset for H1) that all of the post titles went huge again.

    Can you please tell me a way that I can make the Blog Post titles smaller but leave all other frontpage titles alone? I have tried changing the Blog Post titles to an H2 in the Theme Settings for each Post page but nothing is happening.

    Many thanks

  • Adam Czajczyk

    Hello Terri!

    Can you please tell me a way that I can make the Blog Post titles smaller but leave all other frontpage titles alone? I have tried changing the Blog Post titles to an H2 in the Theme Settings for each Post page but nothing is happening.

    It seems that I understood you wrong initially. I'm sorry for causing confusion. Here's how to change only the titles for posts (please make sure that you updated both Upfront and currently used child theme - e.g. Fixer - to the most current version):

    1. Open any of your posts in browser (the single post view should be loaded)
    2. Enable Upfront editor
    3. Hover cursor over the post title and click one
    4. Click on a "Settings" icon (little gray "gear" icon over the top border) that appears
    5. The "Post Data" will appear and the preset "title" should be selected in the "Choose or Create Preset" drop down post in the main Upfront panel (on the left)
    6. Check the "Typography" box
    7. Select typography settings
    8. "Save Element" selecting "All posts of this type" when prompted
    9. And save your layout

    I've attached the screenshot outlining the basic steps. Numbers on screenshot doesn't much numbers above but I think it shows the idea well enough :slight_smile:

    I hope that helps.

    Best regards,
    Adam

  • Terri

    Hi Adam,

    Many thanks for clarifying. I tried to follow instructions there but when I look at the post title settings, it doesn't give me Post Data options to change a preset or typography or anything. Just what I have here in a screenshot (featured image, padding and anchor options only.) Can you look into why I don't have the options that should be there? [image pos="0"]

    thanks,

    Terri

  • Predrag Dubajic

    Hi Terri,

    The screenshot from Milan post is from previous UF version and we just released a new one that you are working on and in there this option is no longer available.

    Latest version should also fix the issue with white text on white background and I tested your site by creating new post which had black text right away so you shouldn't have these issues anymore.
    Can you give it another go and see if it's all good? :slight_smile:

    Jaxom thanks for jumping in here, however Upfront themes are already child themes so this solution can't be really applied here.
    Upfront themes have heading color picker that does this :slight_smile:

    Best regards,
    Predrag

  • Terri

    Hiya,

    The black text in the posts is fine, I was able to resolve that, but my issue is changing the size of the title, I don't want it that big. And I just want to change the size of the post titles without it affecting any other title in the website (which it had been doing. Adam supplied a screengrab to show me how to just change the post titles without affecting anything else, above). In the screengrab that Adam supplied, you can see the options that become available when the settings are selected (like change font size) and there aren't any of the options that had been offered above to change the size in my Upfront, even though it is as updated as possible. So that's what I'd like to know -, where are these options to change the title size of the posts and why aren't they there?

    Cheers

  • Milan

    Hello Terri,

    Hope you are well today and thanks for asking us. :slight_smile:

    Would you please try this CSS snippet to resize text in your post tiles to your desired size?

    .upfront-output-region-container .upfront-output-module .default.upfront-this_post .upfront-postpart-title .post_title{
        font-size: 35px; /*Your desired size for post titles*/
    }

    You can paste this snippet to Upfront's global style editor. ( Theme Settings > Add Custom Css Rules )

    Let us know how it goes for you. :slight_smile:
    Cheers,
    Milan

  • Terri

    Hi Milan

    I pasted your code in where it belongs and saved everything but the 'Post Data' info in the post settings is still not showing up. Maybe I pasted the code in wrong. Can you please check this over and correct anything that shouldn't be happening in that code? I am unfortunately wasting a lot of time on just these simple post titles when I have much more site building to do with a deadline so I'd like this issue resolved as quickly as we can. I know as soon as the Post Data is visible and it can change, that I will be able to do what I want to do and quickly. Hope to hear from you soon.

    Terri

  • Adam Czajczyk

    Hello Terri,

    Thanks for granting access!

    It seems that two CSS rules got "merged" somehow like this (note that one is inside another):

    time.post_update {
    
    .upfront-output-region-container .upfront-output-module .default.upfront-this_post .upfront-postpart-title .post_title{
        font-size: 35px; /*Your desired size for post titles*/
    }
    display: none;}

    This most likely prevented both rules from being applied to the site. I've adjusted the code on the site so now it's this:

    time.post_update {
        display: none;}
    .upfront-output-region-container .upfront-output-module .default.upfront-this_post .upfront-postpart-title .post_title{
        font-size: 35px; /*Your desired size for post titles*/
    }

    Could you please check if it's now working for you?

    Best regards,
    Adam

  • Terri

    Hi Adam,

    Thanks for modifying the code - its supposed to be able to enable 'Post Data' in the post settings when I click on the unnaturally large title, yes? Because it is still not there. All I'd like to do is to be able to modify the info in 'Post Data' so the title is smaller, like you displayed in your screengrab and get on with life if possible :slight_smile:

    If you can please go into a post page and test this for yourself and try to fix it I'd be grateful. Its been 2 weeks of trying to fix something I think should be just quite simple to do and move on.

    many thanks,

    Terri

  • Adam Czajczyk

    Hello Terri!

    The code isn't meant to enable any feature but to change title text size. I've just checked your site again and I can confirm that's working. You may adjust single post title text size with it by replacing value in this line of the code:

    font-size: 35px;

    For example: setting this to 12px will make title extremely small (almost non-readable) an to 75px would change it to a giant letters.

    That being said, I must admit I'm not quite sure yet why the same menu for post settings is not available for you in Upfront panel. I double-checked that against my own setup and cannot see any significant difference here apart the fact that I'm using default Fixer layout and on your site it's customized. Since it's a live site I didn't want to "mess around" too much with layout but if you agree to this, I'll create some "test posts" on your site (preferably set to private) and will check what's causing this (applying any changes only to these posts).

    Let me know please!
    Best regards,
    Adam

  • Terri

    Hi Adam,

    I'd appreciate if you could go in and create a few test posts and see why the Post Data options aren't showing. When I'm in a post, I can see in the Theme Settings beside 'Layout' is 'Post Data' but yes when I click on that, there are buttons but nothing is there and won't respond to a click. I would really rather these Post Data options work, I will know at least that if I go into an individual post, that I can modify each title accordingly or differently if I wanted to. (right?)

    Right now, there is this newly placed code in CSS styles that is put in and I'm confused as to how that in the main Theme Settings is supposed to help me change individual post title sizes. I went in and changed the font size to 20 so it looks like this

    font-size: 20px;

    and saved the CSS while on the post page 'Freqon Energy Storage' and nothing changed or happened. What am I missing here?

    many thanks

    Terri

  • Milan

    Hello Terri,

    I can confirm that on your end post data element is not showing up while editing single post, but this is not the case with my and my collegues here. So I pinged out upfront developer for this, hopefully they will have solution of this.

    Meantime you can use the snippet which I've given to you to adjust single post's heading title's text size. If you are still not sure how to use and inject that code snippet and how to chagne that font-size property's value, please see this tiny video which I've specialy created for you in context of your site to demonstrate how that code snippet is afffecting post title.
    http://screencast.com/t/umcAA7L489

    I hope this helps you.
    Cheers,
    Milan

  • Milan

    Hello again Terri,

    I hope you are having a good day.

    Our developer needs your site's ftp and wp admin credentials to test better. Would you be able to send in your FTP and wp-admin credentials so I could take a look?

    You can send the info through our private contact form: https://premium.wpmudev.org/contact/

    Select "I have a different question" for your topic - this and the subject line ensure that it gets assigned to me :slight_smile:

    Send in:

    Subject: "Attn: Milan Savaliya"
    -WordPress admin username
    -WordPress admin password
    -login url
    -FTP credentials (host/username/password)
    -link back to this thread for reference
    -any other relevant urls

    Once I have this information, I will forward it to our developer's desk.

    Cheers,
    Milan

  • Milan

    Hello again Terri,

    After debugging with developer I got to know that you only need to rebuild single post layout by dragging "Post Data" element on the top of existing single post layout. Please see this tiny video to understand what I am talking about. :slight_smile:
    http://screencast.com/t/fpnwWUXndaX4

    After following instruction stated in video you should be able to see post data element in customizer panel when you click on post setting icon. :slight_smile:

    Hope this helps you. Please let me know if there is anything else I can help you with.
    Best Regards,
    Milan

  • Terri

    Hi Milan, sorry for the delayed reply, was busy adding more info to the website.

    This works fine for me now. Thanks for the patience :slight_smile: it always ends up working out that the issue is so quite simple to fix, its just finding it :stuck_out_tongue:

    I just use the default that you created to change the title on any new page that I create as the size is ideal for now.

    Any future issues I'll let you know.

    Many thanks,

    Terri

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.