Home Forums Weaver Xtreme Theme Changing post layout…child theme or block editor?

Topic Resolution: Answered
Viewing 16 posts - 49 through 64 (of 87 total)
  • Author
    Posts
  • #67799
    PolyWogg
    Participant

    Hmm…I think I’ve narrowed it down somewhat. It doesn’t seem to have anything to do with the custom code. When I take out the code, and revert to a standard single post view, I can then change all the different layouts and mostly, it lines up where it is supposed to without extra “space.

    **Almost** all of them work — above content / below content / with title / banner above title / etc — until I come to the one I want which is to place the FI beside page, no wrap. When I choose that, it really gives me the equivalent of WITH TITLE (normal) BUT instead of putting the content box relative to the title, it leaves the content box relative to the FI. So if I have a small FI, it’s higher; a bigger FI, it’s farther away from the title.

    I’m not sure that’s fixable though…if I try to manually position it with a negative position i.e .-1EM, then it would overlap if the title was longer, I think.

    Your solution is what I want, it just doesn’t seem to affect single post views.

    Paul

    #67801
    scrambler
    Moderator

    You lost me here.

    the layout of the date was made based on a very specific option for the feature image position. I you change the featured image position setting, the CSS will not work and would have to be redone (if possible with the chosen layout).

    So you need to decide what featured image position you want to use for posts first, then we can see if we can also make the date work with that.

    Once you decide, you can give me a link to the page that has the featured image setting you decided to use so I can see if we can tweak the existing CSS or need to start from scratch

    #67805
    PolyWogg
    Participant

    Sorry for the confusion, I’m not trying to move the FI or the date. I like how that all works, as we worked out previously, and as adjusted now for single post views with no sidebars.

    However, your solution to put “zero” for the space between content box and the title did NOT move up the content box by much. So I was wondering if the coding we put in for the date and FI was somehow messing up the location of the content box. So I tried removing the code from my global CSS, and then played with the setting of the FI to see if the problem persists with it by itself. The problem does persist; when you take out the code, and choose FI with Title, or the Beside Page, no Wrap, you get the same result on the page. The code isn’t affecting the content box not moving up. So I put it all back in. What remains is simply a problem with the content box in relation to the title and the FI.

    If I make it dead simple, let’s assume the FI is 3 lines high (rather than in PX), the title is only 1 line high, the date is 3 lines high. What I want is:

    • Line 1:   FI            TITLE
    • Line 2:  FI
    • Line 3:  FI            Content box………………………..
    • Line 4:                  Content box……………………….
    • Line 5:   Date       Content box……………………….
    • Line 6:   Date       Content box……………………….
    • Line 7:   Date       Content box……………………….
    • Line 8:                  Content box……………………….
    • Line 9:                  Content box……………………….

    So basically, with 1 line title, the content box should slide up and start on say Line 3 while the date is located about a line below the FI. The first column does that just fine. However, for the content box, it doesn’t “slide up” all the way. Because the FI and Title seemed to be linked together, the content box can’t go any “higher” than Line 4 because it is bumping so to speak against the lower size of the FI. So what you ACTUALLY get is this (content doesn’t start until line 4):

    • Line 1:   FI            TITLE
    • Line 2:  FI
    • Line 3:  FI
    • Line 4:                  Content box……………………….
    • Line 5:   Date       Content box……………………….
    • Line 6:   Date       Content box……………………….
    • Line 7:   Date       Content box……………………….
    • Line 8:                  Content box……………………….
    • Line 9:                  Content box……………………….

    If the title is 2 lines, and/or the FI is small, that’s not a big deal. On the link I shared for the book review, it looks okay. A bit more space than I would like, but livable, because the FI is relatively small.

    On the TV review, the FI is a bit taller (different dimension), and with one line, so the content box doesn’t show up until after line 5:

    • Line 1:   FI            TITLE
    • Line 2:  FI
    • Line 3:  FI
    • Line 4:  FI
    • Line 5:  FI
    • Line 6:                  Content box……………………….
    • Line 7:   Date       Content box……………………….
    • Line 8:   Date       Content box……………………….
    • Line 9:   Date       Content box……………………….

    I’d like to move the content box up dynamically in relation to the title i.e. if the title is one line, it would be say 1EM below it. If I set the setting you mentioned earlier to 1, it would mean the Content box would start on line 7 instead of 6. It doesnt’ do it dynamically in relation to the title, it does it in relation to the combined FI and Title “area”. If I go to try say negative movement to move the content box up, I’d have to likely do it per page, not globally. Because sometimes the title would be only on Line 1, other times on Line 2. If I want the content box to be “1 line below the title”, that would mean dynamically in either line 3 or line 4.

    I *could* sacrifice the special date layout on this page as I’m using it on another blog anyway, and just go with default. But even then, the “beside page, no wrap” doesn’t work — it just gives me the same as the WITH TITLE option.

    Paul

    #67807
    scrambler
    Moderator

    I told you there was two setting. The first one is small, the second one is bigger. Have you used the second one to remove the FI bottom margin

    2- remove the bottom margin on the FI image. the rule below should do it

    #content > a.wvrx-fi-link img {margin-bottom:0;}

     

    #67810
    PolyWogg
    Participant

    Thanks, yes, used it in global, used it on a page for the TV review, it eliminates the difference between the bottom of the FI and the top of the Content Box, but does nothing to let it go up to the Title.

    #67811
    scrambler
    Moderator

    You need to give me a link to a page with the issue with more details then

    #67815
    PolyWogg
    Participant

    Sure, Scrambler, same pages as above:

    a. Book review post (with small height FI, so the space isn’t as noticeable to the Title):

    https://polywogg.ca/four-to-score-by-janet-evanovich-pwbr00074/

    b. TV Review post (with slightly larger FI, so the space is more noticeable):

    https://polywogg.ca/castle-season-1-pwtvr00001/

    As I mentioned, I feel like the problem is not with the code we did but with how the FI is attaching itself to the title (equivalent to “WITH TITLE”) rather than layout of FI beside page with no wrap.

     

    P.

    #67817
    scrambler
    Moderator

    Well…

    Title is aligned with Top of featured image, so when the Featured Image is bigger, it creates more gap.

    The only way I can see around this is to do the following.

    Switch the Content area > Featured Image page > Featured Image location to “banner above Title”
    Then  add the following CSS to set the title position with an offset from the bottom of the image and a left offset at least as large ar your largest image.

    article > .page-header {position:relative;overflow:hidden;}

    article > .page-header .page-title {positon:absolute;bottom:20px;left:180px;}

    article > .page-header .page-title {position:absolute;bottom:20px;left:180px;}

    #67823
    PolyWogg
    Participant

    So I’m a bit confused by the nomenclature … do I paste the “article >” part? Do I need that if I’m putting it in the page CSS instead to test it?

    I tried putting it in Page CSS, and switching to banner above title. However, once I hide the page header, the date box disappears, i get the title below the FI, but I can’t seem to make it move from there, even with the article > part or without, and with !important or not. The title won’t move. I can move the FI by increasing the 20px to 200px, which makes no sense to me at all.

    Thanks for your time, there must be something messed up on the install somewhere. I don’t know why even the simple BESIDE PAGE, NO WRAP doesn’t work. Thanks for trying. I think I’m going to have to with a a different setup or something. It just doesn’t look right.

    Paul

    #67824
    scrambler
    Moderator

    CSS (as I gave it in bold) goes in the Theme Global Custom CSS Rule box…

    Once in place if there is a problem, leave the CSS in place and post a link to the page so I can see what is not working as on my system

    #67828
    PolyWogg
    Participant

    Everything in place, banner above title, and it’s not even close. The title doesn’t move no matter what I change the numbers to. And the calendar box is gone (I assume that the hidden line does that). I’m still convinced it is something to do with the same problem as before. If sidebars are off, then BESIDE PAGE, NO WRAP (which is the closest layout to what I want), doesn’t work.

    I can, in a pinch, put the FI in a column with some sort of date box (maybe placing a widget with the CSS code?). and move everything else to column 2, kind of a poor man’s page builder. But while I see what your CSS code is trying to do, I don’t know why it doesn’t “work” on the post.

    #67829
    PolyWogg
    Participant
    #67831
    scrambler
    Moderator

    There was a typo in my rule that said positon instead of position (you have the right to check my syntax 🙂 )

    So the rules are

    article > .page-header {position:relative;overflow:hidden;}
    article > .page-header .page-title {position:absolute;bottom:20px;left:180px;}

    And remove the rules you put in the page settings as right now you have two set of rules on top of each other.

    #67832
    PolyWogg
    Participant

    Much closer 🙂 and I didn’t see the typo either. Soooo, the only problem is that by putting in the first line, it removes the date box we created.

    Paul

    #67833
    PolyWogg
    Participant

    or not. Sigh. So for the book reviews, with the smaller FI, the movement of the title is too much:

    Equal to the Challenge by Department of National Defence (Canada) (PWBR00034)

    Since some titles are multi-line and some FIs are taller than others, I don’t think I can set it as a “maximum” movement and have it still line up…

    I’m sorry to bug you with this scrambler…but I think we’re at diminishing returns at this point. Moving one breaks another area, some require the sidebars and if they’re not on, we have to adjust again for indent. It will still work “normal” on my second site, but I just don’t think it’s going to work here. I could maybe try wrapping the smaller FI in a larger transparent background to make it identical in size to the other FI, but that has no guarantee of success either.

    Paul

    #67836
    scrambler
    Moderator

    OK, scratch the last two rules…

    The proper way to do it would be to:

    • Set the Page featured image to “With Title”
    • Have the same page featured image size for all pages, then Center the page title with a fixed top padding with the rule

    .page-header .wvrx-fi-link ~ .page-title {padding-top:50px;}

    • Adjust the padding to a smaller vales on pages with multiple line title

    But being a sucker for CSS problems, I will keep digging for a bit to see it there is a way that would work on any image size…

Viewing 16 posts - 49 through 64 (of 87 total)
  • You must be logged in to reply to this topic.