Banner topic formatting


#1

I have been trying to create a banner for my discourse site. I am not looking for anything terribly complex but even so all my attempts have been failures. What I would like is a site logo to be displayed to the left with the text to the right of it, similar to this site (not my site, I also posted this site asking about the category view)

I can get the logo to display, and I can even get some text to the right of it, however when I add a list of a header it places them below the image rather than floating the text. I am using a custom theme (Material Design) and am not sure if there is something in that layout that is breaking things, or if it is my code.

Any help, prefereable step by step instructions, would be greatly appreciated!

Thanks
N


#2

The site you linked to isn’t actually using a banner topic. They have added a small amount of custom HTML to their theme and styled it with CSS. There are instructions and some examples of how to build a similar banner here:

If you would rather use an actual banner topic as your solution, that can be done too.

In either case, it would be helpful if you provided a link to your site with what you have so far if it is a public site, or at least to post a screenshot of what it looks like at the moment to provide a better idea of how it’s structured.


#3

Currently I have no banner. I tried to create a banner topic that was similar in look to the one linked above. Essentially, I just wanted to have a medium sized logo on the left, and then to the right of it a list with notices. While I was able to get the logo to display, and I could even get some text to float to the right of it, it all fell apart anytime I added anything other than span. Adding most anything else (including a list) caused the text to drop beneath the image and justify all the way to the left.

I am not sure that a screen shot adds any value since I don’t have a banner yet (it is a private site, sorry). I was hoping someone might have an example of a topic in which they had a logo with floating text. I am currently using the Material Theme theme. When I tried to edit any the html or css I got an error stating that the current theme was remote and that any changes would be lost on restart, which would not be ideal.

If it is not possible to do what I want in a banner topic I am not averse to making changes. But, I would like to retain, or at least get a copy of my current theme.

Thanks for all your assistance!
-N


#4

This can be overcome by creating and adding a theme component to your main theme. You won’t need to alter anything in the default Material Design theme.

While the UI has changed a little bit since the screenshots in the topic below, the basic idea is the same. Take a look:

How close is this to your goal? If it’s close, I can post the additions you would need to make:


(Christoph) #5

I have been struggling with this too. I got it to work using this code:

<div data-theme-image="left">
<img class="floatl" src="/uploads/default/original/1X/3147abc.gif" width="260">
</div>

Plus a theme component that defines data-theme-image (can’t copy it because I’m on mobile and copying from the theme editor on mobile doesn’t seem to work).

See here for more: