Pique Theme changing default header color

Hi there.

1. I would like to change the header color on all pages (excluding the front page) from black to another color (I haven’t figured out the best color yet, but I do have RGB codes when ready). I can’t seem to find it when I inspect the header with firebug.

You can change the background colour to the header on all pages on your site (excluding the front page) by adding the following to Jetpack’s custom CSS module:

#masthead {
    background-color: #2d2a26;
}

Replace #2d2a26 with any colour code of your choosing. ??

The header image on your front page won’t be affected as the theme targets it separately in its style.css file.

2. On the front page, there is a bigger gap between the menu and page title, and then the page title and content, than I’d like. I’d like to close it. Is it due to padding or something else? How can I change this?

I’m not able to view the Pique theme at talaconsulting.com and, so, it’s tricky for me to come up with the specific CSS for what you’d like to achieve.

Is the bigger gap also noticeable on the theme’s demo site? If you can point me to the specific titles and content that the gap appears between, I can help you with specific CSS from there.

Thanks!

Hi Siobhan,

Thank you so much for the response for my first question. That helps immensely.

My apologies on accessing the site – I forgot to disable the Coming Soon page. I’ve unlocked it so you can see what I’m asking in question #2.

https://www.talaconsulting.com

I have one more question. I’m using the grid to showcase services I provide. I’d like to have a short blurb, but also have the ability to click “more” or something similar to take the person to the actual page (with more information). Is there a way to do this? (As an example, you’ll see the first two services have a paragraph of information which is perfect, the last one has too much information showing (disregard the fourth service, that’s being removed). I created buttons, but that doesn’t solve the “too much” content problem on the front page.

Thanks so much for your help, I really appreciate it.

Sherree

Hi Sherree,

My apologies on accessing the site – I forgot to disable the Coming Soon page. I’ve unlocked it so you can see what I’m asking in question #2.

Thank you for disabling the Coming Soon page!

You could reduce the gap between the menu and the first page title with the following custom CSS:

#pique-hero .pique-panel-content .entry-content {
    padding-top: 0;
    margin-top: 0;
}

The gap between the actual page title and the content seems pretty narrow as it is, to me.

Can you confirm if I’m looking at the correct area of your site? I’m looking at the gap between “Got Chaos?” and the content beneath it:

If you’re referring to another area then let me know and I’ll take another look.

I’d like to have a short blurb, but also have the ability to click “more” or something similar to take the person to the actual page (with more information).

You can insert a “read more” tag at the point you wish to insert a link to “read more” in your page’s editor.

If you head to the editor for any given page, you’ll find an “Insert Read More tag” tool in the toolbar. More information, including screenshots, for adding the tag can be found here:

https://codex.www.ads-software.com/Customizing_the_Read_More#The_Excerpt_Basics

Hope that helps out!

Hi Siobhan,

Thank you so much for the reply, I appreciate it.

I appreciate the code to narrow the gap from the menu to the page title. Moving it up will allow the entire page to be seen above the fold (which is what I wanted).

Regarding the page title and content: What I meant (and didn’t say) was I wanted to add just a bit more room between the page title (Got Chaos) and the bullet points. It seems to close for my liking. Perhaps the ability to add one half space would work?

I totally forgot about the “read more” tag. I use it often when writing blog posts! Thank you for that reminder.

I sincerely appreciate your help with this. It has made all the difference in how I want things to work/look. Thank you.

Sherree

Hi Sheree,

Regarding the page title and content: What I meant (and didn’t say) was I wanted to add just a bit more room between the page title (Got Chaos) and the bullet points. It seems to close for my liking. Perhaps the ability to add one half space would work?

Ah, got you! You can add some HTML directly to the top of that page’s editor in order to add some space.

To do this, navigate to the editor. You’ll see two tabs in the top right: Visual and Text. Switch to the Text tab and add the following HTML in order to add an empty new line:

<br />

Repeat this HTML depending on how many empty new lines you’d like. For example, the following would add three empty new lines to the top of your page:

<br />
<br />
<br />

Let me know how you get on with that. ?? I’m glad I was able to help with your other questions, too!

Siobhan,

Yay! That last change worked!

Thank you so much for your time and assistance. Your help made all the difference. ??

Sherree

I’m so glad that I could help out, Sherree! Feel free to start a new thread on this forum if anything extra comes up, too.

Have a lovely Sunday. ??