Category: CSS

Mimic DNN theme to embed pages into Dynamics CRM

This is a theme you can install on DotNetNuke Community Edition to create pages which are embeddable in Dynamics CRM as web resources. There are a lot of open source tools available for DNN which can allow you to do quick web app building. Some of my favorite tools include the SqlViewPro and InjectAnything from RedTempo. Mix them all together and you got a great presentation tool you can use in Dynamics CRM Dashboards. Especially since CRM has Xrm.Page.context.getUserId() and DNN has the [User:Username] token.

It’s not a replacement for sophisticated BI tools but gets me to do some interesting stuff. So here it is.

Mimic – (Zip File)

Filed under: Blog, CSS, JS, SharePoint

Making Embedded Content Work In A Responsive iFrame

You have an iframe:

<iframe src="https://www.youtube.com/embed/wnJ6LuUFpMo" frameborder="0" gesture="media" allowfullscreen></iframe>

It’s not responsible. Put a div around it:

<div class="video-container">
<iframe src="https://www.youtube.com/embed/wnJ6LuUFpMo" frameborder="0" gesture="media" allowfullscreen></iframe>
</iframe>
</div>

Now format the div by adding this css:

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}

.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

Result: the iframe is now responsive, sort of. See:

Source: Making Embedded Content Work In A Responsive iFrame

Filed under: CSS

Modifying the height and width of CSS pseudo element content

If you want to add an image before or after an html element, you most often use the pseudo-elements :after and :before. For example, when you want to add an image before a link, you can write it like this:

a:before {
url(image.png);
}

But you can’t control the width or height of this image this way. If it is absolutely necessary for you to control the dimensions of this pseudo element, the following is what you do:

  1. Move the image to the background image property.
  2. Define the height and width of the pseudo element. These are the dimensions of the image.
  3. Make the content an empty string.
  4. Give the background-size the same dimensions as the image.

This is how you would do it in CSS:

a:before {
background-image: url(image.png);
background-size: 40px 40px;
display: inline-block;
width: 40px;
height: 40px;
content: "";
}

Filed under: CSS

CSS for DIVs as shadowed curved boxes in a line

CSS for the shadowed box. You don’t need anything beyond this to create a shadowed box. The rest just shows you how to line it all up.

.box {
-webkit-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
-webkit-box-shadow: 3px 3px 3px 3px #ABABAB;
box-shadow: 3px 3px 3px 3px #ABABAB;
resize: both;
overflow: auto;
min-width: 50px; /*suggest a min-width & min-height*/
min-height: 50px;
background-color:#FFFFFF;
text-align: center;
margin: 20px;
}

How to line the boxes up. I am copying this from Jonathan Snook’s page with slight modifications.

#container {
display: table;
border-collapse: separate;
border-spacing: 10px 50px;
}
#row {
display: table-row;
}
#left {
display: table-cell;
padding:20px;
}
#right {
padding:20px;
display: table-cell;
}
#middle {
padding:20px;
display: table-cell;
margin: 60px; /* Not needed. Don't know why I put it here */
}

This is for mobile. If the resolution goes below 797px, the rows go into block mode.
@media all and (max-width:797px) { #row {
display: block;
text-align:center;
}
}

Filed under: CSS