How to customize title bar

  • Resolved vipteam

    (@vipteam)


    9 years, 5 months ago

    How to reduce the height of the title bar background and title move to the left?

    I’d like to do as in this picture.

    vega title bar

    I use a child theme and custom css.

    Thanks in advance. Regards,

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author lyrathemes

    (@lyrathemes)

    9 years, 5 months ago

    Try this custom CSS:

    jumbotron {
    padding: 40px 0 30px;
}
.jumbotron h1.block-title {
    text-align: left;
}
.jumbotron h1.block-title::after {
    content: none;
}
    • This reply was modified 9 years, 5 months ago by lyrathemes.
    Thread Starter vipteam

    (@vipteam)

    9 years, 5 months ago

    Thank you, the title is now moved to the left. But padding does not work.

    Theme Author lyrathemes

    (@lyrathemes)

    9 years, 5 months ago

    Try 

    .jumbotron {
    padding: 40px 0 30px !important;
}

    or

    .jumbotron.image-banner.banner-custom-header,
.jumbotron.image-banner.banner-custom-header{
    padding: 40px 0 30px !important;
}
    • This reply was modified 9 years, 5 months ago by lyrathemes.
    Thread Starter vipteam

    (@vipteam)

    9 years, 5 months ago

    Another option is fine. I’ve tried the following:

    .jumbotron.image-banner.banner-custom-header,
.jumbotron.image-banner.banner-custom-header{
    padding: 10px 0 10px !important;
}
.jumbotron h1.block-title {
    text-align: left;
    font-size: 26px;
}
.jumbotron h1.block-title::after {
    content: none;
}

    So it now looks like this

    test

    I’m still trying to reduce the lower part. But it looks depends on the padding of h1 title.

    Thread Starter vipteam

    (@vipteam)

    9 years, 5 months ago

    I did this with margin-bottom.

    .jumbotron h1.block-title {
    text-align: left;
    font-size: 32px;
    margin-bottom: 0px;
}

    Unfortunately, I can not center a title by height 🙁

    Thread Starter vipteam

    (@vipteam)

    9 years, 5 months ago

    Done! This works perfectly:

    .jumbotron.image-banner.banner-custom-header,
.jumbotron.image-banner.banner-custom-header{
    padding: 18px 0 10px !important;
}
.jumbotron h1.block-title {
    text-align: left;
    font-size: 32px;
    margin-bottom: 0px;
}
.jumbotron h1.block-title::after {
    content: none;
}
Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘How to customize title bar’ is closed to new replies.