Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🎨 Hide Disqus ads with CSS #46

Closed
3 tasks done
chriskyfung opened this issue Jan 8, 2024 · 0 comments
Closed
3 tasks done

🎨 Hide Disqus ads with CSS #46

chriskyfung opened this issue Jan 8, 2024 · 0 comments
Assignees
@chriskyfung
Labels
bug Something isn't working good first issue Good for newcomers

Comments

@chriskyfung
Copy link
Owner

chriskyfung commented Jan 8, 2024 •
edited
Loading

Description

We are using Disqus to power the comment system for our AMP-based Jekyll theme. However, Disqus is showing unwanted ads on our website that we do not have control over. We want to hide these ads with CSS.

Steps to reproduce

  1. Visit any page with Disqus comments on our website.
  2. Scroll down to the comment section and observe the ads.

Expected behavior

We expect to see only the comments and no ads.

Actual behavior

We see ads above and below the comments.

Possible solution

We can hide the ads iframes with CSS by using the following selector:

iframe[src*="ads-iframe"] {
  display: none;
}

Tasks

  • Edit the CSS style sheet to hide the ads iframes with the selector above.
  • Test the website on different browsers and devices to ensure the ads are hidden.
  • Commit and push the changes to the GitHub repository.
@chriskyfung chriskyfung added the bug Something isn't working label Jan 8, 2024
@chriskyfung chriskyfung changed the title 🎨 Update CSS for Disqus Comments 🎨 Hide Disqus ads with CSS Jan 8, 2024
@chriskyfung chriskyfung added the good first issue Good for newcomers label Jan 8, 2024
@chriskyfung chriskyfung self-assigned this Jan 13, 2024
chriskyfung added a commit that referenced this issue Jan 14, 2024
@chriskyfung
🎨 Hide Disqus ads with CSS
92fb0cb 
This commit updates the README file in this repository

In addition, the following changes were made to
https://gitlab.com/chriskyfung/disqus-amp/-/blob/master/public/index.html

- Updated CSS selector from `iframe:not(iframe[src])` to
  `iframe[src*="ads-iframe"]`
- Fixed iframe oversize issue by passing `document.body.offsetHeight`
  instead of `msg.data.height`

Fixes: Issue #46
@chriskyfung chriskyfung mentioned this issue Jan 16, 2024
Merged
12 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@chriskyfung chriskyfung

Labels
bug Something isn't working good first issue Good for newcomers
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@chriskyfung