#recaptcha_area, #recaptcha_table {
width: 280px !important;
}
default width of captcha is 318px. I want to decrease its size to 280px.
But my css code is not working.
Well your question is proberbly too broad because you did not tell which captcha software you are using and how your html does look like.
Just some general hints:
If you use recaptcha (which I guess by the css classes) you cannot customize the captcha, because it loads a iframe which you cannot control or modify. This behavior is caused by the same orgin policy, which prevents accessing pages from other domains.
The only hack I could guess is using the zoom attribute, but I'm not sure and I never tried it on iframes.
Alternative you could try using transform:scale(x) which should work, however I never got good results with transform yet.
Related
Have found great help with R on SO--now for something completely different.
I am working in WordPress 5.8.3.
I am building a website using the Blank Canvas theme, a child-theme of Seedlet--Not sure whether that is all relevant. I am a novice with WP and all things web development. I have installed the Events Calendar plugin and have it all configured with some test events and dates so no issues there. I am customizing the theme colours using the Additional CSS prompt from the WordPress dashboard interface.
I haven't gotten permission to publish the site, so unfortunately I can't offer a live demo. I will try to be explicit.
I have found helpful resources with instructions on how to use this utility for menus, for general custom CSS, and some useful information for changing properties of footers with CSS. Now I am trying to modify hyperlink colours within the Events calendar widget. I have approached this problem the same way as all the others but this one has stumped me. I elaborate:
From this image, you can see the Events Calendar hyperlink text is yellow. I opened the inspector and determined that this object is called .tribe-events-widget .tribe-events-widget-events-list__view-more-link. I thought the following code should change the colour
.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
color:#000;
}
It does not. This code makes no visible change. However, when I also change the background-color like this:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
background-color:black;
color:#000;
}
The result is:
This led me to believe that there is no colour option for this element---HOWEVER, the inspector shows that this element has the 'color' property:
And I'm stumped. I'm not even sure when or how this color-link-accent got defined. This check-mark toggle is not a permanent solution and besides, I would very much like to understand what is going on here.
Any advice would be greatly appreciated.
It's a bit difficult to be certain of the problem as we don't have the context, however I was surprised that you saw just this:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link
and didn't find an anchor (a) element within it.
I would have expected that you'd have to do:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link a {
color:#000;
}
as it is quite likely the anchor element will have its own special styling which will override your setting because of the increase specificity.
If that doesn't work then use your browser dev tools inspect facility to find out more about the context of that a element - you may need to give even more hints to the browser on pinning it down.
Well, this would have helped me, so I will post the solution to my question for posterity. I learned from this question and thread about overriding cascading commands. I still don't understand where the command producing the yellow text in the first place was, but I managed to override it by appending !important in my CSS. The full CSS to turn the text from yellow to black is:
.tribe-events-widget .tribe-events-widget-events-list__view-more-link {
color:black !important;
}
Reading on, this does not necessarily mean that I was specific enough about the context although I find it hard to tell in this case. This reference has some other useful info as to when it is appropriate to use !important. It seems this is not the optimal solution.
Hope somebody else can benefit from my toiling...
after I’ve been looking for a similar question to solve my issue, which was unsuccessful, I am now addressing to the community for help!
On my portfolio-website https://www.signz-fiction.at (umbrella quantum template) there is a preloader which doesn’t go away on mobile devices after you refresh the page (or press the green logo on top).
Although it is not an optimal solution for me i tried to disable the preloader under custom css but this did not work either
#preloader{display:none !important;}
Or
body > .preloader{ display: none; }
Though I am ui designer, I have only basic knowledge in web development and so I don't know how to fix the problem.
Grateful for any help, thx!
Ps:
The website is a bit older and there was a problem with the google font when i switched from http to https.
Could it be that the prealoder-thing is also related to the switch?
I think you may be confusing the loader animation with a preloader (which pre loads images and other assets to make them readily available).
On your site, the loader animation element has the class .loader, I've looked at your site with View-Source and haven't seen any element with the .preloader class
Try:
body .loader {
display: none;
}
but note that this might not help because the loader is controlled by JavaScript which might remove this property on page load.
Also, you have errors on your site:
mixed active content - avoid using http:// on your https:// site
a JS error you should look at, that may be the reason why the loader isn't being removed on time
After spending a while creating an online portfolio, then uploading it, I noticed an issue with one of my sections. On the "Advertisement" section, I noticed it was not displaying the information, just the title. So, I kept on re-pushing the stylesheet.css, even editing it, and it would still look the same. The HTML, CSS, and JS is working how I wrote it. But it is just the section that is not showing. After browsing online and on stackoverflow for an answer, I believe it has to do with Firefox. When using Firebug, I noticed the section's background has been removed, causing the entire section to "disappear." It works just fine on Chrome. I'm not worried about IE, I know that browser has some issues in itself. Anyway, would anyone on here have an idea to resolve this issue, if I can? Or even, what could be causing this issue?
Here is my website to see for yourselves. www.voelkerdesigner.com
Cheers!
It is the opposite for me your entire site works in firefox for me but not in chrome, looking through your code, its being caused by your naming conventions. Namely #advertise
I use the adguard extension in chrome and below is the css it plugs into my html pages to hide ads, so im guessing your using an adblocker in firefox
#adsense_top, #adsensewide, #adspace, #adspace_top, #adspot-300x250-pos-1, #adspot-300x250-pos-2, #adswidget1-quick-adsense, #adswidget2-quick-adsense, #adtext, #adtop, #adv-masthead, #adv-top, #advert1, #advert2, #advertbox3, #advertise, #advertisement1, #advertisetop, #advertising-container, #advertising_wrapper {
display: none!important;
}
Might as well post a random answer on this... As i wont visit posted links by new users.. i'm just gonna guess that your background image might not be 100%...
In general i use background-image instead of background.. Short hand can be a little pain and breaks in some browsers if not perfect.
so i would compare against the following example
background-image:url('images/mybg.jpg');
background-image:url('http://somesite.com/images/mybg.jpg');
Basically alot of people do not use the url and just go straight for a file name or dont quote it.. And have seen that be the problem in the past, so do use the url('') method.
Otherwise if it still fails to work and you know the image is absolute, you would then have some other css that is either over riding your elements background or is preventing it from loading.
Another trick is using your console / inspect element to manually inject the background-image and see if that works... So once the page has loaded in chrome, inspect the element as normal.. And double click on your css property listing as you can add your own styles this way and if it fails, then its not the markup but something else.
A customer complains that on his mac the css on his website looks terrible. i checked it and found out that he uses some settings in his browser to set the font to a specific one and also have a minimum height.
The problem now is that some of the css depends on heights and now is not working right.
is there any chance i can detect such things and override the css? (besides doing it with php and load a custom css)
I agree with the comments above. If a user customizes their local font settings the onus should not be on you to make it work. They've overwritten your intended design. That being said, here's a way to detect fonts using JavaScript.
http://www.lalit.org/lab/javascript-css-font-detect/
When content is hidden by CSS (display:none), is that read by Search engines or are sites penalised for that ? In my case, due to some CMS and other reasons, I need to serve alternative content to users and hide the H1 tag on the page using display:none. I wanted to know if the Search Engine will still treat the H1 tag with the same prominence as when its not hidden.
It's against Google's policy. It's called keyword stuffing and will get you delisted from Google, which means your site wont even show up on Google anymore. A good rule of thumb is to only show googlebot what users of your site can perceive display.
If you show the information to people at some point, then you can argue you're not keyword stuffing I guess, but Google will delist you first and then you'll have to file an appeal.
I don't believe that Google will penalize you automatically (meaning without human review), but it's definitely a risk, especially if the hidden text appears to be that way solely for SEO purposes.
Google Quality Guidelines - Hidden text and links
Search engine builders have had about 15 years to learn every trick that people use to get better search engine ratings, so you can be sure that the robots notice something simple like hidden text.
If the header tag is not visible on the page, it's pointless to have it there at all. At best the search engines will ignore the tag. At worst they will ignore your site.
Search engines are getting wise with regard to CSS techniques to hide information in attempts to game them. There is likely to be a threshold however, so one or two such techniques, for valid enough reasons won't be too problematic for you. If you can, do try to avoid them, and especially en-mass.
There is no reason why you can't hide the H1 tag - it's not necessarily a bad thing. Vision impaired people who are reading your website with a screen reader would find the hidden H1 useful regardless if it's hidden (because most screen readers read the HTML not the visual page). Also if you visually have a business logo on the page and then have a hidden H1 with the business name, this is also fine. In this case the H1 is an alternative to the Logo so it is therefore fine for purely semantic reasons.
Also you can have hidden content that can 'appear' by user interaction (say clicking on a 'more' link). This is also fine. Hiding text is not wrong providing there is a good, usability reason for doing it. Of course keyword stuffing is wrong and this should never be done - so an SEO reason is never enough alone to hide text - there must be some other reason.
As already mentioned, it is not a good idea to hide information for many purposes.
If actually, what you really want is to serve visitors an alternate media than plain text, there are a lot of ways to do that, just see Nine Techniques for CSS Image Replacement for further details, or sIFR.
You're better off not doing this.
Search Engines like Google are smart and they check for this type of thing and when you're caught, you'll get flagged and your SEO is useless.
Work within the system, don't try to cheat it. Google offers a ton of tools for developers looking to do legitimate SEO.
Its not a discussion about that search engine should consider it or not.
Its a question about what search engine will do. Here is your answer
http://support.google.com/webmasters/bin/answer.py?hl=en&answer=66353
Search engine will discard it, and also its against their terms of use so they have right to even remove your site from search result.
Using a .visuallyhidden class might be a better idea than the good old display:none; Screen readers will read the content in .visuallyhidden as if it were plain text.
.visuallyhidden {
border: 0 none;
clip: rect(0px, 0px, 0px, 0px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
I'm not sure if Google penalizes the use of such classes in h1 tags. But in any case I think it is a better option than using display: none;
you can set the background to the as the image you want people to see and then text indent the text to -9999px.