Add Styles to Umbraco TinyMSE editor.

As it is when you install a clean Ubraco site, some setup is required to add the functionality you wanted. Lets say you want to add different style to umbracos WYSIWYG editor. Making users able choosing font-styles just like in word. Her is what you have to do to enable that.

Firstly, know your css.

h1, h2
{
    color:BLue; 
    font-size:24px; 
    font-family: sans-serif; 
    margin-top:0;
    margin-bottom:0;
} 

h3, p4
{
    color:Green; 
    font-size:18px; 
    font-family: sans-serif; 
    margin-top:0;
    margin-bottom:0;
} 

p
{
    color:Gray;
}

Go to “Setting” section and look under “Stylesheets”
here add a new style-sheet by right-clicking on the “stylesheets” folder
I’ve named mine style-sheet “adminStyle”

Then add your styles by by right-clicking on “adminStyle”. Remember to give your styles logical names
so users will recognize them, when editing content.

When a style is created click on it and copy everything within the brackets in to the style. You can only add one style at a time, so don’t copy all your CSS in there at ones ,. .(c:

To finish up you need to enable your newly created “adminStyle” style-sheet in the richtext editor data type.
you can find it in umbraco under developer > data types folder. After cklicking on it look for your style-sheet name under “Related stylesheets”

Check it and save and you are done, Then take a look at the result in your Content and enjoy, the bliss of success. (c:

Advertisements

Fieldset allways round corners

If you have you ever used fieldset in your web projects you will know that it looks different in every browser. BUMMER and if you try to style it it looses its round corners and highlights. Thats is so annoying. So i’ve decided to do something about it. Fielset now we wil all know your secrets. (c:
As far as I know, it’s impossible to solve this dilemma with CSS2 alone, so after some consideration I’ve decided to try with webkit and some other tricks as the last resort. And SUCCESS.. round corners in all browsers, I love it.
her’s what i’ve done.

To my CSS i’ve added following

FIELDSET
{
   padding:10px;
   border-color:Fuchsia;
   -moz-border-radius: 4px;
   border-radius: 4px; 
   -webkit-border-radius: 4px;
}

LEGEND
{
    text-transform:uppercase;
}

Round Fuchsia Corners, so pretty ,.. (c:

Releace of my own Umbraco based webpage.

For little bit more then the past month time I’ve been working on designing and developing my own webpage. For this task I’ve chosen Umbraco CMS engine, beacouse of it’s similarities with Sitecore, but allso because it is free to use. I’ve was pleasantly surprised on the helpfulness of the Umbraco community, and i like to contribute my knowledge to further Umbraco development by posting articles about it on my blog.

To differ my self from all the other mass-produced templated webpages outhere, I’ve designed and implemented my own look and feed for my webpage.

The main idea behind this webpage is to make a content driven webpage not a blog. I’ve written an article about how this webpage came to being and i am going to write further articles in the future on how i did it. More about the nuts and bolts of it all. (c: So sign up for an RSS feed, so you can keep up.

here are some highlights of the implementation.

• youtube integration
• Custom developed tag based article system
• Lucene index search results
• Tag and Related articles lists.
• Umbraco based contact form(creates nodes in umbraco, so i can see a feed of all new items when logged in)

If you have any comment’s pleas tell me i wood like to hear your opinion.

CSS – full screen overlay layer

Often when you display a gallery of pictures, you want to dim the website in to the background. I have tryed implementing several solutions based on placing a html element on top of all the others by setting position to absolute, and height and width to 100%. That worked ok as long as the page was no bigger than the screen. But when i scrolled the page i noted that my absolute layer was attached to the top of the page,.. so it scrolled with the page,.. so that was clearly not the way to go,..
So here’s what i came up with to solve this,..

.dim
{
			height:100%;
			width:100%;
			position:fixed;
			left:0;
			top:0;
			z-index:1 !important;
			background-color:black;
}

and it worked as a charm,.. position fixed did the trick,. woohoo,..
to make this overlay more fancy you can add opacity to it by setting a
semitransparent png pixel to the background(works in most browsers)
or do it the old fashioned way

filter: alpha(opacity=75); /* internet explorer */
-khtml-opacity: 0.75;      /* khtml, old safari */
-moz-opacity: 0.75;       /* mozilla, netscape */
opacity: 0.75;           /* fx, safari, opera */

wired button post-back bug

It is now twice that I have encountered this problem, so I decided writing about it. Why does click on <button> HTML controls, generate two post backs and the weirdest thing is, it is doing this at random ,.. You can only see it using fiddler, but I have no explanation for it. The bottom-line you should be careful using <button> HTML controls in you code, and try to use <asp:button> or  <asp:hyperlink> in stead.

With some CSS you can style those to look just like buttons.

CSS Compatibility and Internet Explorer

Did you ever wonder about the CSS compatibility of IE trou out the browsers history ,.. well wonder no more and read this article on MSDN
http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx and good luck (c: