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.

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

Odd CSS Borders around Google Site Search Results #759

Closed
vsential opened this Issue Jan 8, 2017 · 4 comments

Comments

Projects
None yet
2 participants
@vsential

vsential commented Jan 8, 2017

  • This is a question about using the theme.
  • I believe this to be a bug with the theme --- not Jekyll, GitHub Pages or one of the bundled plugins.
  • This is a feature request.
  • I have updated all gems with bundle update.
  • I have tested locally with bundle exec jekyll build.

Environment informations

  • Minimal Mistakes version: 4.1.1
  • github-pages or jekyll gem version: 3.3.1
  • Operating system: Ubuntu 16.04

Expected behavior

No boarder around the elements. I am pretty sure this is something simple but I can't seem to find the fix. See screenshot.
css-border-issue

Here is the page generating this:

---
type: pages
title: ""
sitemap: false
permalink: /search/
---
 <div id="search">
   <form role="search" method="get" action="/search/">
   <input id="q" name="q"
          placeholder="vRealize Orchestrator, Containers, etc." type="text">
   <input id="searchButton" name="googleSearchName" type="submit" value="Search">
   </form>
 </div>

 <script>
   (function() {
     var cx = '';
     var gcse = document.createElement('script');
     gcse.type = 'text/javascript';
     gcse.async = true;
     gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
     var s = document.getElementsByTagName('script')[0];
     s.parentNode.insertBefore(gcse, s);
   })();
 </script>
 <gcse:searchresults-only queryParameterName="q"></gcse:searchresults-only>
@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Jan 10, 2017

Owner

Do you have this page live somewhere? I can't seem to test it locally since it relies on Google indexing the site for it to produce search results.

All I get is the search box, which doesn't return anything for me to troubleshoot what CSS is adding the borders.

screen shot 2017-01-09 at 8 58 38 pm

Your best bet would be to use your browser's web developer tools to inspect the elements with borders and see what CSS is being declared.

Only thing I can think of off-hand might be if those elements are constructed with table. There are some border styles in the theme for that, so they might need to be adjusted based on how things are cascading.

But hard for me to say since I can't see the actual HTML and CSS class names Google uses for the search widget.

Owner

mmistakes commented Jan 10, 2017

Do you have this page live somewhere? I can't seem to test it locally since it relies on Google indexing the site for it to produce search results.

All I get is the search box, which doesn't return anything for me to troubleshoot what CSS is adding the borders.

screen shot 2017-01-09 at 8 58 38 pm

Your best bet would be to use your browser's web developer tools to inspect the elements with borders and see what CSS is being declared.

Only thing I can think of off-hand might be if those elements are constructed with table. There are some border styles in the theme for that, so they might need to be adjusted based on how things are cascading.

But hard for me to say since I can't see the actual HTML and CSS class names Google uses for the search widget.

@vsential

This comment has been minimized.

Show comment
Hide comment
@vsential

vsential Jan 10, 2017

I do have it live for you to check out now, here is the link to it:

http://aws-dev1.vsential.com:4000/search-test/

Thanks for looking at this, I truly appreciate it!

vsential commented Jan 10, 2017

I do have it live for you to check out now, here is the link to it:

http://aws-dev1.vsential.com:4000/search-test/

Thanks for looking at this, I truly appreciate it!

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Jan 10, 2017

Owner

Sure no problem!

As I suspected it's the borders being applied to table, tr, and td. I'll eventually add some small CSS to the theme to zero them out but if you want a quick fix add these CSS styles after the _table.scss ones.

.gsc-control-cse table, 
.gsc-control-cse tr, 
.gsc-control-cse td {
    border: 0;
}
Owner

mmistakes commented Jan 10, 2017

Sure no problem!

As I suspected it's the borders being applied to table, tr, and td. I'll eventually add some small CSS to the theme to zero them out but if you want a quick fix add these CSS styles after the _table.scss ones.

.gsc-control-cse table, 
.gsc-control-cse tr, 
.gsc-control-cse td {
    border: 0;
}

@mmistakes mmistakes self-assigned this Jan 10, 2017

@vsential

This comment has been minimized.

Show comment
Hide comment
@vsential

vsential Jan 10, 2017

Awesome, that worked perfectly! I really appreciate your work and help on this!

vsential commented Jan 10, 2017

Awesome, that worked perfectly! I really appreciate your work and help on this!

@mmistakes mmistakes closed this in 010409a Jan 24, 2017

NicolasT added a commit to NicolasT/nicolast.github.io that referenced this issue Jan 29, 2017

Merge tag '4.2.1'
* tag '4.2.1': (22 commits)
  Bump version to 4.2.1
  Update CHANGELOG and history
  Document moving paginated home page to an alternate location
  Pagination now works for index.html files in subfolders. Links to next page consider baseurl now. (mmistakes#764)
  Pagination now works for index.html files in subfolders. Links to next page consider baseurl now. (mmistakes#764)
  Add https prefix to google-universal embed code. (mmistakes#772)
  Add https prefix to google-universal embed code. (mmistakes#772)
  Bump version to 4.2.0
  Bump jekyll-sitemap to (1.0)
  Update CHANGELOG and history
  Improve video helper documentation
  Add video header support to `archive` and `splash` layouts
  Rename `responsive_video` helper to `video`
  Add some white-space below video embeds
  Add Nepali (Nepalese) text
  Add page hero video for vimeo/youtube using embedresponsively.com code (mmistakes#788)
  Nepalese Language (mmistakes#785)
  invalid `analytics` example fix (mmistakes#783)
  Remove borders from table elements found in Google Custom Search Engine widget - Close mmistakes#759
  Complete Simplified Chinese Translation of Theme UI (mmistakes#747)
  ...

wetty added a commit to wetty/wetty-web that referenced this issue Feb 7, 2017

Merge branch 'master' of https://github.com/mmistakes/minimal-mistakes
…into gh-pages

* 'master' of https://github.com/mmistakes/minimal-mistakes: (22 commits)
  Bump version to 4.2.1
  Update CHANGELOG and history
  Document moving paginated home page to an alternate location
  Pagination now works for index.html files in subfolders. Links to next page consider baseurl now. (mmistakes#764)
  Pagination now works for index.html files in subfolders. Links to next page consider baseurl now. (mmistakes#764)
  Add https prefix to google-universal embed code. (mmistakes#772)
  Add https prefix to google-universal embed code. (mmistakes#772)
  Bump version to 4.2.0
  Bump jekyll-sitemap to (1.0)
  Update CHANGELOG and history
  Improve video helper documentation
  Add video header support to `archive` and `splash` layouts
  Rename `responsive_video` helper to `video`
  Add some white-space below video embeds
  Add Nepali (Nepalese) text
  Add page hero video for vimeo/youtube using embedresponsively.com code (mmistakes#788)
  Nepalese Language (mmistakes#785)
  invalid `analytics` example fix (mmistakes#783)
  Remove borders from table elements found in Google Custom Search Engine widget - Close mmistakes#759
  Complete Simplified Chinese Translation of Theme UI (mmistakes#747)
  ...

# Conflicts:
#	CHANGELOG.md
#	README.md
#	docs/_data/ui-text.yml
#	docs/_docs/05-configuration.md
#	docs/_docs/08-ui-text.md
#	docs/_docs/10-layouts.md
#	docs/_docs/14-helpers.md
#	docs/_docs/17-javascript.md
#	docs/_docs/18-history.md
#	docs/_includes/analytics-providers/google-universal.html
#	docs/_includes/page__hero.html
#	docs/_includes/paginator.html
#	docs/_layouts/archive.html
#	docs/_layouts/single.html
#	docs/_layouts/splash.html
#	docs/_pages/about.md
#	docs/_pages/home.md
#	docs/_sass/_utilities.scss
#	docs/assets/js/_main.js
#	docs/assets/js/main.min.js
#	minimal-mistakes-jekyll.gemspec
#	test/_data/ui-text.yml

antonizoon pushed a commit to antonizoon/antonizoon.github.io that referenced this issue Jul 27, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment