Okay
  Public Ticket #1500922
Vertical seperator
Closed

Comments

  • Marloes started the conversation

    Hi,

    I would love to have a vertical seperator in my website on 2 different pages. At the shop page and at the blog page.

    I would like to have a seperator between the main page and the sidebar. In the same color and thickness as the normal seperator. How can this be done?

    With kind regards,

    Marloes de Jong

  •  1,221
    Qode replied

    Hi Marloes, 

    Please paste the following code into Qode Options -> General -> Custom CSS field and see if it helps: 

    /* blog page border */
    @media screen and (min-width: 769px) {
    .page-id-306 .container .container_inner .two_columns_75_25>.column2 {
        border-left: 1px solid #eaeaea;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    }
    /* shop page border */
    @media screen and (min-width: 769px) {
    .woocommerce.archive .content .container .container_inner .two_columns_25_75>.column2 {
        border-left: 1px solid #eaeaea;
        box-sizing: border-box;
    }
    }
    

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • Marloes replied

    You're the best. It worked out great!

  • Marloes replied

    Hi,

    As said yesterday it works out great, accept for the single blog page. We have tried to change the code into single blog also, but this isn't the sollution. Can you please help us out once more.

    Also the single blog post is shown verry high when we compre this with the other pages. This is the result of not showing my page title in the singleblog image (otherwise the title is shown twice).
    We have put content below header, but is there a way to place it at the same hight as the other pages.

    Examples:
    http://www.stichtingpoeh.nl/inspiratie/
    http://www.stichtingpoeh.nl/hoe-gebruik-flow-planners/



    Best,

    Marloes

  •  1,221
    Qode replied

    Hi Marloes, 

    Thank you for your feedback. 

    1) To add border on single posts please insert the following code into Qode Options -> General -> Custom CSS field: 

    /* single post border */
    @media screen and (min-width: 769px) {
    .single-post .container .container_inner .two_columns_66_33 > .column2 {
        border-left: 1px solid #eaeaea;
        box-sizing: border-box;
    }
    }
    

    2) To add extra space at the top, navigate to Qode Options -> Title -> use Margin After Title for Default Template option: 

    https://monosnap.com/file/Crmg4sLrbZEJJF5aZ0sxm1RunIyuZB

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • Marloes replied

    Unfortunatelly both options doesn't work.

    1.The single post code I have already tried (and once more), but this doesn't give me a separator on the single blogs.
    http://www.stichtingpoeh.nl/pre-sale-agenda-vertraagd/

    2. If I use this sollution all pages drop, but the problem is that only the single blog page is to high (because the page title is turned of on this page).

    You know an other sollution?

  •  1,221
    Qode replied

    Hi Marloes, 

    1) The CSS works if we test it via browser console - see the following screenshot please: 

    https://monosnap.com/file/EeBfaYlpIW2hmDkOTLeLxIiKcC7h6f

    If you find that the CSS does not work when you apply it, please send us login URL and temporary WP admin access in a PRIVATE REPLY. 

    2) In that case use the local Margin After Title option, in the page admin -> Qode Title and the setting will affect this page only: 

    https://monosnap.com/file/nYcVKullFeTHvNblmQ0qxdR00qqyPz

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • Marloes replied

    Hi,

    I think it had something to do with the cookies, cause now it does work.
    Only problem we are still facing is the separator in the category page. We can't seem to addept the code in a way it is also shown on the blog catagory page.

    For example: https://www.flowplanners.nl/category/flow-planners/

    How can we change the code so it does work out on all category pages?

    With kind regards,

    Marloes

  •  1,221
    Qode replied

    Hi Marloes, 

    We cannot access your website due to the maintenance mode, but we'll try to help: 

    https://monosnap.com/file/wL8eDeaq0SjOrVlQVxVhiPbajaqgWS

    Please add the following code into Qode Options -> General -> Custom CSS field and see if it helps: 

    /* category page border */
    @media screen and (min-width: 769px) {
    .archive.category .container .container_inner .two_columns_75_25>.column2 {
        border-left: 1px solid #eaeaea;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    }
    

    If this does not help, send us login URL and temporary WP admin in a PRIVATE REPLY. 

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  • Marloes replied

    Hi,

    3 weeks ago we have inserted the code to get a vertical seperator between mij blog and sidebar and between my shop and sidebar. This worked great, but al the sudden is doesn't work anymore. The code is still in the custom css and we can not see why this doesn't work anymore.

    This is the code we use:

    /* category border */
    @media screen and (min-width: 769px) {
    .page-id-62 .container .container_inner .two_columns_75_25>.column2 {
        border-left: 1px solid #eaeaea;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    }

    @media screen and (max-width: 480px) {
    .qode-instagram-feed.qode-col-3 li {
        width: 33.33%;

    }    
    }

    /* single post border */
    @media screen and (min-width: 769px) {
    .single-post .container .container_inner .two_columns_75_25 > .column2 {
        border-left: 1px solid #eaeaea;
        box-sizing: border-box;
    }
    }

    /* blog page border */
    @media screen and (min-width: 769px) {
    .page-id-306 .container .container_inner .two_columns_75_25>.column2 {
        border-left: 1px solid #eaeaea;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    }

    /* shop page border */
    @media screen and (min-width: 769px) {
    .woocommerce.archive .content .container .container_inner .two_columns_25_75>.column2 {
        border-left: 1px solid #eaeaea;
        box-sizing: border-box;
    }
    }


    With kind regards,

    Marloes de Jong


  •  1,221
    Qode replied

    Hi Marloes, 

    We found the error - a missing closing bracket in your custom CSS, which causes the code that follows not to work: 

    https://monosnap.com/file/v2brUTR4edT8Vkao0kIuYQd4v0wrCG

    Please add missing closing bracket like this and the border should appear: 

    https://monosnap.com/file/tPQqEzE3CXySnTHEBWLz2XkPGJFLiL

    After that check your pages. 

    To implement borders for blog archive pages: 

    https://www.flowplanners.nl/category/flow-planners/

    ...try using the following custom CSS: 

    /* blog page border */
    @media screen and (min-width: 769px) {
    .archive.category .container .container_inner .two_columns_75_25>.column2 {
        border-left: 1px solid #eaeaea;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    }
    

    Best regards, 

    Qode

    * The new and improved Online Bridge Documentation is live. Check it out now - http://bridge.qodeinteractive.com/

    * You can also check our articles with useful tips and suggestions

    Best Regards,

    Qode