I'm using Info Bubble in HereMap, which brings up a popup when the Marker is clicked. In this popup, I'm using custom CSS classes including bootstrap classes to match to the UI requirements.
When I click the marker, the custom styles are not being applied to the popup and its shows a scattered popup.
I'm not able to find any examples that shows a popup in HereMap having rich UI with CSS.
Can anyone of you help me on this.
You should be able to override the CSS for an InfoBubble like this:
.H_ib_body {
width: 275px;
}
Of course your CSS could be more complex than mine, but you'll want to look at .H_ib_body. Does that accomplish what you're looking for?
Best,
Related
I have a general button style across an app. I added a google map... and it has a bunch of buttons. Most of them don't have classes.
I'd like to avoid adding classes to every button I have, or trying to select/restyle the individual map buttons.
I thought perhaps a :not(.map) button (my map div having a map class) but that and several variations don't work. I'm guessing because the CSS processor sees the button as a child of elements that don't have a map class, even though one does. Logically something like:
has parent where class !== map
What I need is more like:
does not have parent where class === map
I can think of some JS workarounds, or as mentioned adding classes/specificity to just my buttons, but I'm hoping you whipper-snappers and your newfangled web standards have a more elegant solution.
Using The Divi Video Slider Module to display a set of videos. We'd like to display the video title on hover for each video. Divi says they currently don't support this functionality, but said to check the development community for answers.
See the test page at https://work.gmmb.com/project/political. have tried to edit hover class, but hasn't worked.
There is a class at class="et_pb_video_overlay_hover" Not sure how we can use this to display the video's title from the WordPress Media Library.
Any good Divi coders who have tried this or might know a custom CSS or JS solution?
A really quick workaround would be to use an :after pseudo-element on class="et_pb_video_overlay_hover". You could put the title in content: like so:
.et_pb_video_slider_item_0 .et_pb_video_overlay_hover::after {
content: "Title";
// Title will be small, white and centered at the top of
// the video. Use other CSS properties to style your titles.
}
The first video is .et_pb_video_slider_item_0, the second video is .et_pb_video_slider_item_1 etc.
That is a quick solution you can implement right away.
Edit - I've just have a quick look at the Divi Video Slider module to see if it can be filtered. The code you need is located in these files:
/wp-content/themes/Divi/includes/builder/module/Slider.php
/wp-content/themes/Divi/includes/builder/module/SliderItem.php
I tried to use the Admin Label to set a title for each video, then print that to screen on the overlay, but it isn't accessible during render. I do see that content_unprocessed does contain the title:
["content_unprocessed":protected]=> string(339)
"[et_pb_video_slider_item admin_title="Video Title Goes Here" src="https://www.youtube.com/watch?v=FkQuawiGWUw" ... "][/et_pb_video_slider_item]"
but it is protected and not directly accessible from within the render function.
I'm afraid it's going to require some long and tedious coding to get that to work. The easier solutions are to use the CSS hack above, or simply embed the title on your overlay images.
I'm writing an AngularJS app. I need to open a particular modal popup that is big in size. Is there any AngularJS library out there that allows me to open a modal popup according to my specification ? I have taken a look at AngularStrap : http://mgcrea.github.io/angular-strap/##modals, which looks like it doesn't support resizing at all, and AngularUI - Bootstrap : http://angular-ui.github.io/bootstrap/#/modal, which supports an option for big modal or small modal. I have measured the big modal and it's only 900px in width, which is not that big for me. I want the option to open the modal with specified size at will.
I have seen some answers on here that suggest to modify the .modal CSS if I want bigger modal popup, but I can't. Other parts of the code did use default modal popup, modify it will cause a mess everywhere else.
Is there any suggestions on how to accomplish this with AngularStrap (preferred library) or AngularUI - Bootstrap ?
Thanks,
You can take a separate class name for that modal and make CSS changes using that class name.It won't affect the existing modals.
I ended up using jQuery.addClass to append a separate class name into that modal. This is precisely the effect I'm looking for.
I tried using windowClass to my modal service and then appending custom CSS class to this:
windowClass: 'app-modal-window'
.app-modal-window .modal-dialog{width: 375px;
}
Does anyone have idea on how to style this rectangular button -which is a default child of a QToolbar?
First two images show the button when the graphical interface is on normal screen mode. It appears; since toolbar icons don't have enough space. Third picture shows fullscreen mode, in which my icons have space.
I want to style its shape, so that it has a radial border, without a corner. This will cancel its ugly look, in second image.
I want to let users use the interface in normal view, so locking application to fullscreen is not an option. I do want to use the button, so removing is not acceptable. Styling its position to 5 pixels left or replacing it with another stylable button could be possible solutions, but I couldn't manage to do them.
I played a lot with toolbutton and pushbutton stylesheets, but had no luck on styling this small button. I am pretty obsessed about my graphical design, but don't want to waste too much time (if solution is not trivial, I will change my toolbar to a rectangular one).
Thanks in advance.
I found the solution by listing the children object names of my toolbar.
QStringList list;
for(int i=0; i<toolBar->children()->size(); i++)
list.append(toolBar->children()[i]->objectName();
Inside the list, there is only one object that has a default name (not " "). It is qt_toolbar_ext_button
Then I was able to style it as:
"#qt_toolbar_ext_button { //... }"
I know this has been answered, but for anyone who needs to know the answer its a "QToolButton" and if you need to style a specific button with an object name you do "QToolButton#objectName" in an external resources file stylesheet or in the Widget UI stylesheet dialog for different objects.
QToolButton#objectName {
}
Check out the documentation - http://doc.qt.digia.com/4.2/stylesheet.html
This gives you the syntax for stylesheets in Qt, or "QSS" files.
Just do it: Qt documentation about stylesheets
Im looking to create a landing page that emulates DropBox (in wordpress). I was wondering how they achieved the effect of clicking the play button that overlays the background box that then turns into a video?
I see from the source that they are using JW player but again no clue on where to start with this. Are there skins you can buy that allow this? Any ideas to lead me in the right direction are appreciated.
Thanks
Can be done easily with jquery and css. First, absolute position both divs centrally on the page so that when visible one is on top of the other, then set the video div css to "display:none;". Then you can use jquery to show the video and hide the play button on click, something like this:
$(function(){
$('#play-btn').click(function(){
$('#play-btn').hide();
$('#video').show();
});
});
Simply done mi amigo. Bare in mind they don't have to be centered, they just have to be positioned one above the other...