-3

So I am using a crm to manage my website blog which isn't giving me full flexibility with HTML. I am trying to add a bar with social media icons after the 2nd or 3rd blog post. In the CSS stylesheet I got access to the post by using ".class:nth-child(3)::after". Is there any way to insert a full html div using javascript to add the social bar? Or could I create the bar in the same html file and change the location based on the post?

EDIT: Sorry it's my first post.

Attaching the design. basicDesign

The stylesheet snippet with an example of the web page. CSSimage

ik3o
  • 39
  • 5
  • 1
    Please provide examples of any code you have already tried. – Daniel Bernardi Oct 04 '18 at 16:38
  • 1
    @DanielBernardi Thank you for the tip. I have just edited the post to add screenshots. – ik3o Oct 04 '18 at 18:11
  • You will have to use javascript. There's no way to add complex html to a psuedo element beyond simple text. – Daniel Bernardi Oct 04 '18 at 21:58
  • [**Do not post images of code or errors!**](https://meta.stackoverflow.com/q/303812/995714) Images and screenshots can be a nice addition to a post, but please make sure the post is still clear and useful without them. If you post images of code or error messages make sure you also copy and paste or type the actual code/message into the post directly. – Rob Oct 26 '18 at 14:27

2 Answers2

1

You should look into the CSS content attribute. It allows you to specify elements in your CSS to be applied. It is often used in conjunction with ::before and ::after pseudo elements.

Deadron
  • 5,135
  • 1
  • 16
  • 27
  • I tried the ::after pseudo element. Just edited the post and attached screenshots of what I'm trying to achieve. – ik3o Oct 04 '18 at 18:11
0

So from what I understand, you want to display social media icons after the third blog post?

If you're using the template builder, insert a custom module with the appropriate HTML below the blog listing module. Give it a class, in this instance -> 'social-media-blog'.

Then with some jQuery you can just set it to display after the 3rd blog post.

var blogSocialMedia = $('.social-media-blog');
$(".post-listing .post-item:eq(3)").after(blogSocialMedia);
Peter-John VD West
  • 11
  • 3