0
3

[–] DXGypsy [S] 0 points 3 points (+3|-0) ago 

Just a heads up, but this CSS code is no longer valid as voat changed over the last year. Sorry for any confusion.

0
2

[–] CarlosShyamalan 0 points 2 points (+2|-0) ago 

Hey thanks for making this tutorial. How would I go about turning the picture into a link?

0
2

[–] Fred-Stiller-OnAWire 0 points 2 points (+2|-0) ago 

Thanks for this, I've made a small tweak which displays a double size image on retina displays such as the iPad Air. You can see this in action on /v/DepecheMode if you have a 2x display.

Here is the code I'm using (Remove the dot before the "at" symbol)...

/*=====Add Image to Sidebar=====*/

div.side div.spacer:nth-of-type(1) 

{
padding:280px 0 0 !important; /*===Change "280px" to the height of your image===*/
background:url(http://i.imgur.com/2EGRGk5.png) top center no-repeat;
margin-top:10px; 
}

.@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {

div.side div.spacer:nth-of-type(1) 

{
padding:280px 0 0 !important; /*===Change "280px" to the height of your image===*/
background:url(http://i.imgur.com/QcieTPi.png) top center no-repeat;
background-size: 280px 280px;
margin-top:10px; 
}

}

.form-horizontal {margin-top:30px;}

[–] [deleted] 0 points 0 points (+0|-0) ago  (edited ago)

[Deleted]

0
0

[–] Fred-Stiller-OnAWire 0 points 0 points (+0|-0) ago 

I'm using different code now but your subverse looks fine on Safari and Firefox. I think what you're describing is normal behaviour of the responsive design of Voat which hides on the sidebar on small displays. The sidebar becomes visible when you click on the hamburger icon (3 lines on the left) and I can still see the sidebar image like normal.

0
1

[–] 2098078 0 points 1 points (+1|-0) ago  (edited ago)

@DXGypsy - Can you tell me what I did wrong with my coding. I always seem to go something wrong with the imgur image. /v/fibromyalgia

This was the code but I did try to make it look like the one you have in your example.
[img]http://i.imgur.com/gROwLtA.jpg[/img]

This is the image. https://lemoncookie24.imgur.com/all/

This is the code I put in the CSS

/=====Add Image to Sidebar=====/

div.side div.spacer:nth-of-type(1)

{

padding:300px 0 0 !important; /===Change "300px" to the height of your image===/

background:url([http://i.imgur.com/gROwLtA.jpg] (http://i.imgur.com/gROwLtA.jpg)) top center no-repeat;

margin-top:10px;

}

0
1

[–] RedSocks157 0 points 1 points (+1|-0) ago 

Im using this code and it just creates a white box in my side, even if I copy/paste it directly

0
0

[–] Xyphien 0 points 0 points (+0|-0) ago 

This does not seem to work anymore. I've tried it out, and it gives me a blank area where an image should display, however, it does not display anything.

0
0

[–] crappygame 0 points 0 points (+0|-0) ago  (edited ago)

Sorry to bother.

I used this code

/=====Add Image to Sidebar=====/

div.side div.spacer:nth-of-type(1)

{

padding:300px 0 0 !important; /===Change "300px" to the height of your image===/

background:url(http://imgur.com/Ongdw4T) top center no-repeat;

margin-top:10px;

}

I don't know if I'm doing something wrong, but on my right sidebar /v/nogamenolife its showing the space, but not the image. Did I do something wrong? I'm just a bit confused. This is the first time using CSS. And I was able to figure out any other mistakes I made, but I can't here. I really don't know what I'm doing wrong. If you can help, I'd greatly appreciate it! <3

Edit: never mind.. after looking at it a long time I realized my image wasn't .jpg..lol I'm stupid sometimes xD but yay! Fixed it. Even added .light and .dark and have a different one for each. xD

0
0

[–] Bkow 0 points 0 points (+0|-0) ago 

What exactly do you mean .light and .dark?

[–] [deleted] 0 points 1 points (+1|-0) ago 

[Deleted]

[–] [deleted] 0 points 0 points (+0|-0) ago 

[Deleted]

0
0

[–] Fred-Stiller-OnAWire 0 points 0 points (+0|-0) ago 

This is what I'm using in the custom stylesheet for /v/depechemode which is slightly different to the code used by the OP and has support for retina displays (2x artwork will be needed for that, so 560x560).

Remove the dot before the "at" symbol...

/* Sidebar image
-------------------------------------------------------------------------------- */
.side .md:nth-of-type(1)
{
background: url(https://i.imgur.com/2EGRGk5.png) top center no-repeat;
padding: 280px 0 0;
margin: 10px 0 0;
}

/* Retina display support
-------------------------------------------------------------------------------- */
.@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {

.side .md:nth-of-type(1)
{
background: url(https://i.imgur.com/QcieTPi.png) top center no-repeat;
background-size: 280px 280px;
padding: 280px 0 0;
margin: 10px 0 0;
}

}
load more comments ▼ (1 remaining)