This might be pretty simple though, but I can't figure out how to customize Google custom search bar API with my site css. I have tried applying several predefined css classes with restrained div width but its seems the search bar its still out of style with and iframe look.
This is my code: how do I apply a css to it
<html>
<head>
<div width="100%" id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript">
</script>
<script type="text/javascript">
google.load('search', '1', {language: 'en', style: google.loader.themes.V2_DEFAULT});
google.setOnLoadCallback(function() {
var customSearchOptions = {};
var customSearchControl = new google.search.CustomSearchControl('009437919812836441502:rka9ujkwvwe', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse');
}, true);
</script>
</head>
</html>
Or is it possible at all?
It seems possible, if you give me more example code aka the css you tried I can see where it isn't working for you. Here is something I did to constrain the width of the search bar.
#cse .gsc-search-box {
width: 200px;
}
JSFiddle: Example Code
I am assuming that your CSS styles don't have a high enough specificity then those of the Google code so that is why you are not seeing your applied styles. Your CSS styles need to have a larger CSS specificity then Google's in order for your styles to work. (Reference: CSS Specificity: Things you should know)
Let me know if that helps you move forward.
My first suggestion is to not put any non-body HTML in the <head>. That is, move the <div> you have from the head to a <body> tag.
Second, you can definitely style Google's custom search box. You'll need to use something that lets you inspect the DOM, such as Web Developer Tools in Chrome or Firebug in Firefox (although, Firefox's built-in tools are decent now, too). Google uses that div to hook into your site and deliver more DOM elements via JavaScript. After the search box loads, you can inspect it using the developer tools and see all of the other elements it injects.
The main element you'll use to style are all related to the .gsc-input class. There's a Google document in support that talks about styling these things. I'll try to find and edit this post with the link later. Here's a Google example of styling the custom search box and results.
Related
I have a Wordpress page and I have added a Sidebar widget for an air quality measurement device. The script generated by the device is written looks like this:
<div name="airvisual_widget" key="somecodehere"></div>
<script type="text/javascript" src="https://www.airvisual.com/scripts/widget_v2.0.js"></script>
And this generates a widget that looks like this:
So the layout is very weird and gets off limits and there are not really many layout options on the website that generates that widget code. Is it possible to overwrite or edit the standard layout inside this javascript code? And how can one do that?
I did take a look at the widget code. And was able to change the layout using CSS.
You can add CSS for these classes and use !important to override existing properties of the widget
Once you know the dom structure and CSS selectors, you can add custom css targetting these selectors. For example, in the above screenshot, if you want to change the height of div with class bodyAirvisualWidget, you can add custom CSS like
.bodyAirvisualWidget {
height: 200px;
}
You can choose to add !important to force your css. However you need to be careful as same css selector may be targetting multiple element. In that case you may want to make your css selector more specific like div.className > div.anotherClass > .bodyAirvisualWidget to avoid unintended side effects
If it was a simple html page, you can add CSS directly in a <style> tag or in a CSS file and include css file into your page.
In case of Wordpress, you can add custom CSS via Wordpress CSS editor (My Site → Design → Customize → Additional CSS)
i have this facebook feed script on my site, but on mobile the height isnt responsive, how to make it responsive if i dont have access to that script? I have only this in my html
<script type="text/javascript" src="https://feed.mikle.com/js/fw-loader.js"
data-fw-param="47031/"></script>
Please use Facebooks own plugin's
https://developers.facebook.com/products/social-plugins/embeds/
Those are responsive and always up to date.
Simply look at the HTML, target it and change the CSS for it. Same as any other HTML.
The JS is taking pre-determined styles set by that site feed.mikle.com. So, to change the style you would have to get into that style sheet. Since you're not creating the feed yourself (and using something someone else created) you're likely at the mercy of their setup. Perhaps you can contact their support team to find out your options.
The title pretty much says it all. I am attempting to apply Bootstrap's CSS/JS only to div's with the class "bootstrap", but only when the <article> element has the class "tag-load-bootstrap".
So, in the following code:
<html>
<head></head>
<body>
<article class="tag-load-bootstrap">
<div class="bootstrap"></div>
<div></div>
</article>
</body>
</html>
Bootstrap's CSS/JS would be applied to the first div, but not the second. I've tried going about this a number of different ways (e.g., jQuery, LESS), but haven't had much luck yet. Any help will be greatly appreciated. Given the requirements of this particular site, an iframe isn't an option.
Update: Here is a link to a page on which I am attempting to get this working: http://coreyjmahler.com/2013/12/21/writer-pro-for-os-x-and-ios/. As you can see, the links at the bottom of the page are designed with Bootstrap in mind, but the Bootstrap CSS/JS are not being applied. I've tried two separate ways so far:
I used an #import in my site's custom CSS file (i.e., coreyjmahler-com.css) and directed it at bootstrap.less, which in turn references the Bootstrap CDN. I'm uncertain as to why this didn't work, but it didn't.
Currently, the site has a <link> in the <head> to the aforementioned bootstrap.less file, which retains the references to the Bootstrap CDN. This, as you can see, is also not working.
This will give you a really bloated css, but using LESS:
.tag-load-bootstrap > .bootstrap{
#import "bootstrap.less";
}
Instead I would suggest only extending the pieces of code you need.
As for the JavaScript, just use whatever you need on a specific element, either with the data attributes or programmatic API.
It would be helpful, if you give a link to a jsfiddle with a demo code in it.
But, based on the info you gave, I might instead use the css selector:
.tag-load-bootstrap .bootstrap { /*css here*/ }
I want to include Twitter Bootstrap's Tabbed Menus within a Google Maps project that is currently coded completely in javascript. Because Twitter relies on jQuery, I'm not sure how to use both of them together.
When I try to import jQuery using this <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> none of my page will render anymore.
I think I might have to use a plugin like jQuery-ui-map, but it would take too long to manually recode the whole site into jQuery (if that's what I have to do). Is there a way to import bootstrap and jquery just for the purposes of the tabbed menu, but leave the rest of the site in javascript?
When you added the jQuery <script> tag in your test page, you removed the <script> tag that loads your own script. That's why your load() function is undefined.
Your current code is:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>
//<![CDATA[
var gmarkers = [];
var infoWindow = new google.maps.InfoWindow;
...
See how there's no <script> tag beginning your own script?
With regard to your question about needing a jQuery plugin to use the Maps API with jQuery, no, you definitely don't need one. I use jQuery and the Maps API together all the time. Consider this: What is a jQuery plugin? JavaScript code! Nothing else. Anything a jQuery plugin does, you can do in your own code.
(I suppose one could imagine that there may be some special bookkeeping that is needed to make jQuery and the Maps API work together, but that just isn't the case. jQuery doesn't care what's inside your map container.)
As #geocodezip mentioned, if you find the map working but odd things happening with the formatting of elements inside the map (e.g. the pan/zoom control gets clipped), check for CSS selectors that affect too many elements, such as:
img {
/* anything here is dangerous! */
}
A selector like that will affect images inside the map, which should be left alone by your CSS. It doesn't look like you have this problem in your current working test page, just something to be aware of if it happens.
Also, just an unrelated tip, you don't need type="text/javascript" on your <script> tags, nor type="text/css" on your <style> tags.
Entering this into the Chrome or Safari inspector console, inside Gmail:
function load(url,cb){var x=document.body.appendChild(document.createElement('script'));x.src=url;x.onload=function(){console.log("Dynamically loaded "+url);if(cb){cb();}};if(!cb){x.setAttribute('async','')}}
load("https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js",function(){alert("Modernizr loaded");});
Causes the layout of much of the text to go crazy.
Can this be explained? I'd like for my tool (which involves running a bookmarklet which dynamically loads Modernizr) to work on Gmail.
Modernizer adds a lot of classes to the <html> tag, and one of those classes is js. I couldn't find anything in the documentation that describes what that represents, although I suspect it just represents JavaScript support. Google has minified their classes, so they are all short two letter items (probably generated). One of them happens to be js as well, which is causing a lot of text to get centered.
In fact, to un-hose it, just remove the js class from the <html> tag after dynamically loading your script and it fixes itself.
Here's a fixed version:
function load(url,cb){var x=document.body.appendChild(document.createElement('script'));x.src=url;x.onload=function(){console.log("Dynamically loaded "+url);if(cb){cb();}};if(!cb){x.setAttribute('async','')}}
load("https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js",function(){var htmlElement = document.getElementsByTagName("html")[0]; htmlElement.className = htmlElement.className.replace
( /(?:^|\s)js(?!\S)/g , '' ); alert("Modernizr loaded");});