Side bar Icons for posts?

support
1

Is there any way to add a side bar icon for a post?
Similar to the Icons in the “For Dummies” books or indeed the Coding Horror Icon in the Code Complete book?

2

There’s not a way to do this by default, but I believe you could make something work on your site with some custom CSS.

We remove most HTML within posts, but we do whitelist data-theme attributes. For example you can add this HTML to a post:

<div data-theme-sidebar="left">

<!--- Add an image here -->

</div>

Then in your site’s custom CSS (admin > customize > theme) you could add styles to position the image as needed:

.topic-body .cooked {
   overflow: visible;
}

div[data-theme-sidebar="left"] {
   position: relative;
   img {
    position: absolute;
    margin-left: -55px;
    max-width: 45px;
    max-height: 45px;
   } 
}

This would take your image wrapped in the data-theme-sidebar div, and pull it into the left sidebar where avatars currently reside. This is simplified and untested, you’d likely need to account for additional cases (what happens within embedded replies are expanded, how does this work on mobile, etc…).

A full solution wouldn’t be complicated, but will take some time and testing and may have some limitations (the method above could overlap with avatars in some cases). You’d also want to be sure that a user couldn’t abuse it by adding super large images (that’s why I added max-width/max-height in the above example).

5 Likes
5

Worked a treat with a bit of experimentation!
margin-left = -100

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.