Image of Revised css guidance

valME had a major upgrade yesterday. There are a few important changes regarding .css/style sheets.

In the past, we've allowed users to add <style> tags to their posts and comments even though it's not semantically correct according to Web standards. As every major browser allows for <style> tags in the <body>, we figured: why not? Heck, it's been said even Google violates the specs.

The problem is that there are two types of people who can really mess-up the way a website looks with incorrect .css: people who don't know what they're doing and people who really know what they're doing. It's a subset of this second group that we're a bit worried about. People intent on causing trouble can very easily interfere with posts and comments of other users with all the latitude that <style> tags in the <body> provide. So, going forward, valME will only allow .css styling at an individual element level. You can still do all the great styling available in the past; you just won't be able to use <style> tags (or templates) to do it.

Additionally, we want you to remember that valME is proud to use Bootstrap, and that means you can take advantage of all the great .css Bootstrap provides.

Another change impacts when videos are inserted via the Embed Media from External Sites icon Embed Media from External Sites icon (which you will see while posting). When using this function, it will now automatically encase your video URL so it looks something like this:

<div class="embed-responsive video-size embed-responsive-16by9 oembed-provider- video-position-center oembed-provider-youtube">
    <iframe frameborder="0" height="349" scrolling="no" src="//www.youtube.com/embed/xxxxxxxxx?wmode=transparent&jqoemcache=xxxx" width="425">

So if you're writing in HTML source to post videos, you should use similar code as it will automatically adjust video sizes depending on screen. Video positions include left (which is the default if you leave off the class), right, and center. We performed some database magic to update most all existing posts and comments to take advantage of the new format, but we've already identified a few missed. (We'll be fixing those soon.) Video sites are whitelisted so, if you're having problems posting a video, let us know and we'll review the site for whitelisting. Videos will automatically be responsive, just as before.

You can continue to use the img-responsive class (it should be applied automatically when you insert images). You can use standard .css for justification (e.g., style="float:right;") or take advantage of Bootstrap's classes (e.g., class="pull-right").

Written by   permalink    plaintext

The new layout looks terrific. Some of the articles get pushed to the right and overlap the right column when you show the voting arrows but it's not a big deal.

Written by permalink    plaintext

Thanks. Can you provide an example please of the overlap problem?

Written by permalink    plaintext

Ah, never mind. I see it's only occurring in certain browsers. I'm on it.

You need to be logged in to comment.
search only within csstemplates

About csstemplates


Based on the excellent suggestion by digdug, this community is to share style sheets/.css templates you can use for posts. If you're a .css expert, we'd welcome some experienced experts to become moderators.

Please do not redefine standard html tags in your templates (e.g., don't do this: blockquote { font-size:30px; }), as it can cause problems with comments that use those tags. Always create your own classes - e.g.:

<style>.my-blockquote { font-size:30px; }</style>
<div class="my-blockquote">my very large blockquote</div>

Latest Activity