Skip to main content

Forums » Art & Creativity » CSS questions!

Ilmarinen Moderator

I've been trying to reconfigure my custom Starweald template for Ivian and I have some questions! I'm not too great at CSS. I'll surely be coming across more problems as I work so I'll update this post accordingly. Thanks in advance if you can help :D

1. In the "vital stats" widget I'd like to have different colors for what's left and what's right of the colon. For instance, the "Player:" is white and the "Heimdall" is green. But I can't figure out how to single them out! Answered by Claine!

2. I see some people who have custom thumbnail sizes for the gallery widget, and I'm not sure where to begin with that! Answered--you use clip-path! But I'm still trying to figure out aspect ratio issues.

3. My pagetabs are being funky... I want them to be positioned just under the "played by." You can see that currently it's positioned just below the crows' feet, but it should be in line with them somewhat. Again, no idea how on earth to fix that!
Code:
ul#pagetabs { position:relative; top:-35px; }

4. I may have gotten my pagetabs to sit in the right place... but now the pagetab dropdown is positioned way over to the right instead of just under the pagetab link! The toolbar dropdown doesn't behave like this.
Claine Moderator

1. Add
Code:
b, strong { color: white; }
AND
Code:
ul.vitalstats li { color: green; }
2. I am not entirely sure how you'd do this with code alone. RPR generates thumbnails that are a constant size: Example: http://www.rprepository.com/images/thumb/th-37951-1442186797.png If you can point at an example where it is done, I could probably better answer this queston.


3.
Code:
ul#pagetabs { margin-left: ???px;]
I can't give you an exact number because I'm not quite sure where you want them. There's a lot of crows feet! At the moment, it's set at 150.
Ilmarinen Topic Starter Moderator

Claine wrote:
1. Add
Code:
b, strong { color: white; }
AND
Code:
ul.vitalstats li { color: green; }
Perfect, thank you! I thought it might have been something like that but I must have not been getting the syntax right!
Quote:
2. I am not entirely sure how you'd do this with code alone. RPR generates thumbnails that are a constant size: Example: http://www.rprepository.com/images/thumb/th-37951-1442186797.png If you can point at an example where it is done, I could probably better answer this queston.
Shoot, the one example I could think of has reverted to a non-epic template. I'll look for another!
[edit] Here! On this character's OOC page. Although I think I might be able to figure it out...
Quote:
3.
Code:
ul#pagetabs { margin-left: ???px;]
I can't give you an exact number because I'm not quite sure where you want them. There's a lot of crows feet! At the moment, it's set at 150.
That changes where the tabs are in the X dimension. I'm trying to change the Y dimension--move them up. I've tried various margins and paddings on both the bottom and top but I just can't get it to move up!

Thanks for answering me :D
Claine Moderator

Code:
#charheader .portraitcontainer { margin-bottom: 10px; }

Ah sorry I misunderstood! Try putting this into your code.
Claine Moderator

Okay I am learning all kinds of new things. I didn't even know this could be done.

Moki used this code for that effect:
Code:
ul.gallery li a img { -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); }

http://bennettfeely.com/clippy/ I found this site which could help you draw polygons
Ilmarinen Topic Starter Moderator

Claine wrote:
Okay I am learning all kinds of new things. I didn't even know this could be done.

Moki used this code for that effect:
Code:
ul.gallery li a img { -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); }

http://bennettfeely.com/clippy/ I found this site which could help you draw polygons

Yes! I'm looking at that right now. I thought I could use a vector file to clip, but alas, RPR's css checker doesn't like that XD This is super exciting though.
Claine wrote:
Code:
#charheader .portraitcontainer { margin-bottom: 10px; }

Ah sorry I misunderstood! Try putting this into your code.

Unfortunately, that doesn't seem to be having any effect :( I'll try maybe adding margins to other stuff
Ilmarinen Topic Starter Moderator

Making good progress in the gallery :D http://www.rprepository.com/c/heartseeker
Now I'm trying to figure out how to maintain the aspect ratio for the thumbnails--I'd like all the thumbnails to be the same size, but still maintain the aspect ratio of the original image. Until I can figure that out, however, I'll leave it like this :D

Annnd I got the pagetabs to behave!
Code:
ul#pagetabs { position:relative; top:-35px; }

But now the pagetab dropdown menu is appearing way off to the right, and I can't figure out how to fix thattun.

Thanks again for the help, Claine :D Hopefully I can iron out the rest of these bug tomorrow!
Kim Site Admin

Oh, this is really fun to watch!

You have two options for the images. You can change this:
Code:
ul.gallery li a img { width: 100px; height: 100px; -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); }

To this:
Code:
ul.gallery li a img { max-width: 100px; max-height: 100px; -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); }

You could also try just uploading the images again and seeing if you get a better crop. Sometime last year the RPR's cropping was updated to always take a square from the center top (center center for group galleries, where the images are more likely to be maps than characters with faces at the top) of an image, resulting in perfectly same-size gallery thumbnails without distortion. If you like the new crops, you can delete the old version, which was just a shrunken down version of the original with the same aspect ratio. This can create a much nicer visual unity for gallery widgets. If you find you prefer the look of the new crops, delete the old version, and hey presto! No more distortion. :)
Ilmarinen Topic Starter Moderator

Kim wrote:
Oh, this is really fun to watch!

...

You could also try just uploading the images again and seeing if you get a better crop. Sometime last year the RPR's cropping was updated to always take a square from the center top (center center for group galleries, where the images are more likely to be maps than characters with faces at the top) of an image, resulting in perfectly same-size gallery thumbnails without distortion. If you like the new crops, you can delete the old version, which was just a shrunken down version of the original with the same aspect ratio. This can create a much nicer visual unity for gallery widgets. If you find you prefer the look of the new crops, delete the old version, and hey presto! No more distortion. :)

AH YES! Reuploading the gallery images did exactly what I wanted it to. I haven't settled on a final shape, but these octagons are lookin' mighty fine so far, thank you! (I assume that clipping by a .svg is out of the question? I don't think the CSS checker liked the look of it. I think it thought it was a malformed URL.)

So now all I need to fix (until I find something else of course) is the stupid dropdown!
Kim Site Admin

I don't think it knows about .svg file extensions being a valid thing in CSS. They are still pretty new and rarely used. I'll look into updating it, though there's no way I can do the necessary research before Epic Week! :)

You are on: Forums » Art & Creativity » CSS questions!

Moderators: Mina, Keke, Cass, Auberon, Claine, Ilmarinen, Ben, Darth_Angelus