Sitecrawler Posted February 5, 2020 Share Posted February 5, 2020 (edited) Hi So in the article below I have added "share" "tweet" and "pin" button, between the headline and the bread text. Now, I want those to be displayed horizontally, in a row. And not vertically as they are displayed now. How can I change that? The code I have added in the post code editor for this single post is this: I have added an image below, where I have circled the social icons that I am talking about. The link to the article is right above the image here: https://valuetrendsblog.com/2019/11/did-dow-theory-just-trigger-a-market-buy-signal/ Edited February 5, 2020 by Sitecrawler Link to comment Share on other sites More sharing options...
niche Posted February 5, 2020 Share Posted February 5, 2020 (edited) wrap them in a <div> and give that <div> the float:left; property/value Edited February 5, 2020 by niche Link to comment Share on other sites More sharing options...
Sitecrawler Posted February 5, 2020 Author Share Posted February 5, 2020 3 hours ago, niche said: wrap them in a <div> and give that <div> the float:left; property/value Hmm thank you. How do I do that? Do I put a "<div> the float:left; property/value " right before the code I pasted. Or how should it be done exactly? Link to comment Share on other sites More sharing options...
niche Posted February 5, 2020 Share Posted February 5, 2020 (edited) make an attempt with the links: https://www.w3schools.com/cssref/pr_class_float.asp https://www.w3schools.com/tags/tag_div.asp Edited February 5, 2020 by niche Link to comment Share on other sites More sharing options...
Sitecrawler Posted February 7, 2020 Author Share Posted February 7, 2020 On 2/5/2020 at 6:40 PM, niche said: wrap them in a <div> and give that <div> the float:left; property/value Hmm ok, thank you. Could you tell me exactly where I should put that <div> in there? Inside the existing code that I pasted? Or on both sides around it? I am a beginner when it comes to coding so I am not entirely sure where to put code. And is the "float left" value pasted in CSS or the code editor? How do I make them connect to each other? I mean the code in CSS and the code in HTML editor. I will try to do some tests with the links you posted as well. Thank you Link to comment Share on other sites More sharing options...
dsonesuk Posted February 7, 2020 Share Posted February 7, 2020 (edited) Div and p elements are block elements meaning each of these will stack below the previous filling the total width available to them. 'a' anchor and img elements are inline there width is the width of content within them and will butt together to previous. So all you need is a single div container that will contain only anchor elements and images within them. I would try first removing paragraphs surrounding the social icons/links. Even the empty p paragraph will cause links to break to a new line. Edited February 7, 2020 by dsonesuk Link to comment Share on other sites More sharing options...
Sitecrawler Posted February 7, 2020 Author Share Posted February 7, 2020 Aha I think I get it now. Thanks. That worked. I used this one without lots of Parapgraph signs: <div id="fb-root"><script async="" defer="" crossorigin="anonymous" src="https://connect.facebook.net/sv_SE/sdk.js#xfbml=1&version=v5.0"></script><a class="fb-share-button" data-layout="button" data-size="small"></a><a=" href="https://www.facebook.com/share"><a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script><a href="https://www.pinterest.com/pin/create/button/" class="pinterest-pin-button" data-pin-do="buttonBookmark"></a><script async="" defer="" src="//assets.pinterest.com/js/pinit.js"></script></a="></div> Now, I just have to align them so that they are on the exact same wave-length if that is possible? You see the twitter button jumping up and the pinterest "spara"-button jumping down a bit too much. Also, is it possible to increase/decrease the space between them and the headline, as well as the breadtext? Where the arrows are in the image. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 7, 2020 Share Posted February 7, 2020 Wrap all social links with a div <div class="social-icon-wrap"> </div> Then use CSS .social-icon-wrap { padding: .25em; } .social-icon-wrap > * { margin: .25em; padding: 0; } Link to comment Share on other sites More sharing options...
Sitecrawler Posted February 8, 2020 Author Share Posted February 8, 2020 That worked. Thanks But they are not totally aligned as you can see from this link: https://valuetrendsblog.com/2019/11/did-dow-theory-just-trigger-a-market-buy-signal/. But maybe that is not possilbe? The CSS I used to get them the most aligned as I could see was this one: .social-icon-wrap { padding: .05em; } .social-icon-wrap > * { margin: .1em; padding: 10; } Link to comment Share on other sites More sharing options...
dsonesuk Posted February 9, 2020 Share Posted February 9, 2020 Try this, I think some of the icons have higher precedence margin, this should override it hopefully. .social-icon-wrap > * { margin: .1em !important; padding: .5em; } Link to comment Share on other sites More sharing options...
Sitecrawler Posted February 12, 2020 Author Share Posted February 12, 2020 On 2/9/2020 at 10:19 AM, dsonesuk said: Try this, I think some of the icons have higher precedence margin, this should override it hopefully. .social-icon-wrap > * { margin: .1em !important; padding: .5em; } Hmm. I have tinkered with the above code and tried different values now. But I don't seem to get it right. Maybe I/we are missing some extra component to add to the code? Do you get them totally alignes at your end when using this code? Thanks Link to comment Share on other sites More sharing options...
Sitecrawler Posted February 15, 2020 Author Share Posted February 15, 2020 On 2/12/2020 at 11:19 PM, Sitecrawler said: Hmm. I have tinkered with the above code and tried different values now. But I don't seem to get it right. Maybe I/we are missing some extra component to add to the code? Do you get them totally alignes at your end when using this code? Thanks So the most aligned I managed to get them was by using your code along with some tinkering. This was the one that worked best: .social-icon-wrap > * { position: absolute; clip: rect(0px,200px,100px,0px); overflow: hidden; } Now, I still see a bit of unalignment(especially with the tweet button). Anyone has an idea of how to make them even more symmetric? They are in this article below the headline now: https://valuetrendsblog.com/2020/01/why-amazon-could-soar/ For some reason this code aligned the pinterest button with the facebook buttons. But the tweet button went all haywire. :) Any idea on why? Link to comment Share on other sites More sharing options...
dsonesuk Posted February 16, 2020 Share Posted February 16, 2020 (edited) The only thing I can suggest is press F12 while looking at page in browser. The browsers web developer tools should appear, then inspect the icons elements to identify the cause of the misalignment, the applied css should appear in the css panel and identify where it is placed and line. Only then can you truly fix the misalignment. I don't currently have access to PC to do this. Edited February 16, 2020 by dsonesuk Link to comment Share on other sites More sharing options...
Sitecrawler Posted February 16, 2020 Author Share Posted February 16, 2020 6 hours ago, dsonesuk said: The only thing I can suggest is press F12 while looking at page in browser. The browsers web developer tools should appear, then inspect the icons elements to identify the cause of the misalignment, the applied css should appear in the css panel and identify where it is placed and line. Only then can you truly fix the misalignment. I don't currently have access to PC to do this. Ok, I will try that. Another thing, is it possible to get icons like these to appear in every article between headlines and breadtext by adding code in a php.file? I have tried this but I only manage to get them to appear above the post's headline, like in the link below(on the top left: the three square symbols). I did this by adding code to the pages.php file. But is there a way to add them in a php-file so that they appear between the headline and breadtext? Like the ones we have talked about in this thread I mean. https://valuetrendsblog.com/2020/01/why-amazon-could-soar/ Link to comment Share on other sites More sharing options...
dsonesuk Posted February 16, 2020 Share Posted February 16, 2020 If the html code does not include a Id reference, you can add this html code ONLY to it's own php file. Then use php include to place it anywhere you require it. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 17, 2020 Share Posted February 17, 2020 The code and class name no longer exist now? the position: absolute does absolutely NOTHING! to correct it. using <div id="fb-root" class="social-icon-wrap fb_reset"> div#fb-root.social-icon-wrap * { /* remove unwanted margins and padding anywhere*/ margin: 0 !important; padding: 0; vertical-align: middle; } .social-icon-wrap > * { min-width: 65px; /*set min-width of elements */ } This does work in chrome. Link to comment Share on other sites More sharing options...
Sitecrawler Posted March 11, 2020 Author Share Posted March 11, 2020 On 2/16/2020 at 6:52 PM, dsonesuk said: If the html code does not include a Id reference, you can add this html code ONLY to it's own php file. Then use php include to place it anywhere you require it. Hmm. I managed to add the social icons, by pasting the code below, in the single.php-file. And then it appears above all posts(on top of them). Which is what I want. But, I want them to appear between the headline and the bread-text. But I can only make them(the icons) appear above the post/article. Ad not between the headline and bread-text. What I want is to add this code in only one place, in one of the PHP-files if it is possible. And the reason for that is because I have heard that adding code in every single article/post is not ideal. And that it is better to add it in only ONE place. Preferably in one of the PHP-files. So that it appears at the same spot, in every article. But where in the single.php-file (or any other php-file) should I paste the code exactly? So that it appears between the headline and the text, in every single post/article? When I paste the code (the one further below) it always appears on top of the article/post. Above the headline. But where should I paste the code to make it appear between the headline and breadtext, in every single post on my website? And not above the post. The code I have added is this one between from row 15 to 18 in the single.php-file: <!-- Add icon library -->SHARE <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!-- Add font awesome icons --><a href="https://www.facebook.com/share" class="fa fa-facebook"></a><a href="https://twitter.com/share/?url=#" class="fa fa-twitter"></a><a href="http://pinterest.com/pin/create/link/?url=#" class="fa fa-pinterest"></a> Link to comment Share on other sites More sharing options...
dsonesuk Posted March 11, 2020 Share Posted March 11, 2020 You need to find out what, where the header code is inserted, add your code, then use condition to force it to show the code only on specific pages or post. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now