[Resolved] How To Change Theme Colors Including Footer

[Leo]

The HTML code for those SVG icons can be found here:
https://www.screencast.com/t/ESyITzBCiHvz

They are not in the media library.

A software like Illustrator should be able to accept the code.

[Ryan]

I’m aware of where the HTML code for the SVG icons are located, but that’s not my issue.

I’m trying to change the color of those icons. But I’m having issues downloading the original SVG file and then figuring out how to link to the new file.

[Leo]

Hmm I would think that software like Illustrator would be able to convert HTML code to SVG for you.

Not sure though – this isn’t something the theme support can help with.

I believe you can use a service like this to convert HTML markup to SVG icons as well:
https://jakearchibald.github.io/svgomg/

[Ryan]

So I was able to convert the SVG file and then I opened it in Illustrator and changed the color. But now that I’ve got that file, I’m not sure how to proceed. WordPress doesn’t seem to allow you to upload SVG files and I don’t want to install a plugin. I understand how you upload a png or jpg to the media library and then link to it. But these SVG icons seem to be a bit different and want code instead of an image file. How do I get this new icon uploaded?

[Leo]

You should be able to convert the SVG image from Illustrator back to HTML code again – you can check with Illustrator’s support team on this if needed or Google for some tutorials.

Or you can use a plugin like SVG support temporary and remove it once the images are uploaded:
https://en-ca.wordpress.org/plugins/svg-support/

Another option is to find similar icons using a service like this:
https://icons.getbootstrap.com/

More info here:

[Ryan]

I was able to convert them and change the color. However, I noticed that in my media library, it has kept the original SVG color file. Does this mean I cannot delete these files?

[Elvin]

I was able to convert them and change the color. However, I noticed that in my media library, it has kept the original SVG color file. Does this mean I cannot delete these files?

Any files on the media library can be deleted.

As for the SVG modifications:

SVG codes like the one you’ve shared usually has some internal or inline CSS inside them. You’ll usually see parts of the code with #FFFFFF or any hex code of any colors in it.

If an SVG is in its .svg file form and it’s already uploaded to the media library, making changes to it will require you to delete it from the media library and make changes to it through either Adobe illustrator as Leo mentioned OR through editing its inline CSS using a code editor.

Once done editing, you can then reupload the .svg file to the media library and then reapply it on the parts of the page where it’s supposed to go. 😀

[Ryan]

Yes good to know that any files in the media library can be deleted. But that wasn’t what I asked. I have original SVG stock photos that I’ve changed the html code to alter the color. Can I delete these stock photos in my media library or will that result in my icons being deleted?

[Ryan]

No response in over a week. Really awesome customer support from this forum.

[Elvin]

No response in over a week. Really awesome customer support from this forum.

This one, like the other post reply you have must’ve been lost within the system on that specific day. We sincerely apologize for causing any frustration.

To answer the question:

Deleting a media library file that is in use somewhere on your site will mean the icons will not display.

That said, if you’re still using the stock SVG photo and you wish to replace it, you’ll have to do these:

1.) Delete the original stock SVG.
2.) Upload the new SVG
3.) Re-apply this new SVG to the pages/parts of the site where you’ve applied the original stock SVG.

If I may suggest, if you’re using the icons as a content on an editor that allows shortcode, we can do a dynamic shortcode for displaying your icons.

We can create a shortcode like this:

function generate_ryan_icon($icon_name){

	if( 'close' == $icon_name) {
	$icon = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.88 40.85">
  <path d="M40.44.44a1.49,1.49,0,0,0-2.12,0L19.9,18.82,2.57,1.49A1.5,1.5,0,0,0,.45,3.61L17.78,20.94.44,38.25a1.49,1.49,0,0,0,0,2.12,1.5,1.5,0,0,0,2.12,0L19.9,23.06,37.25,40.41a1.5,1.5,0,0,0,2.12,0,1.49,1.49,0,0,0,0-2.12L22,20.94,40.44,2.56A1.49,1.49,0,0,0,40.44.44Z"/>
</svg>
';
	}
	
	if( 'search' == $icon_name) {
	$icon = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.92 24.77">
	  <path d="M20.92,24.77a1,1,0,0,1-.78-.37L14.22,17a1.2,1.2,0,0,1-.15-.24,8.49,8.49,0,0,1-5.24,1.81A9.07,9.07,0,0,1,0,9.28,9.07,9.07,0,0,1,8.83,0a9.07,9.07,0,0,1,8.83,9.28,9.55,9.55,0,0,1-2.24,6.18,1.07,1.07,0,0,1,.36.28l5.92,7.41a1,1,0,0,1-.15,1.4A1,1,0,0,1,20.92,24.77ZM8.83,2A7.07,7.07,0,0,0,2,9.28a7.07,7.07,0,0,0,6.83,7.28,7.07,7.07,0,0,0,6.83-7.28A7.07,7.07,0,0,0,8.83,2Z"/>
	</svg>
	';
	}
	
	if( 'plus' == $icon_name) {
	$icon = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.55 17.5">
  <path d="M16.05,7.25H10.27V1.5a1.5,1.5,0,0,0-3,0V7.25H1.5a1.5,1.5,0,0,0,0,3H7.27V16a1.5,1.5,0,0,0,3,0V10.25h5.78a1.5,1.5,0,0,0,0-3Z"/>
</svg>';
	}
	return $icon;
}

add_shortcode( 'show_icon', function($atts) {
    $atts = shortcode_atts( array(
        'icon' => ''
    ), $atts, 'show_icon' );
    ob_start();
    // Start your PHP below
  
    echo generate_ryan_icon($atts['icon']);
  
    // End your PHP above
    return ob_get_clean();
} );

Example usage would be [show_icon icon="close"] where the value for icon="" depends on what you have $icon name you have stored on your function.

Example: if you have if( 'plus' == $icon_name ) and the <svg> for it then you can use [show_icon icon="plus"]

This way, we don’t have to deal with having to save the SVG code in a .svg file and upload it to the media library as we can simply create an entry on the function.

I see you’re already familiar w/ SVG code so this may be good for you as the adding/editing of SVGs is centralized to 1 function.

Adding another SVG would be adding an if statement on the function. The format would be:

	if( 'new-icon' == $icon_name) {
	$icon = 'your new icon SVG code here.';
	}

[Ryan]

So the theme comes with several SVG files. Yet when I try to upload and SVG file, it will not allow me. How do I get around this?

[Leo]

A plugin like this should help:
https://en-ca.wordpress.org/plugins/svg-support/

[Ryan]

Resolved
Thanks

[Leo]

No problem 🙂

[Author]

Posts