1. HOT Add more varieties for your Divi header (12 premade styles): https://header.diviultimate.com/
This is the support forum for Divi Ultimate Archive Plugin.

To access this support forum, you need to purchase Divi Ultimate Archive Plugin.

If already purchased, kindly login to your account to access it.
For Divi community forum, kindly visit here: https://divi.help/forums/get-help-on-divi-wordpress.30/
NEW Divi Block - Online drag & drop tool to easily mix & match 320+ premade Divi blocks (light / dark version), including custom header, fullscreen / slide in mobile menu, footer, etc. We also added NEW special module designs, such as Before & After Image Slider, Masonry Gallery, Promo Bar, Logo Carousel, etc.Try Free Version

Solved 47px offset and page background

Discussion in 'Basic Support Forum' started by lared-dns, May 22, 2021.

  1. lared-dns

    lared-dns Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Hello good day,
    My English is bad :( I'll try to explain myself with pictures.

    I am making a website for a client https://gt.geotecniaalperi.com/ which is currently in the testing phase.

    For the blog, I installed Divi Ultimate Archive Plugin and Divi Ultimate Blog Plugin following the Divi Help instructions as so many times for other websites where I used it for other sites without problem.

    But on this site something funny happens to me with -47px :)
    If I activate the Divi Ultimate Blog Plugin (img 01) you would have to scroll up -47px as we can see in this link: https://gt.geotecniaalperi.com/medio-ambiente-natural/

    The rest of the pages look good (img 02).
    But if I also activate the Divi Ultimate Archive Plugin all the pages are scrolled by those -47px (img 03/04).

    Can you help me?
    I would also like to give the same treatment to the bottom of the blog pages as in the design of the web, and in the plugins it seems to me that there is not that option of being able to design the background with color and background image as in the Divi sections.

    If you need more information, let me know
    All the best
     

    Attached Files:

    1. AD Add more varieties for your Divi header (12 premade styles):Learn More
  2. Divi Ultimate

    Divi Ultimate Administrator
    Staff Member

    Try to go to your menu Row Settings > Advanced > Custom CSS > Main Element & add:
    Code:
        position: absolute!important;
        left: 0!important;
        right: 0!important;
     
  3. lared-dns

    lared-dns Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Okay great.
    Headspace issue has now been fixed.
    As always, your attention is magnificent.

    Now in the blog pages I would like to put the background as in the rest of the pages of the site, a color and an image as I am designing the website.

    I see that in your plugins Divi Ultimate Archive Plugin and Divi Ultimate Blog Plugin do not have background editing and it would still be an excellent extension for everyone. The same as being able to edit not only for PC, but also for tablet and smartphone in all its parameters.

    This is still a great effort, but with a CSS that you can contribute anyway, it would be a good temporary help.

    I hope you understand what I want to tell you :) but for now, the help for the background that I comment on, I need to finish this website in the blog part:
    https://gt.geotecniaalperi.com/noticias/
    https://gt.geotecniaalperi.com/categoria/noticias/
    https://gt.geotecniaalperi.com/medio-ambiente-natural/
    https://gt.geotecniaalperi.com/?s=
    https://gt.geotecniaalperi.com/?s=geologia

    Thank you very much in advance
     
    1. AD Add preloader to your Divi sites easily & it's made with CSS + minimal HTML markup:Learn More
  4. Divi Ultimate

    Divi Ultimate Administrator
    Staff Member

    For your blog page, try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    .free-du-blog-1 .free-blog-post-header {
        background: #fff!important;
    }
    .free-blog-post-header-featured-scale {
        display: none!important;
    }
    .free-blog-post-header-custom #main-content.free-du-blog-1 .free-blog-post-header-featured-overlay-gradient.free-background-overlay:before {
        display: none!important;
    }
    .free-blog-post-header-featured-wrapper {
        background-color: rgba(0,0,0,0.7)!important;
        background-image: url('https://gt.geotecniaalperi.com/wp-content/uploads/2021/05/f.png')!important;
        background-size: initial;
        background-position: top left;
        background-blend-mode: multiply;
        background-repeat: no-repeat;
    }
    As for your archive page, you will need to use custom archive header, which can be selected in Theme Customizer > Divi Ultimate Archive Plugin > Archive / Category Page Header & customize it in Divi Builder to add your background.
     
  5. lared-dns

    lared-dns Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Sorry, maybe I did not explain well for the blog page. The CSS they provide me changes the header image and I want to customize the background of the single page. See attached image.

    Thank you
     

    Attached Files:

    1. AD Free download for Divi Mobile Bar Plugin:Learn More
  6. Divi Ultimate

    Divi Ultimate Administrator
    Staff Member

    I see. For that case, try this:
    Code:
    .free-archive-wrapper, .free-du-blog-1 {
        background-color: rgba(0,0,0,0.7)!important;
        background-image: url(https://gt.geotecniaalperi.com/wp-content/uploads/2021/05/f.png)!important;
        background-size: initial;
        background-position: center left;
        background-blend-mode: multiply;
        background-repeat: no-repeat;
    }
     
  7. lared-dns

    lared-dns Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    The CSS is perfect, it also works for the rest of the blog pages such as categories, search results, etc.

    You would need to move down the contents of the archive pages as indicated in the image (img_list.jpg).

    In these pages now when scrolling, it is mounted on the top menu (img_scroll.jpg).

    On the blog article page the background is now perfect, the problem now is the colors of the texts (img_blog.jpg).

    Sorry to give so much trouble :(

    If these settings are implemented in the plugin, I have no problem paying for upgrades of the improvements :)

    Thanks a lot again for everything
     

    Attached Files:

    1. AD All in one set of 60+ design modules with 500+ layouts for all Divi users:Learn More
  8. Divi Ultimate

    Divi Ultimate Administrator
    Staff Member

    Try this:
    Code:
    .free-archive-wrapper {
        padding-top: 50px;
    }
    header {
        z-index: 99996;
        position: relative;
    }
    .free-du-blog-1 .entry-content>*, .free-blog-post-navigation div>* {
        color: #fff!important;
    }
     
  9. lared-dns

    lared-dns Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Hello again,
    I solved with CSS several things more than the colors of the texts on the background, etc. (img_1 - img_2) I checked the entire web and I have it practically finished, but ... what was my surprise when I saw that the screen of the articles (blog) in tablet and smartfone that is displaced upwards ... see it in the images (img_3 - img_4) I don't know why it happened and the more laps I give it, I don't know how fix it. On PC it looks perfectly.

    Can you help me?
    Thank you.
     

    Attached Files:

    1. AD Tons of premade layout & section designs + functionalities for your Divi site:Learn More
  10. Divi Ultimate

    Divi Ultimate Administrator
    Staff Member

    Seems like you have some other custom CSS overriding the margin. Try the below CSS:
    Code:
    .free-blog-post-content {
        margin-top: 0!important;
    }
     
  11. lared-dns

    lared-dns Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Ok perfect, that corrected the post header, now the top image and title are on your PC, Tablet and smartphone site (img_ok.jpg) depending on where you put it in the child theme css it works or is canceled. I am attaching the css file of the child theme.

    Now only the lower part of the post remains (mobile_1.jpg and mobile_2.jpg) and on the tablet (tablet_1.jpg).

    Thank you very much and greetings
     

    Attached Files:

    1. AD Create interactive popups / overlays for videos, images & more with different trigger types in Divi:Learn More
  12. Divi Ultimate

    Divi Ultimate Administrator
    Staff Member

    Try this instead:
    Code:
    .free-du-blog-1 .container {
        margin-top: 0!important;
    }
     
  13. lared-dns

    lared-dns Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Perfect, now it looks good on all devices :)
    Thanks a million for everything.

    In summary to this incident, I will write you with some suggestion to implement these improvements in your plugin to be able to manage the background on the blog pages. I will finish the web so as not to make my client wait and then I will write you with these suggestions that I think will improve sales a lot.

    All the best
     
    Divi Ultimate likes this.
    1. AD A versatile multipurpose plugin with lots of modules to design & customize different aspects of the Divi theme:Learn More
  14. lared-dns

    lared-dns Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    My client tells me that on his ipad and iphone the background of the blog looks bad, I don't use Apple devices and I can't see it.
    I attach the images that my client gives me.
     

    Attached Files:

  15. Divi Ultimate

    Divi Ultimate Administrator
    Staff Member

    Upon further testing, it seems like background-repeat: repeat-y; doesn't work with background-blend-mode: multiply; on Safari.

    You need to either:
    1. Change the background-repeat CSS to no-repeat
    2. Or you will need to avoid using background-blend-mode multiply. Instead, change your background image color in an image editor & just upload it as normal background image.
     
    1. AD Tons of premade layout & section designs + functionalities for your Divi site:Learn More
  16. lared-dns

    lared-dns Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    OK understood.
    I will solve it then without problem :)
    I will also take note for future times, since this theme is repeated very frequently.

    Thank you very much for everything.

    NOTE:
    I repeat that an extension in your plugin to be able to edit the background of the blog and archive would be great, as well as being able to have parameters for pc, tablet and smartphone as they exist in Divi, since the sizes, spaces and margins in the three devices require Always make adjustments to make them correct.

    The design in Divi can be adjusted well in these things, but when we get to the blog ... everything gets complicated and with your plugin it is solved, but these things would be missing to be perfect.

    Courage with this, it will be a good advance, and I and so many users will be happy to pay for these extensions.

    All the best
     
  17. Divi Ultimate

    Divi Ultimate Administrator
    Staff Member

    For the mobile spacing issue on single blog page, it's actually caused by your custom CSS which is adding negative margin to the container CSS Class. See screenshot below:

    upload_2021-5-30_21-17-53.png
     
    1. AD Divi Ecommerce is a premium child theme designed to sell products online with Divi and WooCommerce:Learn More
  18. lared-dns

    lared-dns Member
    Divi Block Pro Divi Ultimate Child Theme Divi Powerful Child Theme Divi Ultimate Archive Plugin Divi Ultimate Blog Plugin Divi Ultimate Header Plugin Divi Ultimate Footer Plugin

    Sorry for not answering you before, this email got confused, I'm sorry. Of all this issue I have solved it, I already completed that CSS and solved the problem.
    ---
    * Personalizar espacio sup listado y posición z en scroll
    y color del texto en el resultado de la búsqueda sin resultados*/
    @media (max-width: 980px) {
    #logo, #main-header, .container, .logo_container {
    margin-top: -65px!important;
    margin-bottom: 10px!important;
    }
    }
    @media (max-width: 500px) {
    #logo, #main-header, .container, .logo_container {
    margin-top: -100px!important;
    margin-bottom: -10px!important;
    }
    }

    .free-archive-wrapper {
    padding-top: 50px;
    padding-bottom: 10px;
    color: #fff!important;
    }
    header {
    z-index: 99996;
    position: relative;
    }
    .free-archive-wrapper h1 {
    padding-top: 25px;
    color: #fff!important;
    }
    .free-archive-wrapper #sidebar {
    padding-top: 28px!important;
    padding-bottom: 2%;
    }
    ---
    Thank you so much for everything.
    And remember that I don't mind paying to add background image management for the blog within your plugin.