[versa83Participant]

#11421

Hi,
I would like to know how can I change the header to an image instead of choosing different colors. i.e. I need to change the header background to have certain background pattern.

Thank you.

[versa83Participant]

#11430

This reply has been marked as private.

[Mostafa YasserModerator]

#11442

Hello,

Sorry for the late reply,

There isn’t any option to change the header for an image but it can be done with custom css.

you can add custom background image using this code

.avaris-main-header {
background: url('YOUR IMAGE URL HERE') repeat !important; 

just replace “YOUR IMAGE URL HERE” with the image link.

and to remove the header row background you can use this code

.avaris-headerbuilder-row {
background: none !important;
}

Let me know if any other thing is needed
Best Regards,

[versa83Participant]

#11446

Hi Mostafa,
Thanks for replying. Is there any document or where can I find the functions that are available in the theme? Such as .avaris-main-header, .avaris-headerbuilder-row.

Thank you.

[Mostafa YasserModerator]

#11447

Hello,

You can find documentation for Avaris here

Here’s the documentation for the headerbuilder

Best Regards,

[versa83Participant]

#11451

Hi Mostafa,

Is there any way I can change the main header background to the image that I want and maintain black color for the menu bar?
The code you provided above change both the main header and menu bar to the image color.

Another question, how can I change the footer to two rows of wordings at the center of the webpage and social icons maintain at the right side of the footer?

Thank you!

[Mostafa YasserModerator]

#11456

Hello,

To maintain the menu color

1. You need to remove the 2nd code.

.avaris-headerbuilder-row { background: none !important; }

2. Keep the black color for the menu bar.

3. Go to Appearance > Header Builder , and clear the background color from the header row

For the 2nd question about the footer, Can you please send me a screenshot or the page where you want to apply the changes ?

Thanks 🙂

[versa83Participant]

#11459

Thanks for the reply. The header works!

The link below is the screenshot of what I intend to have. Please assist me to achieve that. Thanks!

https://apia.wd2go.com/api/1.0/rest/device_redirect?device_user_id=21595339&device_uri=%2Fapi%2F1.0%2Frest%2Ffile_contents%2FPublic%2Ffooter.png%3Fdevice_user_id%3D21595339%26request_auth_code%3D9cf40bace9c3c238aa55f45d50c0ab4e4c32bdaf663257a5c2b2bcd0a99e4bd5

Thanks!

[Mostafa YasserModerator]

#11466

Hello,

Unfortunately, the link isn’t opening

Could you please recheck the link you have sent ?

Thanks!

[versa83Participant]

#11468

Hi Mostafa,

Possible to try the link below? Thanks!

https://1drv.ms/i/s!AmywaCyRSoDqtEaJGO2cBmwq_eT-

[Mostafa YasserModerator]

#11469

Hello,

To create a similar footer like the one on the screenshot, you need to:

1. Go to Appearance > Widgets, add text widget in Footer Sidebar
2. Go to Theme Options > Footer settings, change number of columns to: 1 column.
Add social icons and copyright text.

In case you want to center the footer text and decrease the paddings, add this custom css

.avaris-main-footer .widget {margin-bottom: 10px;}
#sidebar-footer{text-align: center;padding-top: 20px;} 

Let me know if any other thing is needed
Regards,

[versa83Participant]

#11471

This reply has been marked as private.

[Mostafa YasserModerator]

#11472

Hello,

It seems to me from the last screenshot you’ve sent, that you haven’t used the custom css that I sent you.

In case you’re having trouble using it, Would you please send us admin login in private reply so we can make sure that everything is working correctly.

Thanks

[versa83Participant]

#11480

This reply has been marked as private.

[Mostafa YasserModerator]

#11483

Hello,

The custom css in the picture you’ve sent is not completed, there should be a closed bracket “}” in the empty line after the word “important” .

Can you please close this bracket, and if it is not working send us a copy of all the custom css that have been used, to make sure there aren’t any other uncompleted code or bug.

Regarding the posts issue, We’re currently working on a solution for this issue and we will reply to you soon.

Best Regards,