[Resolved] Charge sitelibrary search CSS inheritance

Home Forums Support Charge sitelibrary search CSS inheritance

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1235722
    Anonymous

    Hi there,

    The Charge sitelibrary does not appear to be inheriting the changes in customizer or the configurations under “Additional CSS”.

    For example, the top bar is configured as “Full width” however when the search results are displayed, it only showcases “contained” whereas in the remainder of the site, it inherits the appropriate style.

    The second example is that the grid layout e.g. .entry-summary does not inherit the style in preceding declarations. It has to be called out explicitly.

    What is the most effective way of ensuring that the search results page inherits the settings and styles?

    #1236363
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can edit the original topic and use the private URL field.

    Let me know 🙂

    #1236530
    Anonymous

    Hi Leo,

    As the site isn’t accessible to the public yet, you can access the screenshots at https://imgur.com/a/YqpSUYC

    The CSS code is as follows;

    /* GeneratePress Site CSS */ html {
    	background: #001819;
    }
    
    body {
    	max-width: 1500px;
    	margin-left: auto;
    	margin-right: auto;
    }
    
    /* Navigation styles */
    @media (min-width:769px) {
    	.main-navigation .main-nav ul li.nav-button a {
    		border-width: 3px;
    		border-style: solid;
    		border-color: inherit;
    		border-radius: 5px;
    		line-height: 3em;
    	}
    }
    
    .page-header {
    	padding-bottom: 40px;
    }
    
    /* Home hero styles */
    .lightning-bolt svg {
    	color: #f4bb29;
    	max-width: 75px;
    	margin-bottom: 20px;
    }
    
    .page-hero h2 {
    	margin-bottom: 35px;
    	font-size: 35px;
    	font-weight: 700;
    }
    
    @media (max-width: 768px) {
    	.page-hero h2 {
    		font-size: 25px;
    	}
    }
    
    .page-hero .button, 
    .slideout-navigation .button {
        padding-left: 50px;
    		padding-right: 50px;
        border-radius: 3px;
        font-weight: 700;
        text-align: center;
    }
    
    /* Pages and posts hero styles */
    .page .page-hero h1, .single .page-hero h1 {
        display: inline-flex;
        background: rgba(0,0,0,0.1);
        border-bottom: 5px solid #f6c956;
        padding: 20px;
        margin-bottom: 0;
    }
    
    /* Posts grid styles */
    .generate-columns .inside-article {
        background-color: #f5f5f5;
    		border-bottom: solid #f6c956;
    }
    .generate-columns .inside-article:hover {
    }
    
    .post-image {
        line-height: 0;
    }
    
    h2.entry-title {
        padding: 20px 40px;
        text-align: center;
    }
    
    .blog.post-image-above-header .inside-article div.post-image, .blog .entry-summary, .blog footer.entry-meta,
    .archive.post-image-above-header .inside-article div.post-image, .archive .entry-summary, .archive footer.entry-meta{
        margin-top: 10px;
    		margin-right: 0px;
    		margin-bottom: 0px;
    		margin-left: 10px;
    }
    
    .blog.one-container .inside-article, .archive.one-container .inside-article {
        /* padding: 0; */
    		padding-top: 0px;
    		padding-right: 0px;
    		padding-bottom: 15px;
    		padding-left: 0px;
    }
    
    .entry-summary {
    		padding-top: 0px;
    		padding-right: 0px;
    		padding-bottom: 0px;
    		padding-left: 10px;
    }
    
    /* Single posts narrow content container */
    .one-container .entry-content, .comments-area, footer.entry-meta {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    } /* End GeneratePress Site CSS */
    #1236768
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    I’m not too sure what I’m looking at in those screenshots – can you explain a bit more?

    A live link would be super helpful, even if it’s a quick test server.

    #1238061
    Anonymous

    Hi Tom,

    You’ll notice from the screenshots that the border (bottom yellow) surrounding each box differs for instance. It appears in some and not others.

    The second example is the content positioning (within the box) varies between results that have a single output versus multiple. For instance, the text is left-aligned with a single result and center aligned when there are multiple results.

    The third scenario is that there is no spacing between the boxes in the search result e.g. top and bottom.

    If you import the shared CSS code and search for content, it’ll replicate the issue.

    Assuming you are unable to mimic the issue and since the site is inaccessible (requires a password), please let me know how best to share the credentials securely.

    #1238963
    Tom
    Lead Developer
    Lead Developer

    Access to the site would definitely be helpful. You can send it through our contact form: https://generatepress.com/contact

    Just be sure to mention this topic.

    Thanks!

    #1239078
    Anonymous

    Thanks Tom. The details have been submitted via the contact page.

    #1239429
    Anonymous

    Hi Tom,

    Thanks for the suggestion via email

    Removing the following styles results in losing the intended effect. It also degrades the appearance of the layout.

    If you attempt these on a local installation, you’ll see the difference.

    .generate-columns .inside-article {
        background-color: #f5f5f5;
    		border-bottom: solid #f6c956;
    }
    .generate-columns .inside-article:hover {
    }
    
    .post-image {
        line-height: 0;
    }
    
    h2.entry-title {
        padding: 20px 40px;
        text-align: center;
    }
    
    .blog.post-image-above-header .inside-article div.post-image, .blog .entry-summary, .blog footer.entry-meta,
    .archive.post-image-above-header .inside-article div.post-image, .archive .entry-summary, .archive footer.entry-meta{
        margin-top: 10px;
    		margin-right: 0px;
    		margin-bottom: 0px;
    		margin-left: 10px;
    }
    
    .blog.one-container .inside-article, .archive.one-container .inside-article {
        /* padding: 0; */
    		padding-top: 0px;
    		padding-right: 0px;
    		padding-bottom: 15px;
    		padding-left: 0px;
    }
    
    .entry-summary {
    		padding-top: 0px;
    		padding-right: 0px;
    		padding-bottom: 0px;
    		padding-left: 10px;
    }
    #1240523
    Tom
    Lead Developer
    Lead Developer

    Try adding this:

    .search.post-image-above-header .inside-article div.post-image, 
    .search .entry-summary, .blog footer.entry-meta {
        margin-top: 10px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 10px;
    }
    
    .search footer.entry-meta {
        display: none;
    }

    Any difference?

    #1240566
    Anonymous

    Thanks Tom.

    Yes, it improves and is almost identical.

    The exception is the difference between spacing between the bottom border and the text.

    The is a slight gap in the search results when compared to the posts on the home page.

    The CSS has been updated so you’ll spot the dissimilarities.

    #1240839
    Tom
    Lead Developer
    Lead Developer

    Try this:

    .search.one-container .inside-article {
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 15px;
        padding-left: 0px;
    }
    #1241036
    Anonymous

    Thanks Tom. That works flawlessly. It may be valuable to include these into the base library. I’ll mark the topic as resolved.

    #1241780
    Tom
    Lead Developer
    Lead Developer

    I agree, thanks for letting us know 🙂

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