reCaptcha css styles being overridden by my page
Cyclone103
reCaptcha?
My page has some css which changes tables and whatnot, but it now
makes the captcha look ugly. Is there some CSS I can apply to the
captcha only to make it look normal again?
Thanks for the help!
Jeff Conklin
HTML, you may need to invest time in fixing your CSS to NOT affect all
the tables and whatnot.
If that was happening to me (which it has in other situations), I
would most likely place some style of container around the reCaptcha
html..
<div id="my-reCaptcha-container"> .. reCaptcha Code .. </div>
Then I would target the appropriate components within the reCaptcha
HTML "fixing" any issues I see.
#my-reCaptcha-container {}
#my-reCaptcha-container table { ... }
#my-reCaptcha-container table tr { ... }
Though this may take a while. Someone may have a simpler solution.
- J e f f C o n k l i n -
- http://www.getoutsidenj.com
- http://www.carabs.com
> --
> You received this message because you are subscribed to the Google Groups "reCAPTCHA" group.
> To post to this group, send email to reca...@googlegroups.com.
> To unsubscribe from this group, send email to recaptcha+...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/recaptcha?hl=en.
>
>
Cyclone103
not very CSS savvy.
On Jan 27, 5:55 pm, Jeff Conklin <car...@gmail.com> wrote:
> If the CSS on your page is affecting the CSS within the reCaptcha
> HTML, you may need to invest time in fixing your CSS to NOT affect all
> the tables and whatnot.
>
> If that was happening to me (which it has in other situations), I
> would most likely place some style of container around the reCaptcha
> html..
>
> <div id="my-reCaptcha-container"> .. reCaptcha Code .. </div>
>
> Then I would target the appropriate components within the reCaptcha
> HTML "fixing" any issues I see.
>
> #my-reCaptcha-container {}
> #my-reCaptcha-container table { ... }
> #my-reCaptcha-container table tr { ... }
>
> Though this may take a while. Someone may have a simpler solution.
>
> - J e f f C o n k l i n -
> -http://www.getoutsidenj.com
Jeff Conklin
I would start with a VERY simple page, adding in your CSS and the
reCaptcha code. Something like..
------
<html>
<head>
<!-- Your site's CSS -->
<link rel="stylesheet" type="text/css" href="your/sites/cssfile.css" />
<!-- CSS to override reCaptcha -->
<style type="text/css">
#my-reCaptcha-container {}
#my-reCaptcha-container table { ... }
#my-reCaptcha-container table tr { ... }
</style>
</head>
<body>
<div id="my-reCaptcha-container"> .. reCaptcha Code .. </div>
</body>
</html>
------
Then you need to add in the your own CSS declarations to override what
is in the reCaptcha HTML. I would use Firefox, and a plugin called Web
Developer to help. Using this plugin, you can display all the element
information (Ctrl+Shift_F) easily. Just put your mouse over the
different parts of the reCaptcha widget and you'll see the html
elements/IDs/class names. Then you add those names/IDs into the "CSS
to override reCaptcha" section above. Thats what I might try first.
Oh, learning these tools, along with FireBug (another plugin for
FireFox/Chrome/etc), will really help you see everything about your
pages. I was able to do this same technique to help me re-brand the
AddThis.com widget that looked AWFUL within my layout.
If this seems like something too advanced, it kinda is. But, it will
become more useful the more you learn HTML/CSS/Javascript, and need to
see if you are using them properly.
You can also take the same approach as above (create a basic HTML
shell), but do not add in your CSS file right into the page. Just add
in one line of your CSS at a time onto the page. You'll be able to
find out the specific CSS declaration within your layout that is
affecting the reCatpcha styling. That may be easier to start with.
Sorry that I don't have a definitive answer on what you can do to just
get the issue fixed. Again, someone else will have a better answer.
- J e f f C o n k l i n -
- AOL IM - a14piece
- http://www.getoutsidenj.com
- http://www.carabs.com
hostm...@enigmedia.com
On Jan 27, 6:16 pm, Cyclone103 <cyclone1...@gmail.com> wrote:
> How do I know which css components are being affected by my page? I'm
> not very CSS savvy.
Cyclone, maybe it's easier to understand if you think about how you're
using CSS. It sounds like you've set up some global styling for tables
in your style sheets, which will apply to any table in your HTML
pages. ReCaptcha generates a simple table, which is picking up the
global CSS styles you've created.
Instead, you might want to consider creating CSS table classes and
then applying them to specific tables. For example, instead of using
something like this in your CSS:
table {background: yellow}
create a table class like "myTable":
table.myTable {background: yellow}
And then, whenever you want a table styled that way, you assign it
that class in your HTML, like:
<table class="myTable">
That way, only tables with that class name will have a yellow
background, and tables without a CSS class (like the reCaptcha one, as
well as any other controls that generate tables), will use the
browser's default table style. Although it is slightly more work, this
gives you a much greater degree of control over your layout.
Does that make sense?
If you want to assign a style for a table row or table cell, you
define it in your style sheet as a "child" of your new table style:
table.myTable td {font: 12px verdana; color: red}
That's how "cascading" style sheets work...does that make sense?
Cyclone103
Jeff, your solution would work except for the fact that I have heard
they are always renaming their divs and elements, which would break
compatibility with the CSS.
Enighostmaster, yours seems to make the most sense for this particular
scenario, I think I will try it out.
If that does not work, I will go back to what Jeff said and try
something like that.
Its surprising that reCaptcha simply won't override your base styles,
but I guess its so we can theme.
As a last resort, if none of this works, how can I use the "custom"
option? I know of the javascript to place, and I placed the two divs
necessary for this, but neither seemed to load an image or text field.
On Jan 28, 7:00 am, "enighostmas...@gmail.com"
Cyclone103
I can only use "clean" for now, but its the one I wanted anyway.
Thank you both so very much!