Where can I make these two changes for Episode theme?

Themes
1

Screenshot 2023-05-28 at 1.19.37 PM
Screenshot 2023-05-28 at 1.19.37 PM1920×1027 73.2 KB

There’s two things I am looking to change on this page (jimmy-rigging a podcast template to fit a different niche.

  1. Id like to change the podcast icons to my own icons - since my site has nothing to do with podcasts (I am still utilizing the “podcast” links to link to other key pages of my site)

and 2. I’d like to change where it says “View Episode” to read “View Post”.

Would anyone have the knowledge to walk me through where I can find those places to edit? I’ve already made a series of other minor changes, but can’t find where to edit these two things.

Thanks!

2

I don’t have the theme in front of me, but maybe this general advice will help. I do a lot of reading through other people’s themes, trying to figure out where the parts that I’m customizing are hidden.

Your homepage is controlled by either home.hbs or if it doesn’t exist, then index.hbs. (In case you uploaded a routes.yaml file, check it - it’ll tell you what the template is for /, and replace home.hbs with that file in the directions below.)

Open home.hbs. If it has the code for those buttons, great. If it doesn’t, take a look for something like {{> hero}} which is how Ghost calls a partial. [“hero” is a guess. Your theme might use a different partials name.] That file will be in the /partials folder. (i.e. /partials/hero). That .hbs file will either have the code, or will call other partials have have the code. You might have to go through a couple layers of files, but you should be able to find it. It might be that the icons are svg files and are actually inline, near-gibberish looking text in an hbs file, but navigating to them from the homepage should get you there!

If you don’t see it there, also check default.hbs. Code that shows up on every page is likely to be there.

1 Like
3

This has been most helpful so far. I believe they are svg files, near gibberish haha. How can I change them?

I found the code to change View Episode to View Post to solve my other problem!

4

What format are your images in?

5

PNGs are the format I have icons in

6

So you’d want to remove the svg and replace with an image tag. The actual images go in /assets, and you include them with the {{asset}} helper.

7

Could you provide an example of the code I would need?

I got lost at remove svg and replace with image tag :sweat_smile:

8

See the last example on this page:

9

Dang Ms Cathy! I still haven’t been able to get it right.

Is anyone willing to make this last chance for me if I send them my theme zip?

It seems like a quick one that I just can’t figure out, but Im willing to pay for it to be done right so that my site will be ready.

10

If you’ll paste the relevant code, I can probably tell you how to tweak it. You’re looking to end up with something like this:

<img src="{{asset 'images/my-image.jpg'}}" />

11 
> <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
> <g id="XMLID_632_">
> 	<linearGradient id="XMLID_2_" gradientUnits="userSpaceOnUse" x1="150" y1="0" x2="150" y2="300">
> 		<stop  offset="0" style="stop-color:#F452FF"/>
> 		<stop  offset="1" style="stop-color:#832BC1"/>
> 	</linearGradient>
> 	<path id="XMLID_662_" fill-rule="evenodd" clip-rule="evenodd" fill="url(#XMLID_2_)" d="M294.1,260c-2.9,7.4-9.6,17.8-19.2,25.2
> 		c-5.5,4.2-12.1,8.3-21.1,11c-9.6,2.9-21.5,3.8-36.3,3.8h-135c-14.8,0-26.6-1-36.3-3.8c-9-2.7-15.6-6.7-21.1-11
> 		c-9.5-7.3-16.3-17.8-19.2-25.2C0.1,245.1,0,228.2,0,217.5l0,0v-135l0,0C0,71.8,0.1,54.9,5.9,40c2.9-7.4,9.6-17.8,19.2-25.2
> 		c5.5-4.2,12.1-8.3,21.1-11C55.9,1,67.7,0,82.5,0l0,0h135l0,0c14.8,0,26.6,1,36.3,3.8c9,2.7,15.6,6.7,21.1,11
> 		c9.5,7.3,16.3,17.8,19.2,25.2c5.9,14.9,5.9,31.9,5.9,42.5v135C300,228.2,299.9,245.1,294.1,260z"/>
> 	<g>
> 		<path id="XMLID_657_" fill="#FFFFFF" d="M175.7,181.1c-0.4-3.6-1.6-6.2-4-8.6c-4.5-4.7-12.4-7.8-21.7-7.8c-9.3,0-17.2,3-21.7,7.8
> 			c-2.3,2.5-3.6,5-4,8.6c-0.8,7-0.3,13,0.5,22.7c0.8,9.2,2.3,21.5,4.2,33.9c1.4,8.9,2.5,13.7,3.5,17.1c1.7,5.6,7.8,10.4,17.5,10.4
> 			c9.7,0,15.9-4.9,17.5-10.4c1-3.4,2.1-8.2,3.5-17.1c1.9-12.5,3.4-24.7,4.2-33.9C176.1,194.1,176.5,188.1,175.7,181.1z"/>
> 		<path id="XMLID_655_" fill="#FFFFFF" d="M174.6,130.1c0,13.6-11,24.6-24.6,24.6s-24.6-11-24.6-24.6c0-13.6,11-24.6,24.6-24.6
> 			S174.6,116.6,174.6,130.1z"/>
> 		<path id="XMLID_653_" fill="#FFFFFF" d="M149.7,33.2C92.3,33.4,45.3,80,44.5,137.4c-0.6,46.5,29.1,86.3,70.6,100.9
> 			c1,0.4,2-0.5,1.9-1.5c-0.5-3.6-1.1-7.2-1.5-10.8c-0.2-1.3-1-2.3-2.1-2.9c-32.8-14.3-55.7-47.2-55.3-85.3
> 			c0.5-50,41.3-90.7,91.2-91.1c51.1-0.4,92.8,41,92.8,92c0,37.7-22.8,70.1-55.3,84.4c-1.2,0.5-2,1.6-2.1,2.9
> 			c-0.5,3.6-1,7.2-1.5,10.8c-0.2,1.1,0.9,1.9,1.9,1.5c41.1-14.4,70.6-53.6,70.6-99.6C255.5,80.5,208,33.1,149.7,33.2z"/>
> 		<path id="XMLID_651_" fill="#FFFFFF" d="M147.3,68.2c-37.4,1.4-67.4,32.3-67.9,69.7c-0.3,24.6,12,46.4,30.9,59.3
> 			c0.9,0.6,2.2-0.1,2.2-1.2c-0.3-4.3-0.3-8.1-0.1-12.1c0.1-1.3-0.4-2.5-1.4-3.4c-11.5-10.8-18.5-26.2-18.1-43.2
> 			c0.8-30,24.9-54.4,54.9-55.6c32.6-1.3,59.4,24.9,59.4,57.1c0,16.4-7,31.2-18.1,41.7c-0.9,0.9-1.4,2.1-1.4,3.4
> 			c0.2,3.9,0.1,7.7-0.1,12c-0.1,1.1,1.2,1.9,2.2,1.2c18.6-12.7,30.9-34.2,30.9-58.4C220.8,98.9,187.5,66.6,147.3,68.2z"/>
> 	</g>
> </g>
> </svg>
12

Or,

Screenshot 2023-06-03 at 6.00.05 PM
Screenshot 2023-06-03 at 6.00.05 PM1520×808 96.1 KB

When I go to icons/apple, I got the code in the above post.

13

You just need to replace {{> "icons/apple"}} with something like

<img src="/path/to/your/image" />

If you put the images into the assets folder in the theme (recommended), you’d use

<img class='replacement-imgs' src="{{asset 'yourimage.png'}}" />

Your svgs are currently 48x48px, so you might want the following styles (put in code injection to make it easier to tweak, perhaps?)

<style>
.replacement-imgs {
    grid-row: -1/1;
    height: 48px;
    width: 48px;
}
</style>
14

One solved problem creates another.

Got the images, but now the text goes under the icons. Is there a way to keep it all aligned together?

Screenshot 2023-06-03 at 6.51.06 PM
Screenshot 2023-06-03 at 6.51.06 PM1920×638 28.1 KB

15

It’s a grid layout. You’ve got that text in spans, so the second span is ending up in the first grid column (which is under the image).

add to styles:

.gh-podcast-service-list span+span {
    grid-column: 2;
}

… to specifically style the second span, and force it into column 2.

Note however that your layout may not be exactly what you want for mobile. That theme is built to have all that text disappear and just use the icons. Makes sense when they’re podcast icons, but not so much here.

1 Like
16

Worked great, thanks!!

1 Like
17

Oh good. Be sure to check how it looks on mobile also.