![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: style page title text
-
AuthorPosts
-
September 5, 2023 at 9:13 am #1418131
I’ve got everything formatted on the site I just installed today except one tiny thing … the page title in the header area under the menu. I’ve formatted everything else using the Theme Options so it seems like I should be able to edit the title area thru that, too. The title is within “container av-logo-container” but I’d rather not resort to CSS if I don’t have to.
example page
The “About JBO” in the header bar is what I can’t find in Typography.-
This topic was modified 1 year ago by
bbarasa.
September 5, 2023 at 2:19 pm #1418152Hey bbarasa,
You can change the H1 element styling under Enfold->Advanced Styling, please have a look there.
Best regards,
RikardSeptember 5, 2023 at 7:39 pm #1418196No, not an H1 tag within the page.
On that page the words “About JBO” in the gold bar in the heading is what I’m referring to, below the logo and menu bar. The place that tells the user what page they are on. I think it’s referred to as the Page Title but maybe sometimes Header Title?
The menu is set to Open Sans, the body is set to Open Sans. Only the H1-6 tags are set to a serif font. I can’t find anything in Theme Options that controls that Header/Page Title text. I’d also like to remove the link since I’m not using it for navigation.
If there is a better way to accomplish the look I want, that would be fine. But usually the page Title shows up at the top of the main content area..
In General Styling I can control the Main Content Heading Color, but not the font size or family.
-
This reply was modified 1 year ago by
bbarasa.
September 6, 2023 at 6:36 am #1418238Hi,
Thank you for the update.
There is no dedicated option to change the style of the title in the breadcrumb container, so you may have to add a few css modifications. You can start with the following css code.
.title_container .main-title { margin: 0; font-size: 16px; position: relative; z-index: 2; min-height: 36px; line-height: 2.3em; top: 0; font-weight: 400; font-family: Open Sans; }
To disable the link, we can set the pointer-events property to none.
.title_container .main-title a { pointer-events: none; }
Best regards,
IsmaelSeptember 6, 2023 at 8:29 pm #1418298The pointer-events CSS did remove the link, but the CSS to change the font wasn’t quite right. I looked at the source code and saw the text is within an h1 tag, but adding h1 didn’t help. I also saw that the title is within an a tag, and even tho we’ve taken out the live link itself, the tag still remains. so I added the “a” to the CSS for the font family as you did for the link CSS itself and that worked to change the font.
So then it seemed obvious that all that CSS could go together. Result that works:
.title_container .main-title a {
pointer-events: none;
margin: 0;
font-size: 16px;
position: relative;
z-index: 2;
min-height: 36px;
line-height: 2.3em;
top: 0;
font-weight: 400;
font-family: Open Sans;
}Thanks!! Maybe consider adding that as a request. The reason it was picking up the other font was that the title is in an H1 tag, which I’ve defined as EB Garamond. In the typography page, for H1-6 there are some toggle checkboxes for different areas of the page. Maybe Page Title could be added?
September 7, 2023 at 7:08 am #1418330Hi,
So then it seemed obvious that all that CSS could go together. Result that works:
Good to know that you found a working solution. However, not every element can be added in the Advanced Styling panel. For certain elements, you may need to apply some CSS modifications. Please feel free to reach out if you have any more questions.
Best regards,
Ismael -
This topic was modified 1 year ago by
-
AuthorPosts
- You must be logged in to reply to this topic.