Changing color of social media icons

Question

0

Changing color of social media icons

Austin Spooner posted 8 Years Ago

We added (2) new social media person attributes (mostly used for our staff directory) - one for Linked In and another for the individuals blog. I also added the font awesome icons to correspond to these. Where does one change the CSS for these icons correctly so it does not get overwritten on a future upgrade?

0
- Jim Michael replied 8 Years Ago
I would just style these badges inline... it's not like you're going to be referencing them in a bunch of places, and it keeps you from having to mess with CSS and all that.
Something like
<div class="badge" style="color:#b00000" ...
Edit Answer

I would just style these badges inline... it's not like you're going to be referencing them in a bunch of places, and it keeps you from having to mess with CSS and all that.Something like<div class="badge" style="color:#b00000" ... 
I would just style these badges inline... it's not like you're going to be referencing them in a bunch of places, and it keeps you from having to mess with CSS and all that.Something like<div class="badge" style="color:#b00000" ... 
I would just style these badges inline... it's not like you're going to be referencing them in a bunch of places, and it keeps you from having to mess with CSS and all that.Something like<div class="badge" style="color:#b00000" ... 
Save Cancel
Jim Michael

8 years ago

Oh wait, sorry... I didn't read close enough and thought you were dealing with person badges, not attributes. Let me poke around.
0
- Austin Spooner replied 8 Years Ago
Person badges that are automatically showing up - their not even ones you configure. Just add a person attribute to social media person attribute group and you get a new badge.
Edit Answer

Person badges that are automatically showing up - their not even ones you configure. Just add a person attribute to social media person attribute group and you get a new badge. 
Person badges that are automatically showing up - their not even ones you configure. Just add a person attribute to social media person attribute group and you get a new badge. 
Person badges that are automatically showing up - their not even ones you configure. Just add a person attribute to social media person attribute group and you get a new badge. 
Save Cancel
0
- Austin Spooner replied 8 Years Ago
I actually added the CSS to the Pre-HTML on the bio block. That worked great.
Edit Answer

I actually added the CSS to the Pre-HTML on the bio block. That worked great. 
I actually added the CSS to the Pre-HTML on the bio block. That worked great. 
I actually added the CSS to the Pre-HTML on the bio block. That worked great. 
Save Cancel
Michael Garrison

8 years ago

Even better =) I do tend to forget about the Pre-HTML fields- those are quite useful indeed

Michael Garrison · Accepted Answer · 2016-06-21T08:24-07:00

0

Michael Garrison replied 8 Years Ago

This is very likely not the method you're looking for (I imagine you want to customize the Rock theme or create your own clone that persists through updates - which is not something I'm familiar with in Rock).

But it works, in a pinch.

Add an HTML block to the top of the "IndividualDetail" zone, on "All pages using 'PersonDetail' Layout".

If you wanted to go for a gaudy Christmas theme on the twitter button, you could put this in the block:

<style>
  .icon-twitter.icon { background-color:#f00 !important; }
  .icon-twitter.icon a { color:#0f0 !important; }
</style>

Ta-da!

Edit Answer

<p>This is very likely not the method you're looking for (I imagine you want to customize the Rock theme or create your own clone that persists through updates - which is not something I'm familiar with in Rock).</p><p>&nbsp;</p><p>But it works, in a pinch.</p><p>&nbsp;</p><p>Add an HTML block to the&nbsp;top of the "IndividualDetail" zone, on "All pages using 'PersonDetail' Layout".</p><p><img style="width: 25%;" alt="socialiconcolors1.jpg" src="/Content/RockExternal/Users/ccofnow/socialiconcolors1.jpg"></p><p>If you wanted to&nbsp;go for a gaudy Christmas theme on the twitter button, you could put this in the block:&nbsp;</p><pre>&lt;style&gt;
  .icon-twitter.icon { background-color:#f00 !important; }
  .icon-twitter.icon a { color:#0f0 !important; }
&lt;/style&gt;</pre><p>&nbsp;</p><p>Ta-da!</p><p>&nbsp;<img style="width: 25%;" alt="socialiconcolors2.jpg" src="/Content/RockExternal/Users/ccofnow/socialiconcolors2.jpg"></p>

<p>This is very likely not the method you're looking for (I imagine you want to customize the Rock theme or create your own clone that persists through updates - which is not something I'm familiar with in Rock).</p><p>&nbsp;</p><p>But it works, in a pinch.</p><p>&nbsp;</p><p>Add an HTML block to the&nbsp;top of the "IndividualDetail" zone, on "All pages using 'PersonDetail' Layout".</p><p><img style="width: 25%;" alt="socialiconcolors1.jpg" src="/Content/RockExternal/Users/ccofnow/socialiconcolors1.jpg"></p><p>If you wanted to&nbsp;go for a gaudy Christmas theme on the twitter button, you could put this in the block:&nbsp;</p><pre>&lt;style&gt;
  .icon-twitter.icon { background-color:#f00 !important; }
  .icon-twitter.icon a { color:#0f0 !important; }
&lt;/style&gt;</pre><p>&nbsp;</p><p>Ta-da!</p><p>&nbsp;<img style="width: 25%;" alt="socialiconcolors2.jpg" src="/Content/RockExternal/Users/ccofnow/socialiconcolors2.jpg"></p>

Save Cancel

Michael Garrison

8 years ago

Obviously, you'd use a different class for your icons, since upon re-reading your question I see you've added new attributes. But the principle is the same- rather than rolling it into the core theme you can always just drop it on the profile pages directly.

Alternately, I think there's a new theme compiler in v5 which may come in handy for this, if you can wait a bit. But like I said, I'm not extremely familiar with theming Rock.
Austin Spooner

8 years ago

I actually added the CSS to the Pre-HTML on the bio block. That worked great.

Question

0

Changing color of social media icons

0

0

0

0