Hey guys, so today I am going to give you a quick code that will make it a lot easier to style your widgets different per your request. For example if we wanted the third widget on the left our CSS would look something like so
#widg2{border:1px solid #FF0000;border-radius:5px;background:#000}As you can see it says #widg2, 2 is three since 0 is 1 in JavaScript. So whatever the number widget is, just subtract one and that is what your actual number is.
Codes:
[hc=phpbb2 Code]
- Code:
$(function() {
var Lnumber = $('#left .forumline'),Rnumber =$('#right .forumline'),i;
for (i=0;i<Lnumber.length;i++) {
$(Lnumber)[i].id='widg'+i;
}
for (i=0;i<Rnumber.length;i++) {
$(Rnumber)[i].id='widget'+i;
}
});
[/hc]
[hc=punbb code]
- Code:
$(function() {
var Lnumber = $('#left .module'),Rnumber =$('#right .module'),i;
for (i=0;i<Lnumber.length;i++) {
$(Lnumber)[i].id='widg'+i;
}
for (i=0;i<Rnumber.length;i++) {
$(Rnumber)[i].id='widget'+i;
}
});
[/hc]
[hc=phpbb3 code]
- Code:
$(function() {
var Lnumber = $('#left .module'),Rnumber =$('#right .module'),i;
for (i=0;i<Lnumber.length;i++) {
$(Lnumber)[i].id='widg'+i;
}
for (i=0;i<Rnumber.length;i++) {
$(Rnumber)[i].id='widget'+i;
}
});
[/hc]
[hc=invision code]
Coming Soon...
[/hc]
As you read the code, you will see that one side will be label #widg1 and the right side will be labeled #widget1 this is because ID's must be unique! This will also help us get some cool effects in JavaScript. You can go further into this by adding selectors per #widg1 .module-title and so forth. Have any questions please ask, and do not say this does not work, I know it does. So read your Console Errors, by right clicking your screen and clicking inspect element in Google Chrome and FireFox, or F12.