如何设置从第三方导入的内置注释框的样式？

Question

I am trying to use a built-in comment box which I imported from another website. I just copied and pasted the code (from there) into my own website (actually in my .PHP file).

Now it works fine. But I am not happy with the size and styling of it. I want to resize the box and customize it more so that it looks nice in my site. If you look at the source code, you see that applying style on it is bit hard, since it's directly imported.

Ok, so particularly, I want to decrease the width of it by applying margin-left and margin-right property in CSS. I tried but failed. How could it be possible then?

.PHP:

    <!-- begin htmlcommentbox.com -->
 <div id="HCB_comment_box"><a href="http://www.htmlcommentbox.com">Widget</a> is loading comments...</div>
 <link rel="stylesheet" type="text/css" href="//www.htmlcommentbox.com/static/skins/shady/skin.css" />
 <script type="text/javascript" id="hcb"> /*<!--*/ if(!window.hcb_user){hcb_user={};} (function(){var s=document.createElement("script"), l=(""+window.location).replace(/'/g,"%27") || hcb_user.PAGE, h="//www.htmlcommentbox.com";s.setAttribute("type","text/javascript");s.setAttribute("src", h+"/jread?page="+encodeURIComponent(l).replace("+","%2B")+"&mod=%241%24wq1rdBcg%240AZD2uQKdE.%2FVMQ.EuI3B0"+"&opts=17276&num=20");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); hcb_user.submit="";/*-->*/ </script>
<!-- end htmlcommentbox.com -->

.CSS:

    #HCB_comment_box{
margin-left:98px;
margin-right:98px;
}

Answer 1

Im not very sure how the js is loading the textbox but you can try these:

1- Move the code below in between the tags:

<link rel="stylesheet" type="text/css" href="//www.htmlcommentbox.com/static/skins/shady/skin.css" />

2- Now you can style inline (even though it is not recommended, only use when necessary):

 <div id="HCB_comment_box" style='margin-left:98px !important;margin-right:98px !important;'><a href="http://www.htmlcommentbox.com">Widget</a> is loading comments...</div>

3- But am guessing you are trying to center the div so i suggest this rather:

<div id="HCB_comment_box" style='margin:0px auto !important;'><a href="http://www.htmlcommentbox.com">Widget</a> is loading comments...</div>

The "!important" is to force or make sure these rules are applied.