The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Code, Spoiler, and Quote

View previous topic View next topic Go down

Solved Code, Spoiler, and Quote

Post by Kaizer Lee on October 15th 2013, 1:55 pm

Well, I'm currently working on designing the 3 stated above in the titles, I'm using this code atm:

Code:
td.code {
  background: url('http://i381.photobucket.com/albums/oo253/Omnislash/MCA2/aze_zpsf6107b80.png');
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
}

td.quote {
  background: url('http://i381.photobucket.com/albums/oo253/Omnislash/MCA2/aze_zpsf6107b80.png');
  width: 100%;
  height: 100%;
}

td.spoiler_content {
  background: url('http://i381.photobucket.com/albums/oo253/Omnislash/MCA2/aze_zpsf6107b80.png');
  width: 100%;
  height: 100%;
}


This is what happened, lol. I definitely know NOW that the width size should be 660 but the problem's the height, if I use that and for example, I set a specific height for it and the words extend further from it, it'll either repeat but with my no-repeat code, it won't. Now, how do I manage to cover everything without having the picture too short to fit or the picture from overlapping/repeat if I ever remove the no-repeat code?

Sorry, forgot how to do this one since I haven't coded in awhile :/

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Solved Re: Code, Spoiler, and Quote

Post by Ange Tuteur on October 15th 2013, 3:08 pm

Hello Kaizer Lee,

Rather than using an image, why don't we take the color properties from that image and apply it via CSS? I've taken a look at your image and basically recreated the basics from it, the border color, background, and red inset shadow. The code is below if you want it.

Code:
td.code, td.quote, td.spoiler_content, td.spoiler_closed{
background-color:#000;
border:1px solid #A31919;
box-shadow:0px 0px 6px #c00 inset;
}
The issue with using images is you would have to actively resize them, and that would be kinda difficult considering that if you were to resize the image you would most likely end up resizing the code, spoiler, and quote creating a giant mess.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Code, Spoiler, and Quote

Post by Kaizer Lee on October 15th 2013, 3:16 pm

Well, for example, I want the word "MCA" on the bottom-right of it, how do I do that?

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Solved Re: Code, Spoiler, and Quote

Post by Ange Tuteur on October 15th 2013, 3:30 pm

You could try this:
Code:
td.code, td.quote, td.spoiler_content{
background-color:#000;
border:1px solid #A31919;
box-shadow:0px 0px 6px #c00 inset;
background-image:url('http://i56.servimg.com/u/f56/18/21/60/73/mcr10.png');
background-repeat:no-repeat;
background-position:right bottom;
}
td.spoiler_closed{
background-color:#000;
border:1px solid #A31919;
box-shadow:0px 0px 6px #c00 inset;
}
Result will be this:


Only issue is the image will not display fully unless 2 lines have been written. You can edit the image if needed. The minimum default height is 15 pixels I believe, the current image is 30px.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Code, Spoiler, and Quote

Post by Kaizer Lee on October 15th 2013, 3:33 pm

Last question, I'm also using a rounded border type of code, spoiler, and quote thing.

Code:
.code {
border-radius: 5px;
-webkit-border-radius: 5px;
}

.code {
background-color: #4A4D48 !important;
border-color: #3a3a3a !important;
}

.quote {
border-radius: 5px;
-webkit-border-radius: 5px;
}

.quote {
background-color: #4A4D48 !important;
border-color: #3a3a3a !important;
}


.spoiler {
border-radius: 5px;
-webkit-border-radius: 5px;
}

.spoiler {
background-color: #4A4D48 !important;
border-color: #3a3a3a !important;
}

div dl.codebox dd div.spoiler_content img {
max-width: 600px;
max-height: 400px;
}
That's the one I use. Can i ask, how do I incorporate them into one code since I don't want a lengthy one and with your code, the border might readjust itself back to being rectangular.

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Solved Re: Code, Spoiler, and Quote

Post by Ange Tuteur on October 15th 2013, 3:40 pm

I forgot to mention in my last post if you want the image to show by default you can add a bit of padding to the top if you do not mind a gap.

Add that to the code if you wish to show the image without 2 line breaks.
Code:
padding-top:20px;
As for your next question you can have multiple selectors in one code which share properties. All you need to do is separate your selectors by commas like this:
Code:
selector1, selector2, selector3{
property:property value
}
Selector 1, 2, and 3 will be applied with property value.

So for your codes above it would look like this:
You can add -moz-, -webkit-, and -o- for border radius if needed.
Code:
.code, .quote, .spoiler{
border-radius:5px;
background-color:#4A4D48;
border-color:#3a3a3a;
}
You do the above if you are using the same properties for multiple elements. You should also only ever use !important if you need to override other styles, otherwise it shouldn't really be needed for the code boxes.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Code, Spoiler, and Quote

Post by Kaizer Lee on October 15th 2013, 3:52 pm

Code:
td.code, td.quote, td.spoiler_content{
background-color:#000;
border:1px solid #A31919;
box-shadow:0px 0px 6px #c00 inset;
background-image:url('http://i56.servimg.com/u/f56/18/21/60/73/mcr10.png');
background-repeat:no-repeat;
background-position:right bottom;
padding-top:20px;
}

td.spoiler_closed{
background-color:#000;
border:1px solid #A31919;
box-shadow:0px 0px 6px #c00 inset;
}

.code, .quote, .spoiler{
border-radius:5px;
-webkit-border-radius: 5px;
background-color: #4A4D48 !important;
border-color: #3a3a3a !important;
}

div dl.codebox dd div.spoiler_content img {
max-width: 600px;
max-height: 400px;
}
Is that valid? By the way, with the whole padding thing, that only applies so the 30px thing, right? So if I reduce the 30px thing (Height) to 15px, then I don't have to use the padding, denoting that the proper or normal height for that would be 660 width by 15px height?

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Solved Re: Code, Spoiler, and Quote

Post by Ange Tuteur on October 15th 2013, 3:57 pm

Yes, that looks correct however, you should remove this piece since we've applied background colors and borders in the codes before it.
Code:
background-color: #4A4D48 !important;
border-color: #3a3a3a !important;
Seeing as they are important, they will most likely override the other colors used, unless of course that is what you want.

As for the image you're correct, if you reduced the size you would no longer need to add padding to view the image without 2 line breaks.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Code, Spoiler, and Quote

Post by Kaizer Lee on October 15th 2013, 4:01 pm

Okay, the definite last 3 questions, is td.code different from .code or are they the same? And when I do use 15 px height, that will just expand and no longer repeat, right? And the right width is 660, right, cuz I'm starting to doubt if I'm right about it ._."?

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Solved Re: Code, Spoiler, and Quote

Post by Ange Tuteur on October 15th 2013, 4:15 pm

td.code and .code are pretty much the same, as well for quote. The spoiler selectors are a bit different, but you do not really need to use td.

If you resize the image it will still be within the bottom right as I've positioned it. I've also set the repeat for the bgimage to no so it should not repeat.

The width of these cells may differ per board so I'll estimate that the overall width is around 570px. So our dimensions would be around 570x15

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Code, Spoiler, and Quote

Post by Kaizer Lee on October 15th 2013, 4:31 pm

I'll just use this code and estimate the width and height for my forum. Thanks a lot, this is solved Smile



Code:
td.code, td.quote, td.spoiler_content{
background-color:#000;
border:1px solid #A31919;
box-shadow:0px 0px 6px #c00 inset;
background-image:url('http://i56.servimg.com/u/f56/18/21/60/73/mcr10.png');
background-repeat:no-repeat;
background-position:right bottom;
padding-top:20px;
}

td.spoiler_closed{
background-color:#000;
border:1px solid #A31919;
box-shadow:0px 0px 6px #c00 inset;
}

.code, .quote, .spoiler{
border-radius:5px;
-webkit-border-radius: 5px;
}

div dl.codebox dd div.spoiler_content img {
max-width: 600px;
max-height: 400px;
}

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Solved Re: Code, Spoiler, and Quote

Post by Ange Tuteur on October 15th 2013, 4:33 pm

Very good, I'm happy to have helped. If you have anymore questions let us know. Smile

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Code, Spoiler, and Quote

Post by Kaizer Lee on October 15th 2013, 5:12 pm

http://help.forumotion.com/t127681-how-come-images-won-t-appear#853562 that's one of my current questions. Can you look into it please?

Kaizer Lee
Active Poster

Female Posts : 1064
Reputation : 54
Language : English, Tagalog, Spanish and Chinese
Location : Philippines

http://www.medievalchaos.net/forum

Back to top Go down

Solved Re: Code, Spoiler, and Quote

Post by SLGray on October 15th 2013, 10:22 pm

Topic Solved & Locked


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36697
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum