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!

TrollandToad.com
Reply
 
Thread Tools
  #51    
Old November 21st, 2009 (7:39 AM).
Jordan's Avatar
Jordan Jordan is offline
[:: Love Is War ★]
     
    Join Date: Jun 2005
    Location: Désordre, Empire of Canada
    Gender: Male
    Posts: 2,961
    Quote:
    Originally Posted by Sinnoh Champ Cynthia. View Post
    Thanks ^^

    Just wondering to more things:

    1) How do you get the crosshair cursor when someone goes over your signature?

    2) How do you add a music player on your signature?


    Sorry I'm asking so much.:nervous:
    Crosshair (last code):

    [css-div=" width: 100px; height: 100px; background-color: white; cursor: crosshair"][/css-div]


    Music player:

    Link.

    Edit: Curse you, Gavin xD;
    __________________
    MyAnimeList
    Spring Breeze
    Reply With Quote

    Relevant Advertising!

      #52    
    Old November 21st, 2009 (7:41 AM).
    cyan.'s Avatar
    cyan. cyan. is offline
    ▲ 愛してる .
       
      Join Date: Nov 2008
      Location: toronto.
      Gender: Female
      Nature: Timid
      Posts: 274
      Lol.

      Thanks to both of you, rep given .
      __________________
      マーズ
      Mars, Team Galactic Commander
      Hair Color: Red
      Eye Color: Red
      Reply With Quote
        #53    
      Old November 23rd, 2009 (9:29 PM).
      _Dean_'s Avatar
      _Dean_ _Dean_ is offline
      smoke if you got it
      • Gold Tier
       
      Join Date: Aug 2009
      Location: USA
      Age: 25
      Gender: Male
      Nature: Bold
      Posts: 915
      Hey, maybe somebody here can help me! :D
      I need to add a some texts in a link into my banner, here's the code.
      Code:
      Give until there's nothing left...
      I'd like to add a link in the next break, then one more break for some more text, and that's all. So three lines total. I just can't figure out how to add breaks and a link into it all. D:
      Reply With Quote
        #54    
      Old November 24th, 2009 (12:47 AM).
      THIRTY-SIX's Avatar
      THIRTY-SIX THIRTY-SIX is offline
      Banned
         
        Join Date: Oct 2004
        Posts: 8,176
        [css-div=color: red; cursor: crosshair; background-image:url("http://img689.imageshack.us/img689/8531/1259014078232z.jpg");width:320px; height: 241px; font-size: 11px; text-align: left;]Give until there is nothing left...
        [url=http://www.pokecommunity.com/showthread.php?t=201075]I've seen the future and I need to stop it.[/url]
        This would be the third line.[/css-div]

        You needed quotes in the background image.

        Give until there is nothing left...
        I've seen the future and I need to stop it.
        This would be the third line.


        Of course put color tags inside the link tags to change colour.
        Reply With Quote
          #55    
        Old November 30th, 2009 (5:24 PM).
        Jordan's Avatar
        Jordan Jordan is offline
        [:: Love Is War ★]
           
          Join Date: Jun 2005
          Location: Désordre, Empire of Canada
          Gender: Male
          Posts: 2,961
          Blech, can someone explain to me how to form the line-height CSS in BBCode? xD;
          __________________
          MyAnimeList
          Spring Breeze
          Reply With Quote
            #56    
          Old December 1st, 2009 (12:06 AM).
          ~Teh Panda~'s Avatar
          ~Teh Panda~ ~Teh Panda~ is offline
          Sea of Dreams - Redux
          • Silver Tier
           
          Join Date: Aug 2007
          Posts: 906
          Ugh I wrote up a mini basics thingy...

          CSS Document
          CSS = Cascading style sheet
          Example of CSS


          This is a crappy CSS example



          Why is CSS used?
          To enhance a posts design.
          What is its format?
          It is used as a BBCode. Here is the code for that 'crappy example'
          HTML Code:
          [css-div=" background-color: lightgrey; border-color: grey; border-style:solid;"]
          [CENTER]This is a crappy CSS example :)[/CENTER]
          [/css-div]
          Disregard the text which you see in the css and focus on the coding.
          __________________________________________________________________________________________

          Ok so now you now what a basic CSS code looks like I will present to you the basic code which is needed.
          [css-div], from here you can almost code any design into it. I myself have even only touched the surface of some of these commands.

          The most basics are parameter commands.
          Believe it or not this is in CSS now, what you are reading is a simple width parameter edit, I chose 180px.

          Height would just edit how much height the CSS takes up regardlss of how much text you have. It is advised not to use the height parameter when doing complex CSS designs.

          More on usage...
          Since our main code is [css-div], we must add things to it to make it stylized. Just using this BBCode will not do anything. Here is a table of some basic commands.
          Code:
          Width - explained above.
          Height - explained above
          Border-style - solid, etc. (solid is preferred)
          Border-color - in hexadecimal place the color.
          Border-width - in pixels how wide you want your border.
          Background-color - in hexadecimal place the color.
          background-image:url(" ") - then place the url in quotes.
          for more look through more CSS code...
          Finally here is how you put the codes in the CSS-Div.

          After you place the main [css-div], change it to [css-div=" "].
          Now in the quotes you will add your parameters of CSS.
          Here try to make your first CSS with a 400px wide, 2px black border, and white background.
          So place your CSS-Div, now add the new parameters.

          Here is the code you should have gotten, or something like it...

          HTML Code:
          [css-div="background-color: #FFFFFF; width: 400px; Border-color: #000000; border-width: 2px; Border-style:Solid;"][/css-div]
          Yep, should be like this.

          Basics tutorial over
          __________________




          Mystic still in work to let you know...
          Reply With Quote
            #57    
          Old December 1st, 2009 (6:08 AM).
          THIRTY-SIX's Avatar
          THIRTY-SIX THIRTY-SIX is offline
          Banned
             
            Join Date: Oct 2004
            Posts: 8,176
            Quote:
            Originally Posted by Jordan View Post
            Blech, can someone explain to me how to form the line-height CSS in BBCode? xD;
            It's best if you leave line height as normal... especially if you are just going to leave the text the way yours is set and not do it typographical. It just seems as if you have an extra break and two div/span tags for each line, which is unnecessary. If you want an extra space like that without two tags line-height:200%;

            Oh wait... you are using span and div wrong there me thinks.
            Reply With Quote
              #58    
            Old December 1st, 2009 (1:15 PM).
            Jordan's Avatar
            Jordan Jordan is offline
            [:: Love Is War ★]
               
              Join Date: Jun 2005
              Location: Désordre, Empire of Canada
              Gender: Male
              Posts: 2,961
              Quote:
              Originally Posted by ahahahahahahahaha View Post
              It's best if you leave line height as normal... especially if you are just going to leave the text the way yours is set and not do it typographical. It just seems as if you have an extra break and two div/span tags for each line, which is unnecessary. If you want an extra space like that without two tags line-height:200%;

              Oh wait... you are using span and div wrong there me thinks.
              I just wanted the space between the two lines to not be so far apart. I got it to work, though. Thanks!
              __________________
              MyAnimeList
              Spring Breeze
              Reply With Quote
                #59    
              Old December 3rd, 2009 (12:30 AM).
              ShinjisLover ShinjisLover is offline
              • Crystal Tier
               
              Join Date: Dec 2008
              Posts: 3,043
              Excuse me, but I need help regarding this post, please. =3
              Reply With Quote
                #60    
              Old December 7th, 2009 (5:08 PM).
              Morkula Morkula is offline
              Get in the Game
              • Platinum Tier
               
              Join Date: Feb 2004
              Location: Virginia
              Age: 29
              Gender: Male
              Posts: 7,302
              Going to shoot this over to Webmasters Discussion where it belonged to begin with~
              *Moved*
              __________________
              And just like that, the story ends.
              Reply With Quote
                #61    
              Old December 9th, 2009 (9:43 AM).
              Spherical Ice's Avatar
              Spherical Ice Spherical Ice is online now
              • Crystal Tier
               
              Join Date: Nov 2007
              Location: Bristol, UK
              Age: 19
              Posts: 5,226
              I've been doing some CSS emulation, so to speak.

              Spoiler:
              CSS:
              Quote:
              Originally Posted in vB Code.
              Hi CSS.


              vB Code:
              Quote:
              Originally Posted by Random Dude #2
              Hi vB.


              Spoiler:
              CSS:
              spoiler warning
              The proceeding text contains a spoiler.
              Plot and/or ending details follow containing information made in CSS.

              Hi


              vB Code:
              [simple-spoil="Hi"]Hi[/simple-spoil]


              The colours the were the colours used in the "Let's Get This Party Startered." theme of PC.
              ---

              Quote:
              Originally Posted by ShinjisLover View Post
              Excuse me, but I need help regarding this post, please. =3
              You'd want to make a box the dimensions you want (with width: #px; height: #px;), the type of border you'd want (with border-width: #px; border-style: solid; border-color: #;), and the text color and bg color (with background-color: #; color: #;) to make the big box, and then have smaller versions of that inside.
              __________________

              A Pokemon that is discriminated!
              Support squirtle and make it everyone's favourite.
              Reply With Quote
                #62    
              Old December 9th, 2009 (10:32 AM).
              Gary, the Magic Fairy's Avatar
              Gary, the Magic Fairy Gary, the Magic Fairy is offline
              Banned
                 
                Join Date: Feb 2006
                Location: Your Mother
                Age: 25
                Gender: Male
                Nature: Naughty
                Posts: 2,800
                Quote:
                Originally Posted by ShinjisLover View Post
                Excuse me, but I need help regarding this post, please. =3
                Actually, you can indeed use a "sprite sheet."
                [jq]In addition, sprite sheets (an image containing different sprite frames), count as a single sprite, so just keep that in mind."[/jq]As long as it isn't the same sprite but facing left, right, up, down, etc., you should be fine. That would be ridiculous to arbitrarily close threads just because all the sprites are in a single image, when it's exactly the same sprites.

                As for your question, I'm not 100% sure it's possible with pure CSS. I tried to do something very similar to this a few months back, and this was the best I could do:

                But having just a simple box that you can tile horizontally, and then putting the names in the individual sprite images would be easier.

                I can't find any way to have two or more CSS Divisions next to each other, so that's why I couldn't get it to work like you're asking.
                Reply With Quote
                  #63    
                Old December 9th, 2009 (11:56 AM).
                Spherical Ice's Avatar
                Spherical Ice Spherical Ice is online now
                • Crystal Tier
                 
                Join Date: Nov 2007
                Location: Bristol, UK
                Age: 19
                Posts: 5,226
                @ Gary: Yeah, that was the problem; they only seem to go together vertically, not horizontally. :/
                __________________

                A Pokemon that is discriminated!
                Support squirtle and make it everyone's favourite.
                Reply With Quote
                  #64    
                Old December 9th, 2009 (12:44 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
                  Quote:
                  Originally Posted by Gary, the Magic Fairy View Post
                  I can't find any way to have two or more CSS Divisions next to each other, so that's why I couldn't get it to work like you're asking.
                  display:inline property.

                  This is div 1
                  This is div 2
                  __________________
                  迷いながらトキメイタ 
                  記憶は儚くて消えないで

                  Reply With Quote
                    #65    
                  Old December 9th, 2009 (1:14 PM).
                  Gary, the Magic Fairy's Avatar
                  Gary, the Magic Fairy Gary, the Magic Fairy is offline
                  Banned
                     
                    Join Date: Feb 2006
                    Location: Your Mother
                    Age: 25
                    Gender: Male
                    Nature: Naughty
                    Posts: 2,800
                    Quote:
                    Originally Posted by jigglyppuff8 View Post
                    display:inline property.

                    This is div 1
                    This is div 2
                    Well crap. I wish I knew that a lot sooner.

                    Thanks. XD
                    Reply With Quote
                      #66    
                    Old December 22nd, 2009 (12:25 PM).
                    .little monster's Avatar
                    .little monster .little monster is offline
                    • Gold Tier
                     
                    Join Date: Jun 2009
                    Location: Ohio
                    Age: 24
                    Gender: Male
                    Posts: 4,291
                    Spoiler:

                    We're gonna run, nothing can stop us!



                    I can't figure out why the bottom bar wont stay at the bottom of the image (but over-laying the image), and why the top bar wont stay directly at the top (but over-laying the image.)

                    Can anyone help? ;-;

                    You'll have to quote to get the code.
                    Reply With Quote
                      #67    
                    Old December 22nd, 2009 (12:53 PM).
                    Rukario's Avatar
                    Rukario Rukario is offline
                    • Owner
                    • Battle Server Staff
                    • Platinum Tier
                    • Social Media
                     
                    Join Date: Sep 2002
                    Location: Somewhere in Ilex Forest
                    Nature: Adamant
                    Posts: 7,545
                    Quote:
                    Originally Posted by t.A.T.u View Post
                    Spoiler:

                    We're gonna run, nothing can stop us!



                    I can't figure out why the bottom bar wont stay at the bottom of the image (but over-laying the image), and why the top bar wont stay directly at the top (but over-laying the image.)

                    Can anyone help?

                    You'll have to quote to get the code.
                    ok i have to quote this first.... try this:
                    Spoiler:

                    We're gonna run, nothing can stop us!


                    adjusted the bottom txt thing's position by 30 px ie.. top: 212px;
                    __________________
                    - Rukario -


                    Twinned with Jedi_Amara | Paired with Your Name Here | Lil Sis Kimi-Chan | Sig
                    Reply With Quote
                      #68    
                    Old December 22nd, 2009 (12:56 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
                      Quote:
                      Originally Posted by t.A.T.u View Post
                      I can't figure out why the bottom bar wont stay at the bottom of the image (but over-laying the image), and why the top bar wont stay directly at the top (but over-laying the image.)

                      Can anyone help?

                      You'll have to quote to get the code.
                      Well, with the top bar, you had an extra line break which pushed the box down, along with an unnecessary " position: relative; top: -12px;", which pushed the box upward. The bottom bar just needed a few adjustments in the "position: relative; top" afterwards.

                      Spoiler:
                      We're gonna run, nothing can stop us!


                      The code looks less organized without the line breaks, but sacrifices. ;;
                      Hopefully, this is the result you wanted.
                      __________________
                      迷いながらトキメイタ 
                      記憶は儚くて消えないで

                      Reply With Quote
                        #69    
                      Old December 30th, 2009 (9:50 AM).
                      seeker's Avatar
                      seeker seeker is offline
                      Electric
                      • Platinum Tier
                       
                      Join Date: Apr 2009
                      Location: Ireland
                      Posts: 10,828
                      The CSS Signature Resource
                      All you need to know for using CSS in your signature.

                      Top Tip: Tired of always typing out those Css-div's? Are they getting in the way of the max character limit? Well, just try these;
                      [cd=css here;]
                      You don't need to insert "'s either!

                      100% Width Signatures


                      So, where to begin. How about the fad in which had many people baffled once upon a time? The 100% width signature. If you don't know what I mean, well it was something a little like this.
                      Spoiler:

                      And here we have text

                      and here we have an image


                      So that's a pretty basic example of what you can do with a 100% signature. Now I will run down through each code I used in the actual sig.



                      background-color: #000000; - The actual background in which everything goes over
                      background-image:url('http://cbimg6.com/graphics/07/09/26/38888b.jpg'); - The little decoration in the corner, any background you want to go behind your text etc. such as this or a gradient, should be put in as such followed by a few other things

                      background-position: bottom right; - This is where you want to position that background. You could also say; bottom-left; or Top Right; or Top; etc.
                      width:100%; height:300px; - This is the size of the image. BUT, the width MUST be set at 100% so that the black background goes that 100%, to prevent the image we used in the corner from repeating itself and stretching across the image we do the next step.
                      background-repeat:no-repeat; - This applies to the image we used, it will prevent the image from repeating. If you want an image torepeat itself in both directions dont enter this code, but if you want to make it repeat in only one enter this; Background-repeat: repeat-x; (this makes it repeat itself but only from left to right tofill the width where as; background-repeat:y will make it repeat from the top down. This happens when the background such as the black one I have is too big and the image needs to repeat itse;f to fill out.

                      This next part was the pretty ugly looking text I made.

                      color:#ffffff; - This relates to the colour of the text.
                      text-shadow: 0.2em 0.2em 0.4em; - This is the shadow behind the image. Each size represents a different part of the shadow, try playing with the numbers to see how it works.
                      font-size: 2em; - This is the size of the font.
                      font-weight:bold; - The font's "Weight" either bold, italic etc.
                      text-align:center; Where the text is aligned on the image.
                      font-family:Cambria; - This is the font I used. You can edit the text normally using BB code but some times it can mess up and make things awkward. I just use this to be safe.

                      And that is the 100% signature. If you have any more questions on it feel free to ask. I have some more codes to explain, nincluding the ones above in more depth.


                      All You need To Know About Text

                      Okay, so you've all seen some pretty text around the forum and wondered how it was done. Well there's many ways to make it look impressive. I'll start with the text currently in my signature and how I did it shall I?
                      Example:
                      Why So Serious?
                      let's put a smile on that face



                      How it's done.
                      font-size:20pt;
                      - Again just the font size, pt is just another way of sizing text
                      font-family:georgia; - The font used
                      letter-spacing:-1pt; - This is new, this is how the letters are spaced out. You can do this in other ways, you can make letters further away as well as closer together. Just put a "-" before the number tomake them closer together and none before the number to make them more spaced. The bigger the number the closer/further away the characters will be. Neat huh?
                      line-height:100%; - This sets how close two words will be when one is placed next to it. It will automatically pu the other word below so long as the other word has a line height code before it also. 100% means the word is at its normal height, the more you change the % the more it will move. As this is for the top words I left it normal.
                      color: #AC2239; - The colour of the text again.

                      That was for the words "WhySo Serious" The next part is for "Let's put a smile on that face"

                      font-size:6pt;
                      - Made the text considerably smaller to look more presentable
                      font-family:georgia; Same font as above
                      letter-spacing: 2pt; - I moved the letters further away from eachother for this
                      line-height:100%; When you insert line height it automatically makes the words overlap, so setting both lines to be at 100% has very little overlapping. if you were to decrease the number they would come closer together, if you increased it they would move further away. Play around with it a bit
                      color: #000000 - Once again, just colour.



                      Title tags with no dots underneath.

                      Quick and easy one, but very handy when making your signature look well!

                      Eample:
                      Hover Over Me

                      Solution:
                      [title=Tah Dah][css-div=text-decoration:none;]Hover Over Me[/css-div][/title]

                      Text Color

                      The color property is used to set the color of the text. The color can be specified by:
                      • name - a color name, like "red"
                      • RGB - an RGB value, like "rgb(255,0,0)"
                      • Hex - a hex value, like "#ff0000"
                      Example of a code using these:

                      color:red;
                      color: rgb(255,0,0);
                      color: #ff0000

                      Text alignment

                      The text-align property is used to set the horizontal alignment of a text.
                      Text can be centered, or aligned to the left or right, or justified.
                      When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).


                      Eamples of codes:


                      Text-align: Center
                      Text-align: right;
                      text-aling: justify;


                      Text Decoration:

                      Like I showed ablve with the title tag, text decoration can be used to take decoration from text, but it can also add decoration.

                      Examples of codes:

                      Text-decoration: none;
                      Text-decoration: blink;
                      Text- decoration: underline;
                      Text-decoration: line-through;
                      Text-decoration: Overline;
                      You can see those in action on the main post.

                      Text Transform:

                      This is used to transform text into different cases text-transform:uppercase;
                      text-transform:lowercase;
                      text-transform:capitalize;

                      Misc Codes That will really help!

                      Float: Float is aligning someting to the side of the screen while text will surround it without spilling into it. I will make a CSS box and float it to the right and put text around it as an example and then, tell you the code.





                      Here is your little box



                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Integer nulla purus, tempor vel, vestibulum id, ullamcorper id, sapien. Nulla facilisi. Sed tempus. Fusce metus. Curabitur rhoncus fringilla ligula. Ut euismod justo at elit. Quisque in massa. Nullam ut justo. Donec a diam. Ut nec sapien in velit ultricies adipiscing. Duis fermentum justo sed arcu dapibus ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Integer nulla purus, tempor vel, vestibulum id, ullamcorper id, sapien. Nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Integer nulla purus, tempor vel, vestibulum id, ullamcorper id, sapien. Nulla facilisi Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Integer nulla purus, tempor vel, vestibulum id, ullamcorper id, sapien. Nulla facilisi. Sed tempus. Fusce metus. Curabitur rhoncus fringilla ligula. Ut euismod justo at elit. Quisque in massa. Nullam ut justo. Donec a diam. Ut nec sapien in velit ultricies adipiscing. Duis fermentum justo sed arcu dapibus ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

                      Solution: Just put in [cd=float:right;] before whatever it is you want to float. You can also float things left :p

                      Overflow/Scrolling boxs:

                      These nare used when there is too much text which will not fit in one space. So I will make a background and have a lot of text with in it so that the scrolling box will appear, then explain the code.

                      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Integer nulla purus, tempor vel, vestibulum id, ullamcorper id, sapien. Nulla facilisi. Sed tempus. Fusce metus. Curabitur rhoncus fringilla ligula. Ut euismod justo at elit. Quisque in massa. Nullam ut justo. Donec a diam. Ut nec sapien in velit ultricies adipiscing. Duis fermentum justo sed arcu dapibus ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Integer nulla purus, tempor vel, vestibulum id, ullamcorper id, sapien. Nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Integer nulla purus, tempor vel, vestibulum id, ullamcorper id, sapien. Nulla facilisi Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sed urna. Integer nulla purus, tempor vel, vestibulum id, ullamcorper id, sapien. Nulla facilisi. Sed tempus. Fusce metus. Curabitur rhoncus fringilla ligula. Ut euismod justo at elit. Quisque in massa. Nullam ut justo. Donec a diam. Ut nec sapien in velit ultricies adipiscing. Duis fermentum justo sed arcu dapibus ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

                      You can add anything you wish to there of course, just add in other codes. If you've got too much text or images in one space just use this:
                      Solution:
                      Overflow:auto;


                      So that's it for now, I'll add on more as I think of it, but what you see above should be what you need for making a neat signature. Just apply the codes and follow the rules of CSS. Most of all DO NOT STEAL CODES, I'd much prefer if you learned them yourself, that's why examples are there. I'll add on to all this when I get the time, and tweak it but now Suggestions and questions go go go.
                      __________________
                      she's the greatest adventure I'll ever know
                      Reply With Quote
                        #70    
                      Old January 23rd, 2010 (11:08 AM).
                      Galukxy's Avatar
                      Galukxy Galukxy is offline
                      I'm one with binary now.
                      • Crystal Tier
                       
                      Join Date: Nov 2009
                      Location: Location not valid.
                      Age: 23
                      Nature: Quirky
                      Posts: 2,212
                      can i just ask i've been trying to get this CSS code thing to work for almost a week now and there's no luck for me. i'm trying to get the hover text in my banner how can i do that??
                      Reply With Quote
                        #71    
                      Old January 23rd, 2010 (11:15 AM). Edited February 13th, 2010 by Jordan.
                      Jordan's Avatar
                      Jordan Jordan is offline
                      [:: Love Is War ★]
                         
                        Join Date: Jun 2005
                        Location: Désordre, Empire of Canada
                        Gender: Male
                        Posts: 2,961
                        Quote:
                        Originally Posted by sspokemon View Post
                        can i just ask i've been trying to get this CSS code thing to work for almost a week now and there's no luck for me. i'm trying to get the hover text in my banner how can i do that??
                        You don't need CSS for that if I think this is what you meant:


                        Or if you meant text in the banner, then:

                        [cd= height: 240px; width: 390px; border: 1px solid; background-image: url("http://i20.photobucket.com/albums/b232/Birdmandata/Garyok.png"); padding: 5px 2px 2px 5px;][title="Hover text here"]Text and stuff[/title][/cd]

                        Which makes:
                        Text and stuff


                        Of course, the height and width should match whatever the properties of your banner are. Padding makes the text move in towards the center of the banner.
                        __________________
                        MyAnimeList
                        Spring Breeze
                        Reply With Quote
                          #72    
                        Old January 23rd, 2010 (12:42 PM).
                        Galukxy's Avatar
                        Galukxy Galukxy is offline
                        I'm one with binary now.
                        • Crystal Tier
                         
                        Join Date: Nov 2009
                        Location: Location not valid.
                        Age: 23
                        Nature: Quirky
                        Posts: 2,212
                        Quote:
                        Originally Posted by Miniryu View Post
                        You don't need CSS for that if I think this is what you meant:


                        Or if you meant text in the banner, then:

                        [cd= height: 240px; width: 390px; border: 1px solid; background-image: url("http://i20.photobucket.com/albums/b232/Birdmandata/Shirles.png"); padding: 5px 2px 2px 5px;][title="Hover text here"]Text and stuff[/title][/cd]

                        Which makes:
                        Text and stuff


                        Of course, the height and width should match whatever the properties of your banner are. Padding makes the text move in towards the center of the banner.
                        awesome thank you very much
                        Reply With Quote
                          #73    
                        Old February 13th, 2010 (6:46 AM).
                        Giga Universe's Avatar
                        Giga Universe Giga Universe is offline
                        Working on a tool.
                        • Crystal Tier
                         
                        Join Date: Aug 2007
                        Location: South Africa
                        Age: 22
                        Gender: Male
                        Nature: Calm
                        Posts: 121
                        Is it possible to build something like this?
                        http://www.w3schools.com/CSS/tryit.asp?filename=trycss_sprites_hover_nav
                        Apparently, it uses a gif animation, but I can't seem to port it to BB-Code, if it's possible at all.
                        Here is where I found the link:
                        http://www.w3schools.com/CSS/css_image_sprites.asp
                        It's called 'Image Sprites - Hover Effect'.
                        __________________
                        Reply With Quote
                          #74    
                        Old February 14th, 2010 (8:22 AM).
                        seeker's Avatar
                        seeker seeker is offline
                        Electric
                        • Platinum Tier
                         
                        Join Date: Apr 2009
                        Location: Ireland
                        Posts: 10,828
                        Quote:
                        Originally Posted by Giga Universe View Post
                        Is it possible to build something like this?
                        http://www.w3schools.com/CSS/tryit.asp?filename=trycss_sprites_hover_nav
                        Apparently, it uses a gif animation, but I can't seem to port it to BB-Code, if it's possible at all.
                        Here is where I found the link:
                        http://www.w3schools.com/CSS/css_image_sprites.asp
                        It's called 'Image Sprites - Hover Effect'.
                        Not possible on a forum such as PC, requires a simple HTML script however, written to ensure that when you hover over certain linked images they will revert to another image such as you displayed.
                        "#home" activates a pre written HTML script within the initial head as does "#prev" "#navlist" etc.

                        If you want to see what exactly they activate click the spoiler
                        Spoiler:

                        The "navlist" activates {position:relative;] - position is set to relative to allow absolute positioning inside it
                        #navlist li activates {margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin and padding is set to 0, list-style is removed, and all list items are absolute positioned
                        #navlist li, #navlist a activates{height:44px;display:block;} - the height of all the images are 44px
                        Next few will be split up for easier explanation
                        #home activates {left:0px;width:46px;} - Positioned all the way to the left, and the width of the image is 46px
                        #home activates {background:url(img_navsprites.gif) 0 0;} - Defines the background image and its position (left 0px, top 0px)
                        #prev activates {left:63px;width:43px;} - Positioned 63px to the right (#home width 46px + some extra space between items), and the width is 43px.
                        #prev activates {background:url('img_navsprites.gif') -47px 0;} - Defines the background image 47px to the right (#home width 46px + 1px line divider)
                        #next activates {left:129px;width:43px;}- Positioned 129px to the right (start of #prev is 63px + #prev width 43px + extra space), and the width is 43px.
                        #next activates {background:url('img_navsprites.gif') no-repeat -91px 0;} - Defines the background image 91px to the right (#home width 46px + 1px line divider + #prev width 43px + 1px line divider )



                        --------------------------------------------------

                        Tips & Tricks #1

                        Want to make a "title tag" without the dots underneath? Insert this code inside!
                        HTML Code:
                        [title=Example up][cd=text-decoration:none;]Example normal[/cd][/title]
                        To get

                        Example normal


                        Note:
                        Also works with images etc.
                        __________________
                        she's the greatest adventure I'll ever know
                        Reply With Quote
                          #75    
                        Old February 16th, 2010 (11:08 AM).
                        .Gamer's Avatar
                        .Gamer .Gamer is offline
                        »»───knee─►
                        • Silver Tier
                         
                        Join Date: Dec 2009
                        Location: NSFW
                        Gender: Male
                        Nature: Jolly
                        Posts: 1,523
                        K, so I have the title things around my signature, but I want to get them in. My question is, how?

                        Please and thank you. Or, if its harder to do titles inside the signature, how can I put text in there without redoing the picture and adding another textbox.
                        __________________
                        pair Smogon profile youtube
                        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 6:58 AM.