Home Forums Weaver Xtreme Theme Insert Space Above Primary Sidebar

Topic Resolution: Resolved
  • This topic has 9 replies, 2 voices, and was last updated 4 weeks ago by hkp.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #68865
    hkp
    Participant

    Hi @Scrambler

    The site is: https://www.hiskingdomprophecy.com/

    I have now started to use Xtreme breadcrumbs which moves the right Primary Sidebar down about ~20px. from the Menu on all pages except for the Home Page, where the Primary Sidebar touches the Menu.

    How can I move the Primary Sidebar down a little on the home Page, so it matches all the other pages?

    I tried:
    .wrapper .primary-widget-area {margin-top:20px !important;}
    but it does not work and nor do any variations I have tried.

    Regards and thanks,
    Angus

    #68866
    scrambler
    Moderator

    You were close

    #primary-widget-area {margin-top:30px;}

    But give there is no breadcrumbs on the home page I am not sure that makes sense 🙂

     

    #68867
    hkp
    Participant

    @Scrambler

    Thanks indeed. That was my first try but it would not work.

    I was putting it in the Child/style.css but now find that the file is no longer being read by WP.

    But when I put it into the CSS+ Rules it did work as predicted.

    However…. as you thought it may not be a good idea. It was not, as it dropped the Primary Widget Area on all the post pages too, rather than just the front page. So there was an extra gap there…. and it did not look good.

    But now also seeing it in action on the Front Page, I have decided to abandon it. After all, often 85%-100% of our users use phones….. so the desktop reader is a rare breed for us now.

    Yep… another good idea that didn’t pan out as hoped 🙂

    And no… I’m not going to try and find out why the child/style.css is not found. Things are working and I can use the Customizer if I ever need to add global CSS. I’ll let that sleeping dog lie undisturbed for the time being.

    Regards and thanks,
    Angus

    #68870
    scrambler
    Moderator

    All CSS should go in the Theme Global Custom CSS Rule box. No need of a child theme for custom CSS.

    Only use a child theme if you are making PHP changes on the theme

     

    #69445
    hkp
    Participant

    @Scrambler

    I would like to revisit this if I may.

    I tested your <strong>#primary-widget-area {margin-top:30px;} to add a White Space, but it did not look good to I removed it immediately after testing.

    Then I decided to unhide Weaver Breadcrumbs, after which, about 3 days later, white spaces appeared above the Primary Widget Area.

    That was a surprise as it also gave me one height of white space on the front page and another height on all other pages…..

    I tried to remove the space using <strong>#primary-widget-area {margin-top:0px;} but to no avail.  That code is still there.

    I also shortened the Info Bar to 65% and left justified the Breadcrumbs to make sure they are far from the Primary Widget Area, but it makes no difference.

    When I hide the Breadcrumbs on all devices, the front page narrower white space still remains throughout the whole site, on the front page and all other pages too.

    Do you have any suggestions as how to remove the white spaces above the Primary Widget Area on both the front page and all other pages, while still retaining Weaver Breadcrumbs?

    Nothing I have tried as any effect, and I can’t see any changes I’ve made by accident during my testing to cause this issue.

    The site is: https://www.hiskingdomprophecy.com/

    Regards and thanks,

    Angus

     

     

     

     

     

    #69446
    scrambler
    Moderator

    Still have a top margin rule in the child theme CSS file

    /* https://www.hiskingdomprophecy.com/wp-content/themes/weaver-xtreme-child/style.css?ver=4.4.8 */
    #primary-widget-area{margin-top:30px!important}

    Again  even if you need a child them for PHP changes, I would recommend to use the Theme Global Custom CSS Rule box as a single location for all CSS

    Now in addition to the above, Th widget area is by design below the Info bar, even if it is made shorter and left align.

    If you want to actually shift the Primary widget are up and above the Infobar location, you need to use the rule below

    #primary-widget-area{margin-top:-33px!important}

    #69452
    hkp
    Participant

    @scrambler

    Thank you.  That works…. in a way…  🙂

    Using margin-top:-33px! the Post Pages render correctly.  (See photo)   But on the Front Page, the Sidebar is moved up under the Menu.  (See photo)

    So I have changed the setting to margin-top:-5px! which renders the Front Page correctly, but gives a space between the Menu and the Sidebar on all the Post Pages.  A workable compromise I guess.

    FYI, anything higher up than -8px! removed the bottom line of the Comments Box on phones, but is okay on the desktop.  -5px! gives a tiny space under the bottom line.

    FYI also, I removed related code in the Child style.css   But as an aside, I have found that no code my style.css actually shows in view-source:https://www.hiskingdomprophecy.com/

    If you have any other suggestions I can try to remove the white space on the Post Pages, I’d be pleased to heat from you.  Else this is as far as I can go   🙂

    As always, regards and thanks,
    Angus

    #69453
    scrambler
    Moderator

    If you have hidden the breadcrumbs on some pages, then you will need to remove the margin on these pages using rules like below for the home page that has no breadcrumbs

    .home #primary-widget-area{margin-top:0px!important}

    If there are other pages with no breadcrumbs other than the home page, you will need a rule like

    .page-id-xxxx #primary-widget-area{margin-top:0px!important}

    replacing xxxx by the page ID number

    #69454
    hkp
    Participant

    @Scrambler

    FYI I have breadcrumbs turned on for all pages.

    #primary-widget-area{margin-top:-33px!important}
    .home #primary-widget-area{margin-top:0px!important}

    Works great, however the top of the Sidebar covered the bottom of the Comment Box on the phone.

    I fixed that by adding 20px to the Bottom-Margin of the Post Area on Xtreme Options.


    @Scrambler
    , thanks very much indeed.  It looks much better than it has for a while and is back to what it was 2+ months ago before I thought to change it.

    Regards and thanks,
    Angus

    #69455
    hkp
    Participant

    Please delete this para above:

    “With the settings above, interestingly it works in all places (all other browsers) other than on the WP Customization page view, where only the front page has no gap. All other pages still show a gap. I guess it is just not rendering it correctly.”

    I edited that out, but if did not save with edit and now I have no edit options to remove it.

    All is working 100% now after I fixed an error on my part.

    Thanks, Angus

     

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