“다른 사이트에 Discourse 주제 목록 임베딩” 기능을 사용해 본 사용자를 찾고 있습니다.
해당 기능의 스타일을 변경하기 위해 현재 사용 중인 CSS를 공유해 주시면 감사하겠습니다.
현재까지 목록만 테스트해 보았습니다. 스타일을 변경해 보고 싶은데, 이 기능은 매우 강력하다고 생각합니다. 
감사합니다,
정말요? 임베딩 기능을 사용하면서 커스텀 스타일을 만든 사람이 없나요?
그렇다면 이 스레드에 자유롭게 공유해 주세요.
저도 이 부분에 대한 예시를 몇 가지 보고 싶습니다!
조금 만져 보다가, 토픽 목록 상단에 검색 바를 추가했습니다. 그래서 내 임베드는 다음과 같습니다:
검색 폼, 스타일링, 토픽 목록에 대한 코드:
요약
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://adams-discourse.com/javascripts/embed-topics.js"></script>
<style>
* {
box-sizing: border-box;
}
#form {
position:absolute;
left: 22px;
top:5px;
width:55%;
}
form.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
form.example button {
float: left;
width: 19%;
padding: 10px;
background:#1e825b;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.example button:hover {
background: green;
}
form.example::after {
content: "";
clear: both;
display: table;
}
d-topics-list iframe{
position:absolute;
width: 100%!important;
top:-10px;
}
</style>
</head>
<body>
<d-topics-list discourse-url="https://adams-discourse.com" template="complete" category="9" per-page="6" allow-create="true" ></d-topics-list>
<div id="form">
<form class="example" action="https://adams-discourse.com/search?q=" target="_blank">
<input placeholder="이 포럼 검색" aria-label="이 포럼 검색" type="text" id="q" name="q" value="">
<button type="submit"><i class="fa fa-search"></i></button>
</form> </div>
박스 레이아웃을 얻기 위해, Discourse 임베디드 CSS에서 grid 대신 flex를 사용했습니다.
요약
.topics-list {
display: inline-flex;
flex-wrap: wrap;
padding: 8px 8px 0 8px;
margin: 3px 3px 0 0;
.topic-list-item .main-link {
border: 1px solid gray;
margin: 5px;
width: 250px;
height: 90px;
}
.topic-column-wrapper {
flex-direction: column-reverse;
.topic-column.details-column {
width: 100%;
}
.topic-created-at {
padding-left: 0!important;
font-size:13px;
}
.topic-column.featured-image-column .topic-featured-image img {
display:none;
}
}
}
.new-topic-btn {
float: left;
margin: 16px 0 0 58%;
height: 40.5px;;
background:#1e825b;
}
.new-topic-btn:hover {
background: rgb(73, 130, 5);
}
@adamgpope 제가 제대로 이해하고 있다면, 여기서 보여주신 것들(검색창, 주제 등…)은 외부 사이트에 임베드된 건가요? 그렇다면 정말 놀랍네요!
