Back To Top
Login
Register
Visit Us At TwitterVisit Us At YouTubeVisit Us At Facebook
KandiChat is in Beta Release. Try It Out
HomeHome  
  • UpdatesUpdates  
  • SearchSearch  
  • Latest imagesLatest images  
  • RegisterRegister  
  • Log inLog in  
  • March 2024
    MonTueWedThuFriSatSun
        123
    45678910
    11121314151617
    18192021222324
    25262728293031

    Calendar Calendar

    Search
     
     

    Display results as :
     


    Rechercher Advanced Search

    Similar topics
    Who is online?
    In total there are 2 users online :: 0 Registered, 0 Hidden and 2 Guests

    None

    Most users ever online was 140 on July 4th 2021, 2:03 pm
    RSS feeds


    Poll
    Top posting users this week
    No user


    View previous topic View next topic Go down  Message [Page 1 of 1]

    Mr.EasyBB

    Styling each widget differently

    Mr.EasyBB
    05/15/2013
    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.

    Similar topics

    -

    » Widget Toggler
    Share this post on: reddit

    mostone
    hello mr.easyBB

    please give screenshot/demo if you make tutorial ^^
    because the people who will read the tutorial will be able to understand, and would be more interesting, if the tutorial begins with a demo / screenshot. Wink

    please give this demo/screenshot for this tutorial ok Very Happy
    I would like to see^^

    i hope you understand Cool

    Post May 16th 2013, 9:53 am by mostone

    runawayhorses
    Liked
    How bout a step by step video tutorial complete with background music, would that fit the bill?? lol

    Post May 16th 2013, 11:20 am by runawayhorses

    mostone
    mr.runaway can you give me screenshot or demo about this tutorial?

    thanks before Smile

    Post May 16th 2013, 11:28 am by mostone

    Mr.EasyBB
    I will make a step by step video Very Happy

    Post May 16th 2013, 7:05 pm by Mr.EasyBB

    runawayhorses
    Mr.EasyBB wrote:Like
    huh? I was kidding. lol

    Post May 16th 2013, 7:27 pm by runawayhorses

    Mr.EasyBB
    [You must be registered and logged in to see this link.]

    there you go, step by step video for this tutorial. Even though I believe the tutorial above was down right simple and easy to understand. confused

    Post May 16th 2013, 8:52 pm by Mr.EasyBB

    runawayhorses
    Good video complete with music! One thing I never seen before that I noticed in the video was that blue scrolling box on the left-hand side that had the forumotion logo on it, I suppose that was the widget you were styling? I also noticed you using what looks the chrome equivalent of firebug, I use the same technique as you did by copying the changes in that and pasting in the stylesheet.

    Post May 16th 2013, 9:32 pm by runawayhorses

    Mr.EasyBB
    yes sir ita added no need for add on. its also easier than firebug inspector to be honest. i like it and that is why i use chrome more than FF

    Post May 16th 2013, 9:33 pm by Mr.EasyBB

    Post  by Sponsored content

    View previous topic View next topic Back to top  Message [Page 1 of 1]