Landing Page Template: Help with updating CSS

[michellechopin]

Happy Friday, fellow community members!

I'm setting up a new workspace for one of our brands, which includes a guided landing page template. I've copied the code from an existing template in our default workspace and updated all the relevant items for this other brand (including the CSS stylesheet). However, there is one item that I cannot figure out how/where to update and I am hoping that someone can point me in the right direction (for context, I have no CSS/HTML training but can figure out where to update items in existing code).

In the footer of this landing page, we have a version of our logo that I would like to update:

While this element has an ID=FooterLogo and is part of {FooterSection}, it doesn't look like it's linked to anywhere in the overall HTML (nor the stylesheet) - it's part of the meta class information at the top of the page:  <meta class="mktoBoolean" id="FooterSection" mktoName="Footer Section" default="true" false_value="none" true_value="block" false_value_name="Hide" true_value_name="Show">

However, looking closer at the HTML for this section, I was able to change the color of that icon (see bold text in code below):

Below is the HTML for that section and I think that the "path d=" information is building the icon. If I'm correct, does anyone know how to update that code? I need the icon to look like this:   

If that's really complicated, how can I adjust the CSS in that section to link to a logo image in the Design Studio?

<div class="pb-3 pb-md-0 col-md-1 mktoText text-center text-md-left" id="FooterLogo" mktoName="Footer Logo">
<svg class="ml-md-0 mx-auto" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" style="border-radius: 50%;"><rect width="48" height="48" rx="2" fill="#3299FF"></rect><path d="M25.808 25.11c-.6.06-1.5.422-2.16 1.263-2.283 3.003-6.066 8.048-6.066 8.048-.6 1.022 0 1.923.6 1.923h5.825c.6 0 1.14-.78 1.32-1.08l8.227-10.272c.06.06-6.845 0-7.746.12zM25.808 23.37c-.6-.06-1.5-.42-2.16-1.262-2.283-3.003-6.066-8.53-6.066-8.53-.6-1.02 0-1.92.6-1.92h5.825c.6 0 1.14.78 1.32 1.08l8.227 10.752c.06-.06-6.845-.06-7.746-.12z" fill="#fff"></path></svg>
</div>

Happy to provide more of the HTML if needed and I appreciate any help/direction anyone might have.

Many thanks in advance 😀

Michelle

[Jo_Pitts1 · Accepted solution]

@michellechopin ,

Hi there. 

The first thing to note is that SVG stands for Scalable Vector Graphics.  All the 'Path=' section is the vector description of your logo.

Doe the new icon exist as a image in design studio?  If so, change the SVG tag to an IMG tag, and reference the image accordingly.

Cheers

Ji

[michellechopin]

Hey @Jo_Pitts1 ,

I currently only have the favicon version of this icon in this workspace's Design Studio but I will request a larger version so that I can update as you suggest - that's much easier than trying to get a new SVG image setup/created!

The other commenter on this post has provided the code update details so I will use both your responses in tandem.

Thank you so much 😀

Michelle

[Dave_Roberts · Accepted solution]

It'd be pretty difficult to update the HTML to "redraw" the shapes inside the <svg> element without a tool like Adobe Illustrator. Normally to include an <svg> via HTML the way you've got it here you'd open up the file in a browser and copy the <svg> element which has all the path stuff already declared. The numbers in there are kind of like coordinates where you'd put a "dot" on a graph and then connect the dots to draw the shape. 

If you've got an .svg file of your new image, could you load it into Marketo and post the URL here? I could help you get the HTML from that.

Otherwise, you can link to the svg using an image tag instead a little differently like this:

<div class="pb-3 pb-md-0 col-md-1 mktoText text-center text-md-left" id="FooterLogo" mktoName="Footer Logo">
<img src="__file_URL_goes_here__" />
</div>

If you include an <svg> inside an image tag (as above) you lose all "path" and shape stuff that's in the HTML which makes it easier to style (color) the image using CSS. If that's not important to you, you can load the <svg> into Marketo and grab the URL for the image once you've got it loaded and just replace the "__file_URL_goes_here__" in the code above with the URL to your <svg> instead.

[michellechopin]

Hi @Dave_Roberts ,

Thank you for the specifics on this and for confirming what I assumed (although in my far-less concise/knowledgeable terms 😋).

I will see what our creative team has available - I don't need to be able to adjust the colors/details on this specific logo; it was the only option with the code as it is right now. Once I know what they have, I will likely just reference the file URL, whether SVG or IMG. 

Thank you for your input here - this is definitely an easier option than recreating the new logo in terms of "dots" (as you can see, it's got far more points than the original logo!) and now that I have the line of code to adjust, this should be all I need.

I'll follow up if I have any troubles, but I'm confident this will be my solution.

Michelle 😀