Customizing titles, headers, and text

  • Resolved Jan

    (@jandavidhauck)


    5 years ago

    I could use some further help with some customization of text and titles in the Pique theme. (I hope it’s ok to put several questions in the same post, but they are all somewhat related.)

    First, is there a way to control the appearance of the title of a page as it appears on that page (not as part of the panels on the front page)?
    It seems that page titles are displayed as H1, so they do take the settings for font etc. from the typography panel in the customizer. However, there are some things that don’t seem possible to customize here, for instance, I would like to display them centered on each page and the customizer doesn’t seem to have that option.

    Then, on the front page, each panel title takes the formatting for H2 level and appears with this nice white border, which remains open on the bottom. Is there a way to replicate this border (in the respective font color) for H2 headings on other pages as well?

    Also on the front page, text sections are displayed in white text on the dark image background. To make the text more visible, I would like to add a half transparent dark background to the text. I know I can add a background to the text block directly in the page editor, but I can’t make that semi-transparent. Also, for pages that have the grid template, it’d be great if each of the grid headings would also be included in that background.

    Lastly, is there a way to change the background color of pages? It seems to be a creamy white, with a little bit of transparency. But I couldn’t find anywhere to change it.

    Any help much appreciated!

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • jerrysarcastic

    (@jerrysarcastic)

    5 years ago

    Hi there,

    First, is there a way to control the appearance of the title of a page as it appears on that page (not as part of the panels on the front page)?
    It seems that page titles are displayed as H1, so they do take the settings for font etc. from the typography panel in the customizer. However, there are some things that don’t seem possible to customize here, for instance, I would like to display them centered on each page and the customizer doesn’t seem to have that option.

    There is not a direct setting for centering titles, but you can add the following custom CSS code to your site which will achieve the alignment you are after.

    Then, on the front page, each panel title takes the formatting for H2 level and appears with this nice white border, which remains open on the bottom. Is there a way to replicate this border (in the respective font color) for H2 headings on other pages as well?

    Do you have a link to another page on your site that is showing an H2 heading? It will help to take a closer look at what you have now and see if that is possible on other pages as well as the homepage.

    Also on the front page, text sections are displayed in white text on the dark image background. To make the text more visible, I would like to add a half transparent dark background to the text. I know I can add a background to the text block directly in the page editor, but I can’t make that semi-transparent.

    To clarify, you are referring to not the headings but the page copy, like the sections I’ve highlighted here in my screenshot? https://d.pr/i/fXqDDK

    I should also add that text here has a drop shadow to create separation from the background (by default) so text is fully legible for me. I’m not sure that what I saw needed to be “more visible” so perhaps you are seeing an area where the text is harder to read?

    The easiest solution is not a background color (semi-transparent or not) so usually we recommend taking the existing text shadow and making it larger/more apparent instead.

    Also, for pages that have the grid template, it’d be great if each of the grid headings would also be included in that background.

    You are referring to this page? Or another page on your site using the grid template: https://jandavidhauck.com/research-home/

    Lastly, is there a way to change the background color of pages? It seems to be a creamy white, with a little bit of transparency. But I couldn’t find anywhere to change it.

    What is the color you are trying to change it to instead?

    Thanks for the additional info!

    jerrysarcastic

    (@jerrysarcastic)

    5 years ago

    Oops, forgot this code, which you can use to center your page titles:

    #page .entry-title {
    text-align: center;
}
    Thread Starter Jan

    (@jandavidhauck)

    5 years ago

    Thanks so much for helping out!

    Centering page titles works!

    Here’s a link to another page (I haven’t linked them yet to the homepage as they’re not quite ready yet):
    https://jandavidhauck.com/publications-2/
    Where it says “Books” etc. these are H2 headings and it’d be nice if they looked like the H2 headings on the front page with that box that is half open on the bottom.

    Regarding the text on the front page, these are the areas I would like to appear with semi-transparent backgrounds (so including H3 headers on grid pages, but not H2 headers):
    https://www.dropbox.com/s/0mxpxyxxwrk5f99/Screen%20Shot%202021-05-23%20at%204.35.36%20PM.png?dl=0
    I guess it’s a matter of taste, it’s true, the text is legible, but with the static image in the background, I just prefer to have another semi-transparent layer between the text and the image. Some dark rectangle that still let’s the image shine through a little bit but which clearly demarcates the entire text block. Is that possible?

    And the page background color I was referring to is the general background, like you see on https://jandavidhauck.com/publications-2/ it’s an off-white and it’s also semi-transparent (the grey background seems to shine through).

    Thanks so much for your help!

    Thread Starter Jan

    (@jandavidhauck)

    5 years ago

    Thanks so much for helping out!

    Centering page titles works!

    Here’s a link to another page (I haven’t linked them yet to the homepage as they’re not quite ready yet):
    https://jandavidhauck.com/publications-2/
    Where it says “Books” etc. these are H2 headings and it’d be nice if they looked like the H2 headings on the front page with that box that is half open on the bottom.

    Regarding the text on the front page, these are the areas I would like to appear with semi-transparent backgrounds (so including H3 headers on grid pages, but not H2 headers):
    https://www.dropbox.com/s/0mxpxyxxwrk5f99/Screen%20Shot%202021-05-23%20at%204.35.36%20PM.png?dl=0
    I guess it’s a matter of taste, it’s true, the text is legible, but with the static image in the background, I just prefer to have another semi-transparent layer between the text and the image. Some dark rectangle that still let’s the image shine through a little bit but which clearly demarcates the entire text block. Is that possible?

    And the page background color I was referring to is the general background, like you see on https://jandavidhauck.com/publications-2/ it’s an off-white and it’s also semi-transparent (the grey background seems to shine through). I’d like to make it a little darker, maybe something like #FFFAEB, but I can experiment with that if I only knew how to change it.

    Thanks so much for your help!

    Thread Starter Jan

    (@jandavidhauck)

    4 years, 12 months ago

    Hi @jerrysarcastic,
    You’ve been so kind helping me out with centering titles last week, would you be able to help me with my other issues as well?
    I hope I’ve addressed all your questions in my post above (apologies for double posting, I seem to have had it open in two tabs at the same time).
    Thank you very much in advance!

    jerrysarcastic

    (@jerrysarcastic)

    4 years, 12 months ago

    Hi Jan,

    Where it says “Books” etc. these are H2 headings and it’d be nice if they looked like the H2 headings on the front page with that box that is half open on the bottom.

    The styling of text on the homepage does not translate well to standard pages. Quite a bit of code goes into making them work in that location as they are now and it’s outside the scope of our support to refactor that code to work on internal pages.

    You can however hire a local designer to help you with that. It is possible, but the amount of code needed is non-trivial.

    Regarding the text on the front page, these are the areas I would like to appear with semi-transparent backgrounds (so including H3 headers on grid pages, but not H2 headers):

    The limiting factor here is that in the source code those boxes are not equal height, but are only as tall as the text in the container. This is hard for you to see but it looks like this. Adding a background color to each one will end up looking very odd.

    An easier way to go is to adjust the image overlay opacity for all panels on the homepage. By default this is the code that is controlling that:

    .pique-frontpage .pique-panel.pique-panel3 .pique-panel-background {
    opacity: 0.5;
}

    That is the default setting (0.5 = 50% opacity) but you can tweak the code to make the overlay darker (say 0.3 for example) and that will make the background image a bit dimmer and the text easier to read overall.

    And the page background color I was referring to is the general background, like you see on https://jandavidhauck.com/publications-2/ it’s an off-white and it’s also semi-transparent (the grey background seems to shine through). I’d like to make it a little darker, maybe something like #FFFAEB, but I can experiment with that if I only knew how to change it.

    You can use this bit of custom CSS, and edit the hex color code to find the background color that works best for you.

    .site {
    background: #FFFAEB;
}

    Hope that helps. Please let us know if you have any more questions.

    Thread Starter Jan

    (@jandavidhauck)

    4 years, 12 months ago

    Great, thank you, ok, I’ll leave the headings as they are for now …
    I didn’t know it was more involved to make that box.

    The limiting factor here is that in the source code those boxes are not equal height, but are only as tall as the text in the container. This is hard for you to see but it looks like this. Adding a background color to each one will end up looking very odd.

    I understand. Yeah, I was maybe hoping to enforce them being the same height, but I guess that’s too tricky. I’ll play around with the image overlay to see if that helps. Out of curiosity, though, if I were to add the background of those boxes how would I access them?

    You can use this bit of custom CSS, and edit the hex color code to find the background color that works best for you.

    Excellent. That does it, thanks much!!

    Thread Starter Jan

    (@jandavidhauck)

    4 years, 12 months ago

    I finally figured it out. This comes close enough to what I was envisioning: 

    .pique-panel:not(#pique-hero) .pique-panel-content .entry-content {
  text-align: left;
	padding-left: 15px;
	padding-right: 15px;
	background-color: rgba(0, 0, 0, 0.35);
}
Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Customizing titles, headers, and text’ is closed to new replies.