Removing or resizing columns
Hello,
in this post I'll explain how to remove column(s) and how to resize column(s). You can see the result of the manipulation here http://mywebtv.cc/BlackTV.html
You can see the column of icons has been removed and the column of index has been made smaller. So has the column of channel title. The column of channel description is wider. Here is the css code of the columns before the manipulation:
.title_desc {
width:10%;
text-align:center;
}
.title_asce {
width:10%;
text-align:center;
}
.title_channel {
width:40%;
}
.title_description {
width:40%;
}
The css class title_desc is applied to the index column, title_asce is applied to the icons column, title_channel is applied to the channel name column and title_description is applied to the channel description column.
Here is the css code after modification:
.title_desc {
width:5%;
text-align:center;
}
.title_asce {
width:0;
display:none;
text-align:center;
}
.title_channel {
width:20%;
}
.title_description {
width:75%;
}
Notice the width property of the columns has changed. By default, width of the columns are defined in percentage values because I do not know what width you will want your webtv to have. However if you are set on what width you will give your webtv you can use pixels instead to specify the width. Just make sure you use all percentage or all pixels and if you use pixels, make sure the width sums up to the width of your webtv.
Also notice that display property is set to none on the icons column. This effectively removes it from your webtv.
If you are making changes to your webtv css and you want the changes to be applied immediately, you will need to cache manually the webtv after saving the changes (using the cache button on the FeaturedChannels section of your control panel).
So there you go.
Enjoy the webtvs,
Elvis
in this post I'll explain how to remove column(s) and how to resize column(s). You can see the result of the manipulation here http://mywebtv.cc/BlackTV.html
You can see the column of icons has been removed and the column of index has been made smaller. So has the column of channel title. The column of channel description is wider. Here is the css code of the columns before the manipulation:
.title_desc {
width:10%;
text-align:center;
}
.title_asce {
width:10%;
text-align:center;
}
.title_channel {
width:40%;
}
.title_description {
width:40%;
}
The css class title_desc is applied to the index column, title_asce is applied to the icons column, title_channel is applied to the channel name column and title_description is applied to the channel description column.
Here is the css code after modification:
.title_desc {
width:5%;
text-align:center;
}
.title_asce {
width:0;
display:none;
text-align:center;
}
.title_channel {
width:20%;
}
.title_description {
width:75%;
}
Notice the width property of the columns has changed. By default, width of the columns are defined in percentage values because I do not know what width you will want your webtv to have. However if you are set on what width you will give your webtv you can use pixels instead to specify the width. Just make sure you use all percentage or all pixels and if you use pixels, make sure the width sums up to the width of your webtv.
Also notice that display property is set to none on the icons column. This effectively removes it from your webtv.
If you are making changes to your webtv css and you want the changes to be applied immediately, you will need to cache manually the webtv after saving the changes (using the cache button on the FeaturedChannels section of your control panel).
So there you go.
Enjoy the webtvs,
Elvis
Labels: css, custom, webtv widget

2 Comments:
How do you change the font color?
change the color property here:
.tv .headers th,
.tv .headers a {
color:#FFF;
font-weight:normal;
}
and here
.tv {
width:100%;
border-collapse:collapse;
color:white;
font-size:12px;
}
Post a Comment
Subscribe to Post Comments [Atom]
<< Home