I have been designing a site for a customer that is going to rely on having a good looking and functional DNN Core Repository.

I found that creating a template for the repository was pretty simple after I found some online documentation on the DNN Repository.

I found that in the /wwwroot/DesktopModules/Repository/Templates/ directory I could add my own template which will show up under the Repository Skin drop down box.  As shown below.

As you notice the bottom one is the one I added.

Now the Issue

I was very excited to make my own repository template, but soon found I was getting pesky borders around the tables of the repository in the Safari and Opera browser. 

I tried editing the repository.aspx file, but was uncomfortable doing that because that is going beyond a simple template.

So then I did some experiments with the two browsers having the issues.  (Safari and Opera)  You can see my demo page and how I ended up fixing the issue.  (NOTE: for the demo page to make sense you need to view it in either Safari or Opera)

Basically to fix the issue I ended up using CSS to tell the tables inside the div I use for Content to have no borders.  Below is the CSS. (in the example below the DIV that the tables are in has the class bordernone)

.bordernone table,
.bordernone td,
.bordernone tr,
.bordernone tbody
{
    border: none !important
}

I hope that all makes sense.  Please feel free to email me if you have questions.  You can also make a comment here with a question, or heck, a better way to fix this issue.

I have been working on skinning MindTouch Deki Wiki on and off for the last two weeks, maybe more, and I’ve gotten to a point where I have one of my skins packaged and ready for download.

I based the 4 skins I am working on, (to include Pixel-Spring) on the already popular Fiesta skin that comes with MindTouch Deki Wiki.  Some day in the near, maybe distant future I will create some skins that are a family of their own, but at the moment I just wanted to play around with the skinning process of Deki Wiki.  I’ve been quite happy with how easy it is to change the look and feel of Deki Wiki.

I also made it a point not to change any of the php files and only change the style.css sheet.  If I needed to over-ride anything in the _content.css sheet I included it at the bottom of the style.css sheet with an !important attribute attached.  The style.css sheet is commented so the user can see what any extra CSS is for.  In doing this, I hope it will allow the Pixel Skins to be used for a long time to come.  Basically as long as the fiesta skin is used.

Another thing I allowed for was multiple background choices.  I added seven background images and CSS for the user to place in the control panel’s custom CSS page.  The background images come with the skin package the user will find instructions on implementing them in the !NOTES.txt file.  I am planning on making several more alternate backgrounds in the near future, but first I need to get all four skins out and packaged.  (Before the end of the week)

Last but not least, I included two extra templates in the !NOTES.txt file for the user to add to their Deki Wiki website for a little more pizzazz.  The image to the right is and example of the template box included in the Pixel-Spring skin.  It is simple but adds an extra area for the user to have extra “Stuff”.

There is a five step process to adding the templates, and the steps are easy to follow.  You can find the instructions in the !NOTES.txt file. 

I also have some instructional videos to help the users.  The quality of the videos could be better, but I think they will help.

I guess that’s all to blog for now.  I hope to have all four of the Pixel skins packaged as soon as possible, but for now feel free to download and use the Pixel-Spring Skin.  If you have any questions about the skin, or how to do something, feel free to email me.  admin@cornerpixel.net  I can’t promise I will respond same day, but I will try.

~MikePixel

I was working on some Deki Wiki Skins yesterday and came across the use of Variable in CSS.  I have been working with CSS for a while now and haven't used variables, and had never seen them before.  I feel pretty dumb for not knowing about that, but now I do, and I like them a bunch.

This is what I came across in Deki Wiki's CSS sheet.

.header .siteNav .userAuth a.userPage:hover {
    color: var(linkcolor_hover);
}

#siteNavTree a {
    color: var(sitenav_color);
}

There were some more, but that was just a couple.  Okay I Google' d CSS variables and I found a good article from the guys at disruptive-innovations.  Below is the meat of the article with a link to the full article below the information.

Using the value of a variable as the value or one of the values of a property in a CSS declaration should be achieved using the new functional notation var(). This function takes only one argument being the identifier being the name of the variable. The declaration becomes invalid if the variable does not exist.

Examples:

@variables
{ 
CorporateLogoBGColor: #fe8d12;
}

div.logoContainer
{ 
background-color: var(CorporateLogoBGColor);
}

More Examples:

@variables
{ 
myMargin1: 2em;
}
@variables print
{
myMargin1: 10px;
}

.data, div.entry
{ 
margin-left: 30px; 
margin-left: var(myMargin1);
}

In the example just above, the left margin of an element carrying the class 'data' will be 2em for instance for the 'screen' medium type, and 10px for the 'print' medium type in a user agent conformant to CSS Variables. A legacy non-conformant browser would apply a 30px left margin to such elements in all media types.

I highly recommend reading the full article.  It is very good.

~MikePixel (Michael Silva)

Just yesterday I was answering a CSS question in an online CSS group I belong to.  The question was on how to make tooltips with CSS.  The person who asked had a website with pictures on it.  He wanted to be able to hover over the pictures and get another tooltip box to pop up with yet another picture in it.

I tried to explain how I would do it, but I think I missed some things.  So I will try to redeem myself now with an explanation and a demo page!

Below is the markup I used for the list and it's tooltips.

<div class="main_wrap">
        <ul class="ninja_list">
            <li class="left_ninja"><a href="#"><span class="smoke"><em>title you want people to see if CSS is disabled or for screenreaders</em></span></a></li>
              <li class="mid_ninja"><a href="#"><span class="smoke"><em>title you want people to see if CSS is disabled or for screenreaders</em></span></a></li>
              <li class="right_ninja"><a href="#"><span class="smoke"><em>title you want people to see if CSS is disabled or for screenreaders</em></span></a></li>
        </ul>
</div>

This will provide a list for those who have CSS off or those who are using text readers.  The next bit is the CSS to make the tooltips happen, along with placing the list items.

.main_wrap
{
    position: relative;
    height: 400px;
    background: url(images/ninjas_three.jpg) no-repeat;
}
.main_wrap ul
{
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: block;
}
.left_ninja
{
    position: absolute;
    left: 50px;
    top: 80px;
}
.mid_ninja
{
    position: absolute;
    left: 235px;
    top: 100px;
}
.right_ninja
{
    position: absolute;
    left: 405px;
    top: 90px;
}
/* NINJA in a box */
/* difines the width and height of anchors along with block */

.left_ninja a
{
    display: block;
    width: 100px;
    height: 160px;
    position: relative;
}
.mid_ninja a
{
    display: block;
    width: 80px;
    height: 140px;
    position: relative;
}
.right_ninja a
{
    display: block;
    width: 80px;
    height: 160px;
    position: relative;
}
/* NINJA pop smoke, span disappear */
/* hides the span where the tooltip is */
/* this also hides text */
.left_ninja span,
.mid_ninja span,
.right_ninja a span,
span.smoke em
{
    display: none;
}
/* span appear like NINJA out of nowhere */

.left_ninja a:hover span
{
    display: block;
    width: 200px;
    height: 91px;
    position: absolute;
    background: url(images/left_ninja_tooltip.png) no-repeat;
    top: -45px;
    left: 40px;
}
.mid_ninja a:hover span
{
    display: block;
    width: 200px;
    height: 91px;
    position: absolute;
    background: url(images/mid_ninja_tooltip.png) no-repeat;
    top: -70px;
    left: -80px;
}
.right_ninja a:hover span
{
    display: block;
    width: 200px;
    height: 91px;
    position: absolute;
    background: url(images/right_ninja_tooltip.png) no-repeat;
    top: -40px;
    left: -160px;
}

Basically you are telling the span inside the anchor element to display none.  Then when the anchor is hovered over you are bringing back that span with display block.  For more hands on and visual examples try out the Tooltips by Ninja's Page.

I hope this helps, and I hope you can use this  as a guide with tooltips and even CSS drop down menu's.

Happy CSS tinkering,

~Michael

There was an announcement yesterday about Google's new browser called Chrome.  I went through three different emotions upon hearing about this new browser.

1. I felt a quick kid like excitement.  I was rushing to download it and try it out.
2. Then I felt a feeling of worry when I thought that I now had yet another browser to test all my websites against.  So at that point I went to the Chrome site and started to read the little comic they have to explain their new browser.  As I read I found that there was a lot of good sound things about Google's new browser.
3. Lastly my feeling was amusement and curiosity as I started to realize just how good the browser was.  Here are some of the things I like about Chrome.

Things I like

• I was happy to see that it passed all the CSS3 tests on the CSS3.info site.  This is encouraging to me and it will be GREAT to test CSS3 stuff and know I have a playground that supports all of CSS3 and not just a little bit of it.
• I was happy that each tab is it's own process.  That way when a site goes mad and freezes, I don't loose what I was doing on another tab.
• It is very lite looking but pretty browser.  (ya I know I am a professional and that shouldn't matter.  But it does.)
• The search bar is the address bar.  I think that is how browsers should have all been made.
• Most visited sites page.  Kind of cool, but I want to see it in action a couple months from now.
• Load times are pretty darned fast.

Things I don't like

• When I was using Chrome on my Vista PC disc bullets were displayed with white corners which made the bullets look like stars at certain sizes.
• I don't like what it did to my favorites.  It imported my favorites from IE7 and then tried to logically sort them.  I can't find anything anymore.  I wish I hadn't imported them.  My advice is do NOT import favorites.
• The "Inspect Element" is a nice try but it isn't as good as IE8's Developer Toolbar or Firefox's Firebug extension.  I can't get to a mode where I can hover over the page and click an element I want to inspect.  I can go through the markup and eventually find my element by watching what lights up.  But it just isn't as good as I would like.

Well I think that is it for now.  I am going to use this browser a LOT in the next couple weeks to test things out.  I know I will be able to soon ad much more to both of the above lists.  I can't wait to find out what cool tools Google has added to the browser.  I also can't wait to see if I can take some things off my "Things I don't like" list when I get to know the browser a bit more.

Well thanks Google for giving me more work to do.  The good thing is that I really like my work.

~Mike

The normal way of preloading images is by using JavaScript to do the job.  In the lieu of Firefox and it's NoScript type extensions I have stopped relying so heavily on JavaScript in my pages.  So where does that leave us when it comes to preloading images?

In steps CSS.  Most of the time when I want to preload and image it is for hover menu's or rollover type images that I know the user most likely won't hover over right away.  In this case I want the rollover's to work right away.  My next example won't please some of the real hard core standards people because it adds a little markup to the page, but in my opinion it is better than and less markup than the common JavaScript usually used to preload images.

At the bottom of the page before the closing body tag I add a preload DIV.  I assign the class of preload to the div and then let CSS handle the rest.  (you will also have to add a DIV element inside the preload DIV for every image you want to preload.  Hopefully in CSS  3 we can assign multiple images to the background of one element (DIV) but for now this works.

The CSS for this is

.preload
{
    position: absolute;
    width: 0px;
    height: 0px;
    margin-left: -9999px;
    background: url(yourimagehere.jpg) no-repeat;
}

Now the DIV elements inside the preload DIV only have to have the background set because they are going to go to the left along with the preload div. 

The reason I didn't do a display: none or visibility: hidden was because Opera and Safari are smart enough not to waste resources loading your images because it can see by the way you did the CSS that you don't want it to display.

This has worked great for me in the past and I am continuing to use it in the future.  I am sure some of you have arguments against it, and I would love to hear your arguments.  Please feel free to post a comment here. 

I am going to start a page by page guide for these type of things in the future that will allow users to search and find help while they create their own web sites.  For now you will have to search the blog to find good information.

Thanks for your time
~Mike