Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • December 21, 2015 at 5:26 pm #556052
    stedia

    I have created a test page where you will see the following

    1) Layerslider – as an example that I would like to build with Color Section and Special Header to avoid the usage of Layerslider, as I would like to have an unique set per page.

    2) Color Section and Special Header
    I’m using a background image – center center with Parallax effect!
    The color section has an own css class: sn-sk-bgt
    The Special header has an own css class: sn-sk-header
    The standard Header text is now displayed in the middle of the Special Header. I would like to see that the Header is displayed at the bottom of the Color Section – with a background color – and full width – similar to what is achieved with the layer slider

    [av_section min_height='custom' min_height_px='250px' padding='default' shadow='no-shadow' bottom_border='border-extra-arrow-down' id='' color='alternate_color' custom_bg='' src='http://test2.scheer-test.nl/wp-content/uploads/2015/10/SAP_bridge-1310.jpg' attachment='' attachment_size='' attach='parallax' position='center center' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='#0070e8' overlay_pattern='' overlay_custom_pattern='' custom_class='sn-sk-bgt']
[av_heading tag='h1' padding='10' heading='Ontdek de kracht van S/4 HANA en SAP Cloud Oplossingen' color='meta-heading' style='blockquote modern-quote' custom_font='' size='' subheading_active='' subheading_size='15' custom_class='sn-sk-header'][/av_heading]
[/av_section]

    Could you support me in addressing the right DIV class and necessary CSS to get the heading as described above?

    December 22, 2015 at 3:17 am #556282
    Elliott

    Hey stedia!

    Go ahead and take a screenshot highlighting exactly what your trying to do so we can get a better idea.

    Cheers!
    Elliott

    December 22, 2015 at 2:32 pm #556583
    stedia

    Please find the attached link with the example https://www.dropbox.com/s/h4iddi8w61pbvpg/Example%20Header.png?dl=0

    December 23, 2015 at 3:49 am #556858
    Elliott

    Hi!

    The URL to the background image is giving me a 403 forbidden error. Perhaps you need to increase it’s permissions.

    Regards,
    Elliott

    December 23, 2015 at 9:50 am #556935
    stedia

    Stange – Here another try https://screencloud.net/v/3l4l

    December 24, 2015 at 12:25 am #557265
    Elliott

    Hi!

    Contact your hosting provider and ask them why your getting a 403 forbidden error on this image. (added to private content)

    Cheers!
    Elliott

    December 24, 2015 at 8:54 am #557386
    stedia

    Elliott,

    Apologize for the inconvenience – but page was copied/pasted from my test environment, that is locked for others.
    I have re assign the image and now you must be able to see the full picture!

    December 27, 2015 at 2:05 am #557515
    Elliott

    Hi!

    Add this to a codeblock element in the page content.

    <style type = "text/css">
#av_section_1 .entry-content-wrapper > div {
    position: absolute;
    bottom: 0px;
}
</style>

    Or add this to your custom CSS.

    #yourID .entry-content-wrapper > div {
    position: absolute;
    bottom: 0px;
}

    And give your color sections a custom ID named “yourID”.

    Regards,
    Elliott

    December 28, 2015 at 12:42 pm #557666
    stedia

    Elliot,

    Almost there …. The only thing that is missing is the fact that the background color is still not full width:

    I have added the following to my css

    /****** Style Enfold Color Section Banner *********/
#top .sn-cs-banner .entry-content-wrapper {
    position: absolute;
    bottom: 0px;
	background-color: yellow;
	width: 100%!important;
	text-align: center;
	opacity: 0.9;
}
#top .sn-cs-banner h1 {
	color: red
}

    Would it be possible to enlarge this .entry-content-wrapper full width for alle media?

    December 29, 2015 at 3:28 am #557964
    Elliott

    Hi!

    Add this.

    #av_section_1 > .container {
    padding: 0px !important;
    margin: 0px !important;
    width: 100% !important;
}

    Best regards,
    Elliott

    January 4, 2016 at 11:13 am #559094
    stedia

    I have applied the css – the banner is now starting at the left – but is still not full width!
    The av-special-heading remains 1310px width!

    https://www.dropbox.com/s/5hj7s4dcg4w07f4/Special%20Header%20banner.png?dl=0

    Any suggestions to make that div also full width for all display devices?

    January 4, 2016 at 10:16 pm #559530
    Andy

    Hey!

    try this code in Quick CSS field:

    #top .sn-cs-banner .entry-content-wrapper {
left: -9%;
width: 118%!important;
}

    and adjust as needed.

    Cheers!
    Andy

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.