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

Topic Resolution: Answered
Viewing 16 posts - 33 through 48 (of 87 total)
  • Author
    Posts
  • #64226
    scrambler
    Moderator

    This is why I asked what you wanted first….

    If you don’t want the date removed, but just the calendar box position and styling,

    replace the rule

    .is-mobile .entry-meta .mycalend {display:none;}

    By the ones below so we keep the date but undo the position and styling

    .is-mobile .entry-meta .mycalend {
    position:relative;
    width:auto;
    left:auto;
    margin-top:0px;
    text-align:left;
    }
    .is-mobile .entry-meta .mymeta {
    display:inline-block;
    font-family:inherit;
    font-weight:normal;
    border:none;
    background-color:transparent;
    }
    .is-mobile .entry-meta .mymonth {background-color:transparent ;color:black;clear:none;padding:0px;display:inline-block;}
    .is-mobile .entry-meta .myday {clear:none;display:inline-block;font-size:100%;}
    .is-mobile .entry-meta .myyear {clear:none;display:inline-block;}

    #64230
    PolyWogg
    Participant

    Thanks Scrambler…Let me first say how much I appreciate your patience and I’m going to have to make a significant donation to your charity choice when this is all done!

    I initially did want the red calendar on all three, but it just doesn’t layout properly on phone and tablet consistently across devices, too much variation I guess, so easier without on the mobile versions. So after all the back and forth, here’s what I want, and I have all of it working (I think) except for two little pieces:

    • Desktop is “done” and working properly;
    • Tablet isn’t registering as a tablet so I guess I need to add IS-iOS and IS-ANDROID to each one that says IS-MOBILE (please confirm);
    • Phone is showing the FI in the wrong place for the single POST or PAGE view, just works for BLOG.

    The more detailed explanation for each part is:

    1. DESKTOP view of BLOG / POST / PAGE:
      1. Move FI to the left — Done;
      2. Move and stylize calendar box below the FI — Done;
    2. TABLET view and PHONE view of BLOG / POST / PAGE:
      (FYI, IS-MOBILE does NOT seem to trigger for either my Samsung or iPad tablets — what it shows in CUSTOMIZATION preview screen is NOT what it shows me on the actual devices — they both must have enough resolution to trick it into a desktop view, so I’d like to add IS-IOS and IS-Android codes somewhere to make the Tablet view and the phone views identical)

      1. Move FI above the title
        1. Tablet: Not moved on either tablet so need IS-IOS and IS-ANDROID added I guess
        2. Phone: This is where it gets weird …
          1. BLOG: Done
          2. Single POST puts it out beside the title (like normal desktop view it is beside title with no wrap)
          3. PAGE puts it beside the title with wrap
      2. Delete stylized calendar
        1. Tablet: Still showing but IS-IOS and IS-ANDROID should get rid of it
        2. Phone: Done
      3. Return date to below title
        1. Tablet: Still showing desktop but IS-IOS and IS-ANDROID should get rid of it
        2. Phone:
          1. Blog: Done
          2. Single POST: DONE
          3. PAGE: n/a

    As of now, here is the code I have:

    /*Style search box*/
    .search-form .search-field {
    color: green !important;
    background-color: #ccffff !important;
    padding-left: 30px !important;
    height:40px !important;
    width:85% !important;
    border: 1px solid blue !important;
    }

    #content blockquote {
    background-color: #F5F5DC;
    border: 2px solid #ccc;
    border-radius: 25px;
    box-shadow: 1px 1px 1px #ccc;
    font-family: Georgia, serif;
    font-size: 100%;
    font-style: italic;
    margin-left: 75px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 0px;
    padding-right: 10px;
    line-height: 1.5;
    }

    #content table {border: 2px solid #008000; text-align: left; margin: auto; width: auto;}
    #content tr th, #content thead th {font-size: medium; font-weight: normal; line-height: normal; padding: 2px;}
    #content tr td {border: 1px solid #008000; padding: 3px; vertical-align:top}
    #content tr.odd td {background: inherit;}

    #content [class^=wp-block-] {margin-top:0em;}

    .entry-meta .mycalend {
    position:absolute;
    width:150px;
    left:2%;
    margin-top:120px;
    text-align:center;
    }

    .entry-meta .mymeta {
    display:inline-block;
    font-family:arial;
    font-weight:bold;
    border:2px solid black;
    background-color:white;
    }

    .entry-meta .mymonth {background-color:red;color:white;clear:both;padding:5px;display:block;}
    .entry-meta .myday {clear:both;display:block;font-size:150%;}
    .entry-meta .myyear {clear:both;display:block;}

    .is-mobile .entry-meta .mycalend {
    position:relative;
    width:auto;
    left:auto;
    margin-top:0px;
    text-align:left;
    }

    .is-mobile .entry-meta .mymeta {
    display:inline-block;
    font-family:inherit;
    font-weight:normal;
    border:none;
    background-color:transparent;
    }

    .is-mobile .entry-meta .mymonth {background-color:transparent ;color:black;clear:none;padding:0px;display:inline-block;}
    .entry-meta .myday {clear:none;display:inline-block;font-size:100%;}
    .entry-meta .myyear {clear:none;display:inline-block;}

    .blog.is-mobile .post-area {clear:both;position:relative;overflow:visible;}

    Paul

    #64231
    scrambler
    Moderator

    To fix the FI not above on single post pages on mobile, replace
    .blog.is-mobile .post-area {clear:both;position:relative;overflow:visible;}
    by the one below without the blog page selector
    .is-mobile .post-area {clear:both;position:relative;overflow:visible;}

    To make all the rules with is-mobile also use the is-android and is-ios, you need to duplicate the selectors.
    where you have .is-mobile selectors, you need .is-mobile selectors, .is-ios selectors, .is-android selectors

    Below are the corrected rules
    .is-mobile .entry-meta .mycalend, .is-ios .entry-meta .mycalend, .is-android .entry-meta .mycalend {
    position:relative;
    width:auto;
    left:auto;
    margin-top:0px;
    text-align:left;
    }
    .is-mobile .entry-meta .mymeta, .is-ios.entry-meta .mymeta, .is-android.entry-meta .mymeta {
    display:inline-block;
    font-family:inherit;
    font-weight:normal;
    border:none;
    background-color:transparent;
    }
    .is-mobile .entry-meta .mymonth, .is-ios .entry-meta .mymonth, .is-android .entry-meta .mymonth {background-color:transparent ;color:black;clear:none;padding:0px;display:inline-block;}
    .is-mobile .entry-meta .myday, .is-ios .entry-meta .myday, .is-android .entry-meta .myday {clear:none;display:inline-block;font-size:100%;}
    .is-mobile .entry-meta .myyear, .is-ios .entry-meta .myyear, .is-android .entry-meta .myyear {clear:none;display:inline-block;}

    #64247
    PolyWogg
    Participant

    Houston, we have lift-off!

    A. Calendar box shows up as intended only on desktop for BLOG + POST — YAY #1

    B. Date is below title on Tablet, Phone (for some reason it has a black box around the date, good enough though) for BLOG + POST — YAY #2

    C. FI is to the left on desktop and above for Tablet / Phone for BLOG + POST (somehow it wraps with the title in a PAGE layout, but that’s good enough) — YAY #3

    So I’m calling it done. Whew. Thanks Scrambler…Now I’ll give myself a day or two before I start trying to tackle responsive menus on my phone. Sigh.

    Oh, and here’s the final code for all of it, just to close out the thread:

    CHANGE SPACING ABOVE BLOCKS (so not big gap from title to first block)

    #content [class^=wp-block-] {margin-top:0em;}

    STYLIZE A CALENDAR BOX FOR THE DATE UNDER FI (which is beside title, no wrap):

    .entry-meta .mycalend {
    position:absolute;
    width:150px;
    left:2%;
    margin-top:120px;
    text-align:center;
    }

    .entry-meta .mymeta {
    display:inline-block;
    font-family:arial;
    font-weight:bold;
    border:2px solid black;
    background-color:white;
    }

    PUT IN THE DATE AS THREE SEPARATE FIELDS:

    .entry-meta .mymonth {background-color:red;color:white;clear:both;padding:5px;display:block;}
    .entry-meta .myday {clear:both;display:block;font-size:150%;}
    .entry-meta .myyear {clear:both;display:block;}

    REMOVE CALENDAR BOX ON MOBILE:

    .is-mobile .entry-meta .mycalend, .is-ios .entry-meta .mycalend, .is-android .entry-meta .mycalend {
    position:relative;
    width:auto;
    left:auto;
    margin-top:0px;
    text-align:left;
    }

    .is-mobile .entry-meta .mymeta, .is-ios.entry-meta .mymeta, .is-android.entry-meta .mymeta {
    display:inline-block;
    font-family:inherit;
    font-weight:normal;
    border:none;
    background-color:transparent;
    }

    RETURN DATE TO BELOW TITLE ON MOBILE:

    .is-mobile .entry-meta .mymonth, .is-ios .entry-meta .mymonth, .is-android .entry-meta .mymonth {background-color:transparent ;color:black;clear:none;padding:0px;display:inline-block;}
    .is-mobile .entry-meta .myday, .is-ios .entry-meta .myday, .is-android .entry-meta .myday {clear:none;display:inline-block;font-size:100%;}
    .is-mobile .entry-meta .myyear, .is-ios .entry-meta .myyear, .is-android .entry-meta .myyear {clear:none;display:inline-block;}

    .is-mobile .post-area, .is-ios .post-area, .is-android .post-area {clear:both;position:relative;overflow:visible;}

    Thanks again,

    Paul

    #64252
    scrambler
    Moderator

    B. Date is below title on Tablet, Phone (for some reason it has a black box around the date

    I do not see that, make sure you clear your caches, and if still having the problem check if you also see it on desktop when reducing the browser size.

    If only on a specific device but not on browser with small size, add !important to the border:none

    border:none !important;

    (somehow it wraps with the title in a PAGE layout, but thatโ€™s good enough

    Can you elaborate and provide a link to a page

    #64253
    Best Answer
    scrambler
    Moderator

    This reply has been accepted as the best answer.

    If for C you mean that on regular pages the title and FI are side by side, you can change that with the rule below

    article.content-page {clear:both;}

    Add the usual mobile selector if you only want to do it there

    #64258
    PolyWogg
    Participant

    Sorry, Scrambler, I don’t understand the last option. Here is what I meant:

    On my DESKTOP, the BLOG, POST and PAGE all look the same for layout (not including the calendar box) — the FI is to the left of the title, no wrap. So it looks like FI is in a column, and title and content are beside it.ย  Here is the image link:

    https://polywogg.ca/page-aligned-with-fi-left/

     

    Now, when I got to phone or tablet, the BLOG and POST look like this, with FI above title, no wrap (and date now has no box around it, with the !important added):

    https://polywogg.ca/blog-page/

    The filenaming is misleading, but t’s the BLOG and POST layout, done right. So that is showing correctly.

     

    The weird part for me is that while all three look the same on desktop, and the coding modified the BLOG and POST to look correctly, the PAGE layout did something completely different with the same coding (FI beside or perhaps above title, but with wrap on)

    https://polywogg.ca/phone-page/

    Ideally, it would be above the title, no wrap, just as BLOG and POST look.

    Paul

    #64259
    PolyWogg
    Participant

    Ah-hah, I’m learning!

    /*Fix the wrap of the FI and Title on a page on mobile*/
    .is-mobile article.content-page, .is-ios article.content-page, .is-android article.content-page {clear:both;}

    Works fine ๐Ÿ™‚

    And with that, we’re done! I think. I hope. You can now return to your life already in progress. I really appreciate all the help. I followed the donation instructions on the tip jar profile, but let me know if you change your mind and want a tip directly to you. Even an Amazon gift card or something. I can’t believe how much work this took, I thought I was doing something simple initially, just hoped that my phone and tablets would be “universal” in how they responded.

    Paul

    #67685
    PolyWogg
    Participant

    Hi Scrambler,

    I know this is an old thread, almost a year, but you helped me come up with a custom CSS code so that on a SINGLE POST view, or my SHOW POSTS view, my date was customized to show a nice box under the FI out to the left of the text (so the FI and the date box were aligned vertically in a column beside the post). I recently had to rebuild the site, and I naively thought it would be as simple as reinstalling Xtreme Plus, using same settings in custom CSS, etc. But I have a glitch of some sort that was confusing me.

    For some reason, that at first I didn’t know, my FI with BESIDE TITLE, NO WRAP was NOT actually doing that. So the text would come back in to the far left, overlapping with the date box. Here’s the link:

    Fire on High by Peter David (PWBR00001)

    As I said, at first I couldn’t figure out what was different. And when I realized there WAS a difference, I don’t quite see why it matters yet. But on the old site, I had sidebars to the right. My intent was NOT to have sidebars for these posts on the new site. I can if that is needed for the code to work, but I was planning not to. Yet what is confusing me is that not having the right sidebars somehow means the left side is not wrapping the way it is supposed to?

    I’m using the same code as above that we had working:

    /*Remove extra spaces between title and blocks*/
    #content [class^=wp-block-] {margin-top:0em;}

    /*Style calendar box on desktop*/
    .entry-meta .mycalend {
    position:absolute;
    width:150px;
    left:2%;
    margin-top:120px;
    text-align:center;
    }

    .entry-meta .mymeta {
    display:inline-block;
    font-family:arial;
    font-weight:bold;
    border:2px solid black;
    background-color:white;
    }

    .entry-meta .mymonth {background-color:red;color:white;clear:both;padding:5px;display:block;}
    .entry-meta .myday {clear:both;display:block;font-size:150%;}
    .entry-meta .myyear {clear:both;display:block;}

    .is-mobile .entry-meta .mycalend, .is-ios .entry-meta .mycalend, .is-android .entry-meta .mycalend {
    position:relative;
    width:auto;
    left:auto;
    margin-top:0px;
    text-align:left;
    }

    /*Remove calendar box from mobile, phone, iOS, Android*/
    .is-mobile .entry-meta .mymeta, .is-ios.entry-meta .mymeta, .is-android.entry-meta .mymeta {
    display:inline-block;
    font-family:inherit;
    font-weight:normal;
    border:none !important;
    background-color:transparent;
    }

    .is-mobile .entry-meta .mymonth, .is-ios .entry-meta .mymonth, .is-android .entry-meta .mymonth {background-color:transparent ;color:black;clear:none;padding:0px;display:inline-block;}
    .is-mobile .entry-meta .myday, .is-ios .entry-meta .myday, .is-android .entry-meta .myday {clear:none;display:inline-block;font-size:100%;}
    .is-mobile .entry-meta .myyear, .is-ios .entry-meta .myyear, .is-android .entry-meta .myyear {clear:none;display:inline-block;}

    /*Put the date back under the title*/
    .is-mobile .post-area, .is-ios .post-area, .is-android .post-area {clear:both;position:relative;overflow:visible;}

    /*Fix the wrap of the FI and Title on a page on mobile*/
    .is-mobile article.content-page, .is-ios article.content-page, .is-android article.content-page {clear:both;}

     

    If you have any thoughts on how to make it work when there are no sidebars and it isn’t too much work to help, I’d appreciate it. As I said, I *CAN* use sidebars if it’s too much work. I feel like I already infringed on your help a lot earlier…

    Paul Sadler

    aka PolyWogg

    #67686
    PolyWogg
    Participant

    Sorry, I should have clarified…If I turn ON the sidebars on right layout, it still does BESIDE POST, NO WRAP layout and everything works. Hence how I know that is the difference that is messing it up. I just don’t know why messing with the right side and letting it “spread” wider, means that the left side now wraps.

    #67687
    scrambler
    Moderator

    Do you have a picture of what it is supposed to look like, because I am not sure of what that is

    #67689
    PolyWogg
    Participant

    Sorry, that was a bit confusing. In the current version, you’ll see that the text of the post wraps all the way to the left margin (under the calendar box). That is with no sidebars and the FI setting as BESIDE PAGE, NO WRAP. So it shouldn’t actually go to the side, it should go straight down parallel with the title.

    If I turn sidebars on, which I don’t want to do unless I have to, the layout “works”:

     

    You can see that the post is indented (no wrap) and aligns with the title. So with sidebars on, the code above works; with sidebars off, it doesn’t (as per the first link).

    Paul

    #67697
    scrambler
    Moderator

    To fix it on the single post pages, add the rule below

    .is-desktop.single .entry-content {margin-left:150px;}

     

    #67793
    PolyWogg
    Participant

    Yes, that fixed it, and I’ve stuck with that design now, so it’s holding. ๐Ÿ™‚

    But I did find something a bit, well, odd. One of the things you helped me fix sometime ago was so that the text of the post was not too far down from the title of the page. In earlier versions, there was some extra white space at the top. And it looked, at the time at least, as if the problem was if the first line of the post was something other than a paragraph block. If it was anything “different”, even a heading block, it seemed to want to shove it farther away from the title. So you helped me fix that with some CSS code:

    /*Remove extra spaces between title and blocks*/
    #content [class^=wp-block-] {margin-top:0em;}

    But now on two pages, with similar setup and formats (i.e. default post view), I’m getting extra white space, and I’m not sure why.

    So I ran an INSPECT on my book reviews, and the height of the page title area (called header now?) is controlled by the height of the FI (which I didn’t think that worked that way before) and since the BR FI isn’t that tall, it looks okay.

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

    When I use everything the same for a TV review post, the FI is much taller for that one, so the gap between the page/post title and the first text is much larger and seems too large.

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

    Essentially, I’d like my main text to slide up to be just after the title, but it doesn’t look like that is simply a wrapping question or even alignment. It seems the layout puts the FI and the page title as a group now? And, just to be complicated, since I could theoretically move the prose manually, some titles actually go to a second line.

    Example: https://polywogg.ca/the-years-25-finest-crime-and-mystery-stories-6th-edition-1996-by-joan-hess-editor-pwbr00059/

    For reference, I’ll include the full other code you gave me that seems to work well still. Just my text alignment in the post area doesn’t “slide up” as easily anymore.

    /*Ensure the alignment for indenting on single articles with no sidebar*/
    .is-desktop.single .entry-content {margin-left:190px;}

    /*Style calendar box on desktop*/
    .entry-meta .mycalend {
    position:absolute;
    width:150px;
    left:2%;
    margin-top:30px;
    text-align:center;
    }

    .entry-meta .mymeta {
    display:inline-block;
    font-family:arial;
    font-weight:bold;
    border:2px solid black;
    background-color:white;
    }

    .entry-meta .mymonth {background-color:red;color:white;clear:both;padding:5px;display:block;}
    .entry-meta .myday {clear:both;display:block;font-size:150%;}
    .entry-meta .myyear {clear:both;display:block;}

    .is-mobile .entry-meta .mycalend, .is-ios .entry-meta .mycalend, .is-android .entry-meta .mycalend {
    position:relative;
    width:auto;
    left:auto;
    margin-top:0px;
    text-align:left;
    }

    /*Remove calendar box from mobile, phone, iOS, Android*/
    .is-mobile .entry-meta .mymeta, .is-ios.entry-meta .mymeta, .is-android.entry-meta .mymeta {
    display:inline-block;
    font-family:inherit;
    font-weight:normal;
    border:none !important;
    background-color:transparent;
    }

    .is-mobile .entry-meta .mymonth, .is-ios .entry-meta .mymonth, .is-android .entry-meta .mymonth {background-color:transparent ;color:black;clear:none;padding:0px;display:inline-block;}
    .is-mobile .entry-meta .myday, .is-ios .entry-meta .myday, .is-android .entry-meta .myday {clear:none;display:inline-block;font-size:100%;}
    .is-mobile .entry-meta .myyear, .is-ios .entry-meta .myyear, .is-android .entry-meta .myyear {clear:none;display:inline-block;}

    /*Put the date back under the title*/
    .is-mobile .post-area, .is-ios .post-area, .is-android .post-area {clear:both;position:relative;overflow:visible;}

    /*Fix the wrap of the FI and Title on a page on mobile*/
    .is-mobile article.content-page, .is-ios article.content-page, .is-android article.content-page {clear:both;}

    /*Unfix the menu to allow scrolling on phone*/
    .is-phone .wvrx-fixedtop, .is-phone .wvrx-fixonscroll {
    z-index:998;
    position:relative !important;
    top:auto !important;
    }
    body.is-phone {margin-top:0px !important}

    #67795
    scrambler
    Moderator

    Two places to affect that space:

    1- There is a weaver setting that sets the space between title and content and it is at 1em by default right now.

    Put a zero in main Options > Content areas > Space between title and content box.

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

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

     

     

    #67797
    PolyWogg
    Participant

    Thanks Scrambler, that works on pages. But on the single post view, for the links above, it only made a slight difference, somehow the other “styling” we did seems to add almost 2 full lines or the height of the FI.

    Paul

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