私は小さな矢印を下に動かさなければなりませんでした、そしてそれは私がそれをした方法です。
1)ポップアップウィンドウを目的の位置に移動します。!importantステートメントを使用して、デフォルトのスタイルを上書きします。
.fb_edge_comment_widget {
top: -224px !important; left: -246px !important; height: 191px;
background: url(../img/arrow-down.gif) 0 100% no-repeat
}
このスタイルには、ポップアップウィンドウの一番下の行を置き換える新しい矢印画像も含まれています。これには、デフォルトで青(#283E6C)で、内側(#F2F2F2)が灰色の新しい下矢印が含まれています。を使用height
して、垂直位置を調整し、背景画像を下に移動できます。
画像は次のようになります
。
2)overflow: hidden
iframeをラップするスパンに適用します。手順3で適用することで、iframeの一部を切り取りmargin-top
、独自のスパンに置き換えることができます。
.fb_edge_comment_widget > span {
height: 184px !important; overflow: hidden; border-top: 1px solid #000;
}
手順3でデフォルトの境界線と矢印を切り取っているため、border-topを使用して独自の上部境界線を作成しています。
3)iframeを少し上に移動して、上部の境界線と矢印を切り取ります。
.fb_edge_comment_widget > span > iframe {
margin-top: -7px;
}
私の場合、結果は次のようになります。
