What's the code for side bar

Hi I 've added some customized menu and links to sidebar,
Can you please let me know the default code for styling the default sidebar (for the segregation line and gap) , so i can put into my code to make it consistent

Hi Dora,

The inconsistency that you are experiencing is because of the code that you added. For the second widget, you used p tag which as a default bottom margin.
And for the first one you just added the a tags and then used br tag to go to the next line.
Both of those methods are not standard.
I suggest that you change your HTML code and use the one below:

<ul style="list-style: none; margin-left: 0;">
	<li>
		<a href="https://dzmarketplace.com">找到最适合您的美国本土服务商,了解最新的生活商务服务产品</a>
	</li>
	<li>
		<a href="https://www.dzmarketplace.com/zh/listings/929749-hao-hua-bao-ji-niu-yue-pin-ji-zhi-da-zhong-guo">豪华包机纽约拼机直达中国,广州,深圳,厦门</a>
	</li>
	<li>
		<a href="https://www.dzmarketplace.com/zh/listings/929670-da-xue-xue-zhu-xie-zuo-ke-cheng">大学学术写作哥伦比亚大学,纽约大学,牛津大学写作课程教授以及讲师亲自一对一或小班授课。</a>
	</li>
	<li>
		<a href="https://www.dzmarketplace.com/zh/listings/912892-2020bao-shi-jie-taycangou-zhi-fu-wu-xian-niu-yue-di-qu">2020保时捷Taycan购置服务(限纽约地区)</a>
	</li>
</ul>

Click here for more information on how to use and style unordered lists.

You can use the code above as a starting point for your other custom listing codes throughout your website.

Thank you.

Thank you very much,

I’ve changed the code, now how can I add the styling, like the grey line between each listings?

Hi Dora,

The code generated by that widget is different as it is not a text widget. This is a customization matter and outside of our support scope. We will do our best to show you how to add the CSS code but the actual implementation will be on your shoulders.

Please kindly add the CSS code below to X > Theme Options > CSS:

.x-sidebar .widget_text ul li {
    border-top: 1px solid rgba(0,0,0,0.085);
    padding-top: 8px;
    padding-bottom: 8px;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.