Science & Technology From the computer lab to the chemistry lab, or even the observatory, here's where we nerd out over all things science and technology!

Draconius GO
Reply
 
Thread Tools
  #401    
Old June 16th, 2011 (11:38 PM).
Gallaceon's Avatar
Gallaceon Gallaceon is offline
     
    Join Date: Jul 2010
    Gender: Male
    Posts: 15
    I have to use CSS on my forum
    Quote:
    I think that the CSS feature should be added. It'll make posts and signatures look more snazzy.
    Someone on my forum asked me for that..
    Can i anyone explain me how can i do so?
    I am using vBulletin 4
    __________________
    PokéHunngry™ Community - Pokemon Forum
    Reply With Quote

    Relevant Advertising!

      #402    
    Old June 20th, 2011 (9:44 AM).
    pokewalker's Avatar
    pokewalker pokewalker is offline
    If it ain't Dutch,it ain'tmuch
    • Silver Tier
     
    Join Date: Jun 2010
    Location: Netherlands
    Age: 20
    Gender: Male
    Nature: Jolly
    Posts: 669
    I have some annoying thing in my signature.... Does anyone know how to fix?














    pokewalker

    Code:
    PHP Code:
    [CENTER][title="Hunting! And previous signature got deleted cos it bugged up with some people. New one under construction!"][css-div=" width: 430px; height: 275px; background-image:URL('http://img600.imageshack.us/img600/8013/shinyswellowdwz.png'); padding-left: 19px; padding-right: 19px; border-radius: 50px; border-style: solid; border-color: #158015;"]












    [
    URL="http://www.pokecommunity.com/member.php?u=215584"][title="The only true Skylegend"][LEFT][IMG]http://images.wikia.com/pokemon/images/e/e7/Shiny_Swellow_BW.gif[/IMG][/LEFT][/title][/URL][RIGHT][COLOR="#158015"][SIZE="5"][FONT="Slackey"][title="CSS Teacher: Hybrid Trainer"]pokewalker[/title][/FONT][/SIZE][/COLOR][/RIGHT]
    [/css-div][/title][/CENTER
    __________________
    Reply With Quote
      #403    
    Old June 20th, 2011 (9:52 AM).
    Oryx's Avatar
    Oryx Oryx is offline
    CoquettishCat
    • Crystal Tier
     
    Join Date: Mar 2011
    Age: 25
    Gender: Female
    Nature: Relaxed
    Posts: 13,204
    Can you explain what's annoying? It looks perfectly alright for me (the sprite is animated as well):

    __________________


    Theme * Pair * VM * PM

    Not all men...

    Are all men stupid?

    That's right.

    Reply With Quote
      #404    
    Old June 20th, 2011 (10:19 AM).
    jigglyppuff8's Avatar
    jigglyppuff8 jigglyppuff8 is offline
       
      Join Date: Jun 2007
      Location: PA, USA :effort
      Age: 24
      Gender: Male
      Nature: Modest
      Posts: 2,326
      If it's the text being under the box that's the problem, then use [image=left] tags instead of [img] tags for the image.














      pokewalker

      I would advise against using line breaks for the purpose of positioning since their height can vary from browser to browser. I'd use position:relative;, padding, and margin properties to position things around.
      __________________
      迷いながらトキメイタ 
      記憶は儚くて消えないで

      Reply With Quote
        #405    
      Old June 20th, 2011 (10:35 AM).
      pokewalker's Avatar
      pokewalker pokewalker is offline
      If it ain't Dutch,it ain'tmuch
      • Silver Tier
       
      Join Date: Jun 2010
      Location: Netherlands
      Age: 20
      Gender: Male
      Nature: Jolly
      Posts: 669
      Quote:
      Originally Posted by Toujours View Post
      Can you explain what's annoying? It looks perfectly alright for me (the sprite is animated as well):

      Yeah, but I want the "pokewalker" in the box xD And I can't get it on the place I want.

      Quote:
      Originally Posted by jigglyppuff8 View Post
      If it's the text being under the box that's the problem, then use [image=left] tags instead of [img] tags for the image.














      pokewalker

      I would advise against using line breaks for the purpose of positioning since their height can vary from browser to browser. I'd use position:relative;, padding, and margin properties to position things around.
      Sure, looks beter, I'll try also getting the pokewalker one enter lower.

      EDIT: Nvm. It's fine now, exactly how I wanted it. Thanks!
      __________________
      Reply With Quote
        #406    
      Old June 20th, 2011 (1:42 PM).
      Oryx's Avatar
      Oryx Oryx is offline
      CoquettishCat
      • Crystal Tier
       
      Join Date: Mar 2011
      Age: 25
      Gender: Female
      Nature: Relaxed
      Posts: 13,204
      For some reason the links in my signature don't work. I have a link on IRC, one on Talk, and one on Me, and none of them are activating.

      PHP Code:
      [cd="height:120px;width:500px;overflow:visible;"][cd="background-image:url("http://i53.tinypic.com/2m28kn9.png");  width: 500px; height: 200px; float:left;"]
      [cd="font-size: 20px; color:#330000; text-align:  left;decoration:none;font-family:"Trebuchet MS";position:relative;  top:-15px; left:160px; overflow:auto; width:500px;  height:280px;letter-spacing:10px;line-height:40px;text-shadow:0px 0px  5px #ffffff;"][title="Catch all non-Unova Pokemon in  Unova"]Goal[/title]
      [
      cd="font-size: 15px; color:#737373; text-align:  left;decoration:none;font-family:"Trebuchet MS";position:relative;  top:-15px; left:60px; overflow:visible; width:200px;  height:200px;letter-spacing:7px;line-height:40px;text-shadow:0px 0px 5px  #ffffff;"][title="133/174, 76.4%"](Progress)[/title]
      [
      cd="font-size: 20px; color:#330000; text-align:  left;decoration:none;font-family:"Trebuchet MS";position:relative;  top:-5px; left:-59px;  overflow:visible;height:100px;letter-spacing:10px;line-height:40px;text-shadow:0px  0px 5px #ffffff;"][title="Sanguinius <3"]Pair[/title]
      [
      cd="font-size: 20px; color:#330000; text-align:  left;decoration:none;font-family:"Trebuchet MS";position:relative;  top:16px; left:0px;  overflow:visible;height:100px;letter-spacing:10px;line-height:40px;text-shadow:0px  0px 5px #ffffff;"]★IRC
      [cd="font-size: 15px; color:#737373; text-align:  left;decoration:none;font-family:"Trebuchet MS";position:relative;  top:-15px; left:60px; overflow:visible; width:200px;  height:30px;letter-spacing:7px;line-height:40px;text-shadow:0px 0px 5px  #ffffff;"](Talk to me)
      [/
      cd][/cd][/cd][/cd][/cd][/cd][/cd]
      [
      cd="font-size: 15px; color:#330000; text-align:  left;decoration:none;font-family:"Trebuchet MS";position:relative;  top:-10px; left:217px;  overflow:visible;height:50px;width:500px;letter-spacing:5px;line-height:40px;text-shadow:0px  0px 5px #ffffff;"]I ask for nothingI can get by
      [/cd]
      [
      cd="font-size: 15px; color:#330000; text-align:  left;decoration:none;font-family:"Trebuchet MS";position:relative;  top:10px; left:300px;  overflow:visible;height:50px;width:500px;letter-spacing:5px;line-height:40px;text-shadow:0px  0px 5px #ffffff;"]but I know so many less lucky than I[/cd
      __________________


      Theme * Pair * VM * PM

      Not all men...

      Are all men stupid?

      That's right.

      Reply With Quote
        #407    
      Old June 20th, 2011 (2:00 PM).
      jigglyppuff8's Avatar
      jigglyppuff8 jigglyppuff8 is offline
         
        Join Date: Jun 2007
        Location: PA, USA :effort
        Age: 24
        Gender: Male
        Nature: Modest
        Posts: 2,326
        Are you sure you put the [URL] tags in? Because I'm not seeing them.
        __________________
        迷いながらトキメイタ 
        記憶は儚くて消えないで

        Reply With Quote
          #408    
        Old June 20th, 2011 (8:38 PM).
        Oryx's Avatar
        Oryx Oryx is offline
        CoquettishCat
        • Crystal Tier
         
        Join Date: Mar 2011
        Age: 25
        Gender: Female
        Nature: Relaxed
        Posts: 13,204
        They're there, I just forgot to switch out of the dumb rich text mode before I copied it so it copied as if they're not there. the links look like this:

        PHP Code:
        [url="blahblahblah.com"][color=#123456]IRC[/color][/url] 
        I tried putting the url inside so the link color showed up but I still couldn't click it.
        __________________


        Theme * Pair * VM * PM

        Not all men...

        Are all men stupid?

        That's right.

        Reply With Quote
          #409    
        Old June 20th, 2011 (9:36 PM).
        jigglyppuff8's Avatar
        jigglyppuff8 jigglyppuff8 is offline
           
          Join Date: Jun 2007
          Location: PA, USA :effort
          Age: 24
          Gender: Male
          Nature: Modest
          Posts: 2,326
          Please forgive me for starting completely over, but I could not follow your code with all of its positioning and height and width shenanigans.

          Goal
          (Progress)
          Pair

          ★IRC
          (Talk to me)
          I ask for nothing, I can get by
          but I know so many less lucky than I

          Spoiler:
          [center][cd=height:200px; width:500px; overflow:hidden; background-image:url('http://i53.tinypic.com/2m28kn9.png');][left][cd=line-height:29px; margin-left:160px; margin-top:10px; font-family:Trebuchet MS; text-shadow:0px 0px 5px #ffffff;][span="font-size: 20px; color:#330000; letter-spacing:10px;"]★[title="Catch all non-Unova Pokemon in Unova"]Goal[/title][/span]
          [span=font-size: 15px; color:#737373; letter-spacing:7px; position:relative; left:60px; bottom:10px;][title="133/174, 76.4%"](Progress)[/title][/span]
          [span=font-size: 20px; color:#330000; letter-spacing:10px;]★[title="Sanguinius <3"]Pair[/title][/span]

          [span=font-size: 20px; color:#330000; letter-spacing:10px;]★IRC[/span]
          [span=font-size: 15px; color:#737373; letter-spacing:7px; position:relative; left:60px; bottom:10px;](Talk to me)[/span][/cd][/left][/cd][cd=width:500px; color:#330000; text-align: left;decoration:none;font-family:"Trebuchet MS"; font-size: 15px; letter-spacing:5px; text-shadow:0px 0px 5px #ffffff;][left][span=position:relative; right:65px; ]I ask for nothing, I can get by[/span]
          but I know so many less lucky than I[/left][/cd][/center]


          I wouldn't use so many divs for just simple text. Divs tend to add line breaks whenever a new one is added which is quite pain if your code doesn't require divs. Spans work just as well at getting the job done without having to add a line break or height/width shenanigans.

          Now, indepth break down of what I did. Hopefully it won't be too hard to follow.

          1. Start with [Center] to make it center align.
          2. Declare a [cd] div that will contain the background-image. It will hide anything that spills out of it.
          3. Use [Left] to left align anything with this div.
          4. Declare another [cd] div that will contain the code used most often so that it doesn't have to be repeated in each new span/div. For example, the margin-left:160px; moves all the text over at least 160px from the left edge.
          5. Use [span]s around the text and code that they need individually.
          6. Close each [span] after the text they modify. Compare to how you had all of your [/cd]s at the end.
          7. Close the second [cd] div.
          8. Close the [left].
          9. Close the first [cd] div.
          10. Make a new [cd] div that will contain the rest of the text.
          11. [left] to left align everything again.
          12. [span] on the first line to move it over like you had and closed on the first line.
          13. Close the [left].
          14. Close this [cd] div.
          15. Close the [center].

          Links should work. I don't know what they are, so you should put them in yourself.
          __________________
          迷いながらトキメイタ 
          記憶は儚くて消えないで

          Reply With Quote
            #410    
          Old June 20th, 2011 (10:00 PM).
          Oryx's Avatar
          Oryx Oryx is offline
          CoquettishCat
          • Crystal Tier
           
          Join Date: Mar 2011
          Age: 25
          Gender: Female
          Nature: Relaxed
          Posts: 13,204
          I'm not sure I quite understand, but I'll take your word for it because it works. xD Thanks!
          __________________


          Theme * Pair * VM * PM

          Not all men...

          Are all men stupid?

          That's right.

          Reply With Quote
            #411    
          Old June 20th, 2011 (10:15 PM).
          jigglyppuff8's Avatar
          jigglyppuff8 jigglyppuff8 is offline
             
            Join Date: Jun 2007
            Location: PA, USA :effort
            Age: 24
            Gender: Male
            Nature: Modest
            Posts: 2,326
            If there's anything in particular that you'd like clarified on why I did it the way I did, feel free to ask.
            __________________
            迷いながらトキメイタ 
            記憶は儚くて消えないで

            Reply With Quote
              #412    
            Old June 20th, 2011 (10:25 PM).
            TheMarkCrafter TheMarkCrafter is offline
            roses are red, violets are blue, i used to break rules but now im new.
               
              Join Date: Jan 2011
              Location: Kalos
              Gender: Male
              Nature: Serious
              Posts: 549
              How can i make Dark to Lime green text colors?
              Like in jigglypuff's?
              __________________
              winter is here.
              back at 12/23/15
              Reply With Quote
                #413    
              Old June 20th, 2011 (11:21 PM).
              Alternative's Avatar
              Alternative Alternative is offline
              stalwart command
              • Crystal Tier
               
              Join Date: Jan 2009
              Location: Adelaide, Australia
              Age: 24
              Gender: Male
              Nature: Impish
              Posts: 4,268
              You can do it manually by getting all seperate colours, but that would take a while, or you can use a text gradient generator, such as this one to make it. It shouldn't be too hard to do what you want with it.
              Reply With Quote
                #414    
              Old June 23rd, 2011 (4:27 AM).
              pokewalker's Avatar
              pokewalker pokewalker is offline
              If it ain't Dutch,it ain'tmuch
              • Silver Tier
               
              Join Date: Jun 2010
              Location: Netherlands
              Age: 20
              Gender: Male
              Nature: Jolly
              Posts: 669

              PHP Code:
              [RIGHT][title="The best Pokémon ever"][css-div=" width: 450px; height: 210px; background-image:URL('http://img541.imageshack.us/img541/8013/shinyswellowdwz.png'); padding-left: 19px; padding-right: 19px; "][RIGHT][COLOR="#178262"][SIZE="5"][FONT="Slackey"][title="hunting, 765 eggs"]SHINY SWELLOW[/title][/FONT][/SIZE][/COLOR][SIZE="5"][/SIZE][/RIGHT]

              [
              css-div=" width:10px;"][sound="swellow"]http://veekun.com/dex/media/cries/277.ogg[/sound][/css-div]
              [title="Click all links please"]
              [
              css-div=" width:110px; height:70px; overflow:auto; border-radius: 50px; border-style: solid; background-color: #FFAB40; border-color: #EE6A02"]
              [
              CENTER][URL="http://www.youtube.com/user/pokedragonmaster"][title="Sub me please"][COLOR="#FFFFFF"][B]My YouTube[/B][/COLOR][/title][COLOR="#FFFFFF"][B][/B][/COLOR]
              [
              URL="http://www.pokecommunity.com/member.php?u=119663"][B][COLOR="#FFFFFF"][title="Awesome guy, check him out!"]My CSS Teacher[/title][/COLOR][/B][/URL][B][COLOR="#FFFFFF"]
              [/
              COLOR][/B][COLOR="#FFFFFF"][/COLOR][/URL][/CENTER][/css-div][/title]
              [/
              css-div][/title][/RIGHT
              Basically I want the black/grey thing in the back away, and I want the music bar to be resized which I saw in Roswell's sig and then it'll fit in Swellow's mouth. Anyone have any suggestions?
              __________________
              Reply With Quote
                #415    
              Old June 23rd, 2011 (5:23 PM).
              jigglyppuff8's Avatar
              jigglyppuff8 jigglyppuff8 is offline
                 
                Join Date: Jun 2007
                Location: PA, USA :effort
                Age: 24
                Gender: Male
                Nature: Modest
                Posts: 2,326
                Learn to use height, width, and overflow properties in your favor. No I will not give you the code.
                __________________
                迷いながらトキメイタ 
                記憶は儚くて消えないで

                Reply With Quote
                  #416    
                Old July 1st, 2011 (10:47 AM).
                flamz321's Avatar
                flamz321 flamz321 is offline
                Redefining the arts...
                   
                  Join Date: Apr 2011
                  Age: 21
                  Gender: Male
                  Nature: Brave
                  Posts: 34
                  Hey can anyone help me out? I'm looking for a way to make a text box on my thread, but i don't know how T_T. Is it just standard CSS commands? Or do i have to make an image and insert it?
                  __________________
                  Pokemon Cobalt



                  Reply With Quote
                    #417    
                  Old July 1st, 2011 (10:54 AM).
                  Liliana Vess Liliana Vess is offline
                  • Platinum Tier
                   
                  Join Date: Nov 2008
                  Location: «UK»
                  Gender: Male
                  Posts: 1,984
                  Well by text box do you mean the scroll one? because to do that all you need to do is create a CSS box and set it to overflow, like this

                  text
                  text
                  text
                  text
                  moar text


                  the code looks like this
                  [css-div=" width:100px; height:50px; overflow:auto;"]
                  text
                  text
                  text
                  text
                  moar text
                  [/css-div]
                  Reply With Quote
                    #418    
                  Old July 1st, 2011 (11:32 AM).
                  flamz321's Avatar
                  flamz321 flamz321 is offline
                  Redefining the arts...
                     
                    Join Date: Apr 2011
                    Age: 21
                    Gender: Male
                    Nature: Brave
                    Posts: 34
                    Quote:
                    Originally Posted by Hybrid Trainer View Post
                    Well by text box do you mean the scroll one? because to do that all you need to do is create a CSS box and set it to overflow, like this

                    text
                    text
                    text
                    text
                    moar text


                    the code looks like this
                    [css-div=" width:100px; height:50px; overflow:auto;"]
                    text
                    text
                    text
                    text
                    moar text
                    [/css-div]
                    Ah sorry I meant infobox.
                    __________________
                    Pokemon Cobalt



                    Reply With Quote
                      #419    
                    Old July 1st, 2011 (11:38 AM).
                    Liliana Vess Liliana Vess is offline
                    • Platinum Tier
                     
                    Join Date: Nov 2008
                    Location: «UK»
                    Gender: Male
                    Posts: 1,984
                    Quote:
                    Originally Posted by flamz321 View Post


                    Ah sorry I meant infobox.
                    Infobox? can you give an example of somewhere where its used?
                    Reply With Quote
                      #420    
                    Old July 1st, 2011 (11:56 AM).
                    flamz321's Avatar
                    flamz321 flamz321 is offline
                    Redefining the arts...
                       
                      Join Date: Apr 2011
                      Age: 21
                      Gender: Male
                      Nature: Brave
                      Posts: 34
                      http://www.pokecommunity.com/showthread.php?t=215424&highlight=uranium

                      The infobox is on the right with the download, team, status, etc.
                      __________________
                      Pokemon Cobalt



                      Reply With Quote
                        #421    
                      Old July 1st, 2011 (12:13 PM).
                      Liliana Vess Liliana Vess is offline
                      • Platinum Tier
                       
                      Join Date: Nov 2008
                      Location: «UK»
                      Gender: Male
                      Posts: 1,984
                      text and stuff here
                      Oh right!
                      well for that all you needed to do was make it float to the right but using this code float:right;
                      coding looks a little like this
                      [css-div=" width:100px; height:50px; float:right; border:solid;"]text and stuff here[/css-div]
                      Reply With Quote
                        #422    
                      Old July 1st, 2011 (12:19 PM). Edited July 1st, 2011 by flamz321.
                      flamz321's Avatar
                      flamz321 flamz321 is offline
                      Redefining the arts...
                         
                        Join Date: Apr 2011
                        Age: 21
                        Gender: Male
                        Nature: Brave
                        Posts: 34
                        Phew thanks you're a lifesaver :D

                        And how do I make the subsections inside the big box?
                        __________________
                        Pokemon Cobalt



                        Reply With Quote
                          #423    
                        Old July 1st, 2011 (12:40 PM).
                        Liliana Vess Liliana Vess is offline
                        • Platinum Tier
                         
                        Join Date: Nov 2008
                        Location: «UK»
                        Gender: Male
                        Posts: 1,984
                        Whatever
                        Other stuff
                        well thats just other CSS boxes inside of that, one of them will have a different background colour and stuff.

                        [css-div=" width:100px; height:50px; float:right; border:solid;"][css-div=" width:100%; height:20px; background-color:black; color:white;"]Whatever[/css-div]Other stuff[/css-div]
                        Reply With Quote
                          #424    
                        Old July 5th, 2011 (2:41 PM).
                        Owl's Avatar
                        Owl Owl is offline
                        • Crystal Tier
                         
                        Join Date: Jul 2009
                        Age: 22
                        Gender: Female
                        Posts: 13,368
                        Just wondering, how do you do the 'hover text' with CSS? I've tried following this, yet I still can't do it. Any help please?
                        __________________


                        Reply With Quote
                          #425    
                        Old July 5th, 2011 (2:47 PM).
                        seeker's Avatar
                        seeker seeker is offline
                        Electric
                        • Platinum Tier
                         
                        Join Date: Apr 2009
                        Location: Ireland
                        Posts: 10,831
                        You can't, you need HTML, CSS alone doesn't have the capabilities.
                        __________________
                        she's the greatest adventure I'll ever know
                        Reply With Quote
                        Reply

                        Quick Reply

                        Join the conversation!

                        Create an account to post a reply in this thread, participate in other discussions, and more!

                        Create a PokéCommunity Account

                        Sponsored Links
                        Thread Tools

                        Posting Rules
                        You may not post new threads
                        You may not post replies
                        You may not post attachments
                        You may not edit your posts

                        BB code is On
                        Smilies are On
                        [IMG] code is On
                        HTML code is Off

                        Forum Jump


                        All times are GMT -8. The time now is 1:33 AM.