Jump to content

Changing background color for PsychologyToday badge

Recommended Posts

K tal! I want to add this Psychology Today badge to my client's site, but I didn't want to put it in the footer as code because the code block won't stay small and it forces my footer to have many more rows than it needs, especially on mobile.

image.thumb.png.14201e38117ee89b855daebb73cfb317.png

image.png.66759c635a9c6aa230083d437d75a505.png

So my solution was to make it a footer code-injection. On both mobile and desktop the badge is aligned to the left and the background is the yellow from my p;alette.

image.png.0d01394d4c87438abd30889ac39af998.png

Is there any way I can get the badge to be centered in both desktop and mobile viewports and for the background to be the same color as my footer with the code injection?

This is the code for the badge:

<!-- Professional verification provided by Psychology Today -->
<a href="https://www.psychologytoday.com/profile/1181942" class="sx-verified-seal"></a>
<script type="text/javascript" src="https://member.psychologytoday.com/verified-seal.js" data-badge="13" data-id="1181942" data-code="aHR0cHM6Ly93d3cucHN5Y2hvbG9neXRvZGF5LmNvbS9hcGkvdmVyaWZpZWQtc2VhbC9zZWFscy9bQkFER0VdL3Byb2ZpbGUvW1BST0ZJTEVfSURdP2NhbGxiYWNrPXN4Y2FsbGJhY2s="></script>
<!-- End Verification -->

Link to comment
Quote

I didn't want to put it in the footer as code because the code block won't stay small and it forces my footer to have many more rows than it needs, especially on mobile.

If you are using Fluid Engine sections they seem to have a tendency to do weird things spacing wise when code blocks are involved.

Have you considered using a blank Classic Editor section just for the badges? You are a Circle Member so you can do that.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 9/1/2023 at 2:39 PM, creedon said:

If you are using Fluid Engine sections they seem to have a tendency to do weird things spacing wise when code blocks are involved.

Have you considered using a blank Classic Editor section just for the badges? You are a Circle Member so you can do that.

I've done this as a temporary solution. I'm still wondering if the code-injection in the footer can get styling around the button

Link to comment
On 9/8/2023 at 2:36 AM, Lorialo said:

I've done this as a temporary solution. I'm still wondering if the code-injection in the footer can get styling around the button

If you share link to your site, I can take a look with this

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.