DNN styling solutions

CSS for textbox

2011-08-23T01:45:00.000-07:00

The below css properties are for input type "text".

1) input[type="text"]{outline:none; padding-left:5px;background:#000}
input[type="password"]{outline:none; padding-left:5px; background:#999 ;}

if you wrote only first line it applies for only the type text .if you want to apply some properties to all the text box then you have to write the following css,

2) input,textbox{outline:none; padding-left:5px;}

use and Enjoy :)

css3 New Important properties

2011-08-06T03:38:00.000-07:00

@font-face:

One major thing that i used my websites,this can be very easily implemented because it is not very technical.

Syntax:   

@font-face {
      font-family: "My_Font";
      src: url(Hettesheler.ttf) format("opentype");
}

.Container{font-family:My_Font;}

Border-Radius

 Rounded corner was the popular issue on desighner points.

But now this is the simple and ultimate solution.

But some where this is not a full stop because below version of IE

still not responding on this so u need to use some

another solution like i already given image sprite for particluar IE only.

Syntax:  #myclass{border-radius:10px;}

Opacity

opacity with hexa decimal code of color,because when you use the prperty opacity it transparent the inner div too.but it works!!

background: rgba(0, 0, 0, 0.5)

it gives transparent background.

box-shadow:                                  

its like text-shadow property 

box-shadow: 2px 2px 5px 10px #000;

 These are the following values:

x-offset
y-offset
blur
color of shadow

The first two values are the offset of the shadow, the third the blur  radius, and the fourth value the spread radius. The last value is, of  course, the shadow color.        

 Multiple backgrounds :  

.box {  background: url(image/path.jpg) 0 0 no-repeat,   url(image2/path.jpg) 100% 0 no-repeat;  }  

The comma is separator where we place the different backgrounds.

Enjoy !!

Rounded corner specific for Interner Explorer

2011-06-28T01:45:00.000-07:00

A common problem has been found for web designer is the rounded corner buttons,div etc.Usually we use images but now we can simply create rounded corner with "border-radius:5px;" it create rounded corner with 5px radius.But it only work with IE 9 only.I have an idea to create rounded corner button using image strips.

so create an image shown as below:

Step 1: create style for the button

.Contact_Sendbtn

{

width:97px;

height:27px;

background:#3399FF;

border-radius:5px;

background:url(Sendbtn.png)\9; //specific for IE//

line-height:28px;

color:#fff;

text-align:right;

curser:pointer;

text-shadow:#999;

margin-right:5px;

font-family:Arial;

font-size:13px;

font-weight:bold;

}

.Contact_Sendbtn:hover

{

background:#6DCA44;

border-radius:5px;

background:url(Sendbtn.png)\9;

background-position:0px -29px;

}

.Contact_Sendbtn span{ padding-right:5px; }

Step 2:

Apply the class on your HTML

Try and enjoy :)

Custom font CSS for all Browsers

2011-06-27T03:12:00.000-07:00

Hello readers, Its very important to see your websites in all browser similar.but some properties cant work common in all.well our design should be attractive to catch the eyes.so we can use uncommon fonts to look well on ur websites.
commonly we use ttf file for this.when you insert HTML module in your Dotnet Nuke web page,it is very important to see in Interner expolrer too.because the views of 7,8 and 9 are quite different.This can be useful for normal html websites too.you can see a good result in Firefox and Chrome.But in 'ie' it wouldn't show the result.so you neet the 'eot' file and svg file for the same font.you can convert the 'ttf' file to the corresponding by online converting tools.
so i tried some hack to display your custom font in your website.
Well its work and i think very good options for your designing.

first of all i downloaded ttf file of "Haettenschweiler" which i am going to use.
then,add in css code.
@font-face {
font-family:'MyText';
src: url('yourpath/font/Haettenschweiler.eot');
src: url('yourpath/font/Haettenschweiler.eot?#iefix') format('embedded-opentype'),
url('yourpath/font/Haettenschweiler.woff') format('woff'),
url('yourpath/font/Haettenschweiler.ttf') format('truetype'),
url('yourpath/font/Haettenschweiler.svg#Haettenschweiler') format('svg');
}
here MYText is the name of the font,where you can write any name.
and the next step is to add your css class

for example,
h4
{
.EXT_BrandHome_HTML .BranHome_HTML_TextL h4,.BranHome_HTML_TextM h4
{
font-family:baloobaText;
font-size: 2
text-align:left;
color:#080808;
font-weight:normal;

}
now you can use the tag in your HTML file.
Heya and Welcome
You can see the output.

.....Try and enjoy... :)

DNN unoreded list menu

2011-04-08T00:02:00.000-07:00

Finally i made DNN unordered list with cool effects.This is unbelievably manageable than the normal navigation.There is no specific menu css for this. I simply maintain the style in skinn.css file with needed elements.In my previous work i made some modification over the existed one.
My css properties:

.shop_menu
{
background: #000000;
clear: both;
height: 26px;
text-align: center;
margin:0 auto;
padding:0px !important;
border:0px !important;

}
.shop_menu ul
{
list-style-type: none outside none ;
display:block;
float:right;
margin:0 auto;
padding: 0;
font-size: 1em;
margin-right:30px;
}
.mainMenu
{
margin:0px;

}
.mainMenu .root {
display: block;
float: left;
list-style: none outside none;
margin: 0 1px 0 0;

}
.mainMenu .mi a {
color:#fff;
display: block;
font-size: 1em;
padding: 6px 14px 0px 14px;
text-decoration: none !important;
text-transform: uppercase;
background-color: #ADD8E6;
width:auto !important;

}
.mainMenu .mi a:hover {
color: #FFFFFF;
font-size: 1em;
padding: 6px 14px 0px 14px;
}
.mainMenu .root a {
background:transparent;
}
.mainMenu .sel a {
color: #1297F9 !important;
background:url(images/menu-hover.jpg) repeat-x;
position:relative;
top:4px;
height:26px;
width:67px ;
color:#36AAF7 !important;
line-height:12px;
-moz-border-radius-topleft: 6px;
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topright: 6px;
-webkit-border-top-right-radius: 6px;
border-top-right-radius : 6px;
border-top-left-radius: 6px;

}

.mainMenu .m
{
background-color: #ADD8E6;
float: none;
padding:10px 0px 3px 0px;
width:auto;
height:auto;
text-align:left;
margin-top:7px;
}
.mainMenu .m li {
margin: 0;
line-height:20px;
}
.mainMenu .m a {
padding:5px 5px 3px 5px;
text-transform: none;
text-align:left;
width:auto;
white-space:nowrap;
word-spacing:normal;
background-color: #ADD
8E6;
}
.mainMenu .m img {
padding-right: 5px;
}

shop_menu is the main man bar and the main menus are the properties applying on the navigation.
Now playing with DNN menu control,

These could be a simple solution for you too because i enjoyed it with,and my page is look like.

Enjoy styling :)

Min-height issue in ie

2011-02-28T05:18:00.000-08:00

Some how a normal problem to deal with ie issue is min-height.usually we put
min-height:100px;
height:auto;
But ie doesn't show the property.Now it can be possible,there is a simple code for all the browsers including ie.

#Mydiv
{
min-height:70px;
height:auto !important;

position:relative;
height:70px;
}

This will work with ie as well as firefox and crome.

Enjoy!! :)

Centralize DIV

2011-02-14T01:56:00.000-08:00

div at center position:

To centralize the div you can simply add style with two property
text-align:center; and margin:0 auto;
for example,create an ID or class

my new id

Now you can see that your wrapper call will exactly display on the center of the body.

display bottom-right

2011-02-14T01:30:00.000-08:00

Display Bottom-right:

How can you display your text or image in a fixed position.This can be done through padding and margin.But in case your div will expand, the text will move from their position.

You can handle your div with the following property:

.Mydiv

{

padding: 0px;

margin: 0px;

position: absolute;

bottom:10px;

right: 7px;

}

There is no need of set the padding or margin.

Display top-left: