bbpressのカスタマイズ

###前提・実現したいこと
topicのコメント欄にて、
相手の返信＞左に表示
自分の投稿＞右に表示
参考URL
http://hapisupu.com/2015/12/wordpress-plugin-speech-bubble/
の様にしたいです。

WPにbbpressをプラグインして、
サイトを構築していて、
ログインをしなくてもコメントに投稿できる状態です。

###発生している問題・エラーメッセージ
問題としては、
そもそもどのファイルをいじったらいいのかわからない。
相手の返信と自分の投稿を区別することが実現可能なのか。

行動規範の内容に同意します

回答1件

ベストアンサー

カスタマイズの「追加CSS」でCSSを書き換えればある程度できるようです。

bbpressの設定で違うかもしれませんが、誰でも投稿できる状態だと、
自分にcss user-id-1その他の方にcss user-id-0のクラスがつくようです。

css
1#bbpress-forums .user-id-1 div.bbp-reply-author {
2	float: right;
3	text-align: center;
4	width: 115px;
5}
6#bbpress-forums .user-id-1 div.bbp-reply-author img.avatar {
7	border: none;
8	max-width: 80px;
9	padding: 0;
10	margin: 12px auto 0 auto;
11	float: none;
12}
13#bbpress-forums .user-id-1 div.bbp-reply-author a.bbp-author-name {
14	clear: right;
15	display: block;
16}
17#bbpress-forums .user-id-1 div.bbp-reply-content {
18	margin-right: 130px;
19	margin-left: 0;
20	padding: 12px 0 12px 12px;
21	text-align: right;
22}
23#bbpress-forums div.bbp-reply-content p {
24	position: relative;
25	padding: 5px 10px;
26	z-index: 2;
27	background-color: #FFF0F8;
28	border-style: solid;
29	border-width: 2px;
30	border-color: #FF0099;
31	border-radius: 10px;
32	color: #FF0099;
33}
34#bbpress-forums .user-id-0 div.bbp-reply-content p:before {
35	position: absolute;
36	top: 10px;
37	left: -17px;
38	height: 10px;
39	width:  10px;
40	background-color: #FFF0F8;
41	border:solid 2px #FF0099;
42	border-radius: 8px;
43	color: #333333;
44	content: "";    
45}
46#bbpress-forums .user-id-0 div.bbp-reply-content p:after {
47	position: absolute;
48	top: 20px;
49	left: -27px;
50	height: 6px;
51	width:  6px;
52	background-color: #FFF0F8;
53	border:solid 2px #FF0099;
54	border-radius: 5px;
55	color: #333333;
56	content: "";
57}
58#bbpress-forums .user-id-1 div.bbp-reply-content p:before {
59	position: absolute;
60	top: 24px;
61	right: -17px;
62	height: 10px;
63	width:  10px;
64	background-color: #FFF0F8;
65	border: solid 2px #FF0099;
66	border-radius: 8px;
67	content: "";
68}
69#bbpress-forums .user-id-1 div.bbp-reply-content p:before {
70	position: absolute;
71	top: 20px;
72	right: -27px;
73	height: 6px;
74	width:  6px;
75	background-color: #FFF0F8;
76	border: solid 2px #FF0099;
77	border-radius: 5px;
78	content: "";
79}
80```デベロッパーツールで変えたいところのCSSを確認すれば、
81もっと変えられるのではないでしょうか。