Pages: « 123456 »
Posted on 11-24-11, 03:12 pm
Fuzzy
Full mod

Karma: 1183
Posts: 307/785
Since: 06-28-11
Quotes are styled with the following classes:
.quote: encapsulates the entire quote including the "posted by" part
.quoteheader: Only the "posted by" part
.quotecontent: Only the text that was quoted

Make sure you are only styling these for your posts though, for example: .mainbar96 .quote { }

To add a border you would add border: whatever; to the class you want a border around.
To add a picture at the right use:
.mainbar96 .quotecontent { background-image: url('<url>') right <vertical-align> no-repeat; }

Replace <url> with the url of the image, and <vertical-align> with the vertical alignment of the image.
Posted on 11-25-11, 08:58 am (rev. 1)
Fuzz Ball
KirbyFanatic64 (LOL)

Karma: 1361
Posts: 39/950
Since: 11-13-11
Thanks! I've edited my quotes.
Posted by MarioSunshine
I want to make border for blockquote, and insert picture at the right edge of blockquote. I can't do that...



Now I could do it! Thanks!

But here are something I wanted too...
  • How to put picture next to your username?
  • How to changing color, styles of "Spoiler"?


Edit:



_________________________

Great games must be fun, not fancy.

Music Hacker needed! PM me if you wish!
Posted on 11-25-11, 03:53 pm
Fuzzy
Full mod

Karma: 1183
Posts: 309/785
Since: 06-28-11
To add a picture next to my username, I put a background image in the topbar of my layout. This would be the class .topbar96_1 for you.

For spoilers you can style these:
.spoiler: the entire spoiler
.spoiler button: the button in the spoiler
.spoiler .spoiled: The box shown when the spoiler is expanded
Posted on 12-10-11, 08:03 am
Fuzz Ball
KirbyFanatic64 (LOL)

Karma: 1361
Posts: 70/950
Since: 11-13-11
That's OK.
I've done it.
Now I want to make curve corner, I don't know how...
So I would make round-corner for spoiler and my posts border.

_________________________

Great games must be fun, not fancy.

Music Hacker needed! PM me if you wish!
Posted on 12-10-11, 02:13 pm
Fuzzy
Full mod

Karma: 1183
Posts: 335/785
Since: 06-28-11
Add the CSS border-radius property to whatever you want to have rounded corners.
Posted on 12-26-11, 09:41 am
Fuzz Ball
KirbyFanatic64 (LOL)

Karma: 1361
Posts: 88/950
Since: 11-13-11
Now getting into trouble with
... :S Help me plz! and one thing to ask: Can I to increase the space for .topbar1_xx?

_________________________

Great games must be fun, not fancy.

Music Hacker needed! PM me if you wish!
Posted on 12-27-11, 03:49 am
Fuzzy
Full mod

Karma: 1183
Posts: 348/785
Since: 06-28-11
Style .mainbar96 code and .mainbar96 .geshi for the code boxes.

You should be able to add more padding to the top bar (my layout does).
Posted on 12-28-11, 02:20 pm
Fuzz Ball
KirbyFanatic64 (LOL)

Karma: 1361
Posts: 94/950
Since: 11-13-11
Is there any way to make some boxarea always at least *** pixels, so that when it has shorter text, it won't show only some part of bg-image.
I'll show you my code box, it has this img for bg, but here's the result:


Please let me know the solving method.
_________________________

Great games must be fun, not fancy.

Music Hacker needed! PM me if you wish!
Posted on 12-28-11, 04:07 pm
Fuzzy
Full mod

Karma: 1183
Posts: 351/785
Since: 06-28-11
What you're looking for is min-height. Set it to the height of you image and the box won't be shorter than it. But if you do that, when your post is too long it will overflow the background image. You should use border-image or multiple backgrounds with different repeat settings to achieve the effect you're looking for.
Posted on 12-29-11, 02:14 pm (rev. 5)
Fuzz Ball
KirbyFanatic64 (LOL)

Karma: 1361
Posts: 95/950
Since: 11-13-11
-How I can I use multiple background? What's the code?

-Does this code allowed?

border-top-image:url(http://nsmbhd.net/get.php?id=258); Note: I edited with this code but it didn't work. Maybe it's not support by web browsers? And it's CSS3! O_O
I'm going to seperate my cmd.png into three pieces, top, middle, and bottom.
Could you help me coding with these three images? I think I'm confused.

Thanks

However, if it's too complex I would quit and forgot it (muhhaha)

_________________________

Great games must be fun, not fancy.

Music Hacker needed! PM me if you wish!
Posted on 12-29-11, 04:03 pm
Fuzzy
Full mod

Karma: 1183
Posts: 354/785
Since: 06-28-11
Here is a guide to border-image and here is a guide to multiple backgrounds. To use multiple backgrounds, you are going to have to split your background into more than 3 pieces. You will need one for each corner, and one repeating segment for each side (8 pieces total). If you still don't understand, I can make it for you.
Posted on 01-08-12, 02:56 am
Fuzz Ball
KirbyFanatic64 (LOL)

Karma: 1361
Posts: 115/950
Since: 11-13-11
Why that my transition property didn't work?

.topbar96_1 span { -moz-transition-duration:5s; -webkit-transition-duration:5s; } .topbar96_1 span:hover { color:#FFFFFF; text-shadow: 0px 0px 18px #EAFFFE; }


It ignore transition property.
_________________________

Great games must be fun, not fancy.

Music Hacker needed! PM me if you wish!
Posted on 01-08-12, 03:10 am
Fuzzy
Full mod

Karma: 1183
Posts: 373/785
Since: 06-28-11
I would assume it's because you didn't specify what to transition, only how long it should take. You should use the shortcut transition property as follows:
transition: all 5s; -moz-transition: all 5s; -webkit-transition: all 5s; -o-transition: all 5s;
Don't forget -o- so it will work in opera. Also, I add the regular transition property so that when it officially becomes a part of CSS, your code will still work.
Posted on 01-08-12, 03:36 am (rev. 1)
Fuzz Ball
KirbyFanatic64 (LOL)

Karma: 1361
Posts: 116/950
Since: 11-13-11
It still doesn't work. Maybe I have to located it in another header instead?


However, in my .mainbar96 .spoiler button, it works for me properly, which I use:

-moz-transition-duration:0.6s; -webkit-transition-duration:0.6s; -o-transition-duration:0.6s; transition-duration:0.6s;


Here is the spoiler to prove that above code worked.

_________________________

Great games must be fun, not fancy.

Music Hacker needed! PM me if you wish!
Posted on 01-09-12, 12:18 am
AxewAxew

Karma: 673
Posts: 107/583
Since: 07-02-11
It doesn't seem to work for me (Opera Mobile).
It could be because of my phone's slow rendering, though.
Posted on 01-09-12, 02:14 pm
Fuzz Ball
KirbyFanatic64 (LOL)

Karma: 1361
Posts: 122/950
Since: 11-13-11
Posted by Nina
It doesn't seem to work for me (Opera Mobile).
It could be because of my phone's slow rendering, though.


Maybe, because I wrote -o- for opera too.

Do someone knew why I can't get border-radius bigger than it is now? ( the four farthest corners)

I coded these where xxx varies from top-left to bottom-right.
-moz-border-xxx-radius:24px; -o-border-xxxt-radius:24px; -webkit-border-xxx-radius:24px; border-xxx-radius:24px;


Weird, Or it's intentional?

@Piranhaplant:
Even you haven't got another idea for my username transition problem, then I would be reach at a dead-end...

Note: Or maybe you could lend me your transition setting? I might adapt it and got it works!
_________________________

Great games must be fun, not fancy.

Music Hacker needed! PM me if you wish!
Posted on 01-10-12, 11:37 pm
Fuzzy
Full mod

Karma: 1183
Posts: 375/785
Since: 06-28-11
Looking at your CSS code, there isn't a transition property on .topbar96_1 so of course it isn't going to work.

For border radii, you only need to use the standard border-radius property. The prefixes for different browsers aren't needed. And IDK why you can't get your border-radius any bigger. You should be able to use any size as long as it isn't taller than the element itself.
Posted on 01-11-12, 04:24 am (rev. 1)
Birdo


Karma: 3304
Posts: 214/2021
Since: 06-28-11
I wonder, how can I make the textbook stick to the top left of the layout? Having
it at the middle when there's little content seems weird...
_________________________

Posted on 01-11-12, 04:42 am
Fuzzy
Full mod

Karma: 1183
Posts: 376/785
Since: 06-28-11
That's because your layout is inside of a table. I'd suggest removing the table, because it seems to serve no purpose. Otherwise you can set the vertical align of the table cell to top. As a side note, I think you should anchor the background image to the bottom. It looks really good though (that wallpaper is in my rotating wallpaper folder).
Posted on 01-11-12, 06:47 am (rev. 4)
Birdo


Karma: 3304
Posts: 215/2021
Since: 06-28-11
I think the thing that's causing it is the transparent image I have at my side (so the BG image can be seen)
The text box seems to align to the center of the transparent image.
I tried the vertical align code, but it didn't work or I am failing getting it to work

(Yeah, awesome wallpaper is awesome same goes for the other glowing wallpapers too )
_________________________

Pages: « 123456 »