Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • September 19, 2014 at 12:31 am #321590
    robertscott

    Is it possible to add a custom background to the title area?
    Im looking to do something similar to this page http://tinyurl.com/nceok7m
    BUt have a different colour for each page to match the colour of my icons on my homepage: http://tinyurl.com/ktqknpb
    Also the font in the title area isnt great, can we change that?
    Thanks

    September 19, 2014 at 9:36 am #321760
    Ismael

    Hey robertscott!

    Thank you for using Enfold.

    Disable the default title container then use the Color Section with the Special Heading element inside. Change the background of the Color Section element. You can disable the title and breadcrumbs on Enfold > Header > Header Title and Breadcrumbs. You can also change this setting for each page on the Layout box.

    Regards,
    Ismael

    September 22, 2014 at 1:34 pm #322982
    robertscott

    That worked great.
    Is it possible to reduce the height of the colour area in the title and have the text in the middle 9of the color area not the page)

    Example page: http://scotwebdigital.co.uk/strategy-and-planning/

    thanks

    September 22, 2014 at 2:16 pm #322999
    Yigit

    Hey!

    Please add following code to Quick CSS 

    .page-id-1518 div#av_section_1 {
height: 83px;
max-height: 83px;
min-height: 83px;
}

    Regards,
    Yigit

    September 30, 2014 at 10:42 pm #327669
    robertscott

    This code only works on a specific page? How do i have this on every page?

    September 30, 2014 at 10:46 pm #327677
    Josue

    Hey!

    You could set an specific ID to the color section containing the title on all pages and change the code accordingly:

    #custom_title_container {
height: 83px;
max-height: 83px;
min-height: 83px;
}

    Best regards,
    Josue

    September 30, 2014 at 10:55 pm #327689
    robertscott

    Hi Josue,

    I’m not sure what you mean exactly. How do i set a custom id to each colour section? I would need to do this on every page?

    thanks

    September 30, 2014 at 11:34 pm #327720
    Josue

    Hey!

    Yes, you can set a custom ID here:
    http://screencast.com/t/MlsqZ6jmp

    Cheers!
    Josue

    September 30, 2014 at 11:37 pm #327724
    robertscott

    Thanks. I need to do that once? or for every page? I want the same title area on all inner pages.

    September 30, 2014 at 11:45 pm #327729
    Josue

    Hi!

    If you want that change to affect all color sections in the site use this code instead:

    .avia-section{
    min-height: initial !important;
}

.avia-section .content{
    padding: 10px 0;
}

.avia-section h2{
    margin-bottom: 0;
}

    Best regards,
    Josue

    • This reply was modified 10 years, 2 months ago by Josue.
    September 30, 2014 at 11:53 pm #327740
    robertscott

    Hi Josue

    Not all color sections just the title area.

    I just want to have the same title area on each page like this: http://scotwebdigital.co.uk/strategy-and-planning/

    But the area is too wide so 70px is ideal.

    .page-id-1518 div#av_section_1 {
    height: 70px;
    max-height: 70px;
    min-height: 70px;
    }

    This code is ideal on a page level but i need on all inner pages so don’t want add unnecessary code.

    Thanks

    September 30, 2014 at 11:57 pm #327747
    Josue

    Hey!

    If you want to have a custom title area on every page you need to differentiate that title area in some way, once you done that you’d just need to use one snippet for all.
    #custom_title_container {
    height: 83px;
    max-height: 83px;
    min-height: 83px;
    }

    Best regards,
    Josue

    October 1, 2014 at 12:02 am #327750
    robertscott

    and i would need to set the same custom id in every page? example: custom_title_bg

    and then copy this code:

    #custom_title_bg {
    height: 83px;
    max-height: 83px;
    min-height: 83px;
    }

    into the custom css field?

    October 1, 2014 at 12:12 am #327757
    Josue

    Yes.

    October 1, 2014 at 12:15 am #327760
    robertscott

    ok ive done that and its not working

    October 1, 2014 at 1:04 am #327786
    Josue

    Hi!

    There is an extra dot in your code, it should be:

    #custom_title_bg {
height: 70px;
max-height: 70px;
min-height: 70px;
}

    Regards,
    Josue

    October 1, 2014 at 12:26 pm #327985
    robertscott

    awesome that worked great

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘custom title backgrounds?’ is closed to new replies.