frold
1
Im looking for users who have used the " Embedding a list of Discourse Topics in another site"
And the style and will share the CSS they are using to change the default style.
At the moment I have only tested the list. But would like to change the style - I see this a very powerfull function
Best Regards,
3 Likes
frold
2
Really? No one is using the embedding feature and have made a custom style?
If so, feel free to share in this thread.
1 Like
jord8on
(Jordan)
3
I would love to see some examples of this, as well!
I’ve done a bit of tinkering, and added a search bar to the top of the list of topics. So my embed looks like this:
Code for the search form, styling, and topics list:
Summary
<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="Search this forum" aria-label="Search this forum" type="text" id="q" name="q" value="">
<button type="submit"><i class="fa fa-search"></i></button>
</form> </div>
To get the box layout, instead of grid
I used flex
in the Discourse Embedded CSS.
Summary
.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);
}
5 Likes
@adamgpope If I understand this correctly, what you’ve shown here (search bar, topics etc…) is embedded in an external site? If so, that’s amazing!