Category background images


(NomNuggetNom ) #1

Although this seems to be a rarely used feature, you can set a category’s background to an image. Unfortunately this results in an icky situation where you realize nothing is white in front of the background.

If you use enough CSS tricks, you can get it looking okay but not near as good as normal Discourse.

Now, I’m no CSS expert - perhaps there is a better way to do this that I’m not able to come up with. I also tried just adding a solid white strip to the background image, but it doesn’t play nicely with scaling. Either way, it would be nice if there was a way to add a background image but keep the middle white area - does anybody know how I could do this? Thanks.


Custom CSS classes
(Joseph Pullan) #2

why don’t you just use a faded out white background like the one on http://fantasia.org.uk ?


(NomNuggetNom ) #3

Dark portions of the background make some text hard to read:


(Joseph Pullan) #4

yeah do the same for them as well. That’s waht i did, any way


(NomNuggetNom ) #5

Okay, so this is where I’m at now:

Any way to get rid of these blank spaces?


(Joseph Pullan) #6

do you want the background to be faded or not?


(NomNuggetNom ) #7

In my opinion, it looks better when it’s solid white.


(Joseph Pullan) #8

okay! what CSS have you put in so far?


(NomNuggetNom ) #9
body {
  background-attachment: fixed;
  background-image: url(http://www.minecraftpvp.com/images/mazerunner_background.jpg);
  background-color: #ffffff;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100%;
  min-height:100%;
}

div.container.body-page, 
div#main-outlet > div.container,
div.list-controls > div.container, 
.topic-area,
div#topic-title > div.container {
    background: none repeat scroll 0% 0% rgba(255,255,255,1.0);
}

.topic-area {
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: 5px 0px 10px -3px rgba(0,0,0,0.2), -5px 0px 10px -3px rgba(0,0,0,0.2);
}

(NomNuggetNom ) #10

I got it on the category listing using this:

div#main-outlet {
    padding-top: 50px;
}

div.list-controls > div.container {
    padding-top: 35px;
}

EDIT:
Close to getting it on the topic too.

div#topic-title > div.container {
    padding-top: 20px;
}

#topic-title {
    padding-top: 10px;
}

EDIT2:
Bingo!


(Joseph Pullan) #11

for the category listing, try changing the class name to .nav-pills

and the Topic to #topic-title h1 a This might work!

EDIT: oh hang, i think i may have just been trying to do the opposite thing you wanted above! Good Work! What did it?

Btw can you give us a link to your website? it looks awesome!


(NomNuggetNom ) #12

Going to see if I can spruce up some of the spacing now. Thanks for your help so far :smiley:


(Joseph Pullan) #13

well, I didn’t do much! but thanks anyway! Edit: @NomNuggetNom there dosn’t seem to be a sign up button…


(NomNuggetNom ) #14

It’s a Minecraft server, you create an account in-game. If you want the server details, I can PM them to you.


(Joseph Pullan) #15

oh right i get it, and this is like the community forum?


(NomNuggetNom ) #16

Yup, exactly :).


(Filip) #17

this is where i spend about 5 hours a day, no joke.

Unlike your forum, which when I made an account just asked for the username you wanted and e-mail, the forum for McPvP requires you to join the server and use /createaccount to create an McPvP account. From this, you create a forum account.

The reason we use this is because users can’t just call themselves whatever they want, or even take someone else’s username. Instead, they are on the forum as their in-game name.

I would use the terms “Open ID” and “Closed ID”, but I have no idea how to use them correctly in a sentence D:


(Jonathan) #19

Can confirm.


(NomNuggetNom ) #20

I found a better solution. @FezodgeIII Maybe this will be useful to you too.

html {
    height: 100%;
}

body {
    min-height: 100%;
}

// A solid white background column on every page! Woo!
body:before {
    display: inline-block;
    position: fixed;
    left: 50%;
    right: 0;
    width: 1000px;
    transform: translate(-50%, 0);
    height: inherit;
    background-color: white;
    content: " ";
}

Basically this adds an empty white background behind every page. Pretty sweet. I’m working on adjusting it to match the @media tags right now.


(Kane York) #21

I seem to remember height on html and body being problematic for infinite scrolling. Does it work without that?

Also, try this:

background-color: rgba(white, 0.2);