IC Profile Look.
As RoW has HTML enabled fields it means you are able to customize the skin on your profile page to create a personal one for your wolf. To do so requires the following CSS code to be placed in your "Profile CSS" field. The personal skin can also be used on your Extra Profile Page.
Code:
#content { background:url(http://i.imgur.com/ynKEC2Y.png) repeat #fefffc;}a:link, a:visited, h1 {color: #b15147;}a:hover, a:active {color: #e77740;}#logo {height:300px;}.regular {background-image:url(http://relic-lore.net/images/skins/banners/18/stardust-rachel.png); background-color:#000; min-height: 300px;}.blurred {background-image:url(http://relic-lore.net/images/skins/banners/18/stardust-blur-rachel.png); background-color:#000; min-height: 300px;}.thead {background: #b15147; color: #ffcac5;}.thead a:link, .thead a:visited {color: #ffcac5;}.thead a:hover, .thead a:active {color: #fde9e7;}.tcat {background: #e77740; color: #feb793;}.tcat a:link, .tcat a:visited {color: #feb793;}.tcat a:hover, .tcat a:active {color: #ffd5c0;}
#content - This controls the background area immediately behind the forums and sidebar. The default background image is transparent, meaning you can just change the background-color to change the color of the image.
a:link - This changes the color of the link text.
#logo - This is the height of the banner image.
.regular - This controls the banner image, replace with your URL.
.blurred - If you want to have the blur effect, you need to replace this with your blurred image URL. If you don't want to have the blurred effect, replace with the .regular banner image.
.thead - This is the primary color of the skin, where you see the "Announcements & Updates" text.
.tcat - This is the secondary color of the skin, where you see the "Current News, Weather, and Upcoming Events" text.
For advanced users, there are other areas of the skin that you might also want to customize:
#top_nav - This controls the navigation bar directly above the banner.
#bottom_nav - This controls the navigation bar directly below the banner.
.trow1 - The body area of the forums, where you see your posts and content.
#footer - The footer bar at the bottom of the forum.
.outer-shadow - The drop shadow behind the forums.
If you can't find the element that you want to change, all modern browsers come with an inspect function and developer tools that let you easily change CSS and see what it looks like.
Notes!:
- All of your CSS must be on the same line. Do not use line breaks or it will not work.
- You must add style tags around the profile code for it to work.
- If your logo image is taller than the default 300px, you will need to update all instances of height and min-height to the pixel height of your image.
Adding New Fields.
If you would like to add extra information about your wolf in a new section that the profile currently doesn't offer it is also possible. For example a 'History in Relic Lore' field could be made or a place to store old/retired graphics. The new field is added at the bottom of the field you want it to show up beneath. For example, if you wish your new field to be beneath the 'Appearance' section, put the code at the bottom of the 'Appearance' field.
The code for creating your new field is as follows, and it does not need any tinkering with, as it is complete and working unless you take some piece out.
Code:
</div>
<div class='tcat'>New Field</div>
<div class='trow1'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet purus vitae orci congue scelerisque. Donec ac lacus in ante convallis suscipit ac eu leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Customizing the Look of your Fields.
There is simple html you can use to simply and easily customize how each of these fields look. For example you could add a small 'div' to divide the field in half and have content displayed in two columns instead of one main block of text using the following html.
Code:
Some of my text here. This will show up to the right.
<div style="float:left;">Add your content here. This will show up to the left.</div>.
Output:
Some of my text here. This will show up to the right.
Add your content here. This will show up to the left.
This can easily be styled with extra CSS, perhaps to create a dividing border (border-right: 1px;), margins (margin-right: 5px;), background color (background-color: #hex code;) or whatever else you may like!
(This post was last modified: Nov 06, 2023, 03:44 AM by Clouse.)
