What are /r/csshelp's favorite Products & Services?

From 3.5 billion Reddit comments

No, I did it all myself, here's how.

First get all the images you want to cycle.

Using Photoshop or Gimp resize them all to have matching dimensions.

Give them all the reddit blue background to prevent overlap.

Download this. This is the apng maker

Put them in the order you want

Save

Upload to your sub where you want it, for me I wanted it as the logo, but you could theoretically do it as a background or banner.

Like this? https://codepen.io/BradonGarley/pen/qoJLPX

You needed to add the flex class to the cards, then change the flex direction using the flex-col class, then finally distribute the space using the justify-between class.

You're welcome! I used that site a lot as I was getting started with CSS and HTML.

Another good site to just goof off and test things is https://codepen.io/pen/ It lets you try out ideas quickly by building out your HTML and CSS and giving you instant feedback on what's happening.

If any images were deleted then the revert button won't work until they're reuploaded

Edit: There's a cached copy on archive.org, you guys could download the images from there using inspect element and restore the css

https://web.archive.org/web/20140804044157/http://www.reddit.com/r/treeofsavior/

You can try and get the GPU to do more of the heavy lifting for IE/Edge by using rotateZ() for Z-axis rotations. This smooths out most of the animation stutters, but this is simply a rendering choice by IE/Edge to be nitpicky regarding resources.

CodePen

I'd take the HTML & CSS track on Codeacademy here. It'll show you the basics, and while the HTML is not relevant to the CSS only styling of reddit, it's still good to know. After you've got some basics, try things out on your own (don't forget Inspect Element for Chrome) and then try and come for help here.

I found the issue and got it working. Browsers don't render all the same font file types, and Chrome wasn't rendering TTF. I went to https://www.fontsquirrel.com/tools/webfont-generator and generated the woff and woff2 files from their free generator. I renamed them to match the naming standard you had (After-Shock.woff, After-Shock.woff2), and put them in the same directory (at the top level).I updated the @font-face properties to this:

@font-face {font-family: "After-Shok";font-weight: normal;font-style: normal;src: url("After-Shok.ttf") format("ttf"),url("After-Shok.woff2") format('woff2'),url("After-Shok.woff") format('woff');}

Edit: Copy/paste error in code from me

If you want the user to input an answer you need to take the .value property of a <textarea> element.

If you inspect the comment box you write comments on reddit you'll notice it is a textarea element.

The textarea element should be a child of a form element.

I wrote a demo for you here:

https://codepen.io/Aquazi/pen/mxGvyN?editors=1111

Any kind of non-standard CSS outside of the CSS2 specification is disabled, and then a few other things for security reasons (base64 encoded data URIs, for example).

The issue has come up before, and the admins aren't necessarily against implementing a CSS3 parser for the mod section, it's just that they have no time. They do welcome anyone to write a patch, though, should they please.

TL;DR: no, use images -- sorry!

You need woff type font. Convert here https://www.fontsquirrel.com/tools/webfont-generator Use ../ in the url to go down a folder

font-family:'SF'; url('../fonts/fontname.woff') format('woff')

> this image

Which image?

You can make your gradients with this site and copy them into your stylesheet.

All you need to remove are the -webkit-gradient and filter lines, eg if you got this

background: #1e5799; background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -o-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -ms-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );

then you only use

background: #1e5799; background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -o-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -ms-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);

To apply the gradient to the header use

#header { ... }

and

body { ... }

for the body.

#header-bottom-left { background: url(%%img%%) no-repeat top center; }

will apply a centered image to the background of it.

So, strictly speaking, there are lots of ways to do this, and some may argue there are better ways than the way I did it.

Ultimately, this method only requires a minimal amount of content added to your sidebar, only a little bit of CSS, and uses transform rather than background-position (this is much smoother way of doing it).

Please keep in mind that some computers don't handle constant animations very well, especially running in the background while people game. Its a common complaint on gaming subreddits for constant animations to impact framerates while gaming.

Here is the CSS and a demonstration of the effect: https://codepen.io/mmolad/pen/ZbNqje?editors=110

Here is the markdown you'd put at the very end of the sidebar:

• Snow Effect 1
• Snow Effect 2
• Snow Effect 3

Keep in mind, this would show up on mobile or when subreddit style is disabled. If you'd prefer to attach this effect to just the base reddit code (meaning it would be invisible to mobile/non-style users), you could do it another way. Let me know and I can adjust.

Edit: the simplest way to do this would be the following: https://codepen.io/mmolad/pen/ZbNmBr?editors=110
Second edit: there are changes I'd make before pushing this live, so don't copy paste exactly as is. :)

You could run through the codecademy courses - http://www.codecademy.com/tracks/htmlcss and http://www.codecademy.com/courses/css-coding-with-style/0/1 - and then play around in one of the web-based editors like [codepen](//codepen.io), [jsfiddle](//jsfiddle.net), [dabblet](//dabblet.com).

First, the M/F tabs at the top of /r/gonewild is a Reddit Enhancement Suite feature. It can't be done with CSS.

Second, your CSS:

a.title[href*="/friendship"]{ color: #107FC9 !important; }

a.title[href*="/chat"]{ color: #8FBE00 !important; }

a.title[href*="/activities"]{ color: #E0B400 !important; }

a.title[href*="/group"]{ color: #FA6900 !important; }

a.title[href*="/relations"]{ color: #7400F0 !important; }

a.title[href*="/relationship"]{ color: #CC333F !important; }

I didn't spend much time finding the colours. I suggest looking around on COLOURlovers or using a colour picker like this one to find more optimal colours. Simply replace the ones in the CSS with the hex value of your choice.

Usage note: The keyword MUST be at the beginning of the post title when the user submits their post. "[Friendship] Looking for friends in McMurdo" or "Friendship - Any train model hobbyists out there?" will both be styled like 'Friendship' posts, but "Looking for friendship" will not be.

Also, if you reorder the rules (I don't see why you would need to, but just in case) make sure the relations rule is before the relationship rule, or else the relations rule will override the relationship rule.

Yes, a very simple way to do this is via the applets at https://ifttt.com/.

For example, I have a free account and login and click [+], search "ESPN" and tap which news stories should trigger an action, then I search "reddit" and choose either "submit a text post" or "submit a link post". It's simple. All just clicks, no code, and free. Once saved, it runs automatically in the background anytime my trigger (a breaking news story on the Philadelphia Eagles football team) occurs and posts the story (as a link post) to reddit.

Another site I've used (with a free account) to do similar is https://zapier.com/. Up to you.

As /u/N3G4 has mentioned, just use odd numbers to select every nth-of-type. So, when you want to select the 2nd item, use nth-of-type(3). This is probably due to how reddit displays active links, and is messing something up in the background.

Here is a CodePen example. As you can see, the nth-of-type(N) works as intended when you know the front-end being deployed has no other hidden live elements messing with the CSS captures.

I found this https://codepen.io/giana/pen/yYBpVY

If you have some element on reddit you want it on I can try.

The .titlebox h1 a { selector is interchangeable with any that has a working ::before and ::after

.titlebox h1 a { position: relative; box-sizing: border-box; padding: 1em 2em; box-shadow: inset 0 0 0 2px red; color: red; vertical-align: middle; }

.titlebox h1 a { transition: color 0.3s; }

.titlebox h1 a::before, .titlebox h1 a::after { box-sizing: inherit; content: ''; position: absolute; width: 100%; height: 100%; }

.titlebox h1 a::before, .titlebox h1 a::after { border: 2px solid transparent; width: 0; height: 0; }

.titlebox h1 a::before { top: 0; left: 0; }

.titlebox h1 a::after { bottom: 0; right: 0; }

.titlebox h1 a:hover { color: cyan; }

.titlebox h1 a:hover::before, .titlebox h1 a:hover::after { width: 100%; height: 100%; }

.titlebox h1 a:hover::before { border-top-color: yellow; border-right-color: cyan; transition: width 0.3s ease-out, height 0.3s ease-out 0.3s; }

.titlebox h1 a:hover::after { border-bottom-color: blue; border-left-color: lightgreen; transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 0.9s; }

Firebug (firefox addon) is a great tool to use for css editing. Right click to see elements CSS classifications.

You are welcome!

As to why it isn't as prominent in learning resources — my take is front-end webdev in general is a very fast-moving industry, so many write-ups on more minute details and techniques go out of date in a matter of a year, or even faster. That's just part of the game, I guess.

Since you are showing interest, I'll allow myself to throw another piece of advice your way — if you want to stay on the bleeding edge when it comes to layout, I'd suggest looking into CSS Grids: it's quickly becoming a reasonable choice for production websites and solve even more layout problems than flexbox in a cleaner way.

Here's a CodePen example I made for you. That outta help you out :) If you have any questions, feel free to ask.

If CodePen above is down, Here it is on JSFiddle.

Here's a CodePen example of how to do what you're asking. Only use tables when they are applicable, such as for tabular data, not for layouts.

Here's a good read on why tables are to be avoided when designing layouts.

If you take a look in the sidebar of this subreddit, you can see some links to some great tutorials, also use can use the search tool to find help with some specific stuff.

You may be able to find a CSS mod over at /r/needamod

And if you really want to learn some CSS (not just for Reddit) try out Codecademy.

Feel free to ask any further questions.

So, the reason why this happens has to do with the css specificity rules (more). They can be tricky to figure out sometimes.

That works, but it uses 3D rendering to accomplish it.

A less taxing, and more supported method (IE still doesn't have full support and opera mini has no support) is to use margin-top:

.content { margin-top: 35px; }

On that page they're actually doing it with javascript, however you could do this pretty easily with CSS.

Here's a jsfiddle I just made to show:

• http://jsfiddle.net/a9RR4/

Basically there's a container box that we are detecting when you're hovering over it (not the video inside it), and then when you hover over it it unhides other stuff.

The first table tag looks like this:

<table width= 40% >

But it should look like this:

<table width="40%">

But this is deprecated, HTML5 spec ignores this.

If you want to change the width attribute, give the table a class or ID name.

<table id="table-one">

Remember IDs are unique. But classes can be reused.

So reference the ID in an external CSS sheet. I've added the ID and this rule to this last fiddle:

#table-one { width: 40%; border: 1px solid black; }

The border should give you a clearer idea of where the bounds of the table are. Try changing the width value and seeing the result.

here's the fiddle

This might be helpful for your blur.

You can try this for font size:

.md p { font-size: ... }

Not sure if this is the dialog box you what, but give it a shot:

.hover-bubble { color: #000; }

/u/Milli63 - This is the answer to your second question:

> ...do you know how i can make the bottom box also have a background..."about" "help" etc. box

Also, I concur in that you may need some additional technique in order to conquer your CSS editing. Here are a few helpful links:

• [Customizing Sub Tutorials](/r/CSSTutorials/)

• [Reddit Sub CSS Selector Legend](/r/selectorlegend)

• [Custom Sub Flairs](/r/csshelp/wiki/userflair)

• [Customizing The Sidebar](/r/modhelp/comments/lr8bk/factrans_guide_to_a_better_sidebar/)

• Markdown Cheat Sheet

The submit buttons are

.morelink { ... }

and the headers in the sidebar (in your case)

.titlebox .usertext .md>h1 { ... }

You can add as many colours as you want into the gradients, like

linear-gradient(to right, red, green, blue, pink, black, cyan, white, orange);

You can also change the orientation (left>right, top>bottom, radial, or in degrees). Check out one of the gradient generators to see how they're constructed. Note that you'll need to strip away some of the CSS from the generated content, eg instead of

background: #1e5799; background: -moz-linear-gradient(-45deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); background: -webkit-linear-gradient(-45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -o-linear-gradient(-45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -ms-linear-gradient(-45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: linear-gradient(135deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 );

you only really need

background: #1e5799; background: -moz-linear-gradient(-45deg, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); background: -webkit-linear-gradient(-45deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: linear-gradient(135deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);

Well, I can at least tell you how to resize it. Upload it into ezgif and you can resize or crop it.

As far as changing the logo goes, hopefully someone who knows Naut better than I can tell you whether to just upload it in your subreddit settings or in the place under your stylesheet where you upload images and reference it in your code. Based on what I can see, you probably have to do it with the code.

I recommend Paint.NET more than GIMP for simple image manipulation. GIMP is more complicated and has a learning curve, while Paint.NET is more of a replacement for paint.

Just open it in something like GIMP or MSPAINT and simply remove the white lines yourself and merge the pictures closer ;)

You're welcome! :D Glad you got it all sorted out :)

It doesn't look like you can do that from another domain (see here).

Also, live threads appear to take place in a different area of Reddit, where the subreddit's CSS is not applied.

I'd suggest putting in a feature request over at /r/live :)

I fixed it, you can compare the two versions here. Your html markup was a bit messed up, some tags were missing closings and your body was missing its start. The fake logo thing was also messing up some of the centering.

I added some css to fix it, and also fixed the markup.

Here's a comparison between our code, and the fixed code:

http://www.diffnow.com/?report=yvl2k

and the code: http://pastebin.com/8cDJrQyh

There are programs/web apps out there that can split spritesheets but they don't always work so well. Shoebox is a good one I've used before. It'll get you 90% of the way there at least.

You need a spritesheet with all the frames of the animation in sequence, then you can step through them to make it appear like a gif, like this.

Create a simple html file and add some divs. Put the styles in the head tag and make the background/border different colors. Then just start playing with the properties until it makes sense.

This seems silly but its the best way to learn short of someone showing it to you.

You can also try this.... http://www.w3schools.com/css/css_boxmodel.asp

or this... http://www.skybound.ca/

My guess is because there are a lot percentages being used here.

One solution is to add a bit more width on your pseudo elements.

.slide-wrap:before, .slide-wrap:after { content: ""; position: absolute; top: 0; width: 51%; /* added 1% here */ height: 100%; transition: transform 5s linear; display: flex; align-items: center; background: url(https://picsum.photos/id/1015/1500/1500) no-repeat; background-attachment: fixed; background-size: cover; z-index: 2; }

If you use a preprocessor you still need to compile it to CSS to work with HTML. It's just there as a convenience if you like to do stuff like nesting, loops, leaving out {} etc.

Here is a live example. If you click on the down arrow to the right of the SCSS frame you can click on 'View Compiled CSS' to see what's actually being used.

http://sass-lang.com/install

If you're totally new to this I'd recommend just sticking with vanilla CSS for now.

No problem! It's worth noting that this is actually done using a CSS preprocessor, so the syntax and capabilities of the generator are a fair bit different than that of regular CSS. That said, it's hugely configuration driven, so you should be able to do everything you need through there.

It's nothing to do with the new markdown as such. What you're seeing is collapsing margins. Having either padding or a border will prevent them collapsing which is why you're getting that

> Putting anything for the top padding other than 0px makes it appear much larger

effect. See here for a quick demo.

http://www.sitepoint.com/web-foundations/collapsing-margins/

A quick google shows the answer: http://caniuse.com/#feat=flexbox

Caniuse is a great site for checking compatibility and it's usually up to date.

It shows that on Opera Mini (which I think is the mobile browser for iPhones?) flexbox is not in any way supported.

I'd suggest that A: Google your questions in keywords. B: Make a seperate CSS file for iPhone browsers that simply displays items either in hover: left or display: inline-block (experiment a bit). It will look less stylish and be less flexible, but it'll work.

EDIT

Found a perhaps useful guide for compatibility which might work! http://css-tricks.com/using-flexbox/

each browser behaves differently. You sometimes need specific calls and specific development to ensure everything works correctly across each browser.

You can start with here: http://caniuse.com/. This will help you verify what works on each browser and version.

As I suspected and then confirmed, tables don't normally go next to each other.

Here's an example:

http://jsfiddle.net/962ZV/

The only way I could get them to go next to each other (with either display: or float:) was with table { float: left; }, so try table { clear: both; }. Chances are that will work.

Edit: actually it's possible the table is being displayed as table { display: inline-table; }, in which case you should try table { display: table; } before you try the clear: both method.

Do you have a link to the page that has the gallery on it? It's easier to provide a working solution when it's testable in inspector/firebug.

In any case, are you trying to load the image on top of the thumbnails? If that's your goal you may try using position:absolute as well as z-index values to create the illusion of "layers". That will force the image to not pay attention to the thumbnails as elements that it has to avoid, but it won't solve the centering issue. Edit: Based on what I read it seems like you're trying to force the image below the thumbnails? If that's what you're trying to do, try adding "display:block" to the .slideshow-container; blocks are generally their own line, with inline-block being used to place blocks next to each other; regular blocks will clear both sides automatically.

Centering in CSS is tricky. Basically it's done this way: you have a container (i.e. the body of your page, an empty div, etc.) with a set width and height, as well as being displayed as a block or inline-block so that it uses the x and y values you give it. Within it, you place your image, again specifying its width and height and displaying it as a block or inline-block, and giving it the property "margin:auto". This gives the interior element equal margins on either side (only left/right); the only thing to note is to make sure that your interior element, whatever it is, is smaller in width than the container, otherwise it won't center. I made a quick example on jsFiddle that you can mess around with.

Alternatively you could probably use the center tag, but it's worth it to learn the CSS solution as it will give you a better understanding of how to properly position CSS elements. If I didn't answer your question, let me know! I hope this helps.

whenever it gives you those errors in the future. check first for typos, then you can try it out in a sandbox like http://jsfiddle.net if they work in the sandbox, then they're just not permitted on reddit and you have to remove that line from the css before you can save.

You can choose either or, but the recommended method is to use your own custom .scss (Sass) file in order to take advantage of more extensive contributions Bootstrap can make for you.

Here's some documentation on this.

PS: Never modify the original Bootstrap source code. Only make modifications using your own, custom stylesheet. Reason being: when Bootstrap's core components are updated via the official release(s), you will not want to go back and manually update each area by hand.

You need to have a basic knowledge of HTML, at least; it's not strictly necessary to learn CSS, but you're going to have a hard time finding any practical usage for CSS without HTML.

As for programs, I hear DreamWeaver and VisualStudio are quite nice, as /u/13steinj suggested; I myself, however, prefer Notepad++; it's a simple, highly configurable interface with nice syntax highlighting and a plethora of different themes to choose from. Playing with inspect element is also quite useful, and I almost always use it before appending my subreddit stylesheet just in case, so I don't have to go back and forth saving and refreshing.

And my tabs overlap with my Indiegameswap image

https://gyazo.com/793c3c6d519ecda422645159d15758de

I am planning on playing around with this but not having much luck today.

I found out how to fix this! It was the left:440px that I changed!

If you're on Firefox, install the Stylish addon. You can then add the CSS to restyle Reddit.

Or, you can grab a new Reddit stylesheet

srutils (subreddit utilities) is your friend. It's a command-line utility that works across some OS, including windows.

https://drive.google.com/file/d/0BzRp-cLiZDUJX2VOWGdWNXhlVzQ/edit?usp=sharing

Taken from a 12month old reddit comment.

https://github.com/SirCmpwn/srutils is the project site but there is no compiled exe there.

allright... i had to hack away some parts of your css.

but this - http://jsfiddle.net/xb3qkwpp/6/ - should illustrate what I meant.

it may not work for what you intend to do on your original project as I have removed your "hero"-div opacity (could easily be reproduced with rgba()-background?!) and handle the displaying of text via opacity instead.

but my point is that what your original example does is moving an object outside of your hovered div in between the cursor and the hovered div, thus cancelling the hover of the div... and so on

this can be avoided by having the hover-text as a child of the to-hover div.

the problem is the size of the divs (#first_area_max...) displayed on hover. they overlap the hovered divs and thus "block" the hover to the div below, canceling the effect, which causes them to no longer block the hover, reactivating the effect... etc etc etc.

simply reducing the width to zero limits the effect to a much smaller area. -> http://jsfiddle.net/xb3qkwpp/5/

My suggestion would be to wrap the on-hover-reveal divs into the respectively hovered div. then dispose to the right with an absolute position and its realtive to an overal wrapper...

edit: phrasing and typo

1. Make a container for the banner that is the full width of the area where it's going.

2. Make a "subcontainer" that is the exact width of the banner. Then set margin to auto. The image/banner will be inside this div.

Live example

Thank you! I found this as well https://codepen.io/karldanninger/pen/NwzMzN

But I am still clueless how to implement this. If I add it to any div I tested I get seperate scrollbars from the body and body { it doesnt work on.

In my sub I have a seperate div from body as background with negative z-index but I am too stupid to be able to implement it on a preexisting theme even though I made it and it is barely any code.

Migth just not be doable or I am missing something.

You need to set a grid-template-areas property in order to tell the grid that this location needs to occupy space. Give it a name of whatever you want, such as header. Here's a CodePen example.

Here's a good tutorial for Grid concepts.

Actually, if you're looking to use custom CSS on different sites, you'd be better off looking at Stylish (for Firefox or Chrome) than Greasemonkey. This is exactly what Stylish is for.

There is no click event or pseudo class in CSS. "focus" and "active" are close, but not really the same.

You could do something like this. That what you're going for?

That did the trick. Thanks!

One more, if you dont mind. I noticed using TranslateY gives for a nicer, subpixel transition-- is there any way I could impliment that for the background image position?

(got the idea from this- http://stackoverflow.com/questions/21087518/animate-css-background-position-with-smooth-results-sub-pixel-animation)

example- http://jsfiddle.net/5pVr4/4/

with the implementation i have currently it putts along pixel by pixel so I have it sped up a little but the speed I have it at is kind of distracting.

Yeah, this code was made by another former moderator. Nothing against, his/her code, but I'm starting to get a general consensus that they were beginner level coders. Better than anything I could do though.

Here's the jsfiddle link. I wasn't sure if there was a spot to upload the pictures to help out... http://jsfiddle.net/69CYh/

Thank you for the taking the time to look at it for me.

You've run into a very complicated issue here, because of how your CSS selectors are written. You have much redundancy, so it took me quite a while to track down what's going on.

1. When you :hover; .flair:before is somehow taking precedence over .flair-MarkieffMorrisHead, causing the width of 45px to not be honored.
2. I have tried several combinations of hacks with my own tools. At this point, I need to see how you have your actual CSS setup in your stylesheet page. Can you upload that to: http://jsfiddle.net/, please? I can then see how you have it setup in relation to other rules so that I can possibly track down why padding-right: 7px; affects everything else.
3. You can't just paste in new selector after new selector with redundancy, and expect things to work. This is a very complicated chain of rules.

A follow up: can this be modified so that if the viewport width is very small and the left block contains a fixed-width element, the left and right blocks follow each other vertically instead of horizontally? This would be good responsive design for tiny cell phones.

https://codepen.io/david263/pen/VdPbgP

https://codepen.io/pixlforge/pen/wXgyMd maybe not the most sophisticated solution there is but it works and it is simple enough to understand even without much experience.

Hey there, Thanks for the help the other day, I have another flexbox issue if you'd care to have a look for me;

Here's another CodePen;

I'm trying to make the 'Message' textarea fill the column that it is in (so that that bottom of the textarea lines up with the bottom of the postcode section on the column to the left).

It's probably a really simple fix, but I just can't seem to get it to work.

Hi, i have updated my subs style sheet and was wondering two things -

• How do i get the banner back at the top again like it was before?
  
• How to add the box using this style sheet?
  

Here is the link to my sub.
Here is the link to the style sheets sub i am using.

Thanks,

Harry.

Just the unprefixed version will suffice for most cases but you might want to keep the -webkit one too for now.

As of all the current browser versions, none require prefixing. See here (click 'Show All') and it'll show you the older browser versions that needed prefixed properties. Hover a section and it'll show you the release time of that build.

You could do something where the width of the Reddit.com Link was 20vw and the width of your subreddit's logo was 75vw.

you apply the styling directly to that link like this:

.pagename > a { width:75vw;}

that way you are making it clear what you want to style, without having to add a class.

using vw might be kinda bleeding edge btw: http://caniuse.com/#feat=viewport-units

Gavin19's hand on fix is great, but, as a more you know, you can prevent elements from being clicked or hovered with the following CSS property: pointer-events: none. Be aware support is not quite universal yet (IE9+IE10 don't allow it).

Hey /u/Blueberryroid,

Just wondering, why are your .thumbnails set to position: relative and then moved down with top:33px, then moved back up with transform:translateY(-50%)? When I removed position, top and translate attributes they lined up perfectly for me.

Besides that, I found a note from a stackoverflow.com thread stating: >In webkit-based browsers(Safari and Chrome), -webkit-transform is ignored on inline elements.. Set display: inline-block; to make it work. For demonstration/testing purposes, you may also want to use a negative angle or a transformation-origin lest the text is rotated out of the visible area.

So maybe try setting it as inline-block? Transforms should work in Safari according to caniuse.com. Cross browser compatibility can be a real headache, remain patient and good luck figuring it out.

That's not padding. That's the element being stretched full width with left: 0; right: 0;. It'd be the same if you used width: 100%;.

So, you just want the element to be centered. You can use left: 50%; transform: translateX(-50%); so the left side of the element is positioned at the mid-point, then translation is used to pull it back by half of its own width, centering it horizontally.

Be sure to use the prefixed versions of transform so it works in as many browsers as possible.

If you set text-align: center on the parent element then inline child elements will be centered. An img is an inline element.

You can aso do it like this, where the img has a set width and is changed to display: block. Then you can use margins to center it.

I'm not sure why it's only working half of the time for you. Can you provide an example of how it doesn't always work? Here is a codepen page which shows a simple demo of how to do this.

Your best bet here is to do as /u/Niten001 has suggested and get a better understanding of responsive design.

However, that being said, there are a few tweaks that you can do. Here is a CodePen which shows an example of how to contain each layer with a framework that makes this much easier.

You'll want to modify your bootstrap element's HTML class affiliations.

Official Bootstrap Manul

• Padding/Spacing Modifier Classes
• Text sizing/spacing/margins/padding Modifier Classes

Great information for OP!

Also, here is the Markdown cheat sheet. Some of these may not work in reddit (as they use a modified version for the site).

Well I managed to do it by ```

on head (you need to get your own cdn on fontawesome.com)

<script src="https://use.fontawesome.com/getyourowncdn.js"&gt;&lt;/script>

on body

<i class="fa fa-facebook"></i> iconname

icon reference

https://fontawesome.com/v4.7.0/cheatsheet/

No. Per the spec:

> Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing).

Emphasis mine: this means that new elements (such as a <i> tag) won't work. You can verify that in pretty much any browser inspector.

What you should do is find the content for the desired FontAwesome icon for sort down and apply that as your content (https://fontawesome.com/icons/sort-down reports that as f0dd but you should probably just grab it direct from an inspector as that sort of thing changes with versions often enough). You'll also need to apply the same base styles to that as well. It can be tedious (and again, due to the versions unpredictable if you plan on upgrading) but that's how I've handled inserting an icon like you're trying to do.

Iconify will always spit out SVGs. Instead, sign up with FontAwesome (requires your email but it's absolutely free for what you're needing it for, that way you'll get the <link src="..."> to add FontAwesome to your code.

Once you get the cdn link and add it to your page, then wherever you want an icon just type <i class="fab fa-facebook-square"></i> (or other FontAwesome class). Then poof, it's a font and you can use all the normal text css for it.

Since they're all part of the spritesheet you don't need to resize them individually. Shrink the spritesheet to suit and adjust the background-position values to match the new positions.

Personally, I'd batch resize them in an editor (something like this would do too), and run them through the spritesheet generator. It'll give you most of the CSS you'll need too.

Try experimenting with the padding-top decriptor. Instead of padding: 25px 20px 0px 80px; try increasing the pixel count for the first number in line (padding: 125px 20px 0px 80px;) to see if that 'pushes' the feature down below the sponsored link's box. If it does, fine tune it by adding to or subtracting from that first number until it floats exactly where you want it. Only problem with this is the feature may end up appearing quite lost on the newest submissions queue, floating too far down without a sponsored link box to fill the empty space.

Another method is to describe a new .content {margin: 30px 7px 5px 0; z-index: 1;} (making as much space as you need by playing with the first number) and add the banner as an image saved to the background of the subreddit's body, with padding descriptors to float it in the empty space created in the new margin descriptor, but that'd take a bit more time and effort to create - image editing software or a site like Picnik'd be needed to create the image. If you need to go that route, shoot me a PM and I'll play around with it to see what's possible.

Ah what I meant was the colour around it that was blue. It's gone now though but it still didn't seem to stretch after adding that code, it looks like this at the moment. :/

> combined have to be less than or equal to 500 kb

Yep, but it won't be an issue. You can always compress the spritesheet when completed if it exceeds the limit. https://tinypng.com or https://tinyjpg.com.

The image names are the %%bannerX%% parts. The animation names, while identical, aren't related. They don't need changed.

not impossible. its just going to take some time to recreate it.

do you have the photoshop file saved with all the layers separate?

IF you do, you can save each layer as its own 32bit png (transparencies) and go here:

http://www.colorzilla.com/gradient-editor/

import every image, copy paste the CSS for each one. then just stack them.

that site doesnt do multiple layered gradients, so you have to do each layer one by one.

#header, .footer-parent { background: -webkit-radial-gradient(50% 190%, circle cover, #f26400 0%, #da5a00 50%, #c25000 100%) #444; background: -o-radial-gradient(50% 190%, circle cover, #f26400 0%, #da5a00 50%, #c25000 100%) #444; background: -moz-radial-gradient(50% 190%, circle cover, #f26400 0%, #da5a00 50%, #c25000 100%) #444; background: -ms-radial-gradient(50% 190%, circle cover, #f26400 0%, #da5a00 50%, #c25000 100%) #444; }

Where #da5a00 is the mid-point between the two colours you mentioned.

Might want to play around with a gradient generator.

Try using width: 100%, it should scale the width of the image to the width of the page, similar to like here.

Alternatively if you really wanted (and had the time to get it to match your current image) you could probably replace the image with a gradient which would scale with the page as well as decrease page loading time.

It's called hexadecimal colors. I like to use Adobe Kuler when I create a color scheme. Once you have your colors selected and the hexadecimal code that goes with that color you place it in the css selector rule of the content you're trying to change.

You can crop and resize on ezgif, and then after saving it, you can re-upload it and convert it to an APNG file.

There is a file size limit, though, and if it's the same for headers as it is for images in the sidebar, you can't exceed 500kb.

Firstly make a spritesheet out of each frame of the gif (ez-gif is easy to use and free if you don't have software) select stack vertically (not essential but will make your output tie up with my code) and one column.

The original gif was 82px x 79px ans has 39 frames, the output spritesheet is 82px x 3081px. Upload the output to reddit as whatever filename, i'll just use 'image' in my example.

.flair-example{ width:82px; height:79px; background:url(%%image%%); background-size:82px 3081px; -moz-animation: flair1 1.5s steps(38) infinite; -webkit-animation: flair1 1.5s steps(38) infinite; animation: flair1 1.5s steps(38) infinite; } @-moz-keyframes flair1{ 0% {background-position: 0 0;} 100% {background-position: 0 -3002px;} } @-webkit-keyframes flair1{ 0% {background-position: 0 0;} 100% {background-position: 0 -3002px;} } @keyframes flair1{ 0% {background-position: 0 0;} 100% {background-position: 0 -3002px;} }

So height and width are set as per the dimension of the original gif, background size is set as the output size when converted to a sprite sheet. flair1 is just a unique name for the animation, can be anything you like, 1.5s is the duration it takes to play, so you may need to increase or decrease until it looks right, steps(38) is to make it jump from frame to frame rather than scroll smoothly which gives the impression of a gif playing the number of steps is one less than the frames in the gif. Finally animate the background position to move from 0,0 (the top of the sprite sheet) to one frame less than full height, (3081px - 79px = 3002px) so it stops at the top of the last frame.

It will then display each frame quickly in sequence giving the impression of a gif playing.

Mine are 1350 wide at 128 high. 128 is not very much and they just look like a little strip, but that's all I want since I don't want to upstage the content.

You can resize and crop yours on ezgif.

First convert apng to sprite here. Resize it to get a correct file weight.

/SIDEBAR IMAGE/ div.side div.spacer:nth-of-type(1) { padding: 455px 0 0!important; background: url(%%stop-motion-animation%%) top center no-repeat; margin-top: 5px; margin-bottom: -140px; -webkit-animation: stopmotion 5s steps(51) infinite; /* edit with your number of slides*/ -moz-animation: stopmotion 5s steps(51) infinite; /* edit with your number of slides*/ -ms-animation: stopmotion 5s steps(51) infinite; /* edit with your number of slides*/ -o-animation: stopmotion 5s steps(51) infinite; /* edit with your number of slides*/ animation: stopmotion 5s steps(51) infinite; /* edit with your number of slides*/ }

/ANIMATION/ /***********/

@-webkit-keyframes stopmotion { from { background-position: 0 0 } to { background-position: -15300px 0 } /* edit with your dimensions */ }

@-moz-keyframes stopmotion{ from { background-position: 0 0 } to { background-position: -15300px 0 } /* edit with your dimensions */ }

@-ms-keyframes stopmotion{ from { background-position: 0 0 } to { background-position: -15300px 0 } /* edit with your dimensions */ }

@-o-keyframes stopmotion{ from { background-position: 0 0 } to { background-position: -15300px 0 } /* edit with your dimensions */ }

@keyframes stopmotion{ from { background-position: 0 0 } to { background-position: -15300px 0 } /* edit with your dimensions */ }

/************/ /*END ANIMATION/ /*************/

I see what you did. I'm trying to achieve this effect:
https://dribbble.com/shots/1966072-Kalla-Homepage/attachments/342158
Its a border on top of the page I think.

Grab the file here - http://www.reddit.com/about/alien/

Download the .PNG, you don't need the vector file.

Open it with Photoshop, free online version here - https://pixlr.com/editor/

Change the text color to white, resize it if you like and save the file.

Upload it on the subreddit settings page as the new header image.

Converting it to JPG should instantly compress the size then. Open it in PAINT and choose "Save As" then save it as a JPG file. If it's still over 500kb, open it in photoshop (free version here https://pixlr.com/editor/) and export it as a JPG. It should give you a slider (or something else) to adjust quality on the export window.

I usually just use command-line imagemagick.
A simple:

convert +append filename*.png output.png

Would do the trick.
(Assuming they are ordered, filename wise)

Run it through an optimizer afterwards to lower the size.

What errors? They're just direct image links. You should be able to just right-click/save.

> choice

If I think I might use the image again I put them in my dropbox. I have an old account which lets me put content in my public folder and get a direct sharing link. If it's anything else then I will use imgur.

If you're a Windows user then ShareX is very handy for quickly uploading to multiple destinations.

I am glad to be able to help you! :)

Here's another tip for you: don't be afraid to take inspiration from others.

Obviously, don't copy other sites designs directly, but use lots of references to see how things are done. This is not a copyright issue (as far as I know, you can't copyright a web design as long as you don't copy/paste elements), but a branding issue - you want to be memorable and unique, while keeping up with trends. Try to use a design that is timeless, fads are a great way to get attention - for a few weeks. A good design can last for years.

Keep it simple, especially for a web application, the most important thing is to provide a service that gives the best experience for the least effort.

The design process usually goes like this:

1. Determine your target audience. Is your application aimed at children or professionals? You need to adapt your colour scheme and design to best suit your audience. Define the specifications of your application and have them validated/reviewed first.
2. Find lots of similar, successful and relevant websites/apps to inspire you. You can put them in a moodboard, show it to your client to get feedback, if you are on the right track and if you have understood what they want. Here's a list of great inspiration resources] (https://docs.google.com/document/d/1MskpEfvzwCDPfw_1wIZiaKtRX-ypNNZ__2PFWx1AxY4/edit?usp=sharing).
3. Make a quick sketch of your application (paper and pencil or prototyping tool), check that all your specifications are met. Do this for both mobile and desktop dimensions.
4. Make a layout for each, validate it and iterate until you are satisfied.

Good luck !

Pretty sure OP googled first before she posted here, based off the screenshot she posted.

Andrea try this: http://cssdeck.com/labs/another-simple-css3-dropdown-menu

Then I believe you just need to change it to display: inline instead of dropping down, but I could be wrong. Someone is welcome to correct me if I am.

edit: jk I am wrong.

Hey /u/bleakmidwinter,

If you intend to do this with only CSS I think the best option would be to create a tabbed-layout, one tab for "Fall" and one tab for "Combined".

Here's a demo I threw together based on the example above, is this along the lines of what you mean?

Hope that helps.

Thanks zmodem, I was aware of this but just wondered if it was the best way of going about it. I've done a little research and I'm thinking of trying out Stylizer. I can't vouch for it yet having not used it but it seems to be the correct sort of thing!

Reddit seems to have some set of their own CSS rules. It's unfortunate that they don't let you inject any javascript, or edit the head of the document, (where everyone puts their conditional IE stylesheets) but that's just the way it is.

So instead try these hacks:

Target older browsers with special characters

I can't guarantee they work with reddit's subset of CSS but it's probably worth a shot.

Godspeed! and report back your findings.