Testing special bbcode for galleries

What if I want to put something into box using bbcode?
EDIT: Completely rewritten when I found HTML tables does the same much better.


Ducks by Serola

Here's how I did this. This comes on blog page:

<table class="mytable"><tr><td>
CONTENT COMES HERE
</td></tr></table>

And this comes to style sheet:

table.test img { width: 97%; }
table.test { border: none; }
table.test td { text-align: center; vertical-align: top; border: black solid 1px; padding: 15px; table-layout: fixed;}

Works great :up: Now there's no HTML used, so I can use bbcode only.

Advertisements

51 thoughts on “Testing special bbcode for galleries

  1. What do you mean :confused: The idea here is that if I use HTML DIV and CSS style directly, then all the bbcode stops working. That means I have to use line breaks or paragraph tags.What is done here is not fully supported feature here at MyOpera but it seem to work. So called CSS style definitions can be put inside the color tags like I showed above.

  2. I am seeing the above box in Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12It looks correct.With the "display" thing I meant that you are replicating a "div" with a "span" so you force the "block" instead of default "inline" for "span". Suggestion: you know the problem in passing the "padding" is that it is added to the "width" so you get "80%+padding". The usual solution is to nest two containers and pass width to one and padding to the other. That way you can control exactly the "width" of your box.

  3. Originally posted by LorenzoCelsi:

    Maybe this comes handy:http://en.wikipedia.org/wiki/BBCode

    Thank, but that I knew already :)Originally posted by LorenzoCelsi:

    and then you need to specify "display:block;".

    I have that already, or what do you mean by 'specify'?I pretty much managed to reach what I try to. The idea is to give ready made code for members of photographic group, code that is easy to copy/paste for exhibitions. The more complete code goes:

    [COLOR=crimson;
    text-align:right;
    border:1px solid #000;
    display:block;
    padding:0 40 20 30;
    width: 80% !important;]something[/COLOR]

    width attribute is what I was missing the most and finally found the percentage works best for both: desktop Opera and Opera Mini. It forces the image inside smaller than real size :up: No idea yet how it works on other browsers. Feedback on this is mostly welcome, so if you are using Firefox or Internet Explorer, please tell me if the picture part looks awful in anyway. Well picture itself is maybe awful, but don't mind about that ๐Ÿ˜€

  4. At least this doesn't render one letter wide. :insane:Are those the same two pictures as this morning? I thought it was something else.

  5. Originally posted by Frlmnk:

    Are those the same two pictures as this morning? I thought it was something else.

    Yes, I changed pictures because I need to test pictures of different width.

  6. Originally posted by LorenzoCelsi:

    Suggestion: you know the problem in passing the "padding" is that it is added to the "width" so you get "80%+padding". The usual solution is to nest two containers and pass width to one and padding to the other. That way you can control exactly the "width" of your box.

    :doh: Thank you very much :cheers:

  7. Sami, you do this all on desktop, and plugged into a wall though, right? :rolleyes:I can't wait till Soc Sec gives me my wifi implant! :yes: ๐Ÿ˜†

  8. Originally posted by Frlmnk:

    Sami, you do this all on desktop, and plugged into a wall though, right?

    Yes, of course, I'm not masochist ๐Ÿ˜€ But I try to do my best to give best possible content for Opera Mini users as well.

  9. Oh, I should have read you blog? :DThe first one reminds me of a Bill Monroe tune; "Footprints in the Snow". ๐Ÿ™‚

  10. I updated the post a little once again. Now it's just what I wanted to have. I had to remove gray border from images defined on my style sheet to avoid difficulties they caused when percentages used. Now it should look somewhat the same on desktop Opera and Opera Mini.Special thanks to Lorenzo Celsi for excellent tips! :coffee:

  11. Originally posted by LorenzoCelsi:

    if you want to draw a box around the image that follows the image size, just adding a padding and a border around the image, you don't need to use the "span" as container, you can pass the padding and the border to the image itself, included in your blog "user.css" file

    Yes, I also have that on my blog but commented it out this morning for awhile, but I guess I can now put it back…EDIT: There :up: If only I could limit that to large images and exlude the smileys.

  12. Yes, I know that, and would do so on target blog like Shoot&Tell where we need this. I just split that to several rows so Opera Mini users see the full code.EDIT: Like this:

    [COLOR=white;border:1px solid #333333;display:block;width: 100% !important;][COLOR=white;display:block;margin: 0% 5% 20px 5%;]
    By AUTHOR
    IMAGE
    DESCRIPTION
    [/COLOR][/COLOR]
  13. div.content img { padding:4px; border:1px solid #ddd; }
    div.content img.smilie { border:none; padding:0px; }
    

    Opera Dragonfly is your best friend. :)This adds a border only to images in posts and excludes smileys.

  14. Then, you are dealing with images.If you need to put images in boxes and boxes are always the same regardless the size of the image, that is fine.Instead, if you want to draw a box around the image that follows the image size, just adding a padding and a border around the image, you don't need to use the "span" as container, you can pass the padding and the border to the image itself, included in your blog "user.css" file, like I did on my own blog (note the "frame" around pictures).

  15. Another little hint: pay attention to "returns", they are displayed as empty lines. You should better "compact" your code on a single line without any return.

  16. You are welcome. But I guess the width in the second "span" is not needed. In fact, being forced as a "block" element, it should fill the first "span".Usually you do this way:

    |-----------width---------------|
    |-padding---------------padding-|
             |---content---|
    

    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

  17. Hmm… Defining padding instead of width did not solve the problem of not getting the picture right in the middle if another frame is defined on CSS style sheet :confused: EDIT: Added padding-right:10px; to fix that but then images on Opera Mini are slightly on left. Well, can't get evrything and this was made for S&T group where this is not a problem.

  18. Well Sami, it is heatening that someone is able to mess around with code. Otherwise I'd have nothing to view. It's truely a challenge for me living so within, yet, off the grid. :insane:I'm shopping for a generator today! :up:

  19. Originally posted by Frlmnk:

    I'm shopping for a generator today!

    I wish you find a good one :up:

  20. I wish you find a good oneSami Serola # 3.November 2010, 05:36Hmm… Defining paddinginstead of width did notsolve the problem of notgetting the picture right inthe middle if another frameis defined on CSS style sheet —->It's somewhat maddening to try to make sense out of this post without a desktop computer but trying to learn code from a book w/o one is even more so. :lol:Even when I get so I can post fancy realtime interaction will be limited this venue and untill I gain proficiency with chat and or skype… etc. I don't think I'll get anything like that going "in the field". "Back to the drawing board" is a luxury".

  21. Verbose commentary is easier than fancy computing! I do believe it's slower than Pong for some though.

  22. Oh, did not thought about that :left:EDIT: Although it seem to work here :up:EDIT: Just checked this on IE 6.0 and looks terrible ๐Ÿ˜† On Firefox and Opera the span width also affects on image inside but not on IE6.

  23. It must be something in MyOpera because in plain HTML it does not work. The width of the "span" container (or div) does not affect the image. I've checked it. Maybe MyOpera automatically gets the width from the "span" and attributes it to the image.

  24. Nope, try to create an HTML page with the said "span" and you see the image is not resized.

  25. I don't think it works. The image is not affected by the width of its container, the image just overflows.

  26. Indeed… I first tried the following bbcode:

    [img width={width} height={height} ...]{url}[/img]

    But it does not work here. Anyway, for me it's enough this one works here at MyOpera, so we can use it at S&T. Much easier for our moderators than use HTML.

  27. Yes. MyOpera does a lot of translating from HTML to BBCode and vice-versa, plus they trim most of HTML tags while they allow some others. In short, a mess. :)I prefer my better Blogger where you can edit your full HTML.

  28. OK, but the mystery is that MyOpera only seem to force the width of images to 100% of content. That's what you normally get if you try to but very large image into blog post. And in source code I still see the width definition is for span, not for image.

  29. Testing with quoted HTML…

    <span style="color: black;display:block;width: 50%;"><span class="img"><img alt="" src="http://files.myopera.com/serola/albums/4293522/majakka.JPG"></span></span>

    Oh, there's span class="img" :left:

  30. ๐Ÿ˜† This's just nerd talking (me) ๐Ÿ˜€ Don't mind it too much. What you may need out of all is this:

    [COLOR=black;
    display:block;
    width: 80%;]IMAGE[/COLOR]

    Just put the image where said IMAGE and change the percentage if needed. That should let you force image just in the same way as putting width="80%" into picture HTML tag. Using HTML width definition is just much easier.Only reason why I'm doing this is because I also need to make that box and align the image into middle of it.

  31. [ C O L O R = b l a c k ;d i s p l a y : b l o c k ;w i d t h : 8 0 % ; ]I M A G E [ / C O L O R ]:eyes: I was expecting to get a black box. ๐Ÿ˜† I must get the

    
    

    when I cut and paste or not. What I mean is that loading pages is enough to drive me mad ( and get my thumb more tired than I am right now).

  32. "This's just nerd talking(me) Don't mind it toomuch. " – No Sami, I don't really mind anyone talking about code at all. I do wish there was a more unified standard to help clear up the discrepancies you've been discussing. If the myopera software responded fully to html standards I might be more able to wing a functional post from the first try. It's all the conflicts that make it difficult for me. Hey, I like calculus! This is really easier than analytical geometry even!

  33. Originally posted by Frlmnk:

    I was expecting to get a black box.

    Bbcode 'color' defines the text color. I'm not sure but some color must be put there to make this work. All the rest is just utilizing this as a HTML span tag.The reasons why bbcode is used can be many. One reason is to make things easier for users because people usually do not know much about HTML. Therefore simple bbcode can be easier to learn and it's enough for basic things. The problems start when someone wants to do something more demanding like adding a specific text box into article. Then here at MyOpera one either has to use HTML only or find way like we (me and Lorenzo) have described here.

  34. ๐Ÿ˜† Only one year behind you ๐Ÿ˜‰ 44 comes full in this month. Although, the inner age is what matters. I have no kids of my own, so it probably keeps me somewhat immature for several years more ๐Ÿ˜€

  35. Same thing here. I first found limitations of MyOpera just annoying but I'm also getting old, so I no longer bother to do so much fancy things. Originally posted by LorenzoCelsi:

    customizations are usually screwed any time the platform is updated

    Say no more :awww: Once again I either need to fix this theme of mine for new MyOpera or give up on customization.

  36. I think it is not for making things easier for the "average user" but to limit his/her possibilities of screwing the whole thing with the wrong code. ๐Ÿ™‚ And of course it is bad for "power users".I came to MyOpera from Blogger where I could edit the blog like it was a common HTML page, even adding all the Javascript and embedded objects I wanted, so it was a bit annoying at first. Fortunately I got old and then I don't feel the urge of customizing any more. :)Another thing that I learned is your customizations are usually screwed any time the platform is updated. And then now I try to keep the default theme and settings whenever I can, ready to update without much pain.

  37. It seems you aren't old enough yet… :)BTW, they are so happy with their huge top bar… it becomes bigger and more invasive at every release. Another thing I have learned is that it is pointless to comment about "new MyOpera design". For example the current menus are obviously inconsistent (you get 3 different menues on top-left, middle-right, lower-left corners). I said it back then and I was answered they were very consistent because the goal was to unify Opera and MyOpera. Eh? Nevermind. Oh wait, I am shown MY OWN avatar when I am logged in. How useful, in case I forget who I am… ๐Ÿ™‚

  38. "simple bbcode can be easierto learn and it's enough forbasic things." – it still didn't do anything though Sami! :doh:Does "getting old" mean you have other things you have to do? 'Cause I do.

  39. "simple bbcode can be easierto learn and it's enough forbasic things." – it still didn't do anything though Sami! :doh:

  40. Originally posted by Frlmnk:

    Does "getting old" mean you have other things you have to do?

    Probably…

  41. Well I've been short on energy many years now. But, I still move around some. Mostly in some form of rice burner. How come gold doesn't burn unless it's black? And all the heart in the world doesn't buy me a roof let alone a new computer, gold or not. At least it's plenty warm enough here in the sun while I'm storing up it's golden rays. :bye:

  42. :cheers: MichalOther readers, I updated the post once again.In the collage code explanation I used percentages just to show what the dimensions should be for 3×4 pictures if there's vertical and horizontal images next to each other. In actual collage I used pixels as width definition to get the dimensions more exact.

Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s