Just looking for a boxed look.

[Dave]

Hello all,

I;m trying to make the website a boxed look without having to contend with the full width header, footer, etc. Do I need to upgrade to the $39.99 single site license for this? Right now I have them hidden because I don’t know what I’m doing. 🙁

https://thecozynook.net/

Thanks!
David

[Dave]

I just want the mountains as a header and the menu below. Simple, and something I can work with and build upon.  No idea how the large round image on the top got there. 🙂

Please, can someone help?

 

Thanks,

David

[User]

@Dave,

No, you don’t need to purchase the PLUS features until you need them.  You can find all the PLUS features here: https://plus.weavertheme.com/

May I suggest that you have the “Classic Widgets” plugin installed.  That plugin enables the classic widgets settings screens in Appearance – Widgets and the Customizer and disables the block editor from managing widgets.

That may make it a bit easier for you during the initial setup, as will disabling all optimization and cache plugins at this time.

Not quite sure what you mean by “boxed look”…  unless you mean an uncostomized Weaver Xtreme site – “straight out of the box”?

Regarding the large top image, looks like you set that as your “custom logo”.

Perhaps you can explain what you want to achieve, as most can be achieved through the Customizer directly, or through Weaver Xtreme Admin Options.

Regards!

[Dave]

Yes! This helped tremendously. Thank you for this pro tip. I was able to locate it in the header widget just as you mentioned, a custom logo.

What I meant by a boxed look is I don’t want it to expand the full with of the browser. Instead, remain contained to the width I select in theme width. Instead this case, I used 1100px (the default) and how it’s where I need it to be to start building.

I had to insert a -85 top padding value so the banner rests flush against the top of the browser.  Looks good, making progress, but I’ll need to figure out how to make that take in mobile view.

Unfortunately I’m not that tech savvy, so I had to use another site, export the weaver settings, then import them on this page to get close to where I needed to be. Now I’ll do some minor tweaking.

Thanks again for helping. Weaver is a great theme, especially if one becomes proficient with it.

All the best.

[User]

@Dave

To view your page in the Mobile View, the easiest way is to use the F12 key on most browsers and enter the “developer mode”.

Or you can ‘right-mouse click’ over something on the page and select “Inspect”, and that will open the same developer mode screen.

You will find that you can set the screen size to that of your own mobile phone, so what you see is what you will get.

Regards.

[Dave]

Awesome.  I’ll give this a try.

Thank you for the much appreciated tip. 🙂

Best

[scrambler]

Each area has an align area setting, this is where the full width option lies.

You should not have to insert anything for the banner to be at the top, if you do, there is probably something that is not setup right.

That said, Negative padding are invalid in CSS, so if you meant padding, then it is doing nothing. If you meant negative margin, that is something else. I dont see one anywhere though.

If you explain where you put it, we can look at what needs to be don instead of it. You can also remove it and post back so we can tell you what to do to eliminate the space.

[Dave]

This reply has been accepted as the best answer.

Hi Scrambler!

Been a while, glad to see you again. You and other power users helped me tremendously in the past. This theme is a great product and you have a stellar community here.

I went to one of my other sites, and copied everything from the Weaver theme, line by line. You’re correct, I didn’t need a -85 value for top margins in the top/bottom margins fields in: Main Options>Header.

I must have copied something, somewhere but it zipped the header to the top of the browser, which is great! 🙂

I have the page setup the way I want it.

Now I’m trying to have ChatGPT create a header image for me that’s 1100 x 300px. It creates it, but when I download the image and select it for my header, it’s huge. The system asks me to crop, and then I lose a large portion of it.

Then it tells me (which is a foreign language to me):

Option 3: Use CSS “Cover” in WordPress

If your theme supports custom CSS or uses a header image background, set:

.header-image {
background-image: url(‘your-image-url’);
background-size: cover;
background-position: center center;
height: 200px;
width: 1100px;
}

Yeah OK, I told myself good luck with that! 😆

I’ll keep trying and learning as I move forward.

David

[scrambler]

I am not sure if there was a question in there.

When you select a header image and it offers to crop, you do not need to accept and you can keep the image as is.

when you use an image for the background of an area, the image ration may not match the ratio of the area.

Therefore you have two options, either ask for the area to contain the whole image, and have empty band either on the sides or top and bottom, or ask for the image to cover the whole area, and therefore possibly cut some of the image to fit the area.

[Dave]

Hi Scrambler,

What I do is select customize, then header and select an image to replace the default WP header image.

When I do this, it asks to be cropped. I didn’t know you can ignore this and not familiar with using the image as a background then asking to contain the image.

I’ll need to poke around a little as I imagine this capability is available somewhere else other than the steps I described above. 😳

[scrambler]

When you select the image, next to the crop image is the button Skip Cropping 🙂

I explained the CSS cover vs contain because you mentioned it, but you dont need to bother with that for the header.

[Author]

Posts