Forums » Art & Creativity » What can custom templates do?

One of my favourite bits of making a new character is creating a pointless fashion-over-function website to go with them. I'm not particularly good at this, and the layouts tend to end up mostly identical, but it is something I inexplicably enjoy doing anyway. At the moment I've just made my characters on RPR and linked to their old sites, but is it possible to use CSS with the template box model to recreate something like this or this?

Yes, I believe you could recreate both those layouts with judicious use of absolute positioning and perhaps :nth-child() selectors.

It will depend on your skill level with CSS. I would rate what you want to do as advanced. The box model is built for logical groupings, and your favored navigation structure seems to be less about logical positioning and more about confusion -- Or, as you say, fashion over function. But with the proper bag of tricks you could succeed in breaking the box model out of itself visually.

You should be able to do something along those lines. The only thing I'm not sure about are the links you have scattered around the first example.

If it helps, take a look at the custome template I created for Galek Dor.

EDIT: Kim beat me to it

Thanks guys in that case I'll throw down my five bucks and give it a red hot go sometime.

*preens her own custom layout*

Dear Kim,

Just finished completely wrecking your nicely ordered div boxes. I was wondering if you could notify their next of kin.

Original

RPR Remake

Love and kisses,
Urrp

PS Cheers for the help

WHOA! You totally did it!

I hope they were nicely ordered in a way that made it easy to identify what they were and subsequently wreck them.

Yeah the layout stuff was very nicely explained, though you might want to warn people about the default padding setting for the charcontent box because it took me ages to work out why it was spazzing all over the page. I kept setting the width lower but the box only got a little smaller whilst the widget inside squashed into a narrow slit in the middle. Other than that, smooth sailing!

YEAH, that's annoying, isn't it? I just rewrote parts of the template code so that I can make the default layout a legacy thing, and let people start with a very nearly blank slate instead in the future if they so prefer. I got to the point of making that possible, but then had to stop for a breather before I forge ahead and implement all the buttons and bells that will give it to people.

Oh nice, I like the sound of that. I couldn't work out how to stick my own containers in there without access to the HTML but that could just be 'cause I don't really know much CSS. What's the intention? Make it available to everyone or Epic members only?

Alright, I have a question, although my profile is a little less experimental.

http://www.rprepository.com/c/remi

I have a fixed width DIV there and I'd like to center it. At the moment I just have the left and right headers set to 20% but this'll change wildly depending on monitor size. I thought I'd do this by setting the margins to auto, but this doesn't seem to do a thing. Any help?

CSS is style only, so it's true that there's no way to add containers without accessing the HTML. I have no plans to turn over the HTML -- it'd be wildly complicated to get a reasonable modding system going, and people are already confused enough with just CSS.

The "legacy system" I mentioned in my previous post would be an expansion on the currently existing CSS templating system for Epic members. Right now, ALL templates have default CSS pre-applied to them. It's there for people who are not so skilled with structure, who just want to slap some new colors and borders on and call it good. But for people doing complex stuff like you, it's just a nuisance figuring out that you want to set a margin but it conflicts with some pre-applied padding (or whatever). So it'd be a checkbox allowing you to remove nearly all of the default CSS, so you don't have to fight with what's already there if you want to do something radical.

I wouldn't use the headersides for positioning. They're in there for people who want disparate imagery on either side of their header (Think of the ironwork on the steampunk template header. I had to have a different one for each side). For your purposes, I'd take them out entirely and apply the centering directly to the elements in question.

Also, margin: auto auto; only works on unfloated elements, so you're going to need to take the float off the elements you want centered.

Try this:

Because you have floated elements inside your header, you may also need to inform the content that it should respect them as part of the page flow with:

That should zap most display issues that can come up when mixing floated and non-floated elements.

HOWEVER, some versions of internet explorer doesn't always honor margin: auto auto on any kind of element, but you can typically circumvent that like this:

Hope this takes care of your issue (and maybe some future ones!)

Thank you so much Kim! It works perfectly!

Hooray! By the way, I think the use of the "Decryption key" and the redacted notes is totally hilarious and awesome. Very creative.

One thing that might interest you is that in certain browsers (Chrome and Firefox primarily. Sometimes safari) you can change the color of highlighting.

That's what the repository uses. Change the background and the color to suit your theme if you like. YOu have to use both tags to get it working in as many browsers as possible.

Ah, that's great! I've added it to my profile

Cool! It adds a lot.