›
Before you ask please READ THIS

Template Full Width for use Visual Composer

diramosdiramos
edited January 2015 in Hypershot Posts: 6
Hi, I wanted to make a request, I would like to use in a page visual composer. I need to have a page full width. Is there a way to do what perhaps creating a page template for use full width visual composer.

Thank you for your response and support that you give me.

Comments

  • AirAir
    Posts: 10,970
    Hello :-)

    If you want full width on every page you can just use such custom CSS: 
    #content .inside {
        width: 100%;
    }
    You can also target only specific pages, by adding this page ID in your custom CSS, like this: 
    body.page-id-251 #content .inside {
        width: 100%;
    }
    If that is not good for you, then we can copy default page template, and add same custom CSS for it.

    With kind regards.
  • diramosdiramos
    Posts: 6
    Thanks for the answer!

    One last question, how do I delete the info-bar of a specidica page? I would not want to see the title and I do not want any space between the page and the menu above.


    Thank You
  • AirAir
    Posts: 10,970
    Use same trick with page id, but for other element: 
    body.page-id-251 .info-bar{
        display: none;
    }
    With kind regards.
  • diramosdiramos
    Posts: 6
    Hi, if possible I would like to make a request, as I wrote before the need to use the full width of the page, with the passage of time I stepped up the use of these pages and I would need a page template for this use, unfortunately I do not know create this template, can you help me? for the moment I'm using the css as I have suggested above. Thanks in any case, if there is and can help me or even if you can not help me. Thanks to the continued support that you give to us all buyers.
  • AirAir
    Posts: 10,970
    So you would like to get same thing as you achieved with this custom CSS, but instead of writing CSS for each page you would rather have template to choose, right?

    I am asking cause I am not sure what issue you are facing with current solution :-)

    If this is exactly as I wrote, then I can prepare needed things for you, it should be easy.

    Just answer me before:-)

    With regards.
  • diramosdiramos
    Posts: 6
    Thanks for the reply.

    (So you would like to get same thing as you achieved with this custom CSS, but instead of writing CSS for each page you would rather have template to choose, right?)

    Yes, it is as you described.

    (If this is exactly as I wrote, then I can prepare needed things for you, it should be easy.)

    Thanks so much for the support and for this help.

    I'm really glad your help. :-)

    Thank You!

  • AirAir
    Posts: 10,970
    So instead of previous custom CSS add this one: 

    body.page-template-template_full-php .info-bar{
        display: none;
    }
    body.page-template-template_full-php #content .inside {
        width: 100%;
    }
    Next unpack file from attached ZIP and upload to theme directory. If you use child theme, then you can upload it there).

    Now in pages you can select template Full width for diramos.

    DONE:-)

    Bonus info:

    File that I created is copy of page.php and it only have different beginning of file where I have added Template Name: Full width for diramos. You can check this in editor :-)

    And CSS that you have to add have name of this new file, that is added to <body> when template is used(Wordpress is doing this automatic).

    With regards.
    zip
    zip
    template_full.zip
    754B
  • mprotwmprotw
    edited October 2015 Posts: 13
    Hello,

    By my side, I downloaded your PHP file, and added your latest CSS code, and everything seems to work well.

    However, I am using Divi Builder Plugin instead of Visual Composer.

    As you can see in the screenshot, I created a fullwidth section with a background color that contains the title "Contact", on Contact page.

    As the result shows, margins stills appear around the Divi fullwidth section. Is that possible to remove them? And also the bottom grey line?

    I have checked all the options of the Divi fullwidth module, as I set its margin values to 0 px for top and bottom.


    Thanks for your kind help.
    Post edited by mprotw on
  • AirAir
    Posts: 10,970
    Hello:-)

    Custom CSS: 

    /* border */
    body.page article, body.single article {
        box-shadow: none;
    }

    /* space around row */
    body.page-template-template_full-php article{
        padding: 0;
    }
    Should help :-)

    With kind regards.
  • mprotwmprotw
    Posts: 13
    Fantastic! Thank you, thank you!
    Have a great day and best regards!
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Register

Quick Links

Categories

In this Discussion