[Resolved] Individual Content headers

This topic contains 5 replies, has 3 voices, and was last updated by  Puro Support 3 weeks, 6 days ago.

  • Author
    Posts
  • #10006

    KarinB
    Participant

    Hi there,

    I would like to use individual content header background images on sub pages. Is that possible with this theme?

    Thank you!

    #10007

    Andrew Misplon
    Keymaster

    Hi Karin

    Thanks for reaching out.

    It would require a Custom CSS rule for each page concerned. For example:

    .page.page-id-1709 .site-content > .entry-header {
    	background-image: url(https://yourdomain.com/wp-content/uploads/edd/2018/05/image.png);
    }

    Here the page ID is 1709 which you can find by editing the page and checking the URL. The image URL would need to be changed with your image URL and the entire CSS rule would be inserted at Customize > Additional CSS.

    #10037

    KarinB
    Participant

    Hi Andrew,

    Thank you so much, this worked perfectly!

    One last question.. how do I change the content header hight?

    Thank you very much!

    #10038

    Puro Support
    Keymaster

    Super, glad that helped.

    Try adding to Custom CSS:

    .single .entry-header, .page .site-content > .entry-header, .blog .page-header, .archive .page-header, .search-results .page-header, .search-no-results .page-header, .error404 .page-header {
    	padding: 20px 0;
    }

    Adjust the 20px value as required.

    #10065

    KarinB
    Participant

    Thank you, that worked perfectly!

    Sorry, I do have one more question..

    I have a footer with 4 columns. The first column on the left has to be a bit wider than the others due to a heading. How can I do this?

    Thank you so much.

    #10067

    Puro Support
    Keymaster

    Glad to hear you’re making progress. You can try the following added to Customize > Additional CSS:

    .site-footer .widget:nth-of-type(1) {
    	width: 30% !important;
    }
    
    .site-footer .widget:nth-of-type(2) {
    	width: 20.58% !important;
    }
    
    .site-footer .widget:nth-of-type(3) {
    	width: 20.58% !important;
    }
    
    .site-footer .widget:nth-of-type(4) {
    	width: 20.58% !important;
    }

    It’s quite tricky to adjust yourself. All four widget widths equal 100% - 8.25% for spacing.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Scroll to top