Blog title page help

Hi, try adding this rule to your “Customizing Additional CSS” panel:

.page-title {    
	text-transform:capitalize;
}

Currently, it is set to ‘uppercase’.

• This reply was modified 6 years, 9 months ago by tarau.

Thanks for the quick reply but unfortunately that did not work. Were you able to see it as all caps someplace on the backend? I should also note that the theme as well as plugins are up to date. Below is the css code I have for customizing additional css.

/*

.twentyseventeen-front-page .panel-content .wrap,
.site-footer .wrap {
padding: 0;

}
.site-footer .widget-area {
padding-bottom: 0;
}

.site-footer {
margin-top: 0;
}
.page-title {
text-transform:capitalize;
}

Hi, I’ve visited your site and noticed that you haven’t found a solution yet. Let me try again to see if this helps you:

When inspecting your page it shows that your page-title is set to ‘uppercase’ along with other class selectors such as (.page .panel-content .entry-title, .page-title).

Let me suggest to use the !important rule for now to see if you can override your default settings. Here’s my code:

.page-title {
    color: #003366;
	text-transform: unset !important;
}

I’m using ‘unset’ to bring it back to normal. Since you only use a single word, the first character is capitalized anyway. However, you can also try with capitalize as I had suggested before (along with !important;).

The !important flag overrules anything else on the page that might be changing your page-title style.

Good luck!

• This reply was modified 6 years, 9 months ago by tarau.

Tarau, thanks so much for your reply. Unfortunately that didn’t work either. I typed under customize additional css
.page-title {
color: #003366;
text-transform: unset !important;
}

Ann

Sorry to hear you’re still fighting it. It works for me when I test your page in the browser and modify the CSS on the fly. There must be another reason that I’m not seeing. I hope someone shows up with a positive suggestion.
:))

What browser are you using? I’ve used both Edge & Chrome.

I was using Chrome. By pressing CTRL+SHIFT+i you get the developing tools.
Then, on the Elements TAB you can see your code on the left, and the style declarations on the right side.
By clicking the Arrows on the left, you will be opening each HTML container, and the respective CSS declarations will be shown on the right column.
You can modify those declarations to experiment with different styles on your (or any) site.
You can also add the CSSViewer extension for chrome, which allows you to click on any part of your page and see what style is applied to it.
These tools are not perfect, but they are useful for analyzing web pages.

Thank you! I’ll play around with this more tomorrow and will let you know if I’m successful. Many thanks again!

Hi aprosen,
I just want to share another class combination that does the same thing as my first example. Perhaps this one will work out for you whenever you give it another try:

 .page-header .page-title {
    text-transform: capitalize;
}

That didn’t work either. Thank you for your continued suggestions. One weird thing though, as I was inspecting the elements, the title changed to upper/lower but then reversed itself when I closed out that particular page. Unfortunately I can’t figure where within the elements that this occurred.

I clicked on transform text & that changed it to upper/lower but now it’s not making the change.

I was playing with one my sites and I could not make the change to lowercase either. Then I tried the following (with the !important rule), and it worked.
In you Additional CSS box try the following:

 .entry-title {
text-transform: none !important;
}

The !important rule is not normally recommended because it really overrides any other existing style change for this particular tag. However, when used with intent it can be a lifesaver. Just look for it in the future if you are trying to modify this tag again.
As for “none”, I could have used “capitalize” as well. They both worked for me.

Hi @tarau, We have noticed you helping and the community really appreciates it ??

@aprosen, I noticed your Custom CSS section had all of its code in CSS ‘comments’, resulting in the browser ignoring that CSS:

				/*

.twentyseventeen-front-page .panel-content .wrap,
.site-footer .wrap {
    padding: 0;

}
.site-footer .widget-area {
    padding-bottom: 0;
}

.site-footer {
    margin-top: 0;
}

Is that intentional? If not, try removing the comment opening tag:

				/*

Then if you just try this code (I noticed you’ve tried before) it should work:

.entry-title {
    text-transform: unset;
}

@tarau, A neat way of getting almost the same effect of the !important tag is to use more specific CSS selectors. This could just mean prepending one extra selector, like ‘body’, i.e.:

body .entry-title {
    text-transform: unset;
}

Thank you both for your replies. Andrew, this is not intentional. I removed the /* & tried .entry-title {
text-transform: unset;
}

Neither that nor Taru’s latest string worked. I’m sure this is on my end as I really don’t know what I’m doing since I don’t understand code. Is there another place I should try to insert this CSS into rather than the customize area?

Thanks again!

Oh the selector is wrong, instead of this:

.entry-title {
    text-transform: unset;
}

It should be this:

.page-title {
    text-transform: unset;
}