Okay
  Public Ticket #1050000
Divider between sidebar
Closed

Comments

  •  2
    Dfpt started the conversation
    February 5, 2017 at 11:45pm

    Hi there,

    Is it possible to add a divider between the post content and the side bar as per

    https://thenextweb.com/insider/2017/02/02/marketing-the-tnw-way-18-migrating-to-https/

    but this needn't show on mobile.


    Many thanks

  •  3,030
    Andrew replied
    February 6, 2017 at 9:13pm

    Hi there,

    I hope you are having an awesome day and thanks for contacting us regarding your query.

    This should be possible, however, I'll need a link to your site in order to write up some custom CSS that should work. 

    Kindly send that through so I may have a look for you.

    Looking forward to your reply,

    Cheers! 

  •  2
    Dfpt replied
    February 7, 2017 at 8:07pm

    Hey Andrew,

    Thanks for the update - my site is https://leeparker.co.uk


    Many thanks,

  •  3,030
    Andrew replied
    February 7, 2017 at 9:53pm

    Hi there,

    Thanks for your reply.

    You may use the following Custom CSS Code to accomplish this request. 

    /*Adds a border the left of the sidebar*/
.wpb_column[data-has-bg-color="true"]:before, .wpb_column[data-hover-bg^="#"]:before{
  border-left: solid 1px lightgrey;
}
/* Mobile responsive support to remove border on sidebar */  
@media (max-width:767px){ 
  .wpb_column[data-has-bg-color="true"]:before, .wpb_column[data-hover-bg^="#"]:before{
    border-left: 0 !important
}
}

    Please copy and paste this Custom CSS Code into the Page Specific Custom CSS Section in the WYSIWYG Editor of Salient Visual Composer as illustrated in the image attached or shown below. 

    page-specific-css-Visual-Composer.png 


    Please let me know if there are any more questions that I can answer for you.  

    Cheers!

  •  2
    Dfpt replied
    February 8, 2017 at 4:35pm

    Hey Andrew,


    Thanks for this - I want the line to appear next to all sidebars (via page template) is not possible via general css in Salient options? I tried adding this to the 'blog' page and it doesn't work.

  •  3,030
    Andrew replied
    February 9, 2017 at 12:36am

    Hi there,

    Thanks for contacting us regarding your query.

    Unfortunately, this would require specific page/sidebar CSS selectors as the page templates differ and also the naming conventions for the main content element and sidebar respectively.

    Would you like us to generate the CSS for this on the blog page as well?

    I look forward to your reply. 

    Cheers! 

  •  2
    Dfpt replied
    February 9, 2017 at 4:07pm

    Hey Andrew, 


    Yes sorry, I only really use the sidebar functionality on blog and article pages. :)

    Although, I have noticed that Visual Composer doesn't show anything when I amend the blog page template.

  •  3,030
    Andrew replied
    February 9, 2017 at 9:04pm

    Hi there,

    Thanks for your reply.

    Please use the following Custom CSS Code to implement this divider on the blog pages.

    /*Adds Divider To Blog Pages*/
.archive div#sidebar {
    border-left: solid 1px #c7c3c3;
    padding-left: 15px;
}

    Please let me know if there are any more questions that I can answer for you.  

    Cheers!

  •  2
    Dfpt replied
    February 9, 2017 at 9:18pm

    Hey Andrew,

    I've added this to the custom css via the Visual Composer on the Blog page, but it doesn't seem to show on the website... am I doing anything wrong? Is this related to the fact i've mentioned the visual composer doesn't allow me to add anything to the blog page, nor do my categories show their proper names instead they all inherit (blog) [raised in a separate ticket of mine]


    Kind regards

  •  3,030
    Andrew replied
    February 9, 2017 at 9:36pm

    Hi there,

    Thanks for your reply.

    May I ask you to add this to the global Custom CSS section within the Salient Theme Options by navigating to Appearance>General Settings>CSS/Script Related>Custom CSS Code from your WordPress Dashboard. 

    Please let me know if there are any more questions that I can answer for you.  

    Cheers!

  •  2
    Dfpt replied
    February 9, 2017 at 9:51pm

    Hey Andrew,

    That doesn't work either (see attached http://imgur.com/a/dz8IU). Here is the ticket i was referring to where my categories/taxonomies are somehow inheriting the main 'blog' page header

    https://themenectar.ticksy.com/ticket/1028492/



  •  2
    Dfpt replied
    February 13, 2017 at 3:09pm

    Hey Andrew,


    I got this to work via Salient General Settings, on both articles and archives by using the below code. Can you share the code to hide this on mobile though? 


    /* Mobile responsive support to remove border on sidebar */  
    @media (max-width:767px){ 
      .archive[data-has-bg-color="true"]:before, .archive[data-hover-bg^="#"]:before{
        border-left: 0 !important
    }
    }
    /* Mobile responsive support to remove border on sidebar */  
    @media (max-width:767px){ 
      .single-post[data-has-bg-color="true"]:before, .single-post[data-hover-bg^="#"]:before{
        border-left: 0 !important
    }
    }


  •  3,030
    Andrew replied
    February 13, 2017 at 5:35pm

    Hello there,

    Thank you for writing in once again,

    To remove the border on mobile, please add the following CSS

    /*removes the border between post content and sidebar on mobile*/
@media (max-width: 40em){
.single-post div#sidebar{
     border: none !important;
     padding: 0 !important;
     }
    }

    I hope this helps,

    Regards,

  •  2
    Dfpt replied
    February 13, 2017 at 7:22pm

    Perfect, that worked! 


    Thanks Andrew