[David Wild]

How do I change the Header size, it is too big? Also the Header image has a gray tint to it, how do I get rid of that?
Thank You,

[Andre]

Hi David…. do you have your website live where I can go see the one about header size? There are a few different headers, so I need to know which one you are referencing and then I can definitely help you out with changing the size.

For the gray tint, I’m going to assume you are referring to the dark overlay on top of the image(s); you can add this CSS code to your customizer’s Additional CSS tab:

#header-image::after {
    background-color: rgba(0, 0, 0, 0);
}

[David Wild]

Hi Andre,
The website is http://www.twincitiesrooter.com/1/19

Also can you help me control the content box size, I’d like it smaller and also control the text margins?
Thank You,
David

[Andre]

Thanks for the link…. when you say header, are you talking about the top part where the logo is? If so, this will be the logo size itself, which can be adjusted with a bit of CSS, but let me know if this is what you are referring to.

Then for the content box size, I’m taking a guess you mean the one where your text content is and centered?

The default size for this is:

.wrap {
max-width: 1170px;
} 

So you can copy that code and also add that to the Additional CSS tab in the customizer; just change the width value to what you want it to be.

For text margins, you will need to provide a bit more info on what you are referring to. You mean the space between paragraphs?

[David Wild]

Yes the header area is too large. The logo is fine, just the wrench and pipes is huge. How do I change the height of the header area?

[Andre]

I was just checking out your site… discovered one thing I need to make an adjustment which relates to your current site setup. But this might help you out if this is for all pages with the header image.

.header-no-caption #header-caption {
    min-height: 100px!important;
}

Try that and see if this works. You can adjust the height px to what works best for you.

The theme is setup to expand (force) any image to fill the window area, so for your images, it does a 100% width and height which gives it the bigger look that you see. But the bug that I need to fix is that the header-caption container is still in the image area, just with no caption text in it. The problem is that this container has a height to it which is why I pasted the code above to change it. So I need to take this in account for anyone who may have a website where the caption container needs to not have any fixed height to it.

I also noticed your one page with the white background to it is hiding the main menu which is white text. One of the reasons there was a darker overlay on the image for such images that have a light or white area to the subject matter.

There is a way make the menu text show up, but this will require some added CSS. Let me know if you want me to help you with that one.

[David Wild]

Yes can you help me with the menu text, to make it show up, with color and control the font name and size, also to fit the menu all on 1 line? Also can I make a nother box above it for phone numbers and such? Like on this website? https://texaspremierplumbing.com/
Thank you for all your help!

[Andre]

Let’s tackle the second request first… to do that, unfortunately is not possible at this time. However, what I can do is make a theme update which adds a top sidebar row to the very top of the page (above the header) which would let you do just that. I can do this as an added feature to the theme. I can have that done later today.

Regarding your menu, normally we don’t provide this level of customization through support, but I’m going to help you out with this one because normally the darker overlay is not removed for the purpose of showing the menu. So we have a few options here, not sure if you will like them or not, but:

Option 1 – We can do a transparent dark background behind the header area (where the logo and menu are).
Option 2 – We can do a solid colour background for the same area; a colour that uses one from your logo, like a blue.
Option 3 – We can put the dark overlay back, but change it so that it’s a gradient. The top starts off a bit darker then transitions to nothing as it gets part way down.

Menu on One Line

For this, you have a couple options. Normally the top header layout you are using (the default one) is not ideal for larger menus, so there is an option in the theme settings to change your top header area (the logo and menu and social icon area) to be full width of the browser window. This would let you have a much larger menu on one line. The setting for this is explained in this tutorial:

https://www.bloggingthemestyles.com/setup-tutorials-for-premium-themes/setup-typit-pro/typit-pro-header-style-site-branding-and-menu/

The other option is to modify the top header container with some more CSS code that will remove the social icon area which is taking up some space (as I see you have no social icons there). Removing that will give you some extra space for the menu.

[David Wild]

Now my header image isn’t showing up, I dont know what happened, can you help with that?

Yes please can we make a theme update which adds a top sidebar row to the very top of the page (above the header) I will look forward to seeing the update.

Regarding the menu, I’d like to see how all 3 options would look if possible.

Menu on One Line, I will look at the tutorial and would also like the option to remove the social icon area.

Thank you,

[Andre]

Not sure where your images are but something has changed because your site pages now have a bunch of shortcodes showing. Only thing I can think of is to reverse whatever you might have done last to see if it corrects it. I would also recommend turning off your AutoOptimize plugin while you are doing stuff with the site, then once done, turn it back on.

Menu One Line – Options 1
This removes the social icon area (as long as you don’t create one for it).

@media (min-width: 992px) {
#site-header {
    grid-template-columns: auto 1fr;
 }
}

The other option for this is to change the site header (see that tutorial) to change the layout to be full width.

For the menu to show up on light or white backgrounds:

Option 1 – Best for when all your headers every page have an image because this is a global style. This one adds a transparent background colour with 35% transparency (hence the 0.35 value in the code below)

#site-header {
    background-color: rgb(98, 183, 230, 0.35);
}

For a solid colour:

#site-header {
    background-color: #62b7e6;
}

Option 2 – Transparent gradient from top to middle it transitions from darker to nothing.

#site-header {
    background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
}

[David Wild]

I reinstalled the theme from a previous backup and Im still not able to get a header image in there. There’s a gradient in the header now. Any suggestions? Im out of ideas. https://www.twincitiesrooter.com/1/19/

Thank you.

[Andre]

It’s more likely related to choosing the various combinations for the header. Did you go through the series of tutorials for the header styles, starting with this one:

https://www.bloggingthemestyles.com/setup-tutorials-for-premium-themes/setup-typit-pro/typit-pro-page-headers/

This one is for the front page:
https://www.bloggingthemestyles.com/setup-tutorials-for-premium-themes/setup-typit-pro/typit-pro-header-style-front-page/

Then there is:

This one is about using the gradient headers:
https://www.bloggingthemestyles.com/setup-tutorials-for-premium-themes/setup-typit-pro/typit-pro-header-style-header-gradients/

This one is about posts that have featured images:
https://www.bloggingthemestyles.com/setup-tutorials-for-premium-themes/setup-typit-pro/typit-pro-header-style-post-headers/

This one is about the site header (site title/logo and menu area)
https://www.bloggingthemestyles.com/setup-tutorials-for-premium-themes/setup-typit-pro/typit-pro-header-style-site-branding-and-menu/

[Andre]

It could also relate to the various image shortcodes I am seeing throughout your website. such as:

[us_single_image image=”3347″ size=”full”]

It seems as though your post images are using a shortcode, but no images are showing, they are all shortcode (code) instead. Are you using a page builder or something for your site?

[David Wild]

Im not making posts, but Im using WP Bakery Yes. Those shortcodes are images from previous version and when I changed theme the images went away, which Im not concerned about I will go thru site and delete them. I just cant figure out the Header image, Help
Thank You,

[Andre]

Is it OK if I log into your site’s admin and see if I can get image in? If so, use my contact us link in the footer to provide me with the login info (don’t post it here in the forum). I would need to know at least one image to try with a post, or the front page to start, or can I use a sample image of my own?

But the images were there previously, so the question is…what did you change that made them disappear? Did you go through the header tutorials and make any changes to the header style layouts?

[David Wild]

Also is this theme capable of having a different header image on different pages?

[Andre]

Yes to the different header images. It grabs the “Featured Image” from the post or page and displays it in the header (providing you are using that header style option from the theme settings.

A side note about page builders, such as the Bakery one. They are notorious for what is called “Locked in”. When you use a page builder and then change themes that don’t rely on the page builder you use(d), this can play havoc and shortcodes that page builders generate can get messy.

[David Wild]

No I reinstalled the theme from a previous version. I didnt make any changes at all. I will get you login.

[Andre]

OK, I will await your login infomration in an email. While I test this out, can I use any sample images I have on my computer and then you can go back in and change them to the ones you want?

[David Wild]

Im hosted at godaddy and using installtron. So I log into godaddy hosting c-panel to get to my wp admin websites. WOuld you need the godaddy login info.

[Andre]

I would just need your username and password for that specific site without having to go through godaddy.

[Andre]

Just a quick follow up… were you able to find the login info that is specific to your website without going through Godaddy?
I have to run an errand soon, but will be back to finish helping you out.

[David Wild]

Im working at getting you the login for the site. I will send it asap. Thanks much Andre!

[David Wild]

Andre, I sent you my login thru your contact form now.

[Andre]

Thanks David. I’m just on my way back to the studio and will follow up shortly.

[Andre]

Quick follow up. I wanted to find out if you recieved my emails from earlier that I logged in and added a couple images to the home page and your $94 page…plus the transparent gradient that I did instead of the other options I mentioned to show the menu better on light background images?

[David Wild]

Hi Andre,
Thanks so much it looks good! I just have a few more things to ask.

1. I need a row above the Menu’s for phone #s.
2. Can I get the logo in header a little bigger, I eliminated a page in the menu so maybe its possible?
3. The shadow around the body wrap I’d like lighter?
4. In the footer can I remove that site title text, and just have logo and copyright?
5. Also can footer have 3 columns for more widgets?

Thank You, Really appreciate your help!
David

[Andre]

Forum is working again…here are my replies to each item:

1. I am making an update to the theme that puts a row with a sidebar position at the top. It will be turned off by default because a lot of people are using this theme, so you just need to place a widget in the position and it will show.

2. In the customizer Additional CSS tab, you will see this:

@media (min-width: 992px){
#site-header {
    grid-template-columns: 225px auto;
}
}

Change the 225px to 300px which will increase the size of the container the logo is in and the logo being 350px will self-enlarge. Of course, you can change that width size to be larger or smaller that suits your needs.

3. In the Additional CSS tab, add this:

.custom-header #page-header-glow .wrap, .has-post-thumbnail #page-header-glow .wrap {
    -webkit-box-shadow: 0px -15px 43px 12px rgba(0,0,0,0.30);
    -moz-box-shadow: 0px -15px 43px 12px rgba(0,0,0,0.30);
    box-shadow: 0px -15px 43px 12px rgba(0,0,0,0.30);
}

then adjust the 0.30 you see on each line to be less. This refers to the transparency level which right now shows as 30% (the 0.30). Make it 0.25, or 0.20 and see if that works out better.

4. Footer site title (I am going to also add a setting to disable that if someone does not want it)…add this to the Additional CSS:

#footer-site-title {
    display: none;
}

5. For the footer column widgets, are you referring to the area where your site footer logo is at the very bottom or the actual “Bottom” of content area? If the latter, you have a Bottom 1, 2, 3, and 4 sidebars that sit side-by-side. On the demo site, you can see them here: https://demos.bloggingthemestyles.com/typit-pro/sidebar-positions/

[Andre]

Quick update… you can download the Typit Pro theme version 1.1.2 which now has a Top Sidebar position that you can add a widget to with whatever info content you decide. I also added settings to the Basic, Blog, Post, and Page tabs of the customizer which lets you adjust the height of the header area (where the featured images show).

[David Wild]

Hi Andre, How do I get this update?
Thank you,
David

[Andre]

Greetings… you can go to the top menu then to Purchase history, and then view downloads. You can re-download the theme, but you will have to manually upload the unzipped theme files to overwrite the existing theme files.

Right now we are still waiting for finalizing our support request with the developer of the purchase/download plugin we use. Entering a license key on your website for a theme is showing as invalid for our customers. Once this gets solved, then you would then get an update notice and 1-click updates for your theme(s).

Another option that some people have done is to temporarily change your site to a different theme, then delete the theme you got, then reinstall the new one (with the downloaded zip file).

Another option is to install this plugin:

https://wordpress.org/plugins/update-theme-and-plugins-from-zip-file/

Basically WordPress does not let a person install the same theme using the WP installer, but this plugin lets you do that. You would just update any theme or plugin using the WordPress installer as though you were installing it for the first time.

[Author]

Posts