How do i hide Social sharing for Disqus via CSS - html

I would like to use Disqus comments system as a guestbook on a wedding website based on a bootstrap/html5 template.
Since the content on the website is personal, i would like to remove the share links for Facebook, Twitter etc which appear above the comments box and below each individual comment.
Screenshot here, http://imgur.com/pkvUSoF
Is there a way to achieve this by hiding the share elements in CSS ?
I understand the new Disqus uses an iframe, however there is a similar thread for hiding the Disqus footer linked here and the CSS code below does work.
#disqus_thread{
position: relative;
}
#disqus_thread:after{
content: "";
display: block;
height: 55px;
width: 100%;
position: absolute;
bottom: 0px;
background:white;
}
Using the 'inspect element' in Chrome, I am able to hide the share elements using 'display:none'
.nav-secondary>ul>li.share-menu {
float: right;
display: none;
}
and
.post-content footer .share {
position: relative;
display: none;
}
Could anyone help me with the correct code/syntax to add this to my styles.css to hide the Social Sharing buttons.
Thanks !

As described in the article its not possible.
https://help.disqus.com/customer/portal/articles/545277
Reason: Its using iframe to render the comments to prevent XSS
Even though i am not recommending you to do this but there is a way to do so.
Please read terms and conditions before doing any of this.
<div id="disqus_thread"><div>
<style>
.hide-social-discuss {
background: white; // change color according to your site back.
height: 20px;
position: relative;
width: 80%;
top: -60px;
}
<script>
//add this to script
$("#disqus_thread").append("<div class='hide-social-discuss'></div>")
</script>

Same CSS you mentioned, but adjusted to cover share buttons.
Please read disqus terms and conditions before using this.
disqus_thread {
position: relative;
}
#disqus_thread:before {
content: "";
display: block;
height: 20px;
width: 80%;
position: relative;
bottom: -72px;
background: white; //replace with your background colour
}
You won't be able to use featured comments anymore, but hey, it works
looks like this for me ¯_(ツ)_/¯

Related

Setting of background image through css in thymeleaf not working

I'm using following css formatting to display a loading panel on form submission, and I have stored the gif image in \src\main\resources\static , but the the html div is not picking up the image, it takes all the other css formattings except the image. I have referred the following SOF link, but the mentioned solutions are not working. any one came across similar issue?
How to set background url for css files in thymeleaf?
<style >
#loader {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background: rgba(0,0,0,0.75) url([[#{/loading2.gif}]]) no-repeat center center;
z-index: 10000;
}
</style>
You've set display: none; - therefore an element, including background image, is invisible. Get rid of this property.
Otherwise it looks good.

Adjusting box width to ensure anchor elements wrap to next line - for Codrops' Inline Anchor Styles kit

I’m leveraging Codrops’ slowly aging but still relevant ‘Inline Anchor Styles’ kit. Codrops’ original live demo can be found here. For my site, I’m using the ‘link-arrow’ theme.
I’ve got most of it to work as intended. My problem is that I can’t figure out how to make the longer anchor tagged web links to wrap to the next line.
Here is my reduced test case on CodePen, which also shows the HTML and CSS I am working with. When you are viewing that Pen, if you reduce the size of your browser window, you’ll notice that the very first web link is obscured and extends way over to the right beyond the boundary of the window. What I am trying to do is make the web links wrap to the next line (similar to the way the regular non-anchor tag <li> contents already do).
To further clarify what I am trying to accomplish, you can take a look at this screenshot on imgur. There are 4 red arrows pointing to the anchor tag contents which extend beyond the browser window.
How do you get the content inside the anchor tags to wrap to the next line?
After importing Codrops' HTML, CSS, and JS source code linked to above, these are the only modifications I've made:
body {
background: #f9f9f9;
width: 100%;
font-size: 133%;
margin: auto;
}
.box {
margin-left:-60px;
}
li {
line-height: 150%;
font-size: 1.2em;
padding-bottom: 15px;
}
ol {
margin: 0;
}
ol.dashed {
list-style-type: none;
}
ol.dashed > li {
text-indent: 5px;
}
ol.dashed > li:before {
content: "- ";
text-indent: 5px;
}
.container {
width:100%;
}
What I’ve tried:
I’ve tried adjusting width and max-width values from 100% progressively down to 50% for all the elements in play including the body, ol, li, a elements in addition to the classes in play such as .container and .box. No dice.
I have carefully checked your code on codepen and Codrops's Inline Anchor Styles.
I have found a very simple solution after analyzing your problem, there are two places where the code needs to be adjusted is:
this code code must not include line white-space: nowrap, it should be removed. When removing we need to setup after position of anchor from top: 0
And boom now we changed two snippset as follows:
section a {
position: relative;
display: inline-block;
outline: none;
color: #404d5b;
vertical-align: bottom;
text-decoration: none;
}
.link-arrow a::after {
left: 100%;
z-index: -2;
width: 1em;
background: #34495e url('./arrow_right.svg') no-repeat 50% 50%;
background-size: 60% auto;
text-align: center;
font-family: Arial, sans-serif;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
pointer-events: auto;
top: 0
}
Now Your Anchor tag will not be overflown again.
Based on #Umar_Ahmed's code snippet, I was able to reduce the solution down to this:
section a {
color: black;
text-decoration: none;
white-space: normal;
}
.link-arrow a::after {
pointer-events: auto;
top:0;
}
But I am giving full credit to Umar as the official answer to my question. ;)
Thank you Umar!

Strange vertical row in a bootstrap 4 container

I am inserting simple html pages made with bootstrap 4 into a wordpress project.
I'm using the container class to the divs that contain the contents.
The pages work very well, if it were not for a vertical line that appears to me along the whole page, made up as follows:
On another page:
I tried on the usual page to put a piece of css doing so:
* {
border: none;
}
or
.container {
border: none;
}
But I see that nothing has changed, so I can't imagine what it is.
Here are the page links:
page 1
page 2
It is being added by custom style from Divi here:
#media (min-width: 981px){
#main-content .container:before {
position: absolute;
top: 0;
width: 1px;
height: 100%;
background-color: #e2e2e2;
content: "";
}
}

Facebook like button displays under content when clicked

I have tried implementing a facebook like button on my website however when the like button is clicked the facebook content displays underneath my website content, specifically any images. Is there a way to correct this?
festrags.com
Password="cheaye"
Your issue is a unnecessary z-index: 8888;
.product .image {
position: relative;
overflow: hidden;
z-index: 8888;
margin: 0 0 5px;
}
Lower it or add this to your CSS (below the above CSS):
.fb_iframe_widget_lift {
z-index: 8889 !important;
}
(downvotes might be caused by you not posting any code)

Having issues with z-index and :before :after pseudo elements in IE8

I'm having a problem with compatibility on IE8 (what else is new?) and it looks like this:
http://screencast.com/t/o6Is0q6EEn
The way the code is set up, and the way I'd prefer to do it if possible, is that the products are a list item, containing the image and product details and they look like
<li class="product ships-free on-sale">stuff</li>
And the CSS:
li.product.ships-free:before {
content: url(../img/ships_free.png);
width: 80px;
height: 66px;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 10000;
}
li.product.on-sale:after {
content: url(../img/on_sale.png);
width: 80px;
height: 66px;
right: 0;
top: 0;
display: block;
position: absolute;
z-index: 10000;
}
This works in Chrome and Firefox, but not IE8. I haven't checked ie9 yet. For the code, check www.calleynye.com/exteriorsolutions.
Ideally, I'd like to figure out a way to fix this without adding extra spans or divs. I know that pseudo elements don't work in earlier versions of ie, but if they don't show up at all, I'm ok with that. I just don't want them to look messed up.
Thanks in advance!
You are inserting the images before and after a list item. Maybe try to insert them using the image it self or the definition lists you have there in the code.