I'm using a youtube embed plugin via wordpress to insert youtube videos. They work fine on some pages, but in of my widget areas the plugin adds an inline element of padding-top: 50% to the div with a class of 'fluid-width-video-wrapper', which shifts my video down 50% of the way, leaving a large gap. The div doesn't exist though when I use it on other areas of my site.
The div structure goes: epyt-gallery > widescreen flex-video when there is no issue, but on my widget area it goes:
epyt-gallery > fluid-width-video-wrapper > widescreen flex-video.
Is there something I did wrong with this area? Is there a way to remove the inline style or div from the widget area? I'm not sure how to go about it since the plugin seems to be adding it.
The widget area is currently using a shortcode inside of a 'text' widget.
The plugin is called YouTube by EmbedPlus Team.
Related
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 am currently building a gallery using Divi Gallery Module where some images are horizontal and some are vertical.
The problem is that the theme automatically selects the thumbnail which is ok for horizontal ones, but the position of the thumbnail on vertical (portrait) images is not where I would like it to be.
For example, there is a portrait of a person and the thumbnail previews his chest whereas it would be more appropriate to show a persons shoulders and head.
Is there a way to adjust the thumbnail position and if so what is the easiest method?
I would suggest inspecting the element via your browser and finding the specific class that is placed on vertical images. Knowing the class should allow you to target the vertical images using CSS. You could add the CSS to style.css or via the Additional CSS area in under Appearance < Customizer (found in most themes).
Hope that helps!
I have a question about Custom CSS or using a coding block when uploading an image to a page as a logo. I am using squarespace for my website and I need help coding my logo so that it fits on every page. An option is to use Custom CSS or a coding block. I am using the Rally template for Squarespace and my logo has a max capacity unfortunately. What coding do I use to have my logo on each page? My site is www.goodemoments.com. Please help, I would like to officially launch my blog very soon!!
Typically, in Squarespace, the way to put your logo on every page is to use it in the header. That is true for the Rally template as well.
To do this:
Add your logo via edit mode by going to Design > Logo & Title >
Logo Image
Save
The logo will now be used in place of your title ("Goode Moments
| Lifestyle Blog")
Go to the Style Editor: Design > Style Editor
Under "HEADER: BRANDING", adjust the "Logo Width" parameter to
your liking.
Once you've done this, it may then make sense to add some custom CSS via the CSS Editor if some additional minor tweaking is needed.
Yes, so I would like to use Custom CSS, because my logo that I will be using is to small. The width only goes to a certain size and I want it to be larger.
I am trying to create full width banner on a Joomla site which is sitting on Gantry5 framework. Tried to do some css work with no luck.
Here is the url http://tinyurl.com/ptponmd
I haven't worked with Joomla, but what am saying is generic to all CMS.
One solution, will be to add a custom region in your theme template and place slideshow there or print the slide directly in the template.
Here, all contents are wrapped with some 70% width using class"g-container"
If you inspect your site, you will see a section with id="g-navigation" and below that a div with class="g-container".
If you can create a new region and print you slide show inside the Section id="g-container" but above div class="g-container". You will get full 100% width.
Please refer the image, for better understanding http://prntscr.com/7qt0u9
Hope this helps!
How do I skin shadowbox and make sure popup size is fixed size?
The css part is ok since it's just overriding ids and classes.
However, I'm not sure what the markup.js is supposed to look.
So here are my questions:
I created shadowbox-custom-skin/markup.js and added the hook like:
add_filter('shadowbox-markup', 'shadowbox_custom_markup');
Now I can't find an example of how the markup.js is supposed to look.
(I'm trying to put the sb-nav div before the content and the sb-title div below the content and also add some new parameters).
I fixed the size of the popup using this method:
rel="shadowbox;width=480px;height=240px"
handleOversize resize no longer works. Meaning, it will resize content, but it's squeezed.
How do I make sure the popup is the same size, but oversized content isn't squeezed and small content is just centered?
You don't really need to tweak javascript to do this. Using the property inspector on your browser or the Firebug plugin, right click on the Shadowbox and see what css classes/ids are being used. Put those css classes/ids in your own stylesheet apply the styles you want. Then upload the file to your server.