How to add a background image in the page title frame?

[theSA]

Hi,

I’m trying to add an image/background to the top frame (the page title frame) but I can’t find where to do it.

I’ve tried to add in the product pages with the instructions given in your documentation (category header background).

On other pages such as blog and customer service, I’d love to have a background in the top frame to make it more alive. I’ve tried to add one in the Set Image section (my dashboard is in Swedish so I don’t know exactly the name of the box – but under the save box on the left hand side). But it doesn’t show in the preview, and after saving it has been deselected.

How do I do this?

Thanks,
Anna

[Harry]

Hi,

You can set background for separate page by upload featured image on right when you manage the page

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[theSA]

Hi Harry,

I’ve tried that in all pages, multiple times (I tried to explain that in my question). Nor does is show, nor does it stick – after saving the images is no longer linked.

Does the image has to be in any certain format and size to fit?

Regards,
Anna

[Harry]

Can you send us your website link and temporary admin account as private reply, we will take a look and help you solve your case!

Best regards!

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[theSA]

This reply has been marked as private.

[Harry]

I try with account you sent but can’t access. Can you check and send us account again,

Thanks

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[theSA]

This reply has been marked as private.

[theSA]

Technology is sometimes crazy – today when trying to add a background image to the page title it suddenly worked (I spent hours trying yesterday). The other problems still exist.

Regards,
Anna

[Harry]

Hi,

1. For the footer menu and widget footer #3 you’re using one menu for both https://monosnap.com/file/z1h6GuCQNAfqZPDKhTVPHA60kotevT#

2. You can add custom css in JanStudio > Theme Option > General Layout > Custom CSS

.footer__top { padding-bottom: 50px;}

change 50 to your number

3. You can change footer background overlay by add custom css

#jas-footer:before { background: rgba (0,0,0,0.9);}

4. For the string to translate can you try to search in another plugin related to WooCommerce. I tried search in WooCommerce and our theme but can’t found.

Best regards!

 

 

 

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[theSA]

Hi Harry,

Thanks a lot! I wouldn’t have found that footer menu without you! 🙂

The suggestion for no 3 tho, to change the css, didn’t give any change – it’s still the same black.

Another question related to the top frame. I’ve placed a Revolution Slider in the top of first page. When I set the size to Auto there is padding on all sides but the top (where I got your help before to remove it), when I set the size to full part of the slider is placed under the vertical menu. What css do I have to use?

This one I got from you to remove the top margin: .jas-page div.mt__60.mb__60 { margin: 0;}
I tried to add 0,0,0,0; to that script but that didn’t work.

And in relation to this, the sidebar has no padding resulting in the widgets looking a bit strange as they almost look like they float outside the page. Is it possible to have a script that removes the padding/margin for images, i.e. they can be stretched/full width but other items like the sidebar has padding?

All the best,
Anna

 

[Harry]

1. I helped you correct code of background overlay on footer and .jas-page div.mt__60.mb__60 { margin: 0;}

2. To set any row full-width you can follow this screen shot https://monosnap.com/file/XUZAnVa1tesLEgegj5lHck1l3fJOQD#

3. For the blog page you should set page as blog in Setting > Reading  https://monosnap.com/file/EYqG39XZr57xwRdTG7ya4lPE36rgiu#

and you can change setting for blog layout in JanStudio > Theme option > Blog

Best regards!

 

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[theSA]

Hi again,

I still have some issues with margins/paddings.

1. You write “To set any row full-width you can follow this screen shot https://monosnap.com/file/XUZAnVa1tesLEgegj5lHck1l3fJOQD#”
–> despite doing that there’s still space in the right margin. How do I remove any space and margin so it really is full width?

2. See screen shot – how do I set the setting so that the slider in the right hand column has no margins on any side, i.e no grey background? I want the columns to be the same height.

Thanks!

[Harry]

 

1. You can remove space around column by edit row https://monosnap.com/file/edCKyR3gJsVNjOFxeWPBCRTje25suy#

2. You can set same height for column in row by edit row and setting Equal Height https://monosnap.com/file/1aOiZd7IxVW4KgH3Lv56WcQesYRZQp#

Best regards!

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[theSA]

Hi,

Thanks!

https://monosnap.com/file/edCKyR3gJsVNjOFxeWPBCRTje25suy# worked for the slider that you show in the link (THANKS!) – but I’ve the same problem with the top slide, and when I set the same settings for that slide (padding 0px on all sides + full width marked) it’s still space to the right.

[theSA]

Hi again,

1. a) The css code #jas-footer:before { background: rgba (0,0,0,0.9);} doesn’t remove the background overlay (I tried change to .jas-footer.before { background: rgba (0,0,0,0.9);} – i.e. changing the # in the beginning to a . but that didn’t change anything either).

I’m sorry for all the questions. I’ve not worked with your theme before and in other themes I’ve worked with I didn’t need the css skills to do settings like these. I liked the style of your theme for this site so changed to yours, but didn’t realise the css skills I needed. Sorry about that!

[Harry]

Hi,

This is css overlay we can’t make it as option so we have to use css skill, we’re sorry about it

You must use #footer because it’s ID https://monosnap.com/file/A5jdvt7a0fimZAq27eCM9iku0VMh0y#

#jas-footer:before { background: rgba (0,0,0,0.9);} and  you need remove space between “rgba” with (0,0,0,0.9).

Correct code is #jas-footer:before { background: rgba(0,0,0,0.9);}

Best regards!

 

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Harry]

Hi,

Because you setting row full height and content in middle but your image slide not equal with height of your screen.

I change setting for content to top now don’t have gap on top. https://monosnap.com/file/rHEr92apKxkOZ3dTHDDks8sGlt8Gu4#

Best regards!

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[theSA]

THANKS! There’s so many settings, and I’ve done so many tests and then it’s that easy.

Many thanks for your quick replay!

[Author]

Posts