6) On top of every full width page, where the page title appears (along with the crumb bar) - I want

6) On top of every full width page, where the page title appears (along
with the crumb bar) - I want to replace the gray background with a picture. Is
that possible?

Comments

  • Need a much cleaner look too... Like the wallstreet theme... (see image)
    Roses are red.jpg
    78K
  • At least can I change the color,
    and make the crumb below the title? That might be all that I need.
  • edited March 14
    Hi siddkhar

    For add the background image of page title section please add the below css code in custom css box.

    .page-title-section {
        padding: 90px 0;
    }

    You can change the background image as per your need.

    Let me know did it work.

    Thanks
  • edited March 14
    Wow! 
    Really Great! thanks.
    How can I bring the crumb below the title?
  • And can I change the title and crumb color to white from here without messing around with the "customize fonts" section?
  • How can I change the background color?

    This code doesn't work

    .page-title-section {
        padding: 90px 0;
        color: #1268B3;
    }
  • Hi siddkhar

    For change the page title section text color add the below css code in custom css box.

    .page-title h1 {
        color: #fff;
    }
    .page-breadcrumb > li a:hover, .page-breadcrumb > li a:focus {
        color: #ffffff;
    }
    .page-breadcrumb > li a {
        color: #ffffff;
    }
    .page-breadcrumb > li.active a {
        color: #ffffff;
    }
    .page-breadcrumb > li + li:before {
        color: #ffffff;
    }

    Let me know did it work.

    Thanks
  • Thanks, this is great. Just one small thing more - how can I bring the crumb below the title?
  • And I still cant change the color of the background using this code? I tried:

    .page-title-section{
    color:blue;
    }
  • Also, the website is live now, to check for changes: http://epilepsyparkinsons.com/
  • Hi siddkhar

    IF you want to the breadcrumb below the title then we have to customize the code so kindly download the below child theme in install activate it. https://files.fm/u/j3ymqyvc

    After activate the child theme add the below css code in custom css box.

    .overlay-page-title {
        background-color: rgba(108, 106, 175, 0.5);
        padding: 5px;
    }

    Let me know did it work.

    Thanks.
  • It didnt work.. Im getting this error message. Possibly we have different versions of the parent theme?
    Error.gif
    249K
  • Hi siddkhar

    Kindly let me know what is the your quality pro theme package folder name. So we assist you better.

    Thanks
  • You want the name shown on ftp?
  • edited March 19
    Hi siddkhar

    Yes i want to know the folder name of the theme pakage.

    Thanks
  • Please see attached file. I am using AWS lightsail, dont know if that helps you.
    FTP.jpg
    65K
  • Hi siddkhar

    OK kindly remove the previous child theme and install and activate the below child theme.




    quality-pro-child.zip
    435K
  • Class! It works really well. Please close this ticket. Thanks!
  • Im sorry, I have a ugly border around the title now. The complete css file is below. Please note that I am using padding:5px in the code you had posted earlier (for using a picture in the background)

    .scroll-up, .scroll-up:hover, .scroll-up:focus {
        display: none !important;
    }
    .news .post {
        border: 1px solid #e9e9e9;
    }
    .page-title-section {
        padding: 10px 0;
        color: #1268B3
    }
    #slider-carousel .item { height: 575px !important; }
    /*single post font styles*/
    .single-post article.post p{
     color: #202020;
     font-size: 17px; 
    }
    /*single post font styles*/
    /*Logo size change only for desktop*/
    @media (min-width: 768px){
    .navbar-brand img {
        width: 250px !important;    /* Increase 255 and set width size according you */
           }}
    /*Logo size change only for desktop*/
    .page-title-section {
        padding: 5px 0;
        background: url(http://epilepsyparkinsons.com/wp-content/uploads/2019/03/bluedarkened.gif) repeat scroll center 0 #143745;
    }
    .page-title h1 {
        color: #fff;
    }
    .page-breadcrumb > li a:hover, .page-breadcrumb > li a:focus {
        color: #ffffff;
    }
    .page-breadcrumb > li a {
        color: #ffffff;
    }
    .page-breadcrumb > li.active a {
        color: #ffffff;
    }
    .page-breadcrumb > li + li:before {
        color: #ffffff;
    }
    /*single post content margin padding only for mobile*/
    @media (max-width: 768px){
    .single-post .post-content {
        padding: 10px 10px;
    }
    .single-post  #section-block {
        padding: 0px 0 0px;
    }}
    /*single post content margin padding*/
    .overlay-page-title {
        background-color: rgba(108, 106, 175, 0.5);
        padding: 5px;
    }
  • Its ok,
    I removed the crumb bar entirely. You can close this topic.
    I have another related question, Ill ask seperately.
  • Hi siddkhar

    Glad to know issue resolved?

    Closing this ticket.

    Thanks
This discussion has been closed.