My social media icons are broken

[Jac D]

My social media icons at https://forum.tracesoftexas.com  have ceased to function. Clicking on the Facebook icon brings me back to the main forum page. Clicking on the other three brings me to pages that say "Sorry! The page you requested does not exist."  With an error code of 1S160/2.

I must have done something but I'll be danged if I can figure it out.

Here's what my current social media icon HTML looks like.

<li><a href='#facebook.com' target="_blank" rel="noopener"><span>Facebook</span></a></li>
<li><a href='#twitter.com' target="_blank" rel="noopener"><span>Twitter</span></a></li>
<li><a href='#youtube.com' target="_blank" rel="noopener"><span>Youtube</span></a></li>
<li><a href='#instagram.com' target="_blank" rel="noopener"><span>Instagram</span></a></li>


Earlier today I was trying to add a style sheet but it didn't work the way I thought it would so I have deleted it.

[Alexandru]

why did you added #facebook.com ?!

on href="" add the links with https://facebook/idk/

Example:
<a href="https://link.com">

Enjoy.

When you don't add the href as https / http or what ever it will acually add the link of the current page before the link added in href.

For example, I add on href, href="link.com"
And If im on the main page the link will follow like this https://youcommbaseurl.com/link.com
But if you add directly the https://link.com, it will not add https://youcommbaseurl.com before it.

I'm sorry if I didnt explain it better, I'm sleepy right now. 

Edited January 14, 2023 by drawncodes

[Jim M]

I would recommend reverting any changes you've done in this area as it seems to be the root of your problem.

[Jac D]

5 hours ago, drawncodes said:

why did you added #facebook.com ?!

on href="" add the links with https://facebook/idk/

Example:
<a href="https://link.com">

Enjoy.

When you don't add the href as https / http or what ever it will acually add the link of the current page before the link added in href.

For example, I add on href, href="link.com"
And If im on the main page the link will follow like this https://youcommbaseurl.com/link.com
But if you add directly the https://link.com, it will not add https://youcommbaseurl.com before it.

I'm sorry if I didnt explain it better, I'm sleepy right now. 

I think you explained it fine. There's just a huge gap between your explanation and my ability to understand it --- no fault of yours.

You asked:  "Why did you added #facebook.com ?"

Well, I added Facebook during the installation process a week or so ago because I was asked if I have any social media that I'd like to link and, since I have a Facebook page, I thought it should go there. It was the same for Instagram, Twitter etc...

As far as I know, I haven't touched any of that original HTML code since it was working two days ago.  All I tried to do was add a new link at the bottom of that HTML for my Patreon page.  But I don't think I touched that original HTML.

 

2 hours ago, Jim M said:

I would recommend reverting any changes you've done in this area as it seems to be the root of your problem.

Well that was the first thing I did. I tried to add a Patreon link at the bottom of my working HTML and it didn't produce the result that I wanted so I deleted it.  But now the rest of the social media links, which were working, aren't anymore.





 

[Alexandru]

14 hours ago, Jac D said:

I think you explained it fine. There's just a huge gap between your explanation and my ability to understand it --- no fault of yours.

You asked:  "Why did you added #facebook.com ?"

Well, I added Facebook during the installation process a week or so ago because I was asked if I have any social media that I'd like to link and, since I have a Facebook page, I thought it should go there. It was the same for Instagram, Twitter etc...

As far as I know, I haven't touched any of that original HTML code since it was working two days ago.  All I tried to do was add a new link at the bottom of that HTML for my Patreon page.  But I don't think I touched that original HTML.

 

Well that was the first thing I did. I tried to add a Patreon link at the bottom of my working HTML and it didn't produce the result that I wanted so I deleted it.  But now the rest of the social media links, which were working, aren't anymore.





 

Well I tought that was custom HTML not directly the social media from IPS where you can add the link in general configuration, my bad. 

And yeah what @Jim M said to revert the template to default how it came that should work, but why did you modifiy the template in the first place that you had to revert ?

[Jac D]

7 hours ago, drawncodes said:

Well I tought that was custom HTML not directly the social media from IPS where you can add the link in general configuration, my bad. 

And yeah what @Jim M said to revert the template to default how it came that should work, but why did you modifiy the template in the first place that you had to revert ?

Hi Drawncodes,

I was trying to add a social media icons for Patreon and Buy Me a Coffee.   I thought that the way to do this was by adding HTML code to that template. Is that not true?  Is there an easy way to revert the template back to what it was to begin with.  My website, for example, gets backed up daily and if something goes wrong I can always revert it back to what it looked like on the previous day.

 

Edited January 15, 2023 by Jac D

[Nathan Explosion]

Assumption made (as you've not indicated which template you have edited, as far as I can see) - the template you have edited is front -> global -> siteSocialProfiles

1. Revert it (there's a 'revert' button to do this - it puts it back to the default)
2. In the ACP, use System -> (Settings) General Configuration to populate your social profiles (the ones that can be populated in there)
3. For any additional ones, add the following after the closing {{endif}} in the mentioned template for each of your additional links that you want (replacing the indicated items in href and img - if you don't want an image, and want to use a word then remove the img tag)

<li class='cUserNav_icon'>
	<a href='<THE URL>' target='_blank' class='cShareLink' rel='noopener noreferrer'><img src="<YOUR IMAGE>"></a>
</li>

 

Edited January 15, 2023 by Nathan Explosion

[Marc]

The first thing you should really do here is create a new theme and test it on that theme. This way you know there cant be anything altered on there. As mentioned by Nathan though, you should use the revert button rather than pasting in saved code

[Alexandru]

You could even add icons foreach social media link with CSS actually, you don't really need to modify the core template, which you could, It is allowed. You can modify anything you want on your installation, but make sure you don't brake it in the process. 

There are many ways to add icons, I would recommand directly font-awesome, don't add images. Font-Awesome already has a lot of icons even for business and logos of other companies.

Pretty simple to use.
 

Let's say you have your HTML like this.

<!-- Only the icon without any text, of course you can also add a title or even a tooltip when on hover -->
<li>
  <a href="{$url}" class="patreon_social_link"><i class="fab fa-patreon"></i></a>
</li>

<!-- Or the icon + text -->
<li>
  <a href="{$url}" class="patreon_social_link"><i class="fab fa-patreon"></i> Patreon Community</a>
</li>

But remember, additional styles in CSS may be needed in order to look the way you want.

If me, for exmaple I would like to add social icons in the footer, I would do it this way.
 

<!-- HTML CODE -->
<div class="social-icons">
  <a href="link"><i class="fab fa-patreon"></i></a>
  <a href="link"><i class="fab fa-patreon"></i></a>
  <a href="link"><i class="fab fa-patreon"></i></a>
</div>

/* CSS CODE */
.social-icons {
  display: flex;
  align-items: center;
}
.social-icons > a {
  width: 40px;
  height: 40px;
  background: rgb(10, 187, 118,0.2);
  color: rgb(10, 187, 118,1);
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

And this will be kinda my output

But in this image I used SVG icons, which you can find them all over the internet 😄 For free !

Enjoy! If you need additional help, contact me privately.

[Jac D]

On 1/15/2023 at 9:58 AM, Nathan Explosion said:

Assumption made (as you've not indicated which template you have edited, as far as I can see) - the template you have edited is front -> global -> siteSocialProfiles

1. Revert it (there's a 'revert' button to do this - it puts it back to the default)
2. In the ACP, use System -> (Settings) General Configuration to populate your social profiles (the ones that can be populated in there)
3. For any additional ones, add the following after the closing {{endif}} in the mentioned template for each of your additional links that you want (replacing the indicated items in href and img - if you don't want an image, and want to use a word then remove the img tag)

<li class='cUserNav_icon'>
	<a href='<THE URL>' target='_blank' class='cShareLink' rel='noopener noreferrer'><img src="<YOUR IMAGE>"></a>
</li>

 

Hi Nathan,

Okay I feel like I'm about 80% of the way there. The social media buttons that I added when I first set up the forum are working and I have a Patreon and Buy Me a Coffee button and they are labeled correctly but they are black. I'd like to make the buy me a coffee button yellow and the Patreon button that sort of reddish orange that Patreon uses for their logo.  How can I do that? Here's what the forum looks like currently.  As you can see the Patreon/Buy Me a Coffee Icons are black with white lettering. 

Thanks!