◆ ◆ ◆ Where to Begin? ◆ ◆ ◆
First, let's look at the two key languages needed: HTML and CSS.
What is HTML?
HTML is the spongecake foundation that puts all the component parts of your site on the actual page.
In this instance, we don't have to fret over HTML as RPR has a prebaked, in-built foundation.
What is CSS?
Short for 'cascading style sheet' what CSS does is to give your browser a reference point for a particular style. Whereas HTML is the bread and butter of a website, CSS is the pretty icing on the cake.
So let's bake a cake:
Baking is messy and coding is no different: it's a lot of trial and error. But it doesn't have to be! Allow me to introduce you to your new best friend: this is CodeAcademy. CodeAcademy is an online resource that allows you to learn to code interactively (and in a whole bunch of different languages!) for free.
Not only can you learn to code HTML CSS on your own terms - you can learn an array of coding different languages that will stay with you for life and prove hugely beneficial in a Digital world.
What is HTML?
HTML is the spongecake foundation that puts all the component parts of your site on the actual page.
In this instance, we don't have to fret over HTML as RPR has a prebaked, in-built foundation.
What is CSS?
Short for 'cascading style sheet' what CSS does is to give your browser a reference point for a particular style. Whereas HTML is the bread and butter of a website, CSS is the pretty icing on the cake.
So let's bake a cake:
Baking is messy and coding is no different: it's a lot of trial and error. But it doesn't have to be! Allow me to introduce you to your new best friend: this is CodeAcademy. CodeAcademy is an online resource that allows you to learn to code interactively (and in a whole bunch of different languages!) for free.
Not only can you learn to code HTML CSS on your own terms - you can learn an array of coding different languages that will stay with you for life and prove hugely beneficial in a Digital world.
◆ ◆ ◆ Other Free Learning Resources ◆ ◆ ◆
You can learn about the fundamentals of Digital Marketing (including: SEO, eCommerce, social media marketing etc.) with Google's Digital Garage. When you've completed the courses, you'll be quizzed, certified and can add this to your CV.
Through Google there are also free qualifications in Analytics and Adwords which are a huge boon to a person looking to get their footing in the Digital Marketing industry.
Through Google there are also free qualifications in Analytics and Adwords which are a huge boon to a person looking to get their footing in the Digital Marketing industry.
◆ ◆ ◆ Base Layout (WIP!) ◆ ◆ ◆
Use in conjunction with this page provided by Kim!
Quote:
***CONTAINER***
html, body {
}
#sitecontainer {
This element contains everything. It's the key container that holds and keeps everything into place.
}
***TOOLBAR***
#toolbar {
The top toolbar.
}
#toolbar a {
Use this to stylize the toolbar links.
}
***HEADER***
#charheader {
This element holds the portrait, the navigation and the two headers below.
If you aren't using them, be sure to set #leftheaderside and #rightheaderside to display: none.
}
#characterName {
This is a title, you can stylize the text with this generator.
}
#playedBy {
This is a title, you can stylize the text with this generator.
}
***PAGETABS***
#pagetabs {
The template navigation.
}
#pagetabs a {
Use this to stylize the navigation links.
}
***CONTENT***
.pagetitle {
This is the page title for each page. You can stylize the text with this generator.
}
#charcontent {
This element is the main container where all the site widgets, information and images will appear.
}
***FOOTER***
#footer:before {
content: 'Template name designed by your username.';
If you'd like to add a credit for your template use this.
You can also style the text for this here.
}
#footer {
The very bottom element where the RPrepository URL appears.
You can stylize the text here.
}
html, body {
}
#sitecontainer {
This element contains everything. It's the key container that holds and keeps everything into place.
}
***TOOLBAR***
#toolbar {
The top toolbar.
}
#toolbar a {
Use this to stylize the toolbar links.
}
***HEADER***
#charheader {
This element holds the portrait, the navigation and the two headers below.
If you aren't using them, be sure to set #leftheaderside and #rightheaderside to display: none.
}
#characterName {
This is a title, you can stylize the text with this generator.
}
#playedBy {
This is a title, you can stylize the text with this generator.
}
***PAGETABS***
#pagetabs {
The template navigation.
}
#pagetabs a {
Use this to stylize the navigation links.
}
***CONTENT***
.pagetitle {
This is the page title for each page. You can stylize the text with this generator.
}
#charcontent {
This element is the main container where all the site widgets, information and images will appear.
}
***FOOTER***
#footer:before {
content: 'Template name designed by your username.';
If you'd like to add a credit for your template use this.
You can also style the text for this here.
}
#footer {
The very bottom element where the RPrepository URL appears.
You can stylize the text here.
}
◆ ◆ ◆ THE CSS BIBLE ◆ ◆ ◆
the goods!
the goods!
|
CSS Generators CSS3 Maker CSS Cheat Sheet CSS KF Animator CSS Beautifier Codepen w3schools stackoverflow Clippy CSS Text Generator loading.io cssportal Iconfinder patternify awwwards behance dribbble animista Layerstyles Westciv |
◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ |
includes filters, transform tools and a library of CSS snippets. easy to use CSS generator for animation and transitions. super useful information. a keyframe animator generator. a tool that cleans up and formats css. really cool CSS resources submitted by moki! coding community + resource hub submitted by ohm! coding community + resource hub submitted by ohm! CSS shape generator Includes font style, size etc. creates custom loading icons and gives code! live demo, generators etc! icon resource. some are free some aren't! creates patterns inspiration CSS animations generator submitted by revolversnackalot! For those of you who use photoshop, this is the editor for you! it generates CSS code from a PS-like editor Generate gradients, text properties, box properties, transformations |
|
◆
◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ ◆ |
See the full post and contribute here
credit to: foxtribe, littlegrimoire from DA for post prettification ( pagedolls )
..
Bless! I've been wanting to do this forever, but anywhere I look online, it gets rather confusing and messy. Thank you so much for doing this. It's so appreciated.
Ooo thank you! Lots of handy stuff here. The button maker is even nicer than the one I've been using.
this is everything i could have asked for!!!
As always, very kind of you ♡
Hey Fiebsbae, can I ask you to make a copy-thread in the Gallery too? This could be super useful!
Oooh, this looks super handy, subscribed to both threads! I've been on the lookout for a very specific thing that I'm not sure even exists, but maybe somebody could point me in the direction of something similar? Basically I want something like the signature image randomizer that USED to exist on tektek.org before it shut down. Basically, you'd upload a bunch of images into the thing, and then on every page load it would display a random image out of those uploaded. So far I'm only finding things that do that for background images and banners, but I want something I can actually put on a page. I found something passable years ago but it doesn't seem to be turning up for me. :< Anyone know if this is even possible? In any case I'll definitely be poking through these links at some point~
Goo wrote:
Oooh, this looks super handy, subscribed to both threads! I've been on the lookout for a very specific thing that I'm not sure even exists, but maybe somebody could point me in the direction of something similar? Basically I want something like the signature image randomizer that USED to exist on tektek.org before it shut down. Basically, you'd upload a bunch of images into the thing, and then on every page load it would display a random image out of those uploaded. So far I'm only finding things that do that for background images and banners, but I want something I can actually put on a page. I found something passable years ago but it doesn't seem to be turning up for me. :< Anyone know if this is even possible? In any case I'll definitely be poking through these links at some point~
Excellent question. It would've been a HTML code generator. 😄 I know the codes but it's finicky! Let's see if I can find a generator for you.
Goo wrote:
Oooh, this looks super handy, subscribed to both threads! I've been on the lookout for a very specific thing that I'm not sure even exists, but maybe somebody could point me in the direction of something similar? Basically I want something like the signature image randomizer that USED to exist on tektek.org before it shut down. Basically, you'd upload a bunch of images into the thing, and then on every page load it would display a random image out of those uploaded. So far I'm only finding things that do that for background images and banners, but I want something I can actually put on a page. I found something passable years ago but it doesn't seem to be turning up for me. :< Anyone know if this is even possible? In any case I'll definitely be poking through these links at some point~
Hi Goo, Please try this script out and let us know your result!
Fiebs wrote:
Goo wrote:
Oooh, this looks super handy, subscribed to both threads! I've been on the lookout for a very specific thing that I'm not sure even exists, but maybe somebody could point me in the direction of something similar? Basically I want something like the signature image randomizer that USED to exist on tektek.org before it shut down. Basically, you'd upload a bunch of images into the thing, and then on every page load it would display a random image out of those uploaded. So far I'm only finding things that do that for background images and banners, but I want something I can actually put on a page. I found something passable years ago but it doesn't seem to be turning up for me. :< Anyone know if this is even possible? In any case I'll definitely be poking through these links at some point~
Hi Goo, Please try this script out and let us know your result!
It works, yes! But is there a way to finagle it to work with BBcode? I have a pretty particular idea in mind for a character page that I think would be pretty rad if I can get it to work. If not, I'll just have to find another way to go about it. Thanks for the link though, I'll definitely hang onto that just in case!
Edited because I was a dingus and had CSS on the brain and not what I actually meant!
Goo wrote:
Fiebs wrote:
Goo wrote:
Oooh, this looks super handy, subscribed to both threads! I've been on the lookout for a very specific thing that I'm not sure even exists, but maybe somebody could point me in the direction of something similar? Basically I want something like the signature image randomizer that USED to exist on tektek.org before it shut down. Basically, you'd upload a bunch of images into the thing, and then on every page load it would display a random image out of those uploaded. So far I'm only finding things that do that for background images and banners, but I want something I can actually put on a page. I found something passable years ago but it doesn't seem to be turning up for me. :< Anyone know if this is even possible? In any case I'll definitely be poking through these links at some point~
Hi Goo, Please try this script out and let us know your result!
It works, yes! But is there a way to finagle it to work with BBcode? I have a pretty particular idea in mind for a character page that I think would be pretty rad if I can get it to work. If not, I'll just have to find another way to go about it. Thanks for the link though, I'll definitely hang onto that just in case!
Edited because I was a dingus and had CSS on the brain and not what I actually meant!
I think in terms of RPR @Kim is introducing the group random information panel as a widget on character profiles!
Otherwise I'm not sure it's plausible but I'll look it up for you 😄
You are so amazing for doing this. So many points of reference even those of us with some experience can use to improve. Thank you thank you thank you 
Cami wrote:
You are so amazing for doing this. So many points of reference even those of us with some experience can use to improve. Thank you thank you thank you
This is a super old thread but I'm so glad to see it helping people again.
SO amazing you took your time to find all of this for us to reference. Definitely gonna look into it later
Thanks for this. With more time comes to my hands I’ll start working on some templates. There are a few themes I can’t quite find a good match in what’s available.
You are on: Forums » Art & Creativity » TEMPLATE 101 - Make Your Own Templates
Moderators: Mina, Keke, Cass, Auberon, Claine, Ilmarinen, Ben, Darth_Angelus