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 
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!
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.

1.
2.
3.
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.
1. Add
AND
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.
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.
Code:
b, strong {
color: white;
}
Code:
ul.vitalstats li {
color: green;
}
3.
Code:
ul#pagetabs {
margin-left: ???px;]
Claine wrote:
1. Add
AND
Code:
b, strong {
color: white;
}
Code:
ul.vitalstats li {
color: green;
}
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.
[edit] Here! On this character's OOC page. Although I think I might be able to figure it out...
Quote:
3.
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.
Code:
ul#pagetabs {
margin-left: ???px;]
Thanks for answering me

Code:
#charheader .portraitcontainer {
margin-bottom: 10px;
}
Ah sorry I misunderstood! Try putting this into your code.
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:
http://bennettfeely.com/clippy/ I found this site which could help you draw polygons
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
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:
http://bennettfeely.com/clippy/ I found this site which could help you draw polygons
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

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

Making good progress in the gallery
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
Annnd I got the pagetabs to behave!
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
Hopefully I can iron out the rest of these bug tomorrow!

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

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

Oh, this is really fun to watch!
You have two options for the images. You can change this:
To this:
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.
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.

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.
...
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!
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!