|
Post by amlin on Jun 26, 2013 1:16:09 GMT -8
Okay, so I have another question /shot. This time about v4. So I'm making a skin for v4 and I have this really interesting (at least to me) idea for the boards that I want to do. Everything's working great like usual. Untilllll- I get the the board description area. In fact everything BUT this part of the boards is coded. I don't even know if it's possible and I've been trying to get this for two days now so thought maybe someone here can help me. What I want to do with the board description should look a little something like this mockup-thing I made. Notice, there's an image floating to the left of a section of text. It has a border radius and a 3px border around it. The description itself is in an overflow so that if it goes above approximately 100px, it will get that little purple scroll bar (which on another note the code for some reason is like, incompatible with my skin or something, never had that problem either =w=). Does anyone know how to do this? I already have the image to the left floating beside the text which refuses to justify like the other boards that don't have this styling (just testing right now on one board). I want to put different images for each board, so I did it in a table, image in the the first column, text in the right. I would really appreciate any help I can get for this if it's even possible xD. I'm using the byo board code (obviously) so any combination of other codes/ways to code byo would really be appreciated. Since I can't use div classes or div styles in board descriptions :/
|
|
|
Post by Pool Boy on Jun 26, 2013 6:10:41 GMT -8
well, i would do something like this--- i dont know your hex color so i made it monochromeish it -- tweak it to fit yr design but mechanically it should work.
<style> .shizz { text-align:justify; width:~500px; margin-left:your image width; padding:0px 15px; height:your image height; text-align:justify; overflow:auto; then put in some font styles }
.shizz img { border:3px solid #000000; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; height:###px; width:###px; float:left; margin-right:5px; }
::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { background-color:#ffffff; } /* Handle */ ::-webkit-scrollbar-thumb { background-color:purple; }
</style>
in your myo code, it would just be
<div class="shizz">{BOARD DESCRIPTION}</div> or whatever the call code is i forget v4 details
then, your board description can simply be
[img]imgurl[/img] yada yada yada text yada
I think that should work! post back if it doesn't ;o
|
|
|
Post by konya on Jun 26, 2013 6:21:29 GMT -8
to kind of explain what electric is talking about
the overflow css determines what happens when text goes outside of a set-height box element. overflow: auto; makes an automatic scroll once it 'overflows'. you can also do other things like elipse and hide the excess text for future reference.
you *might* have to add "display: block;" to .shizz if what electric has doesn't work directly. this lets it all know that the widths and heights you have specified are fixed in place and not stretchy.
|
|
|
Post by Pool Boy on Jun 26, 2013 6:30:54 GMT -8
++ the scroll bar will only appear styled in chrome. Mozilla, that shizz will always be the default
|
|
|
Post by amlin on Jun 26, 2013 12:27:21 GMT -8
Has anyone ever told you that they love you two? Because if not, I love you. This saved me so much aggravation XD I can't thank you enough!
Just one question, but you may have put the coding in there to do this and my site just wants to troll it/me like with the scrollbar (which still doesn't work, and I'm in Chrome): Is there anyway to treat the image like it's own section? That's why I originally had it in a table, but the css wouldn't effect anything in the table but would affect other boards fine. I want the text section to scroll itself if it gets above 96px, but it scrolls the entire thing. I also had to remove margin-left because it treated the image like part of the text section and put an empty spot in the 217px width for the image itself XD.
If not, I don't mind, I don't think we'll use huge descriptions that frequently. And thank you once more!
|
|
|
Post by Pool Boy on Jun 26, 2013 15:54:02 GMT -8
It's only possible to do the table you described if you want the same image for every board.
If this isn't what you want, then if I were you, for the design, I'd drop the scrolling and let board descriptions loose and free. Then, when you write board descriptions, be wary of their length.
for
/* Handle */ ::-webkit-scrollbar-thumb { background-color:purple; }
make sure to change purple to the hex code number of a color (that purple) otherwise, i dont know why the scroll bar isnt working
|
|
|
Post by konya on Jun 26, 2013 18:07:56 GMT -8
Can you give us your actual code? It'd be easier to answer once we can see how you've actually set it up.
|
|