Custom Share This & Related Posts

[Ziels’Opdracht]

Hi there,

I use a sticky widgetized sidebar in my posts/pages and when scrolling down the “share this, related posts and comments” overlaps the (1/6th) area when scrolling down.

I would like to call the “Share This”, “Related Posts” and “Comments” into my post/page templates to better fit the design (1/6 = widgetized sidebar + 5/6 content).  Either shortcodes or calling the elements in such a way that it allows me to use it in Visual Composer (like raw js or raw html).

Hope this is possible!

Kind regards,

Isidore

 

[Ziels’Opdracht]

I realized I could also just change the padding like I did with the 1/6 + 5/6 template itself; as the 5/6th had a 50px padding on the left and right but then I would need to know where to set the padding for the “Share This”, “Related Posts” and “Comments” and have a transparency set to those elements to match the design.

I would like to have the best solution possible 🙂

[Laura]

Hello, share this padding and transparency code:

COPY CODE

.share-links {
    padding: 100px;
    background: transparent !important;
}

Related articles:

COPY CODE

.related-wrap .hr-title.hr-long {
    padding: 100px;
    background: transparent !important;
}

Comments:

COPY CODE

#comments .hr-title.hr-long {
    padding: 100px;
    background: transparent !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Ziels’Opdracht]

Hi @Laura

Thank you for the reply and code. However 🙁

I inserted the code in quick css within the theme options and it doesn’t seem to change. No response to transparency nor to the padding px size for share this/ related articles. The comments does work. Tried to change the css into:

COPY CODE

#share-links {
    padding: 200px;
    background: transparent !important;
}
#related-wrap .hr-title.hr-long {
    padding: 200px;
    background: transparent !important;
}

#comments .hr-title.hr-long {
    padding: 150px;
    background: transparent !important;
}

But that didn’t solve the problem either. Did I misplace the code in the first place or is it for other reasons not working properly??

Appreciate the help!

[Ziels’Opdracht]

I would also need only padding on the left and right side.. it seems to be padding the whole area :s

[Laura]

Hello, try this

COPY CODE

#share-links {
    padding-left: 200px;
    padding-right: 200px;
    background: transparent !important;
}
#related-wrap .hr-title.hr-long {
    padding-left: 200px;
    padding-right: 200px;
    background: transparent !important;
}

#comments .hr-title.hr-long {
    padding-left: 150px;
    padding-right: 150px;
    background: transparent !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Ziels’Opdracht]

Hi @Laura,

Again thank you for helping out!

I tried it but the Quick CSS in the theme options doesn’t seem to respond to the padding option nor to the transparency. I have tested to see if there are conflicting plugins, but non.

Is there a way to:
1) Create a function.php (in child-theme) code or;

2) call the theme-given side-menu as fixed/sticky in the same way as shown in the post where i’m now currently using the widgetized sidebar through visual composer in the post/page: https://thecurious.rehab/try-out-post/ and https://thecurious.rehab/landing-2/

Perhaps having the side menu open + sticky would be an easier way of working for now. However then I face the following issue:
The design is to not have main menu or top bar, the reason is that it conflicts with the transparent png logo in sticky/transparent/title/breadcrumbs overlapping in the layout.

The sidebar doesn’t appear opened by itself (tried various settings) and no way to call it other then through a menu with class=open-sidebar. I don’t know how to call for this class through css or place an icon in all the pages/posts to call for the class attribute.

Problem eventually is that I need to have several different sidebars called into different pages and I’m not sure if the side menu has that flexibel.

If you or anyone else has “best practice” ideas and other css ideas, I would love to receive your help!

Isidore

[Laura]

Hello, can you share admin credentials so i can check it out?
So you want to have the side menu always open and sticky? Let me know if i understood it 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Ziels’Opdracht]

Hi @laura

Sorry for the belated reply!

I have decided to use Kleo in another project where the above request is unnecessary.

Thank you for helping in trying to find the right solution of this request!

Isidore

[Laura]

Hello, no problem, let me know if you need anything 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Saskia]

Hello,

Thank you for your theme I love it. I use it here: http://www.dutchcyclinginlondon.com

I can’t find the location of the template in which php template the share links part appears (see for instance http://www.dutchcyclinginlondon.com/discover at the bottom)

Apparently it is not in ‘post-social-share’ because when I modify this, it doesn’t change anything.

Could you please indicate me where it is? Could you also let me know what the ‘post-social-share’ php template refers to?

I would like to change ‘Share this’ to ‘Like or share this’.

Thank you very much

Kind regards,
Saskia

[Laura]

Hello, there is no need to change the file, you can use Loco Translate plugin to change theme strings 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts