Is it possible to hide or remove the Powered by Google Translate on the dropdown in Google Translate?
I have removed the logo part, but couldn't remove the Powered by text.
Here's the code:
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
You can add these lines of code in your CSS file:
.goog-logo-link {
display:none !important;
}
.goog-te-gadget{
color: transparent !important;
}
This CSS worked for me:
.goog-logo-link {
display:none !important;
}
.goog-te-gadget {
color: transparent !important;
}
.goog-te-gadget .goog-te-combo {
color: blue !important;
}
Although, previous answers regarding display: none and color: transparent may work. I use this solution to completely erase text from html, if you want lets say style the box itself.
$(window).load(function(){
$(".goog-logo-link").empty();
$('.goog-te-gadget').html($('.goog-te-gadget').children());
})
I use jQuery in this example, however you can switch to JavaScript if you want.
Review image OR To remove powered by TEXT in Google Translate api, You can simply add this css.
.goog-te-gadget {
font-size: 0px;
}
Add the css to your stylesheet
#google_translate_element {
color: transparent;
}
#google_translate_element a {
display: none;
}
The first line will hide the text and the second line will hide the google translate logo.
Test it in all browsers to make sure you do not hide make the dropdown text transparent. If so, add this:
select.google_translate_element {
color: black;
}
to remove the "Powered by" text
div.goog-te-gadget {
color: transparent !important;
}
Note: I am not sure whether it is within the terms and conditions of use that you are allowed to hide the Google logo, but this should work.
If you decrease the height and hide the overflow, you will hide this area on the screen. Maybe not a very good solution, but it can be a good alternative.
<style>
#google_translate_element { height: 26px !important; overflow: hidden !important; }
</style>
You can try using this link. => https://www.w3schools.com/howto/tryit.asp?filename=tryhow_google_translate
I am using following to remove google poweredby link or image
#google_translate_element img
{
display: none !important;
}
Try this to remove logo from language translator i am sure
$(window).load(function () {
$(".goog-logo-link").parent().remove();
$(".goog-te-gadget").html(
$(".goog-te-gadget").html().replace(' Powered by ', '')
);
});
.goog-te-gadget {line-height: 2px !important;color: transparent;}
Simply add this..
.goog-logo-link {display:none !important; }
.goog-te-gadget {font-size:0px !important;}
You can do this by making some changes to the "googleTranslateElementInit" function.
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'},
'google_translate_element');
var $googleDiv = $("#google_translate_element .skiptranslate");
var $googleDivChild = $("#google_translate_element .skiptranslate div");
$googleDivChild.next().remove();
$googleDiv.contents().filter(function(){
return this.nodeType === 3 && $.trim(this.nodeValue) !== '';
}).remove();
}
Tried the code above and it did work to hide the "Powered by", but it did remove the not the Google Translate section.
What I did and it worked was add below code to the google-language-translators style.css in the css folder within the plugin.
.goog-logo-link, .goog-logo-link:link, .goog-logo-link:visited, .goog-logo-link:hover, .goog-logo-link:active {
color: #444;
**display: none;**
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
See Plugin active on http://sethucurryhouse.com/
Related
I need help to make this JSFiddle to reverse the color inversion I have tried many methods and tricks but failed somehow everytime.
JSFIDDLE LINK
above is the link to the jsfiddle which I would like to use on my website the same button should reverse the function but it isn't doing so i think there is some kind of error in it.
Instead of adding the style to the header, apply it directly to the <html> element. Then you can remove it again easily by putting something like this inside the negativar function:
var html = document.getElementsByTagName('html');
if (html.getAttribute('style')) {
html.setAttribute('style', '');
} else {
html.setAttribute('style', 'YOUR STYLE HERE')
}
Specify html and body height and white background instead of transparent:
$("button").click(function () {
$("html").toggleClass("inversed");
});
html, body {
background: white;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 1em;
}
.inversed {
-webkit-filter: invert(100%);
filter: invert(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Inverse</button>
I'm trying to fit a DataTables table inside a Bootstrap panel.
I have tried setting the option dom as:
dom: '<"panel panel-default"<"panel-heading"lf>t<"panel-footer"ip>>',
The elements are placed correctly where they should, but DataTables applies alot of styling to the elements, so the layout is quite ugly.
Can I disable the css styling? For instance, DataTables aligns the filtering and pagination at right, which seems to be done with position: absolute or something. I would rather use Bootstrap's <div class="row"><div class="col-md-6">.... or just <div class="pull-right">...</div>.
Edit
Thank you for your answers
I have tried disabling styling with
.dataTables_length {
}
.dataTables_length label {
float: none !important;
}
.dataTables_filter {
}
.dataTables_filter label {
float: none !important;
margin-bottom: 0 !important;
}
.dataTables_info {
padding-top: 0 !important;
}
.dataTables_paginate {
float: none !important;
}
.dataTables_paginate ul.pagination {
margin: 0 !important;
}
and made the columns with
dom: '<"panel panel-default"<"panel-heading"<"row"<"col-md-6"l><"col-md-6 text-right"f>>>t<"panel-footer"<"row"<"col-md-6"i><"col-md-6 text-right"p>>>>',
It almost works but I guess I should rather add col-md-6 as class to the existing div elements instead of adding more div elements in the dom option.
Is this really the correct way to do it?
It simply goes on CSS classes - .dataTables_<context>, here is some CSS to play around with :
.dataTables_length {
background-color: red;
}
.dataTables_filter {
background-color: blue;
}
.dataTables_info {
background-color: yellow;
}
.dataTables_paginate {
background-color: green;
}
demo -> http://jsfiddle.net/g860g5bm/
If you want to alter the classes for those elements, then you have id's on the scheme <id>_<context> :
#example_length {
background-color: red;
}
#example_filter {
background-color: blue;
}
#example_info {
background-color: yellow;
}
#example_paginate {
background-color: green;
}
completely alter the class for the lengthmenu :
$('#example_length').removeClass().addClass('col-md-6');
If you want something like <div class="row"><div class="col-md-6"> for example for the lenghtmenu - then use jQuerys wrap :
$('#example_length')
.wrap($('<div>', { 'class' : 'row' }))
.wrap($('<div>', { 'class' : 'col-md-6' }))
SOLUTION
Bootstrap requires certain structure in dom option, see Styling for more information.
var table = $('#example').DataTable({
"dom": '<"panel panel-default"<"panel-heading"<"row"<"col-md-6"l><"col-md-6 text-right"f>>>t<"panel-footer"<"row"<"col-md-6"i><"col-md-6 text-right"p>>>>'
});
The styling libraries that DataTables supports will override the default value of the dom parameter and replace it with a value that is suitable for their layout system. For example the Bootstrap integration makes use of Bootstrap's grid layout.
"dom":
"<'row'<'col-sm-6'l><'col-sm-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>"
DEMO
See this jsFiddle for code and demonstration.
Update: CSS solution below.
I'm using the fullpage.js jQuery plugin which unfortunately also affects the printing of the webpage, only displaying the current viewport display and its sibling.
The problem I have is that the print command uses the DOM (obviously), but the plugin has already made inline CSS changes in the DOM. Is there a way to disable the DOM changes for print?
This doesn't work, but here's my idea:
$(document).ready(function() {
if(#media !print) { // PS: Not real code!
$('#fullpage').fullpage();
}
});
------ CSS solution -------
Praveen's reply led me on the right course. The CSS needed to override the fullpage.js inline styles are:
/* Override javascript inline styles */
html,
body {
overflow: visible !important;
height: auto !important;
}
.fullpage-wrapper {
height: auto !important;
transform: none !important;
transition: none !important;
}
.fp-section {
height: auto !important;
}
.fp-slidesContainer {
width: auto !important;
transition: none !important;
transform: none !important;
}
.fp-slides,
.fp-slides * {
position: static !important;
}
.fp-slide {
width: auto !important;
}
Do something like this in your CSS:
Hiding the full page slides:
.fp-slides {
display: none;
}
Or making them static, as this would do the stuff by rendering the contents normally:
.fp-slides, .fp-slides * {
position: static !important;
/* I don't like putting !important,
but there is no other way to override the inline styles without this!*/
}
Else, you can specify the stylesheet to apply for only screen as the media:
<link rel="stylesheet" href="fullpage.css" media="screen" />
You can use a flag and set it true when the printing function is called:
var flag = false;
$(document).ready(function() {
if(flag === false) {
// all your code
}
function toPrint() {
flag = true;
window.print();
}
});
I need to create some custom buttons - like a red button with white text, green button with white text, etc.
I followed the accepted answer of the same question "How to change background of hovered and pressed extjs-button dynamically" but did not work for me. It just changes the ui without any interactions. When I click the customized button, it toggles despite the handler function is executed.
ExtJS button has 2 configuration for styling according to documentation: overCls and pressedCls. Despite I set them both pressedCls configuration did not work for me.
Which css properties should I override/define in order to create my own buttons?
Sencha Fiddle Link: https://fiddle.sencha.com/#fiddle/fim
simply, every form component has a property called "cls". So you can use the following:
cls: 'myclass'
Edit for the last issue:
You have to override the x-btn-focus class, to remove/replace the blue background color:
.x-btn-focus.green-button {
background:#46a546;
}
Edit of your your fiddle's css:
.green-button{
background:#46a546;
border: none;!important;
color: #ffffff;!important;
}
.green-button .x-btn-inner {
color: #ffffff;
}
.green-button-over {
background: #4cc54c;
border: none;
}
.x-btn-over.green-button {
background: #4cc54c;
border-color: #4cc54c;
}
.x-btn-pressed.green-button {
background: #5b9f5b;
border-color: #5b9f5b;
}
.x-btn-focus.green-button {
background:#46a546;
}
Try using these css classes :
.x-btn-over.green-button
and
.x-btn-pressed.green-button
I don't know if this is preferable to defining and using a custom UI but it's a quick fix.
Hope it helps
Pedro
EDIT (adding css as in comment below)
.x-btn-over.green-button {
background: #4cc54c;
background-color: red !important;
background-image: none;
}
.x-btn-pressed.green-button {
background: yellow;
background-color:yellow !important;
border:solid 1px red !important;
}
Added some random properties you might need background-image, etc
Following CSS works for me:
.numpad-btn {
background: #008080 !important;
}
.numpad-btn .x-btn-inner {
color: #ffffff;
}
.x-btn-over.numpad-btn {
background: #00baba;
border: solid 1px #00baba !important;
background-color: #00baba !important;
background-image: none;
}
.x-btn-pressed.numpad-btn {
background: #005151;
background-color: #005151 !important;
border: solid 1px #005151 !important;
background-image: none !important;
}
.x-btn-focus.numpad-btn {
background: #008080;
}
I realize this question was related to ExtJS 4, but I wanted to add a solution for those that find this page but want to use ExtJS 6.
In ExtJS 6, you can create a custom theme using Sass that will result in the required CSS classes being generated for you. A tutorial for this can be found here: https://docs.sencha.com/extjs/6.2.0/guides/core_concepts/theming.html
As a simple example, this Sass snippet (after being processed by Sencha Cmd) results in the various CSS classes required for a red button. Note that the $ui attribute becomes the name you reference this style by.
#include extjs-button-small-ui(
$ui: 'red',
$background-color: red,
$border-color: red,
$color: #fff
);
You configure a component to use these classes via the 'ui' config attribute. For example:
{
xtype: 'button',
itemId: 'deleteBtn',
ui: 'red',
width: 180,
text: 'Delete',
tooltip: 'Delete this item',
handler: 'onDeleteClick'
}
I'm trying to change the colour of a textfield when the user put the cursor on it, to be more easy to the user find the textfield.
I see in another post's how to change the colour with the css rules, and i found in the API, the fieldCls and focusCls to change the colours, but it isn't working, i know the problem is on the focus event that isn't fiering,
Definition of the Button:
xtype:'textfield',
focusCls:'red',
fieldCls:'green',
listener: {
'focus':function(){
Ext.Msg.Alert('Focus','TextField have focus'); //This don't run
}
}
CSS rules:
.red {
background-image: none;
background-color:#ff0000 !important;
}
.green {
background-image: none;
background-color:#00ff00 !important;
}
I made this test's on fiddle: http://jsfiddle.net/FabioJCosta/3ZZcZ/547/
Even when i'm forcing the focus with a button textfield.focus(false, 200); the focus event isn't fiering.
I hope this helps another people.
Thank You
You don't need jQuery if I understand the question.
.green:focus {
background-image: none;
background-color:#ff0000 !important;
}
.green {
background-image: none;
background-color:#00ff00 !important;
}