How to add social media icons to social menu in activello?

Activello
1

How do I go about adding new social media icons to the social menu?

I want to be able to add some additional social links with menus in my footer while maintaining colors used by the customizer options. For example bloglovin’ and RSS

I tried with following CSS code

.social-menu li a[href*=“http://villatrolle.ebrius.se/?feed=rss2”] .fa:before{
content:"";
background: url(“hhttp://mediavillatrolle.ebrius.se/2017/10/001-rss-1.png”) no-repeat center center;
display: block;
height: 20px;
width: 20px;
background-size: 100%;
}
.social-menu li a[href*=“http://www.bloglovin.com/en/blog/2608246/” target="_blank"] .fa:before{
content:"";
background: url(“http://mediavillatrolle.ebrius.se/2017/10/bloglovin.png”) no-repeat center center;
display: block;
height: 20px;
width: 20px;
background-size: 100%;
}
.social-menu li a[href*=“http://villatrolle.ebrius.se/?feed=rss2”],
.social-menu li a[href*=“http://www.bloglovin.com/en/blog/2608246/” target="_blank"]{
vertical-align: sub;
}

But it did not work.

Thanks for any help Lajla

2

Hi Lajla,

Thank you for your question.

Could you please share me your site URL where bloglovin’ and RSS are displaying so that i can help you to achieve it?

Best Regards,
Movin

3

Dear Movin, thanks ahead for reading my problem and taking your time ;-),
my blog is http://www.husplaner.se I figured out the solution. Is there a way to change color off the icon off rss and bloglovin to #98defd every time I click on it.
Thanks a lot for your time and effort and all the Best
Lajla

Here is the code i used
/ADD SOCIAL MEDIA ICONS/
.social-menu li a[href*=“https://www.bloglovin.com/blogs/wwwhusplanerse-2608246”] .fa:before{
content:"";
background: url(“http://husplaner.se/wp-content/uploads/2017/11/bloglovin-social.png”) no-repeat center center;
display: block;
height:18px;
width: 20px;
background-size: 68%;
}
.social-menu li a[href*=“http://husplaner.se/?feed=rss2”] .fa:before{
content:"";
background: url(“http://husplaner.se/wp-content/uploads/2017/10/001-rss.png”) no-repeat center center;
display: block;
height: 18px;
width: 20px;
background-size: 68%;
}

4

You can use below CSS code to achieve this. Just change the image URLs with the image URLs having color #98defd


.social-menu li a[href*="husplaner.se/?feed="]:hover .fa:before,
.social-menu li a[href*="husplaner.se/?feed="]:visited .fa:before{
    background: url(http://husplaner.se/wp-content/uploads/2017/11/bloglovin-social.png) no-repeat center center;
    background-size: 68%;
}
.social-menu li a[href*="bloglovin.com"]:hover .fa:before,
.social-menu li a[href*="bloglovin.com"]:visited .fa:before{
    background: url("http://husplaner.se/wp-content/uploads/2017/11/rss-social.png") no-repeat center center;
    background-size: 68%;
}
5

Hello Movin,
Thank you very much for your help !
Lajla

6

You are most welcome here :slight_smile:

7

Hi,
I also just want some additional custom icons in the footer via the footer-menu.
I tried the above and variatons of it but without success.
So I uploaded my custom icon/png, changed the urls and added the css code in the custom css field of the theme, but my custom Link/icon doesn’t show up anyway, only standard icons like facebook and instagram are visible.

Any idea what’s wrong?


.social li a[href*="take-a-stand.eu"] .fa:before{
    background: url("http://stilnotpublic.de/wp-content/uploads/2018/01/takeastand-scialmlogo-1.png") no-repeat center center;
    background-size: 68%;
	}

Thanks in advance.

8

Hey there

@cocoa Could you please provide url of your website to check your problem?

9

Hi Colorlib Support,
the website still not gone public, but i’am mostly sure this can’t be the reason. I will attach some info anyway which i think could be relevant.

Everything is standard on the site, it’s an up-to-date wordpress with activello theme.
No special plugins that conquer or manipulate the themes or any other style elements of the site.
I am just using the standard “social-menu” as footer with two social links, instagram and facebook, which are working without any issues. “take-a-stand.eu” should be the third.

Do i have to edit/add the “social-php” file where the magic domain/icon resolution happens?
It refers to the standard-png-icons, is it possible otr advisable to add custom types there?
Iam trying to avoid these edits in original files, and still want to keep it this way if possible.

Attached a screenshot of the menu configuration and the specific part of code pushed to the browser

Iam fiddled around with some css styles but didn’t get it running, but i also must admit that currently iam not very save and fluent in css.

<nav class="social-icons" id="social">
    <ul class="social-menu" id="menu-social-items">
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-123" id="menu-item-123">
			<a href="https://www.facebook.com/"><i class="social_icon fa">
				<span>Facebook</span></i></a></li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-124" id="menu-item-124">
			<a href="https://www.instagram.com/"><i class="social_icon fa">
				<span>Instagram</span></i></a></li>
        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1961" id="menu-item-1961">
			<a href="https://www.take-a-stand.eu/"><i class="social_icon fa">
				<span>Take A Stand</span></i></a></li>
    </ul>
</nav>
10

Hi.
At first, I have to thank you for this great theme and also for the great support. I am using Shapely theme on WordPress.
I would like to change the blog index page (posts index page) to be JUST squares of featured images with the title and a one liner text. Like a clean version where you only see one line text and the pics to click to go to the blogs, (I have tried all the theme options (grid only, large Image and Grid and Large Images) for the post page and nothing seems to make a difference). I also like to have a READ MORE below all posts like the one you have in Activello theame.

Can you please advise me how to do this?
Thank you. // Lajla

11

@cocoa This is old topic and resolved so to help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/activello/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

12

@Lajla This topic is for Activello theme and not for Shapely theme that you are using so please create topic in the following Shapely theme forum.