How to find which class to edit in Custom CSS?

Envato Customers Web and Code
1

I have the Uncode Theme (awesome), I am trying to make 4 social icons visible in the top right within the nav bar. I’ve tried so many different names for what I believe I’m editing, but nothing is showing up.

Is it defaulted to display: none; or something? If I accidentally changed that and affected the icons as well, where did I change it? I’m lost because in FireBug I see them. I can select them. I just don’t know what to call them in the Custom CSS sheet.

Not yet being an expert on web dev, what is the best approach to figure out which class I’m changing?

Regards,

Me

2

Have you tried to contact their support?

3

I had considered it, but I returned to say that I figured it out, and that this might help others in the future.

Alright, so you’ve got some icons. Facebook, Twitter, LinkedIn, etc. If you’re new to this like I am, get FireBug for Firefox. It’s the best tool I’ve ever used for website debugging.

I expanded each tag out until I couldn’t go any further. I found this:

<i class="fa fa-social-twitter"></i>

So, I went into Custom CSS, and wrote:

.fa-social-twitter {
  background-color: #1da1f2;
  color: white;
  display: inline;
}

And grabbed the main hex codes of the other icons, and I was golden. Now all I have to do is get rid of an underline on each of them and I’m done!

The code for Instagram, Facebook, and LinkedIn are as follows (in case anyone has these particular icons):

fa-facebook-official
fa-instgram
fa-linkedin-square

1 Like
4

If you are not an expert, why not hire a Web Developer? This can help you save more time which you can utilize in growing your business.

5

I work for an IT company while I’m working through my CS degree. I’m basically an entry-level developer. My boss originally had a 3rd party developer to make websites for customers, but could never get in touch with him. Since he is my boss, I have to do what he wishes, and his wants to do the web dev in-house instead of waiting several days for replies that need to be immediate.

6

PM me your website url… so I can inspect the css.

7

In firefox you can use firebug or you can use the default browser inspect. Press f12. Then click the inspect pointer and point to a html tag to inspect.

If you don’t know how to do it, let me know and I will make a short video tutorial for you.

8

I would be hugely surprised if there is any need whatsoever to modify any of the code and if you are trying to ‘add’ icons then CSS is completely the wrong place to do this as that is ‘styling’ not ‘content’.

Looking at documentation it’s just a case of applying a link to the network you want to add: http://www.undsgn.com/uncode/documentation/social-connections/

If you are beginner then the documentation is probably something you will need to read carefully as changing CSS or worse still PHP files is likely to cause big problems

9

Sorry. That’s what I meant. I’m trying to edit icons, as in colors to match the logos of respective websites (facebook, linkedin, etc).

Thank you, Christopher Sheridan

Developer

[Contact info removed]

10

I just noticed you had found the code you need.

For reference (while custom CSS will do it) the individual social colours are in In “/uncode-icons.css”