Insert Html/CSS inline social icom - Support | Kriesi.at

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts

August 3, 2018 at 6:53 pm #993342

Hi,

i’m trying to add some HTML/CSS animated social icons in the socket.
The problem is, when i add hem, they don’t work as expected (hover colors doesn’t work).

I’m using the plug-in HTML snippets for generating a schortcode to put in the socked (enfold settings).
I’ve also tried to use the code in a code block (new page), but it works exactly the same.

This is the code i’m using:

<html>
    <style type="text/css">
.socialbody {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    align-content: center;
	padding:0 0 20px 0;
    height: 100px;
    font: 16px Roboto, sans-serif;
    background: #f9f9f9;
}

a {
    text-decoration: none;
    color: inherit;
}

.socialBB-icon {
    width:  36px;
    height: 36px;
    fill: currentColor;
    transition: .2s;
}

.socialBB-link--instagram:hover { color: #e67300 }
.socialBB-link--500px:hover  { color: #6699ff }
.socialBB-link--instagram:hover::after { background: #e67300 }
.socialBB-link--500px:hover::after  { background: #6699ff }

.socialBB-link {
    position: relative;
    color: #bbb;
}

.socialBB-link:not(:last-of-type) {
    margin-right: 15px;
}

.socialBB-tooltip::before,
.socialBB-tooltip::after {
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -10px);
    opacity: 0;
    transition: .2s;
}

.socialBB-tooltip::before {
    content: '';
    bottom: calc(100% + 2px);
    border: solid 5px transparent;
    border-top-color: currentColor;
}

.socialBB-tooltip::after {
    content: attr(aria-label);
    bottom: calc(100% + 12px);
    padding: .61em .93em;
    font-size: .875rem;
    color: white;
    border-radius: 3px;
}

.socialBB-tooltip:hover::before,
.socialBB-tooltip:hover::after {
    opacity: 1;
    transform: translate(-50%);
}

    </style>
<div class="socialbody">
	<a href="https://www.instagram.com/dario.borla/" target="_blank" class="socialBB-link socialBB-link--instagram socialBB-tooltip" aria-label="Instagram">
		<svg class="socialBB-icon"><use xlink:href="#icon--instagram"></use></svg>
	</a>

	<a href="https://500px.com/darborla" target="_blank" class="socialBB-link socialBB-link--500px socialBB-tooltip" aria-label="500px">
		<svg class="socialBB-icon"><use xlink:href="#icon--500px"></use></svg>
	</a>

	<svg style="display: none">
		<symbol id="icon--instagram" viewbox="0 0 24 24">
			<path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" />
		</symbol>
		<symbol id="icon--500px" viewbox="0 0 97.8 97.8">
			<path d="M72.3,47.9c-1.6,0.2-2.9,1-4.1,1.9c-1.4,1.1-2.5,2.3-3.7,3.6c-0.2,0.2-0.1,0.3,0,0.4c0.8,0.9,1.7,1.8,2.7,2.6c1.6,1.3,3.4,2.3,5.5,2.5c2.4,0.2,4.4-0.9,5.2-3.1c0.3-0.8,0.4-1.5,0.4-2.5c0-0.2,0-0.6-0.1-0.9C77.9,49.5,75.4,47.5,72.3,47.9z"/><path d="M52.2,49.8c-1-0.7-2.1-1.4-3.4-1.7c-1.9-0.5-3.6-0.2-5,1.3c-1,1.2-1.5,2.6-1.5,4.3c0,0.2,0,0.4,0,0.7c0.2,2.3,1.8,4.1,4,4.5c1.2,0.2,2.5,0.1,3.6-0.4c2.5-1,4.4-2.7,6.2-4.7c0.1-0.1,0.1-0.2,0-0.3C55,52.1,53.7,50.8,52.2,49.8z"/><path d="M48.9,0C21.9,0,0,21.9,0,48.9s21.9,48.9,48.9,48.9s48.9-21.9,48.9-48.9S75.9,0,48.9,0z M73,65.7c-3.1,0-5.7-1.2-8.1-3.1c-1.6-1.2-2.9-2.6-4.2-4.1c-0.2-0.2-0.3-0.3-0.6,0c-1.3,1.4-2.6,2.8-4.1,4c-1.9,1.5-4,2.7-6.4,3c-4.3,0.6-8-0.5-10.9-3.9c-0.7-0.8-1.1-1.6-1.6-2.6c-0.1-0.1-0.1-0.3-0.2-0.4c-0.6,1.2-1.3,2.3-2.2,3.3c-2.3,2.5-5.2,3.7-8.5,3.9c-2.4,0.1-4.8-0.2-7-1.3c-3.7-1.8-5.8-4.7-6-8.9c0-0.3,0.1-0.4,0.4-0.4c2,0,4,0,6,0c0.3,0,0.4,0.1,0.4,0.4c0.4,2.3,1.6,3.9,3.9,4.5c3.2,0.8,6.2-1,7-4.3c0.6-2.2,0.3-4.4-1.2-6.2c-1-1.2-2.3-1.8-3.9-1.9c-2.2-0.2-4.1,0.6-5.4,2.5c-0.1,0.2-0.3,0.2-0.5,0.2c-1.8,0-3.6,0-5.4,0c-0.3,0-0.4-0.1-0.3-0.4c0.9-5.2,1.9-10.4,2.8-15.6c0.1-0.7,0.3-1.4,0.4-2.1c0-0.2,0.1-0.3,0.4-0.3c6,0,12,0,18,0c0.3,0,0.3,0.1,0.3,0.4c0,1.6,0,3.2,0,4.8c0,0.3-0.1,0.4-0.4,0.4c-4.3,0-8.6,0-12.9,0c-0.4,0-0.5,0.1-0.6,0.5c-0.4,2.3-0.8,4.6-1.2,6.8c0,0.1-0.1,0.2,0,0.3c0.1,0.1,0.2-0.1,0.3-0.1c2-1.9,4.4-2.5,7-2.3c2.5,0.1,4.7,1.1,6.5,2.9c0.7,0.8,1.3,1.6,1.8,2.6c0.1,0.1,0.1,0.2,0.2,0.4c0.5-1.3,1.1-2.5,2-3.5c1.9-2.2,4.4-3.4,7.3-3.7c4.1-0.4,7.5,1.2,10.5,3.9c1.2,1.1,2.3,2.4,3.4,3.6c0.2,0.3,0.3,0.3,0.6,0c1.4-1.6,2.7-3.3,4.4-4.6c2-1.5,4.1-2.6,6.6-2.9c6.2-0.7,11.3,2.6,12.6,9c0.6,2.7,0.4,5.3-0.5,7.9C82,63,78.1,65.7,73,65.7z" />
		</symbol>
	</svg>
</div>
</html>

Saved to an html file works great.

Thanks for the support.

August 5, 2018 at 12:06 am #993592

Mike

Moderator

Hey darioferbor,
I tested your code in my localhost in a code block, which seems to work fine, but I don’t know what it’s supposed to look like.
I also installed the Insert HTML Snippet plugin and added the code to it to create a shortcode which I added to the socket and make a video for you to tell me if it’s working correctly.
Please see Private Content area.

I did remove the html opening and closing tags and the “.socialbody” background color.

Best regards,
Mike

August 5, 2018 at 1:54 am #993600

darioferbor

Participant

Hi Mike,

Thanks for your time and your support.

The problem is: only the text label is changing the color, if you try to create an html file with the code I wrote, you’ll see that when you hover your mouse over the icon, everything change the color (text label, csv icon and the little down arrow).

Do you know what can be the cause of that?!

Thanks a lot,
Dario.

August 5, 2018 at 2:01 pm #993677

Mike

Moderator

Hi,
[slap-forehead] don’t know why I didn’t think of that :)
anyways I changed the css a little, please try this code:

  <style type="text/css">
.socialbody {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    align-content: center;
	padding:0 0 20px 0;
    height: 100px;
    font: 16px Roboto, sans-serif;
}

a {
    text-decoration: none;
}

.socialBB-icon {
    width:  36px;
    height: 36px;
    fill: currentColor;
    transition: .2s;
}

a.socialBB-link--instagram:hover { color: #e67300 }
a.socialBB-link--500px:hover  { color: #6699ff }
a.socialBB-link--instagram:hover::after { background: #e67300 }
a.socialBB-link--500px:hover::after  { background: #6699ff }

.socialBB-link {
    position: relative;
    color: #bbb;
}

.socialBB-link:not(:last-of-type) {
    margin-right: 15px;
}

.socialBB-tooltip::before,
.socialBB-tooltip::after {
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -10px);
    opacity: 0;
    transition: .2s;
}

.socialBB-tooltip::before {
    content: '';
    bottom: calc(100% + 2px);
    border: solid 5px transparent;
    border-top-color: currentColor;
}

.socialBB-tooltip::after {
    content: attr(aria-label);
    bottom: calc(100% + 12px);
    padding: .61em .93em;
    font-size: .875rem;
    color: white;
    border-radius: 3px;
}

.socialBB-tooltip:hover::before,
.socialBB-tooltip:hover::after {
    opacity: 1;
    transform: translate(-50%);
}

    </style>
<div class="socialbody">
	
		<svg class="socialBB-icon"><use xlink:href="#icon--instagram"></use></svg>
	

	
		<svg class="socialBB-icon"><use xlink:href="#icon--500px"></use></svg>
	

	<svg style="display: none">
		<symbol id="icon--instagram" viewbox="0 0 24 24">
			<path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" />
		</symbol>
		<symbol id="icon--500px" viewbox="0 0 97.8 97.8">
			<path d="M72.3,47.9c-1.6,0.2-2.9,1-4.1,1.9c-1.4,1.1-2.5,2.3-3.7,3.6c-0.2,0.2-0.1,0.3,0,0.4c0.8,0.9,1.7,1.8,2.7,2.6c1.6,1.3,3.4,2.3,5.5,2.5c2.4,0.2,4.4-0.9,5.2-3.1c0.3-0.8,0.4-1.5,0.4-2.5c0-0.2,0-0.6-0.1-0.9C77.9,49.5,75.4,47.5,72.3,47.9z"/><path d="M52.2,49.8c-1-0.7-2.1-1.4-3.4-1.7c-1.9-0.5-3.6-0.2-5,1.3c-1,1.2-1.5,2.6-1.5,4.3c0,0.2,0,0.4,0,0.7c0.2,2.3,1.8,4.1,4,4.5c1.2,0.2,2.5,0.1,3.6-0.4c2.5-1,4.4-2.7,6.2-4.7c0.1-0.1,0.1-0.2,0-0.3C55,52.1,53.7,50.8,52.2,49.8z"/><path d="M48.9,0C21.9,0,0,21.9,0,48.9s21.9,48.9,48.9,48.9s48.9-21.9,48.9-48.9S75.9,0,48.9,0z M73,65.7c-3.1,0-5.7-1.2-8.1-3.1c-1.6-1.2-2.9-2.6-4.2-4.1c-0.2-0.2-0.3-0.3-0.6,0c-1.3,1.4-2.6,2.8-4.1,4c-1.9,1.5-4,2.7-6.4,3c-4.3,0.6-8-0.5-10.9-3.9c-0.7-0.8-1.1-1.6-1.6-2.6c-0.1-0.1-0.1-0.3-0.2-0.4c-0.6,1.2-1.3,2.3-2.2,3.3c-2.3,2.5-5.2,3.7-8.5,3.9c-2.4,0.1-4.8-0.2-7-1.3c-3.7-1.8-5.8-4.7-6-8.9c0-0.3,0.1-0.4,0.4-0.4c2,0,4,0,6,0c0.3,0,0.4,0.1,0.4,0.4c0.4,2.3,1.6,3.9,3.9,4.5c3.2,0.8,6.2-1,7-4.3c0.6-2.2,0.3-4.4-1.2-6.2c-1-1.2-2.3-1.8-3.9-1.9c-2.2-0.2-4.1,0.6-5.4,2.5c-0.1,0.2-0.3,0.2-0.5,0.2c-1.8,0-3.6,0-5.4,0c-0.3,0-0.4-0.1-0.3-0.4c0.9-5.2,1.9-10.4,2.8-15.6c0.1-0.7,0.3-1.4,0.4-2.1c0-0.2,0.1-0.3,0.4-0.3c6,0,12,0,18,0c0.3,0,0.3,0.1,0.3,0.4c0,1.6,0,3.2,0,4.8c0,0.3-0.1,0.4-0.4,0.4c-4.3,0-8.6,0-12.9,0c-0.4,0-0.5,0.1-0.6,0.5c-0.4,2.3-0.8,4.6-1.2,6.8c0,0.1-0.1,0.2,0,0.3c0.1,0.1,0.2-0.1,0.3-0.1c2-1.9,4.4-2.5,7-2.3c2.5,0.1,4.7,1.1,6.5,2.9c0.7,0.8,1.3,1.6,1.8,2.6c0.1,0.1,0.1,0.2,0.2,0.4c0.5-1.3,1.1-2.5,2-3.5c1.9-2.2,4.4-3.4,7.3-3.7c4.1-0.4,7.5,1.2,10.5,3.9c1.2,1.1,2.3,2.4,3.4,3.6c0.2,0.3,0.3,0.3,0.6,0c1.4-1.6,2.7-3.3,4.4-4.6c2-1.5,4.1-2.6,6.6-2.9c6.2-0.7,11.3,2.6,12.6,9c0.6,2.7,0.4,5.3-0.5,7.9C82,63,78.1,65.7,73,65.7z" />
		</symbol>
	</svg>
</div>

Best regards,
Mike

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.