Solved SP Page Builder

How can I upload a .svg image for the logo (and other images) without losing your code?

Asked by Sean Carney 5 years ago Last activity 5 years ago

I am using SP Page Builder Pro to tweak your Helix Ultimate 2 template for a site I am developing at https://HealthReboot.com and uploaded a .svg file for the logo. However, as soon as I did that the behaviour changed. If I look to view the image and get information on it, the attributes are different. The logo no longer behaves properly, especially when the smaller device vies are tested.

Is there a way that I can upload svg images without using the Upload option in SP Page Builder so that the code won't change? I would appreciate any document you can point me to in order to do this properly.

I want to change the three little icons in the third row and believe that if I just upload a .svg file the same thing will happen that happened to the logo.

Thank you very much.

Accepted answer

Marked as the solution

Ariba Staff

5 years ago · edited

Thank you for sharing the screenshot.

Please add the following css rule in Custom CSS section to solve small screen issue:

@media (max-width:575px) {
    #sp-header, #sp-header .logo {
         height: 72px;
    }
}

About helix quickstart logo svg: It depends on how you have created the svg. If you create the svg from scratch in any vector graphics application it should look cleaner like the quickstart one. Also the quickstart one has less anchors points.

Kindly do let me know if that helps you or if you have any queries.

9 more replies

Ariba Staff

5 years ago

Hello

Thank you for your query. Could you kindly share a screenshot highlighting where you are facing the issue exactly? That will be helpful for me for better understanding.

You can use this tool to share the image kindly: https://imgur.com/

Sean Carney Asked this

5 years ago

Thank you for asking. I just realized you would need more information. I have uploaded two images. One of the quickstart inspection of the logo image and one of mine.

Yours is much cleaner, nicer, etc... I would love to know what I can do to make mine work like yours. I will send another image shortly to show how it looks on the front end when the screen is small.

Here are the element inspections:

https://imgur.com/a/o5ZP2KG

Sean Carney Asked this

5 years ago

OK. All four images are there. Thank you for looking at this. I can give you backend access if that is helpful.

Sean Carney Asked this

5 years ago

Thank you. I added the code to the custom.css file. It works better for the phone view if the phone is in portrait mode. But, if the phone is in landscape mode I still get the image overlapping.

Also, I am assuming you are suggesting I should have created the logo with illustrator and not with photoshop?

Thanks, Sean

Ariba Staff

5 years ago

You are most welcome.

Please add this in Custom CSS section:

@media (max-width: 991px) {
    #sp-header, #sp-header .logo {
         height: 72px;
    }
}

Also, I am assuming you are suggesting I should have created the logo with illustrator and not with photoshop?

Yes.

Sean Carney Asked this

5 years ago · edited

Thank you very much for your help.

I have replaced the original css edit with this new one. :-)

I will work on recreating the logo with Illustrator. :-)

Sean

Ariba Staff

5 years ago

You are most welcome.

I am glad I could help. Please do let me know if there is any other query, I am happy to help. If there is no other query, kindly accept the most useful answer that helped you in order to resolve & close the post.

Have a great day and stay safe.

Sean Carney Asked this

5 years ago

You did answer my question. I have another related but not exactly the same question but will open a new ticket for that one.
Thanks again.
Sean

Ariba Staff

5 years ago

Thank you :)

Have a great day!