Format Text and Image in Categories


(Jeffrey Keefer) #1

Is there a way to format the text that describes categories so it appears next to the image?

We have our home page set to Category View, and in our site http://forum.networkedlearning.net/categories we are using images for each category, though I want the text that describes it to be under the title, and not under the image (to save space) so it has more of the appearance of how this appears in the individual category page http://forum.networkedlearning.net/c/october2015-massiveopen

Any ideas if this can be done? Thank you!!


(Simon Cossar) #2

Try this as custom css:

.category-name {
  float-left;
}

.category-logo {
  clear: both;
}

That should work, but you’ll need to look at your other pages to make sure it isn’t causing any problems.


(Daniela) #3

@JeffreyKeefer what’s happened? The header is above the navigation menu when you choose Latest or Top rather than Category…


(Jeffrey Keefer) #4

That is interesting, @Trash. I have no idea what happened with that one . . .

Wonder how it can be adjusted?


(Jeffrey Keefer) #5

@Simon_Cossar Thanks (yet again!!) for your coding help, though (yet again!!) I am not sure where to put or try this. Can you let me know where? Thank you in advance.


(Simon Cossar) #6

Sure :smile:

  • from the hamburger drop-down menu select ‘admin’
  • on the admin page select ‘customize’
  • on the customize page select ‘CSS/HTML’
  • on the CSS/HTML page click the blue ‘new’ button

That should get you to this page:

It’s best to give your styles a name so you can remember what they do - enter the name in the text box that is above the orange ‘CSS’ button.

  • Copy and paste the styles into the editor.
  • check the ‘enabled’ check-box
  • click the blue ‘saved’ button
  • go back to your main forum page
  • refresh your browser

If you don’t see a change go back to the admin page and make sure that the enabled box is checked and the save button has been clicked.


(Simon Cossar) #7

It looks like that is the logo that you have selected on this page:

It’s too long to work well there. If you leave that box blank (click ‘reset’) your site’s title text (set in the first text input box on the same page) will be used instead.

You could use that image instead as a custom header to show overtop of the Discourse header. It’s just a few lines of css/html to do that.


(Sebastian) #8

I am really not so happy with this. Consider the current screenshot (no modifications)

Following the rest of the layout, “81 unread” should be standing next to the category title. There is lots of wasted space extending the category view vertically, by almost double. The text is not wrapping around the image.

Any ideas? I also think this should work a lot better out of the box…


(Jeff Atwood) #9

Sure that makes sense can you have a look @eviltrout?


(Sebastian) #10

Extended example


(Robin Ward) #11

Thanks for the suggestions. I’ve moved the text up and the unread stuff as suggested. It looks a lot nicer:


(Sebastian) #12

Thanks, Robin! Can you post a screenshot preview? I have no way to test this. Will this land in 1.5 I assume? Or is there a quick CSS fix I could apply to get close to this commit?


(Robin Ward) #13

Here’s the basic idea: I didn’t have unread when I took this screenshot but they appear next to “feature”.

It’ll be in our next beta and 1.5. Unfortunately it’s an HTML change so you can’t do it solely with CSS.


(Jeff Atwood) #14

Hmm, this was not the request. The request was to move only the unread indicator up.


(Robin Ward) #15

^^ that was part of the post. I did both!


(Sebastian) #16

Yea the indicator position was actually my least important gripe :wink: