Home Forums Weaver Xtreme Theme CSS code in a block…

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #64557
    PolyWogg
    Participant

    So this question is part theme, part block and part just knowing how to select something with a CSS style code. Wrangler helped me with an earlier question, so I felt like I was close to being able to find a solution, but alas, I fell short.

    STATING THE PROBLEM

    The short version is:

    • I am using Weaver Extreme Plus;
    • I installed Stackable’s Blocks, including one with blockquote tweaks and upgraded to their premium package;
    • I used their BLOCKQUOTE block to create a simple container around a quote;
    • The block allows a bunch of bells and whistles, including the ability to put a background picture or video behind the block; and,
    • I want to switch “off” the background on mobile.

    I chose an image, but oddly enough, the block seems to cheat a bit and uses a video code as the default to insert it even though there is no actual video, just the background image. It looks great on desktop:

    QotD: Equip yourself (PWQ00001)

    Another one, done almost identically but with different background, is:

    JotD: Ewwww (PWH00002)

    However, when it tries to show it on my iPhone, it thinks it is a video because, well, as I said, the block put the image there by saying it was a video. Since it can’t play a non-existent video, it makes the BG go black, and puts a play button with a line through it as the background image.

    So my goal is that on desktop, it shows normal; on android, ios and mobile, it will NOT show any of the background.

    COMPILING THE CSS CODE

    I presume I need three parts to my coding: (ismobile) (target element) (display instructions)

    Part A: From Wrangler’s help with another problem awhile ago, I know that I need some sort of ISMOBILE option to target mobile/phone/ios of the form:

    .is-mobile .blah.blah, .is-ios .blah.blah, .is-android .blah.blah, is-phone .blah.blah

    Part B: For the target element, I cannot seem to figure out how to target the video or the image…I assume the sub-elements below the full blockquote class don’t matter as the video appears above it.

    <video class=”ugb-video-background” autoplay=”” muted=”” loop=”” src=”https://polywogg.ca/wp-content/uploads/2020/04/header-6-chemong-lake-calm.png”></video&gt;

    “If you want to live in this world, equip yourself with a heart than can endure suffering.”<br><br><br><br>~ Anonymous

    Part C: I assume after selection either the video element, the image, or just the whole background, I can just say:

    {display: none!important;}

    But I’ve tried multiple combinations of that opening blockquote class and I can’t seem to get it to hide the background.

    I feel like I’m close, just missing some understanding of how CSS codes work in that hierarchical structure to allow me to directly reference what I need. On the positive side, the block itself allows me to add CSS directly to it, so I don’t have to make it global, I can just put it on THAT block in page.

    As I said, I’m not sure it’s a theme issue or even a block issue, it’s mostly a CSS issue? Any help appreciated.

    Paul

    #64558
    PolyWogg
    Participant

    FYI, I tried the following:

    .ugb-blockquote.ugb-blockquote–v3

    {background:none
    }

    Which works on desktop. But the phone version still thinks there is a video there somewhere.

     

    Or I can go the “add only for DT” option in CSS —

    @media screen and (min-width: 800px) {.ugb-blockquote__item {
    background-image: url(“/wp-content/uploads/2020/04/header-6-chemong-lake-calm.png”);
    }
    }

     

    By doing it that way, I lose a bunch of styling controls, but it looks okay on desktop and it doesn’t show on mobile.

    #64559
    scrambler
    Moderator

    Inspecting the site, you have a the rule

    @media screen and (min-width: 800px){
    .ugb-1269d90 .ugb-blockquote__item {background-image:url(/wp-content/uploads/2020/04/header-6-chemong-lake-calm.png) !important;}
    }

    That inserts the background image for screen larger than 800px

    If you want me to give you CSS to hide the Video on mobile when done this way, I need a link to a page that shows the quote using the Video method.

    PS: Have you inquired with the plugin developer why they would use a video?

    #64560
    PolyWogg
    Participant

    And by Wrangler, I meant Scrambler. I don’t know why I get those two names confused.

    #64561
    PolyWogg
    Participant

    Hi Scrambler! I did ask the developer, but haven’t heard back yet. Of course, I got the generic “During a pandemic, we are working with reduced staff…”, so who knows when I will get a response.

    In the interim, I finally made some progress! Maybe your previous coding samples actually taught me something! 🙂

    I realized that I don’t want to insert an image since I use the block in three different ways with different images. So I undid that code you saw (I was testing it).

    I also suddenly realized that the video itself is actually done above all those confusing sub-divs on the page. So the video has its own class of ugb-video-background AND that sits within BLOCKQUOTE with a really long and unique-to-each-post class. Since I’m going to be using this block a LOT, and don’t want to fix the class each time, I realized that the video itself was sitting as a unique element. I tried tagging / selecting it multiple times and finally realized the answer should have been obvious (overall blockquote section, and just video for the element):

    .ugb-blockquote video {display: none;}

    If I understand the coding philosophy, that’s a bad way to do it since we don’t want the video to load at all if I’m not going to use it, as it slows down page load. Except there is no video, so nothing to slow it down. I would never use videos as backgrounds, and eliminating the video also avoids the “trigger” on iPhone, so it “solves” the basic problem of how to get rid of the “video can’t play” symbol showing up. FYI, I did test it with a video originally — if you give it a video, instead of an image, everything cascades properly and the video plays perfectly. So I did confirm that it is the lack of video causing the problem.

    However, while I can stop the video that way, I couldn’t quite figure out how to stop the background image. It is supposedly responsive, and the video worked fine, but the picture does NOT work at all on the iPhone. And rather than fussing around with styling the image to get it to show properly on the iPhone, etc., I just want to get rid of it on mobile. Except I can’t quite figure out what the element is on the page. So basically I want to show everything normal on desktop and no video+background on mobile.

    I figured it should be almost identical to the above structure:

    .ugb-blockquote XXXXX {display: none;}.

    However, if I just say

    .ugb-blockquote {background-image: none}

    it works.

    Sooooo, putting it all together, the following works on both (proof of concept) desktop and phone to remove the video and background image.

    .ugb-blockquote video {display: none;}

    .ugb-blockquote {background-image: none}

     

    So that is workable CSS code, except, as I said, I do want it on desktop. So I tried combining that with the code you taught me for my calendar entry, i.e. to specify the mobile side for both of those so it ONLY affects mobile:

    .is-mobile .ugb-blockquote video, .is-ios .ugb-blockquote video, .is-android .ugb-blockquote video, .is-phone .ugb-blockquote video
    {
    display: none;
    }

    .is-mobile .ugb-blockquote, .is-ios .ugb-blockquote, .is-android .ugb-blockquote {
    background-image: none;
    }

    Alas, that doesn’t work. I feel like I’m missing something REALLY SIMPLE but I can’t see it.

    Assuming that I can get those two to work, I feel like I can put this in my overall GLOBAL CSS area rather than just in the block CSS (so I don’t have to add it to 400+ blocks already on my site … sigh). If the @media option is a better way to go than doing what I am doing i.e. using @media to select my mobile devices and saying no video, no image, I’m happy to do that instead.

    Paul

    aka PolyWogg

    #64562
    PolyWogg
    Participant

    Sorry, still working with this one. https://polywogg.ca/qotd-equip-yourself-pwq00001/

    #64563
    PolyWogg
    Participant

    Okay, so if I do this for the video component:

    @media all and (min-width:0px) and (max-width: 400px) {
    .ugb-blockquote video {
    display:none;
    }
    }

    It works for not triggering the video. So I don’t need the .is-video options. And since my phone is between 0 and 400 and is one of the largest phones, I should be mobile-friendly enough. so it SHOULD work for the second command, shouldn’t it?

    @media all and (min-width:0px) and (max-width: 400px) {
    .ugb-blockquote {background-image: none;}
    }

    But it doesn’t.

    #64565
    scrambler
    Moderator

    You are starting to get the hand of CSS, good for you 🙂

    The background image rule appears to be using a double selector like

    .ugb-53c71ce.ugb-blockquote

    This means that if you create a rule that only uses .ugb-blockquote it will be less strong that the one existing.

    To solve that problem, you can add !important to your rule so it becomes stronger like

    @media all and (min-width:0px) and (max-width: 400px) {
    .ugb-blockquote {background-image: none !important;}
    }

    Also, there is no need for the min opx so you can just use

    @media all and (max-width: 400px) {
    .ugb-blockquote {background-image: none !important;}
    }

    Finally know that device under 580px are considered phone, and devices between 580 and 768px tablets

    Also, it seems the video uses the class ugb-video-background

    So you could have used that instead of the double selector

    Last you can combine all @media rules

    @media all and (max-width: 400px) {
    .ugb-video-background {display:none;}
    .ugb-blockquote {background-image: none !important;}
    }

     

    #64567
    PolyWogg
    Participant

    That’s awesome, and I actually understand it. Except I’m confused by something…I can add that code to an individual block, and it works. But if I add it to a page option in Weaver Plus, or even Global CSS, it doesn’t. Do I have to wrap it in a body or content hashtag? Ideally I’d like to set it once for the whole site rather than the 400x it appears on my site (in differing uses).

    P.

    #64568
    scrambler
    Moderator

    You cannot add a rule like that to a page “per page CSS rule box” because any rule placed there becomes prefixed with the page ID class which would make the rule invalid like below

    .page-id-xxx @media all and (max-width: 400px) {
    .ugb-video-background {display:none;}
    .ugb-blockquote {background-image: none !important;}
    }

    It is possible to prevent a rule placed there from becoming prefaced with the Page ID class by starting it with a plus sign, but then you need to add that page ID class manually to your rule at the right place. For example, you could add a rule formatted this way

    + @media all and (max-width: 400px) {
    .page-id-xxx .ugb-video-background {display:none;}
    .page-id-xxx .ugb-blockquote {background-image: none !important;}
    }

    If a rule needs to apply to all, the rule should go in the theme Global Custom CSS Rule box.

    If when you put the rule in the Theme Global Custom CSS Rule box (like Main options > Fonts & Custom > Custom CSS Rule box) it does not work, this most likely means you have some invalid rules in that box that break your CSS file.

    Review the syntax of all the CSS in that box carefully, and if you cannot find the issue, post back with your @media rule placed in the Theme Global Custom CSS rule box, so we can see why it is not working

    #64569
    PolyWogg
    Participant

    I never would have figured out that page-ID-xxx … I switched to testing it in a page so it wouldn’t be obvious if someone was visiting the website (I don’t have a production site, everything is live). So I had pasted the code you gave me above (message 64565) in the Global settings, but I was looking to see if it was working on my page (not surprisingly, it wasn’t). I hadn’t gone to a post to see if it was working…doh! So yes, it works-ish…I upped it to 580px as per your post about sizing, and it stops the video trigger, but the background image part is confusing me.

    To recap, I have three types of blockquotes using the same block from Stackable.

    A. One is for humour –> https://polywogg.ca/jotd-acronyms-pwh00001/

    It has an image for the background. Looks perfect on desktop, looks perfect on tablet, was just an issue on phone for the video. We removed the video by setting the video-background display, but we supposedly removed the background image too. Except on my phone, the video is gone but the background image shows anyway. Which is what I wanted, but didn’t think would work for all of them. So despite saying “no background image”, I seem to have the background anyway.

    B. One is for background quotes from articles –> https://polywogg.ca/critique-of-rethinking-canadian-aid-chapter-15-charity-begins-at-home/

    This one has three of the same blocks in it, with some weird purple colour shading for the text box for the quote. Works for desktop and tablet, and the video “trigger” seems gone. And the background image is gone from the phone, replaced with a white background. So no background image, as we specified.

    C. On a quote collection –> https://polywogg.ca/qotd-equip-yourself-pwq00001/

    This one seems to work also — I have the image on desktop, I have the image on my tablet (shape and layout is a bit off, but okay). And no background image on the phone, as we specified.

    So B&C work as intended. The video and image remain on desktop and tablet and are removed on the phone. A somehow lets the image remain, which I love, but I have no idea why it isn’t removed like the other two. I had been wondering if there was a way to keep it on those ones, but they stayed on their own for some reason.

    Paul

    #64570
    scrambler
    Moderator

    A) In that page, the background is done with two layers, the top layer uses a background image with the selector
    .ugb-5510ce7 .ugb-blockquote__item:before

    So you would have to use the rule
    .ugb-blockquote__item:before {background-image:none !important;}

    the bottom layer is the video

    #64571
    PolyWogg
    Participant

    Yikers, there are LAYERS????? I was just getting a handle on basic CSS setups. 🙂

    Thanks Scrambler. Since it removes it for B & C, and A is fine, I think I will leave it alone. But good to have the setup for the future if I make ANOTHER block that messes with me.

    Still no answer from the developer, so I greatly appreciate your help. In the end, I did need Weaver-related help to figure out how to put it in the Global vs. Page codes, so I’m glad you were the one helping me rather than the developer — they would have given me code for the block, but I doubt they would have been able to tell me why it didn’t work in a page (silly page IDs, sheesh!).

    Paul

    aka PolyWogg with a working site.

    #64572
    PolyWogg
    Participant

    So managed to connect with developer through FB. He was surprised because their blocks “shouldn’t” do that…but apparently inserting an image makes it think it’s a video, he says it is a bug that can be fixed. Hmm…At least I have a solution if they don’t fix the bug. Oddly enough, on their demo site, it shows it as a FIGURE inserted sometimes, other times SVG. I’ll let you know what I turn up.

    P.

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.