Other Questions go here!

Discussion in 'Palette Challenge 2017' started by RpNation, Jul 14, 2017.

  1. Not sure, I wasn't involved in creating this competition. Check with @Fyuri and @Kaerri and any other judge :D!
    Mx.Trinity likes this.
  2. No problem. The thing is, we've seen codes made for browsers break as well -coughs at those with small resolutions- through screencaps from others.

    Ah my eye didn't catch the red line of my spellchecker. Lol, it's been fixed. It's pretty much aesthetics. I had original five judging criteria categories, one of which was complexity. However, I felt that would be discouraging since not all designs need a complex code to create a nice design.

    As far as text, it doesn't need to be in there if you don't want it. Though you can put whatever filler text you want if you do use it.

    Font colors can be whatever you wish. With the various themes, the default font color changes anyway.

    Judges can only give 1 - 5 points per judging criteria. So a design could have a maximum of 15 points.
    IctoraPost and Mx.Trinity like this.
  3. so i really hope i didn't post in the wrong place bc i swear it was an accident and i was still tweaking it x.x
  4. Its fine!

    That was the correct location :).
    e d e n likes this.
  5. aha, that's good. i was worried and l o w k e y didn't want to be the first submission xd
    The Dark Wizard likes this.
  6. I kinda want to participate, but I'm an amateur at coding and doubt my submission would do any good.
    B R E E Z E and pasta like this.
  7. neither am i but i still did it xd you should go for it~
  8. so i am a tad confused, is there a certain purpose the BBC code is supposed to fulfill or just free game, or???

    (also i rather wish that i could use colors 1&2 from palette 1, and 3-5 form palette 2 *sigh*)
  9. It's a "free game" regarding the purpose, it could be whatever you wish, it just needs to use one of the palettes listed.

    Part of the challenge is to work with the colors of only one palette, but we offered at least 3 options to choose from to allow some choice about which palette you want to use.
  10. okay, cool but also a bit of a "darn" haha, means i actually have to narrow it down myself. and i know, i just really like that set of 5, the blues and charcoals/slates go well together X-D. well ill try to make a nice BBC set up, not sure with my time frame if ill be done in time though *sigh*
    Fyuri likes this.
  11. *raises hand*
    I have a question!
    Does that one BBCode that changes font count as using BBCode?
    And is pallet just the color scheme that needs to be used?
  12. When it says we can't have images be a major part of the design, does that mean we can't have an image constructed of only the palette colors be the background of a div?
  13. I wanna join but i don't know how to bbcode :(
  14. 1. Do images have to have the same colors as the palette?
    2. Does the font need to be the same as the palette?
    3. Can images be used for div backgrounds?
    4. Is there a way we can test the "Flexibility"? Such as a site that displays webpages differently, in mobile mode/different browsers, etc...

    Check this out: https://www.rpnation.com/bbcode/
    It's the BBcode tutorial on the site, if there's not something specific you need to know, just scroll through it and brainstorm with all RPnations cool bbcode functions- you might want to start by looking at the Div Box tutorial depending on what you want to do
    Kaerri likes this.
  15. 1. The trend for non-placeholder images so far is yes and no. There are entries that have all images use the palette while others do not. For placeholders, those seem to be normal. There does not appear to be a rule saying that pictures have to apply by the palette.
    2. No, I believe you can choose any font(s) you want.
    3. Codingwise, yes. Ruleswise, it's been done by others and there is no explicit rule against it.
    4. There probably is a site that does that for raw css, but probably not for the beautiful frankencode of rpn. You can manually test it yourself by making your browser bigger and smaller, opening the post up on mobile and refreshing when you make changes, as well as different browsers, and by changing the themes at the bottom. It's not the most fun thing to do, but it definitely helps with compatibility.
    Kaerri likes this.
  16. if you use firefox, you can adjust the screen size using tools>wed design>responsive design mode. I find that it helps emulate mobile sizes without changing devices. Most browsers including mobiles support alot of CSS3's feature without the need for prefixes or additional code. There's charts online for every code of css and support.
  17. Does anyone have any suggestions for learning complex bbcode fast? I really want to be able to participate but I know nearly nothing about div boxes without asking for help several times throughout the process because the coding always breaks. I really want to be able to participate in contests, though.

    I've looked through all the guides and I still get completely and utterly lost.
  18. @DaughterofAthena
    The guides inform you of the existence of tools you can use, it is up to you to learn how to use them. Generate ideas of what you want something to look like, sketch it out somewhere. Think about how it would work, does it have a scrollbox? A scrolling picture? Perhaps an accordion? See if there's an on-site tutorial for how to accomplish that. Examine the code, copy and paste it somewhere private. Mess around with the values. Did it visibly change? How so? Did it break? Ctrl z. After every change you make hit that preview button, if it breaks, ctrl z. Undo is your greatest ally. Sticking to codes except for the div box without messing around with them in hacky ways makes it so any problems that occur are easier to find. Did you close your tags? Perhaps they're out of order. It's like a set of russian dolls, the smallest one can't hold one larger than it. Sure from the outside there may be no noticeable changes, but add in enough small errors and you get a giant mess that's hard to decipher. Every small success is one step closer to achieving your goal. Remember the sketch? Perhaps you changed your mind mid-creation. Made a design change. Colors are the last thing you should worry about, unless it's a palette challenge. Then use a program to put those colors next to each other in the layout of your sketch. If it looks bad, change something, either the sketch or the color placement. Achieve something that looks good. It's okay to change things in the final product. Let's say you want to do dark magic with divs, a quick google search of "css (insert feature here)" will work. "css center text vertically" "css pointer events" "css two divs side by side" "css gradient" many answers can be found at w3schools. the rest usually come up in the first 5 or so results of google, threads of people asking for help to do the very same thing (or similar) to what you're trying to do. not all solutions will work, but many will. if the coding breaks and you have no clue where it does, copy and paste it into a new post. delete sections of code, previewing each time to see if it's still broken. isolate the source of the problem. the frankencode can get very confusing very fast and it's hard to keep track of in its raw form. there are tools for this however it's not 100% necessary and it's like trying to learn 2 languages at once, which you kind of are. you're learning shakespearean english and modern english at the same time, not ideal. you can't become an expert in a day, you only gain new knowledge, use old tools in new ways, get new ideas and challenge yourself. it's not for everyone, staring at a screen for hours, trying to fix your mistakes when it seems that everyone around you is doing so much better, only to end up with some text in a box. it can get tedious and you'll get stuck on problems you have no idea how to solve. you'll work on this one tiny aspect for hours and it'll still be broken. you're tired, but you still have that vision. you'll ask for help and it was fixed in ways you can barely even comprehend. even if it's not the most complex code out there, it's yours. you made that, and you want to stick it out to the end. it may not be a masterpiece, but it's something. you gave it your all.

    tl;dr you won't believe how much is possible with rows, accordions, and a scrollbox. beauty is mostly achieved through well chosen colors, fonts, and a sense of flow, which basically means any organization and placement of things makes sense. the knowledge of every modifier to ever modify the div box isn't necessary
    crucialstar, Han JiHyo and Kaerri like this.
  19. @DaughterofAthena

    So, I know we have talked before on one of the "help" forums for bbcode. However, it seemed there were others who were slowly helping you and I didn't want to bring confusion anymore. But, anyways, on that note, if you don't mind, will you tell me what computer screen size you use? And the "zoom" and browser that you're on? It would surely help me understand what you see if I can mimic what you see as well. Also, did you make your "width" screen bigger on RPN [using the toggle width at the bottom of your screen] and what "screen face" are you using [default, color me, nyte lyfe].

    - So, the first thing is that when you first start the div code, what do you want to see? If you want a background image then you'd use the code:

    [div=background: url('the link here') no-repeat; border: 1px solid black; background-size: cover; margin: auto; padding: 5px;] meow[/div]
    So according to this code, you have your background image as your background of your whole code. This code is your "framework".
    - Where you see "no-repeat", the no repeat is telling the background image to not repeat. [Now, in that area you can also put in "fixed" which means, when you scroll up and down your page, the image scrolls with you, moving the background image]
    - So, the "background-size" allows you to have the background image "cover" the whole code itself instead of the actual image size of the picture.
    - The "margin:auto" that you see "centers" your whole code accordingly.
    - The padding is sorta like a "centerblock" in a sense that it gives "spaces" from the "text" you place in the code and the "edge" of the code in general.

    Anyways, after that code has been implemented, the "line spaces" that you do are manually done by your keyboard. So the more you 'enter' the more "spaces" shows on your code.

    So, for example, when you told me you wanted a background image and then a picture on one side and scrollbar on another. You can implement that by using the regular codes : row and column for your picture and the other column for your scroll code.

    for example:
    [row][column=span4][center][img]link here[/img][/center][/column][column=span4][scroll=insert the # of px here, the px here is the "height" of your scroll bar]text here[/scroll][/row]
    - So the above code shows you the row and column.
    - You are free to change it however you want, but when working with div, using both div and the bbcode interchangeably helps a lot and is a lot easier to learn then going straight into overlaying div against each other and messing it up constantly. The way I learn is easier to do it that way and then once you get the hang of the simpler codes, you can definitely advance up and get a better understanding of why so and so code works!

    So, here is the full view of what I just showed and implemented to you. You can also take the code I sent you in your help thread and take a part the code itself to see how everything works!

    Title Here

    text here; this will scroll.

    [centerblock=60][div=background: url('https://68.media.tumblr.com/9d01d7bd73c2b9dfa51c2579b1d1bf1f/tumblr_omb8ydunmn1sdey65o3_500.jpg') no-repeat; background-size: cover;  border: 1px solid black; margin: auto; padding: 5px;]
    [CENTER][FONT=Lily Script One][SIZE=7][b]Title Here[/b][/SIZE][/FONT][/CENTER]
    [row][column=span4][CENTER][img]http://static.tumblr.com/66a7b9c8c9c2fe545c8d89ca41563309/ky8rakt/vRBo4oaqn/tumblr_static_16q99ikdogw08cwkw0cg808kc.png[/img][/CENTER][/column][column=span4][scroll=228px]text here; this will scroll.[/scroll][/column][/row]
    And here is your code!
    This example code is universal and mobile-friendly!
    Kaerri likes this.
  20. Sorry for the lack of timely replies, I wasn't getting alerts for this thread >_>;

    Yes, the palette you choose are the colors that you would use for your design. Yes, the font tag is a BBCode tag, but that is only the font and not a design.

    This only applies to placeholder images that in practice allow someone to insert an image of their choice later on if they use the code. If a placeholder image takes up the majority of the design, it'd be mostly grey.

    1. Images can be what you want them to be, however if they don't go well with the palette it will affect the scoring.
    2. The font can be whatever you want it to be -color and style wise.
    3. Yes, images can be used for backgrounds, but that will count towards how many images are allowed for the overall design.
    4. There are a few pages, a google search can bring up a few that can test the resolution, the one I tend to use is a bit of a loading nightmare though; http://browsershots.org/
  21. Do you enter the designs to each individual contest or do you make a specific design for each contest?
  22. You make one design using any of the palettes, it's the same contest
  23. what is the palate challenge?
  24. It was a competition people were to code a BBCode creation using one of three specified palettes. It has since finished, but you are still welcome to take a look at the submitted designs.

Share This Page