Edit Title Style

  • Resolved stuffe

    (@stuffe)


    9 years, 3 months ago

    Hi. I am using Quest 1.1.5, and have set a Title Container image, as well as the option to show the Title Bar for posts.

    An example page using this setup is here:

    https://spirecomputing.co.uk/?p=66

    The problem I have is that the text does not always show well against the image I am using for the background. I would like to wrap the title with a simple border and solid background (or at least opaque), to make it stand out better.

    I would also like to remove, or modify the meta info on the right hand side of the Title Bar is possible.

    Any help would be gratefully appreciated.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Theme Author pacethemes

    (@pacethemes)

    Hi

    Add the below code in style.css file in child theme folder

    #title-container h3 {
    background-color: rgba(0,0,0,0.7);
    padding: 0 10px;
}

.title-container .breadcrumbs{
	display: none;
}
    Thread Starter stuffe

    (@stuffe)

    Thank you, this is really good and very easy, but it’s not quite perfect. It seems to place the border around the whole container which is 50% of the boxed width. I styled the breadcrumbs the same way to test rather than remove them, but that only highlights the actual text, matching the width of the border to the width of the text plus padding – perfect. Is there any way I can just highlight the text for the title, not the total title area? Same link is updated to show changes.

    Thanks again ??

    Theme Author pacethemes

    (@pacethemes)

    Below should do the trick

    #title-container h3 {
    background-color: rgba(0,0,0,0.7);
    padding: 0 10px;
    display: inline-block;
}

.title-container .breadcrumbs{
	display: none;
}
    Theme Author pacethemes

    (@pacethemes)

    Also, please rate the theme if you like it ??

    Have a great day !

    Thread Starter stuffe

    (@stuffe)

    That’s great – thanks so much. 5 star review on its way, I really like how easy it’s been and how helpful you’ve been.

    Thread Starter stuffe

    (@stuffe)

    OK, we’re getting really close now! As you can see, I have set a boxed width allowing me to use the background image, visible at the sides and through any transparent element used in page builder (I create empty paragraph modules to create transparent section gaps). The same goes for blog posts which are not made with page builder, in that I have set a title container image to be the same image. The only thing is the left and right border for the boxing. Can I remove that to prevent the line where the background image meets the same image in the main body:

    Examples:
    https://spirecomputing.co.uk <page builder transparent text modules

    https://spirecomputing.co.uk/?p=66 <blog post with background image in title container

    (PS, I do not have a child theme, I am making all alterations in the customs CSS page at wp-admin/themes.php?page=editcss)

    Thread Starter stuffe

    (@stuffe)

    Fixed it – I added this to my custom CSS:

    .boxed #page {
    -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,0);
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
    -moz-box-shadow: 0 0 0 0 rgba(0,0,0,0);
    }

    Theme Author pacethemes

    (@pacethemes)

    Great to know that you figured it out ??

    Thread Starter stuffe

    (@stuffe)

    Resolved.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Edit Title Style’ is closed to new replies.