I'm embedding a Vimeo video with a particularly long title on a responsive site, and I'm wondering if it's at all possible to override the Vimeo player's CSS with my own to control font-size, most importantly. The player embed options on Vimeo do not seem to allow for these sorts of adjustments. Using Firebug to inspect the actual embed code, I tried using variants of the following CSS to override the default player font style within a media query, but to no avail:
iframe #player .controls-wrapper .title h1 {
font-size: 12px !important;
}
I'm assuming I'm unable to override the CSS because the embedded iframe's stylesheet must take precedence (?) I'm frankly surprised that the text-size doesn't seem to be responsive by default. Any ideas for a solution are much appreciated.
You could try to change it using jQuery. Give this a shot:
jQuery(document).ready(function () {
jQuery('iframe').contents().find('#player .controls-wrapper .title h1').css({'font-size':'12px'});
});
Related
I want to modify a youtube video within worldstarhiphop.com using CSS only. I'm trying to make the timer at the bottom of the video bigger. But when I try to do so with the code below in my worldstar CSS sheet it doesnt work.
What exact css code do this? Again, I **ONLY ** need CSS nothing else.
.ytp-time-display { font-size: 109%;}
Was hoping to increase the height of the google map module in Divi but my CSS code is not working and do not understand why. I am pasting the following code within Advanced > Custom CSS > Main Element of the Map Module
.et_pb_map {
height: 440px;
}
Any suggestions would be very useful!
Absolute Map for Divi Theme
Add the following CSS in the Row Settings/ Custom CSS/ Column "1" Main Element (column number is where you will put the map):
position:relative;
Add a Class to Map Module. In this example the CSS Class is absolute_map
Add the following CSS in the Custom CSS box:
.absolute_map .et_pb_map {
position: absolute;
overflow:visible;
height: 100%;
}
Be happy!
Try to add padding instead of an explicit increase of height.
#map ,#map .et_pb_map {padding-bottom: 56.25%}
You might have to adjust the selector. Usually #map is enough though.
and adjust the padding percentage to modify the aspect ratio. This is responsive.
The reason why this might work is because padding creates more space for the background - map in the case of this iframe - to be painted thus expanding it.
Read more on this here
Working demo on JSFiddle
If you're customizing through that section (Advanced > Custom CSS > Main Element) of the Divi Builder, just add the property declaration not the entire CSS rule.
height: 440px;
no need to add css class in the advanced > custom css. just add the property value 440px.
use !important for overnight css
.et_pb_map {
height: 440px !important;
}
Just add !important to your css
.et_pb_map {
height: 440px !important;
}
Use below code.
Please use your google API key here in this js file.
If you wanted to increased/decreased height of map then do changes in #div_gmap.
#div_gmap {
height: 440px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
<div id="div_gmap"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('div_gmap'), {
center: {lat: 22.3039, lng: 70.8022},
zoom: 12
});
}
</script>
If this thing is not working well then might need to check some of the css or any other framework causing this issue.
The best way to test out why the css dimension code doesnt work is to use chrome dev tool.
Press Shift+ Ctrl + I (or cmd + alt + I if you are safari user) and open up the web dev tool bar. Go to the Elements section and you will see styles controller. In the styles controller, you click on the elements you wanna check on the DOM side, in your case, it's probably <div class="et_pb_map">...</div>, or you can press ctrl+f to search et_pb_map.
After you have done that, you can go to the box viewer in the style tab and see why it doesnt work out.
I would say sometimes if you use padding/margin and didnt set overflow property well, it will crop out your elements. Or maybe your class is being overlapped by other class. You can use embed style to override that <div class="et_pb_map" style="...">...</div>, or simply put your class as the last class in the class attributes.
Example on using chrome web dev tool bar
Go to Appearance -> Customize -> Additional CSS and paste this code
.et_pb_map iframe {height: 400px !important; }
This will help you Check this jsfiddle
This is the only solution that worked for me. Assign a class to your map module i.e. .map-height and target it like this:
.map-height .et_pb_map {
overflow:visible;
height: 500px!important;
}
The simple approach is:
Go to Divi Theme Options
Scroll down to Custom CSS
Enter .et_pb_map {height:500px;}
Click Save Changes (the map will now change to 500px height)
I have a site.css and something similar to mobile.css.
What I am building is a webpage where you can preview the app you've made. Imagine it like a site devided in half where one half has a panel with controls while the other one has the preview (div), curently designed as a mobile phone.
So what I am actually doing is a mobile phone on my site (preview), but the problem is that I dont know how to use the mobile.css file in the preview div only.
Is there a way to import a CSS file for one div (and its children)?
A simplified look of my page: https://jsfiddle.net/kc8rgde2/1/
<iframe>, <style scoped> or external CSS preprocesors are not an option.
EDIT:
I kinda decided to go with SASS as it was the easiest to understand and Visual Studio had a nice extension for it.
Thank you for all the help.
I had an idea. It could work, and it needs a lot of testing.Check this fiddle ->
https://jsfiddle.net/kc8rgde2/2/
Basically, as you can see, in the fiddle there's no bootstrap loaded.
I load bootstrap, and access the file using the CDN link from an AJAX request.
The response of the ajax, is the content of the bootstrap css file (minified version) - (check the console!)
What i do after, is replacing all the classes (dots) with ("#phonePreview .") and this prepends the phone preview div id to all the classes.
$(document).ready(function() {
$.when($.get("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"))
.done(function(response) {
var res = response.replace(/\./g,'#phonePreview .')
console.debug (res);
$('<style />').text(res).appendTo($('body'))
});
})
Prepending the parent id means that the classes are applied only to #phonePreview children.
It's just a starting point, but with some work it could work!
If you want to use styles specifically for devices under a certain size you could use media queries:
#media only screen and (max-width: 431px) {
.myDiv {
style: style;
style: style;
}
#div2 {
style: style;
style: style;
}
}
max-width: 431px means devices that are 431px or lower in width. You could also use height and change it to min-width.
Wondering if anyone knows a way to combat this shortcoming.
I use jQuery UI buttons for all of my button actions and the stock icons are a tad boring and I much prefer using an icon set from the twitter bootstrap.
before I go any further here is how I'm styling the buttons:
$('#juiBtnLocked').button({
disabled: true,
icons: {
primary: "ui-icon-locked"
}
});
it seems that the icons property only accepts jquery ui css styles, which I don't know why that should matter as the value provided is the full css name from the css file so logically it should technically accept ANY css rule given.
my question is, has anyone successfully got another css sprite code to work with the buttons?
to answer the question on why I don't just use the twitter buttons, its because that's breaking the jquery ui buttons and I use too much of the jquery ui toolkit to ditch it. If twitters dialog was more robust, I'd skim the jquery ui a bit, but its too limited for my needs.
You could simply override the styling for that class using CSS.
.ui-icon-locked {
background: url(myimage.png) no-repeat 0 0;
}
ui-icon-locked is not a CSS rule. It is just a hook for a HTML class. The default rules for the styles (including the icons) are stored in jquery-ui.css in the directory of the theme you are using.
For example, in the jquery-ui.css of the base theme of 1.9.1 you can find these:
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
...
.ui-icon-locked { background-position: -192px -96px; }
what bažmegakapa said is a good answer, which is why I marked it as the answer, but I found another way to do it that allows me both usages. I'm writing it here so people know another way to do it.
with twitter bootstrap, you have button CSS and then you have button js code that's similar to that of jquery ui.
all I did was took out the js code from their buttons and just use the css rules to style my buttons. now jquery ui is happy and so am I.
I noticed this same approach will work on a few other things within the twitter bootstrap.
This actually was a better solution than how I was doing it as its now all html controlled compared to making a button element and using jquery ui to style and mold it, which is a bit overkill I suppose.
I am creating a maps plugin for Wordpress that uses Google Maps JS API V3. Commonly the maps will be embedded within a wordpress post that has images that are styled. This actually happens in one of the most popular themes TwentyEleven.
.entry-content img,
.comment-content img,
.widget img {
max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}
What this means for Google maps is that map tiles end up looking like is this:
This has been posted about, not a ton but people have had to deal with it. So I have researched this.
http://wordpress.org/support/topic/twenty-eleven-12-breaks-embedded-google-maps
http://wpscale.com/google-street-map-cant-work-in-wordpress-3-2/
Every post I have seen on this subject provides the solution of changing the class styling for the div being used:
.wl_places_place_map_canvas img {
max-width: none;
}
This looks better, it really does. I am not finding a solution that makes it look great though. There are two effects from this solution that are not desirable.
Sometimes on backgrounded tile load the styling override doesn't actually work.
There is still visible 1px tile gapping that actually gaps marker overlays if they happen to be on tile lines.
To deal with the backgrounded style issue I have attempted to use jQuery, and make sure all tiles are loaded prior to setting the style:
google.maps.event.trigger(_instance._map, 'resize');
var listener = google.maps.event.addListener(_instance._map, "tilesloaded", function() {
jQuery('.wl_places_place_map_canvas').find('img').css('max-width','none');
google.maps.event.removeListener(listener);
});
That deals with the first issue, not the second and 1px tile gaps still are visible on the map and overlays.
What I want is a 100% bulletproof way to force style on the map. I have researched the API extensively. What I would really like is a way to set the style on the map itself, hopefully as a URL, and it would ignore and override all external styles. In the best possible world this style would live in Google's CDN and be tested to always look clean and fresh no matter where it was embedded.
Any ideas?
I just added #map img { max-width:none !important; } to the initial map styles. Seems to be working so far.
Everything was working fine for me on WordPress until I added a map inside the HTML field on Gravity Forms. Not sure why it started failing but the above fixed the tile issue.