AP4 CSS Customization instructions 1.2
1 Page: [ 1 ]
3 years 9 months ago
Ok i needed 3 hours to figure what is what so here you go the official PimpMyUserpage Style userpage tut for changing colors on your plane old boring userpage ^^
I have some spelling mistakes but you will understand it... This has been written so that every idiot (as myself) can understand :P
So there you have it i hope it helps
@Xenohawk: Now you dont have to hurry with the simple one ^^
EDIT: 10th Feb 2006
New code with the Xeno's CSS corrections. Now you can use bigger images without complications in the code coz of our awesome developers ^^
NOW THE FULL STYLE CUSTOMIZATION INSTRUCTIONS!
I have some spelling mistakes but you will understand it... This has been written so that every idiot (as myself) can understand :P
/*
--------------------------------------------------------------------------------
AnimePaper CSS TEMPLATE
Designed By: Aaron Tan (xenohawk)
Last Update: 11:40 PM Friday, January 27, 2006
Description: VerticalEdge [fixed] [center]
URL: http://www.animepaper.net/
--------------------------------------------------------------------------------
+++ NOTICE +++
CSS is still under development.
A simpler CSS will be up once I have finished all the small parts
in APv4.
*/
/* IMPORT CORE CSS */
/* Depreciated, using external link on main page to load the core.css
@import url(http://www.animepaper.net:8080/css/core.css); */
/*
------------------------------------------------------------------------------
=essentials
------------------------------------------------------------------------------*/
body {
background: #E3E2E0 url(http://www.animepaper.net:8080/images/verticaledge/shadowbg.gif) repeat-y top center;
font-family: Verdana, sans-serif;/*Fonts in general*/
color: #888; }/*Color of the fonts on the whole page*/
blockquote { background: #FFF; }
blockquote span.bhead {
display: block;
background: #CCCCCC;
padding: 4px 1em;
font-weight: bold;
color: #FFF; }
blockquote div {
border-left: 4px solid #CCCCCC;
border-right: 4px solid #CCCCCC;
border-bottom: 4px solid #CCCCCC;
padding: 1em; }
blockquote.spoiler span.bhead {
cursor: pointer; }
blockquote.spoiler div { display: none; }
ins { text-decoration: none; color: #B96A0E; }
pre, code { color: #6F4109; }
/* =essentials_links
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
a:link,
a:visited,
a:active {
text-decoration: none;
color: #3399CC; }/*color of the links on the whole page*/
a:hover {
text-decoration: none;
color: #B32FCF; }/*color of the links while hover*/
a:hover img { border: none; }
/* =essential_misc
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Turn off active outline for browser that support (e.g. Firefox 1.5) */
* { outline: 0; }
/*
------------------------------------------------------------------------------
=typography
------------------------------------------------------------------------------*/
p, label, .normalsize { font-size: 1.1em; line-height: 1.5em; }
ul, ol, dl { font-size: 1.1em; line-height: 1.5em; }
q { font-size: 1.1em; line-height: 1.5em; }
/* Cancel off font inheritance to childrens */
ul ul, ol ol, ol ul, ul ol, dl dl, li p, p q { font-size: 1em; }
h1, .hugesize { font-size: 2.6em; }
h2, .largesize { font-size: 2.2em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; }
h5, .mediumsize { font-size: 1.4em; }
h6 { font-size: 1.2em; }
h1, h2, h3 { margin: 0; }
/* =typography_custom
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
p { }
p.centered { text-align: center; }
p.nm, p.wm {
margin: 0 0 1em 0;
padding: 3px; }
p.nm {
background-color: #FEF5DA; /*if you see the quotebox "ne scan has been submitted... thats the color of the background*/
border-right: 1px solid #D0CBAF;/*border*/
border-bottom: 1px solid #D0CBAF; /*border*/
color: #605033; }/*color of the font in it*/
p.wm {
background-color: #FBD8D7;
border-right: 1px solid #DCBFB4;
border-bottom: 1px solid #DCBFB4;
color: #6A0D0B; }
p.priority {
text-align: center;
font-weight:bold; }
p.subs {
margin: 0 0 1em 0; }
h2 { }
.sections h2, .subsections h2 {
border-top: 3px solid #DDD;/*this is the border that devides the whole categories*/
margin: 25px 0 20px 0;
font-size: 1.3em;/*this is the size of the font on the title of the categories default green*/
font-weight: bold;
letter-spacing: 1px;
line-height: 2em;
color: #8BBD17; }/*the color of the titles*/
.sections h2 span {
display: block;
margin-top: -1em;
font-size: 10px;
font-weight: normal;
letter-spacing: 1px;
color: #CCC; }
h3 { }
#sidebar h3, .subsections h3, #write_form h3 {
border-top: 3px solid #DDDDDD;
margin: 25px 0 20px 0;
font-size: 1.3em;
font-weight: bold;
letter-spacing: 1px;
line-height: 2em;
color: #B32FCF; }/*title color of the categories on the sidebar*/
.subsections h3 a { color: #B32FCF; }
.generic_box h3, .option_box h3 {
background: #EEE;/*color of some titles in the sidebar (can be seen on the home page)*/
border: 0;
margin: 0; padding: 5px;
font-size: 1.1em;
font-weight: bold;
letter-spacing: normal;
line-height: 1.2em;
color: #666; }/*font in those titles*/
#write_form h3 {
border: 0;
margin: 0 0 1em 0; padding: 5px;
border-bottom: 2px solid #DDDDDD;
color: #666; }
/*
------------------------------------------------------------------------------
=navigation
------------------------------------------------------------------------------*/
#navigation { position: absolute; width: 100%; z-index: 9999; }
#nav {
position: relative;
height: 32px;/*you can adjust the position of the border downward by entering larger number*/
margin: 0;
border-bottom: 5px solid #EEE;/*on the navigation this is the color of the lower border*/
list-style: none;
padding-top: 2px; }
#nav ul, #nav li { list-style: none; margin:0; }
#nav li.on { text-indent: -5000px; }
#nav li.on ul {
background: #CCC;/*this is the whole navigation bar color (behind everything)*/
position: absolute;
top: 2px; left: 0;
width: 100%;
height: 30px;
text-indent: 0;
margin-bottom: 2px; }
#nav li.on ul li { float: left; }
#nav li.on ul li a {
background: #CCC;/*the color of the navigation buttons*/
display: block;
height: 30px;
width: 80px;
border-right: 2px solid #FCFBF9;/*the color of the border between the buttons*/
padding-left: 4px;
font-size: 11px;
font-weight: bold;
color: white; }/*color of the fonts on the navigation bar*/
#nav li.on ul li a:hover { background: #8BBD17; }/*color of the button when hover*/
#nav li.off {
position: relative;
float: right;
top: 35px; right: 4px;
height: 20px;
margin-top: -1.5em; }
#nav li.off a {
background: #EEE url(http://www.animepaper.net:8080/images/verticaledge/arrow_down_light.gif) no-repeat 98% 50%;/*color of the drop down menu on the right*/
display: block;
width: 14em;
line-height: 20px;
padding-left: 4px;
margin-left: 4px;
border: 1px solid #E0E0E0; /*the border color of the drop down menu*/
border-top: 0;
font-size: 10px;
font-weight: bold;
color: #AAA; }/*color of "quick"*/
#nav li.off a:hover, #nav li.off:hover a, #nav li.sfhover a {
background: #EEE url(http://www.animepaper.net:8080/images/verticaledge/arrow_down.gif) no-repeat 98% 50%;/*color of the "quick menu" when hover*/
color: #666; }/*color of the font when hover*/
#nav li.off ul {
display: none;
position: absolute;
top: 20px; left: 0; }
#nav li.off:hover ul, #nav li.sfhover ul {
display: block;
z-index: 5000; }
#nav li.off:hover ul li a, #nav li.sfhover ul li a {
background: #CCC;/*color of the navigation bar when hover*/
color: #FFF; }/*font color when hover*/
#nav li.off ul li a:hover {
background: #BE4DD7; /*color of the links when hover in the quick menu*/
color: #FFF; }/*color of the font when hover in quick menu*/
/* =navigation_tab
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*well TABS you can see them in the messages*/
ul.tab_menu {
margin:0 0 1em 0; padding: 0;
border-bottom: 7px solid #EEE;/*this is the border color below the tabs*/
list-style: none; }
ul.tab_menu li {
margin: 0 0 -2px 0; padding: 0;
float: left; }
ul.tab_menu li a,
ul.tab_menu li a:visited {
background: #EEE;/*bacground color of the tabs*/
display: block;
padding: 3px 10px;
margin-left: 5px;
margin-right: 0;
font-weight: bold;
border: 1px solid #E0E0E0;/*tabs border*/
border-bottom: 0;
color: #AAA; }/*color of the font on the tabs*/
ul.tab_menu li a:hover, ul.tab_menu li.selected a,
ul.tab_menu li.selected a:visited {
color: #666; }/*visited font color on the tabs menu*/
/*
------------------------------------------------------------------------------
=list
------------------------------------------------------------------------------*/
/* =list_images
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
li.icon_new { background: transparent url(http://www.animepaper.net:8080/images/icons/note.gif) no-repeat 0 50%; }
li.icon_zoom { background: transparent url(http://www.animepaper.net:8080/images/icons/zoom_in.gif) no-repeat 0 50%; }
li.icon_down { background: transparent url(http://www.animepaper.net:8080/images/icons/arrow_down.gif) no-repeat 0 50%; }
li.icon_fav { background: transparent url(http://www.animepaper.net:8080/images/icons/heart_add.gif) no-repeat 0 50%; }
li.icon_favdel { background: transparent url(http://www.animepaper.net:8080/images/icons/heart_delete.gif) no-repeat 0 50%; }
li.icon_edit { background: transparent url(http://www.animepaper.net:8080/images/icons/pencil.gif) no-repeat 0 50%; }
li.icon_del { background: transparent url(http://www.animepaper.net:8080/images/icons/bin_closed.gif) no-repeat 0 50%; }
li.icon_stop { background: transparent url(http://www.animepaper.net:8080/images/icons/stop.gif) no-repeat 0 50%; }
li.icon_feat { background: transparent url(http://www.animepaper.net:8080/images/icons/star.gif) no-repeat 0 50%; }
li.icon_top { background: transparent url(http://www.animepaper.net:8080/images/icons/arrow_up.gif) no-repeat 0 50%; }
li.icon_add_showcase { background: transparent url(http://www.animepaper.net:8080/images/icons/image_add.gif) no-repeat 0 50%; }
li.icon_remove_showcase { background: transparent url(http://www.animepaper.net:8080/images/icons/image_delete.gif) no-repeat 0 50%; }
li.icon_most_popular { background: transparent url(http://www.animepaper.net:8080/images/icons/folder_heart.gif) no-repeat 0 50%; }
li.icon_wallpaper_timeline { background: transparent url(http://www.animepaper.net/images/icons/clock.gif) no-repeat 0 50%; }
li.icon_friend_submissions { background: transparent url(http://www.animepaper.net:8080/images/icons/folder_user.gif) no-repeat 0 50%; }
li.icon_my_scans { background: transparent url(http://www.animepaper.net:8080/images/icons/image.gif) no-repeat 0 50%; }
li.icon_my_wallpapers { background: transparent url(http://www.animepaper.net:8080/images/icons/image.gif) no-repeat 0 50%; }
li.icon_random_cat { background: transparent url(http://www.animepaper.net:8080/images/icons/photos.gif) no-repeat 0 50%; }
li.icon_random_gallery { background: transparent url(http://www.animepaper.net:8080/images/icons/images.gif) no-repeat 0 50%; }
li.icon_random_scans { background: transparent url(http://www.animepaper.net:8080/images/icons/photo.gif) no-repeat 0 50%; }
li.icon_random_wallpapers { background: transparent url(http://www.animepaper.net:8080/images/icons/photo.gif) no-repeat 0 50%; }
li.icon_friend { background: transparent url(http://www.animepaper.net:8080/images/icons/user.gif) no-repeat 0 50%; }
li.icon_stylesheet { background: transparent url(http://www.animepaper.net:8080/images/icons/layout_content.png) no-repeat 0 25%; }
/* For big icons use in the list_menu_view
dt.icon_big_wallpaper a { background: transparent url(http://www.animepaper.net:8080/images/tango-icons/wallpaper.gif) no-repeat 7px 50%; }
dt.icon_big_scan a { background: transparent url(http://www.animepaper.net:8080/images/tango-icons/wallpaper.gif) no-repeat 7px 50%; }
dt.icon_big_fav a { background: transparent url(http://www.animepaper.net:8080/images/tango-icons/favorite.gif) no-repeat 7px 50%; }
*/
dt.page_label { background: transparent url(http://www.animepaper.net:8080/images/icons/page_copy.gif) no-repeat 0 50%; }
dt.topic_started_label, dt.last_activity_label { background: transparent url(http://www.animepaper.net:8080/images/icons/time.gif) no-repeat 0 50%; }
dt.last_reply_label, dt.by_label { background: transparent url(http://www.animepaper.net:8080/images/icons/user_comment.gif) no-repeat 0 50%; }
dd.topic_content { background: transparent url(http://www.animepaper.net:8080/images/icons/resultset_next.gif) no-repeat 0 50%; }
/* =list_one
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- outer template right sidebar 'Links' list.
*/
.list_one { margin: 0; font-size: 1em; }
.list_one li {
margin: 0 5px;
list-style: none; }
.list_one li a {
display: block;
background: transparent url(http://www.animepaper.net:8080/images/verticaledge/arrow_bullet.gif) no-repeat 0 50%;
padding-left: 20px;
border-bottom: 1px solid #DDDDDD;/*border below the links on the home page*/
line-height: 2em;
height: 2em; }
.list_one li a:hover { border-bottom: 1px solid #8BBD17; }/*the same border when hover*/
/* =list_two
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- usually used on the footer of the content box (e.g. 'see more' link..)
*/
.list_two { margin: 0; font-size: 1em; }
.list_two li {
margin: 0 5px;
padding-left: 20px;
line-height: 2.5em;
list-style: none; }
.list_two li.site img {
display: block;
margin-top: 1.5em;
margin-left: auto;
margin-right: auto; }
/* =list_three
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- gallery index page list like 'Gallery Options'
*/
.list_three { margin: 0; font-size: 1.4em; }
.list_three li {
margin: 0 10px;
list-style: none;
padding-left: 25px;
line-height: 2em;
height: 2em; }
.list_three li a {
font-weight: bold; }
/* =list_four
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- CSS style selection and creation
*/
.list_four { margin: 0; font-size: 1.4em; }
.list_four li {
margin: 0 10px 10px 0;
list-style: none;
padding-left: 25px;
height: 2.5em }
.list_four li a {
font-weight: bold; }
.list_four li p {
position: relative;
top: -1.2em;
display:block;
font-size:0.8em;
height:0.8em; }
/* =list_block
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- link us page
*/
.list_block { margin: 0; }
.list_block li {
margin: 5px 10px;
list-style: none;
padding-left: 25px; }
/* =list_img
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- list with inline image (userpage sidebar lists eg. myfriends.. )
*/
.list_img { margin: 0; font-size: 1em; }
.list_img li {
position: relative;
margin: 0 5px;
padding: 0 20px 0 2px;
line-height: 2.3em;
height: 2.3em;
border-bottom: 1px solid #DDDDDD;/*border color between friends in friend list*/
list-style: none; }
.list_img li img {
position: absolute;
top: 4px; right: 2px; }
.list_img li:hover { border-bottom: 1px solid #8BBD17; }/*color of border when friend hover*/
/* =list_horizontal
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- list that requires horizontal positioning
-- gallery category listing index
*/
.list_horizontal { margin: 0; font-size: 1em; }
.list_horizontal li {
display: inline;
margin: 5px;
list-style: none;
line-height: 2em;
height: 2em; }
.list_horizontal li a {
font-weight: bold; }
/* =list_stats
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- list for statistical listings
-- stats pages
*/
.list_stats { margin: 0; padding: 0; }
.list_stats li {
background: #E8EEFA;
position: relative;
margin: 0 0 -0.1em 0;
padding: 1em 0 1em 10px;
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
list-style: none;
font-size: 1.5em; }
.list_stats li .image_div {
margin-top: 10px; }
.list_stats li span.avatar {
display: block;
margin-bottom: 5px; }
.list_stats li span.numbers,
.list_stats li span.rating {
position: absolute;
top: 15px; right: 10px;
font-weight: bold;
font-size: 25px;
color: #8BBD17; }
.list_stats li span.rating {
right: 80px;
padding-left: 15px;
font-size: 20px; }
.list_stats li span.rating span {
display: none; }
.list_stats li span.up {
background: transparent url(http://www.animepaper.net:8080/images/icons/rank_up.gif) no-repeat 0 100%;
color: green; }
.list_stats li span.down {
background: transparent url(http://www.animepaper.net:8080/images/icons/rank_down.gif) no-repeat 0 100%;
color: red; }
.list_stats li span.details {
position: relative; }
/* =list_showcase_info
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- gallery detail page showcase information (those info you see on your left)
-- admin approve page
-- userpage details
*/
dl.showcase_info {
line-height: 2em;
margin: 1em 0;
border-top: 1px solid #DDD;
color: #BBB; }
dl.showcase_info dt {
display: block;
width: 100px;
float: left;
padding-left: 5px;
border-bottom: 1px solid #DDD; }/*color of the border age/gender...*/
dl.showcase_info dd {
border-bottom: 1px solid #DDD;/*color of the border with your info*/
font-weight: bold; }
/* =list_topic_view
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- any forum/topic view like
*/
dl.topic_view,
dl.topic_view dt,
dl.topic_view dd { margin: 0; }
dl.topic_view dt.topic_label,
dl.topic_view dt.desc_label,
dl.topic_view dt.reply_label,
dl.topic_view dt.topics_label,
dl.topic_view dt.posts_label { display: none }
dl.topic_view {
position: relative;
background-color: #FEF5DA;
padding: 10px 80px 11px 10px;
margin-top: -0.1em; /* fix for 1px rouding error problem */
border-top: 1px solid #DDD;/*border color between topics*/
border-bottom: 1px solid #DDD;/*bottom border color of the topics*/
line-height: 1.8em; }
dl.topic_index {
background-color: #E8EEFA;/*forum topic background color*/
padding-right: 155px; }
dl.sticky_topic {
background-color: #FCE3E2; }/*background color of the sticky topic*/
dl.topic_view dt {
position: relative;
float: left;
padding-right: .5em;
padding-left: 20px; }
dl.topic_view dd {
display: block; }
dl.topic_view dd.topic_content {
display: block;
padding-left: 20px;
font-size: 1.2em;
font-weight: bold; }
dl.topic_view dd.desc_content {
display: block;
padding-left: 20px;
margin-bottom: 1em;
line-height: 1.5em; }
dl.topic_view dd.reply_content, dl.topic_view dd.topics_content,
dl.topic_view dd.posts_content {
position: absolute;
top: 5px;
width: 60px;
margin: 0;
padding: 5px;
text-align: center;
font-weight: bold;
color: #8BBD17; }/*color of number of posts*/
dl.topic_view dd.topics_content { color: #698E11; }/*color of number of topics*/
dl.topic_view dd.reply_content span, dl.topic_view dd.topics_content span,
dl.topic_view dd.posts_content span { display: block; }
dl.topic_view dd.reply_content span { font-size: 1.5em; }
dl.topic_view dd.topics_content span,
dl.topic_view dd.posts_content span { font-size: 1.3em; }
dl.topic_view dd.reply_content, dl.topic_view dd.posts_content { right: 5px; line-height: 1.5em; }
dl.topic_view dd.topics_content { right: 75px; line-height: 1.5em; }
/* =list_menu_view
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- big list menu used on profile, gallery index...
*/
dl.menu_view, dl.menu_view dt,
dl.menu_view dd {
margin:0; padding: 0; }
dl.menu_view dt a {
display: block;
clear: both;
background-color: #E8EEFA;/*color of the links to your controls*/
height: 3.5em;
padding-top: .5em;
padding-left: 10px; /* Increase the value here if there is icon */
margin-top: -1px; /* fix for 1px rouding error problem for IE */
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
font-size: 1.4em;
font-weight: bold;
letter-spacing: 1px; }
html > body dl.menu_view dt a {
margin-top: 0;
/* fix for 1px rouding error problem for modern browser */
margin-bottom: -1px; }
dl.menu_view dd {
display: inline;
float: left;
position: relative;
top: -1.7em;
margin-top: -1.8em;
margin-left: 10px; } /* Increase the value here if there is icon */
html > body dl.menu_view dd {
top: -1.4em; }
/* Compact version - used in userpage */
dl.menu_view.compact dt a {
font-size: 1.3em;
height: 2.8em; }
dl.menu_view.compact dd {
margin-top: -1.8em;
top: -0.4em; }
html > body dl.menu_view.compact dd {
top: -0.3em; }
/*
------------------------------------------------------------------------------
=forms
------------------------------------------------------------------------------*/
fieldset { margin: 0; border: 0; padding: 0; }
legend { display: none; }
input, textarea { font-size: 1em; padding: 1px; }
textarea { display: block; margin: 0; padding: 2px; }
form { }
form p {
margin-left: 0;
margin-right: 0; }
form label {
display: block;
margin-top: 0;
margin-left: 0;
margin-bottom: 3px;
font-size: 1em;
font-weight: bold; }
form label em { font-weight: normal; }
form input {
backfround: #fff;/*color of the writing box on the shoutbox, searchbox...*/
display: block;
margin-top: 3px;
font-weight: normal; }
form select {
display: block;
margin-top: 3px;
line-height: 1.5em;
font-size: 1em;
font-weight: normal; }
form textarea {
margin-top: 3px;
line-height: 1.5em; }
/* =form_input
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
input.input_text, input.input_file, select, option, textarea {
font-family: Verdana, sans-serif;
color: #555; }/*color of the font when writing*/
input.input_btn_big {
margin-top: 2em;
padding: 5px 20px;
font-size: 1.2em;
font-weight: bold; }
input.input_checkbox, input.input_radiobox, .inline_input select { display: inline; }
input.input_radiobox { margin-bottom: -0.1em; }
input.input_large { font-size: 1.6em; }
/* =form_input_inline
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
p.inline_input strong,
p.inline_input label { display: inline; padding-right: 1em; }
p.inline_nospace label { padding-right: 0; }
label.inline_input { margin-bottom: 0; }
label.inline_input span { padding-right: 10px; font-weight: bold; }
label.inline_input input, p.inline_input input {
display: inline;
margin-top: 0; }
label.inline_input input { line-height: 1em; }
/* =form_input_indicator
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.indicator {
background: transparent url(http://www.animepaper.net:8080/images/indicator.gif) no-repeat top left;
display: block;
position: relative;
top: -25px; left: 5px;
height: 16px; width: 16px;
margin-bottom: -16px; }
/*
------------------------------------------------------------------------------
=layout
------------------------------------------------------------------------------*/
/* =layout_framework
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- basic foundation for the layouts, effects all layouts
*/
#stretch {
background: #FCFBF9;/*the background color of the whole page*/
margin: 0 auto;
padding: 0;
width: 960px; }
#container {
/*background: transparent url(http://www.animepaper.net:8080/images/920_grid.gif) repeat-y left top;*/
margin: 0 auto; width: 920px;
position: relative;
text-align: left; }
/* Holly hack for IE \*/
* html #stretch,
* html #container { height: 0; }
/* */
/* Helps get IE internal percentage correct */
#wrapper { width: 100%; }
#sidebar {
width: 230px;
float: right;
display: inline; }
#content {
width: 690px;
float: left;
display: inline;
text-align: left; }
#content_inner { width: 100%; }
#header_wrapper, #footer_wrapper {
margin: 0 auto;
width: 960px; }
#header, #footer {
margin: 0 auto;
width: 920px; }
#footer { padding: 5px 0; }
/* =layout_framework_columns
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- basic grid column foundation for the layouts, effects all layouts
*/
.single_col {
clear: both;
width: 680px; }
.first_col {
float: left;
width: 335px;
margin-right: 10px; }
.second_col {
float: left;
width: 335px; }
.twin_col_left {
float: left;
width: 345px; }
.twin_col_right {
float: left;
width: 335px; }
/* =layout_class
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- general class used throughout multiples templates
*/
.centered { text-align: center; }
.subsections { margin-bottom: 1em; }
/* =layout_class_link_box
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- links button like on the forums, bbcodes...
*/
.link_box a:link,
.link_box a:visited,
.link_box a:active {
background: #EEE;/*color of some buttons like quote*/
border: 1px solid #E0E0E0;/*border of that button*/
padding: 3px 5px;
line-height: 2em;
color: #AAA; }/*color of the font*/
.link_box a:hover { color: #666; }/*color of the font when hover*/
/* =layout_class_image_div
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- thumbnail images...
*/
.image_div {
position: relative;
margin-bottom: 10px;
z-index: 500; }
.image_div img {
background: #FFF; /*bordr color around the images*/
padding: 2px;
border: 1px solid #DDDDDD; }/*border around border*/
.image_div a:hover img {
background: #DDDDDD; /*border color when hover*/
padding: 2px;
border: 1px solid #DDDDDD; }/*border of the border color when hover*/
.image_div a span {
display:block;
position: absolute;
top: 0; left:0;
width: 110px;
margin-top: 0px;
margin-left: 210px;
font-size: 10px;
text-align: left;
color:#999;/*color of the font nest to the image "by somemember"*/
cursor: pointer; }
/* Use for square thumbnails */
.image_div a span.square {
width: 230px;
margin-left: 90px; }
.image_div a span em {
display: block;
margin-bottom: 1em;
font-style: normal;
font-weight: bold; }
.image_div a span br { display: none; }
.image_div a span strong {
display: block;
margin-bottom: 2px;
line-height: 1.2em;
letter-spacing: 1px;
margin-bottom: 0.5em;
color: #3399CC; }/*color of the name of the image*/
.image_div a:hover span strong {
color: #B32FCF; }/*color of the image name when hover*/
/* when image_div require horizontal positioning */
.image_div_hor {
display: block;
width: 330px;
float: left;
height: 170px; }
html > body .image_div_hor { height: auto; min-height: 170px; }
/* =layout_class_generic_box
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- foundation for box-like type content like frontpage news...
*/
.generic_box ul {
margin: 0;
list-style: none;
font-size: 10px; }
.generic_box .meta_header li {
margin: 0 5px;
color: #CCC; }/*the color of the small text below the subcategory (can be seen in gallery)*/
.generic_box .body {
margin-left: 5px;
margin-right: 5px;
font-size: 1.1em;
line-height: 1.5em; }
.generic_box p {
margin-left: 0;
margin-right: 0;
font-size: 1.0em;
text-align: justify; }
.generic_box .meta_footer li {
margin: 5px; margin-bottom: 0;
text-align: left; }
/* =layout_class_post_box
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Inherit: [ .generic_box ]
Used on:
-- posts in forums, comments...
-- userpages (about & custom) and groups (about) too
*/
.post_box {
background-color: #F4F4F4; /*color of the posts*/
border-top: 4px solid #DDD;/*border color*/
border-bottom: 4px solid #DDD;/*border color*/
margin: 4em 0;
z-index: 5000;
}
.post_box .meta_header ul { z-index: 9999; }
.post_box .meta_header ul {
position: relative;
width: 120px;
float: left;
margin: 0; padding: 5px;
border-top: 0; }
* html .post_box .meta_header ul { padding-bottom: 0; font-size: 1em;}
.post_box .meta_header li { margin: 0; padding: 0; color: #AAA; }/*color of the font for the member title below the avatar*/
.post_box .meta_header li.avatar { display: block; }
.post_box .meta_header li img { display: block; margin: 0 auto; }
.post_box .meta_header li.info {
text-align: center;
margin-bottom: 5px; }
.post_box .meta_header li.name {
position: absolute;
top: -1.03em; left: 0;
width: 400px;
font-size: 1.8em;
font-weight: bold;
letter-spacing: 1px;
margin-left: 0;
color: #AAA; }/*color of the icon for the member status*/
.post_box .meta_header li.name a { color: #AAA; }/*color of the member name*/
.post_box .meta_header li.name a:hover { color: #BE4DD7; }/*color of the member name when hover*/
.post_box .body {
position: relative;
margin-left: 130px;
margin-right: 0;
padding: 5px; }
.post_box .body .inner { overflow: auto; } /* Fix overflowing contents */
/* Argghh.. that's it IE.. TAKE THIS, now who's your daddy? */
* html .post_box .body .inner { width: 510px; }
.meta_wrap .body { margin-left: 0; }
.meta_wrap .body .inner { overflow: visible; }
* html .meta_wrap .body .inner { width: 640px; }
.meta_wrap .meta_header ul { margin-bottom: -1em; }
.post_box .meta_footer {
clear: left;
border-bottom: 1px solid #DDD;/*color of the thin border on the botton of the post*/
margin: 10px 0 1px 0; }
.post_box .meta_footer ul {
border-top: 1px solid #DDD; /*color of the border between comment and signature*/
margin: 0; }
.post_box .meta_footer li {
margin-bottom: 1em;
font-size: 1em;
text-align: center;
color: #AAA; }/*font color of time display*/
.post_box .meta_footer .options { padding-right: 5px; }
.post_box .meta_footer .options li {
float: right;
margin: 1em 0 1em 0;
padding: 0 5px;
border-left: 1px solid #DDD;/*border color between the quote, edit etc buttons on the post*/
height: 2em; }
.post_box .meta_footer .options li.attention_box {
border: 0;
font-weight: bold; }
/* =layout_class_handle
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Inherit: [ .generic_box ], [ .post_box ]
Used on:
-- collapsible box contents like the news in frontpage and options in gallery details
*/
.handle { cursor: pointer; }
.bar {
display: block;
overflow: hidden; }
/* Holly hack for IE \*/
* html .bar { height: 1%; }
/* */
/* handle styles on subsections h3 */
.subsections h3.open {
background: #EEE url(http://www.animepaper.net:8080/images/verticaledge/arrow_down.gif) no-repeat 99% 50%; }/*the color of the bar that when you clik on it it goes up or down. This is when it is opened*/
.subsections h3.closed {
background: #EEE url(http://www.animepaper.net:8080/images/verticaledge/arrow_up.gif) no-repeat 99% 50%; }/*the same when it is closed*/
.bar_closed {
display: none;
overflow: hidden; }
/* =layout_class_header_info_and_pager
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- pages that uses headers and paging information
*/
.header_info, .pager {
margin: 10px 0;
padding: 5px 15px;
border-top: 1px solid #DDD; /*color of the upper border for scrolling the posts*/
border-bottom: 1px solid #DDD;/*color of the lower border*/
color: #CCC; }
.header_info p, .header_info form p, .pager p {
margin: 0; padding: 2px 0;
font-size: 1.3em;
font-weight: bold; }
.header_info p.light, .pager p.light {
font-weight: normal; }
.header_info .hleft {
float: left;
text-align: left; }
.header_info .hright {
float: right;
text-align: right; }
.pager p { text-align: right; }
/* =layout_general
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- general layout style used throughout the entire template
*/
#header_wrapper, #footer_wrapper {
background: #FCFBF9; }
#header {
background: transparent url(http://www.animepaper.net:8080/images/verticaledge/ap_header.gif) no-repeat left bottom;/*this is the header of the userpage*/
height: 45px;/*height of the header image*/
border-bottom: 5px solid #EEE; }/*color of the border beloq the image*/
#header h1, #header h2 { display: none; }
#process_status {
position: fixed;
top: 0; left: 0;
text-align: center;
z-index: 99999; }
* html #process_status {
position: absolute; }
#process_status span {
background: #E60000;
padding: 5px 10px;
margin: 0;
font-size: 12px;
line-height: 20px;
color: white; }
#user_status {
background: #EEE;/*background color of the menu username/messages/paper*/
position: absolute;
top: -50px; right: 0;
display: block;
text-align: right;
font-size: 11px;
letter-spacing: 1px;
border: 1px solid #E0E0E0;/*border of the menu*/
padding: 5px; }
#user_status div { display: inline; }
#breadcrumb {
padding-top: 70px;
height: 20px; }
#breadcrumb p {
margin: 0; padding: 0;
font-size: 12px;
font-weight: bold;
line-height: 20px; }
#page_status {
margin-top: 1em;
text-align: center; }
#page_status span {
padding: 3px 10px;
margin: 0;
font-weight: bold;
color: #000; }
#page_status.normal span { background: #FAD163; }
#page_status.warning span { background: #FF8574; }
#content, #sidebar { margin-top: 0px; }
#sidebar { }
#sidebar img {
display: block;
margin: 0 auto;
text-align: center; }
#sidebar #shoutbox-div img,
#sidebar .list_img img { display: inline; }
#footer {
text-align: center;
border-top: 5px solid #EEE; }/*border color of the footer*/
#footer p {
margin: 0;
font-size: 10px;
color: #CCC; }/*font color in the footer*/
#write_form form {
background: #F4F4F4;/*bacground color of the writing form*/
border: 1px solid #DDD;/*border of that*/
padding: 5px; }
#write_form form .form_info {
background: #EEE;/*background color of the warning on the form*/
margin: 0 0 1em 0; padding: 5px;
border: 1px solid #DDD; }/*border of that*/
#write_form form .warning {
background: #FEC7C7;
margin: 0 0 1em 0; padding: 5px;
border: 1px solid #FF0000;
color: #FF0000; }
#write_form form #form_tool {
border: 1px solid #DDD;/*border color of the text options*/
padding: 4px;
}
#write_form form #bbcode_tool,
#write_form form #text_tool {
margin: 0;
padding: 0;
float: left; }
#write_form form #bbcode_tool li,
#write_form form #text_tool li {
position: relative;
float: left;
margin: 0 5px 0 0;
padding: 0;
list-style: none; }
#write_form form #text_tool ul {
display: none;
background: white;/*background color of the drop down menu*/
position: absolute;
top: 1em; left: -4px;
border: 1px solid #DDD; /*border of the border of the drop down menu*/
border-top: 3px solid #DDD;/*top border color*/
padding: 0; }
#write_form form #text_tool li:hover ul,
#write_form form #text_tool li.sfhover ul {
display: block; }
#write_form form #text_tool ul li {
margin: 0;
padding: 2px;
clear: left; }
#write_form form #text_tool ul li a {
display: block;
width: 100px;
margin: 0; padding: 4px;
background: none;
border: none; }
#write_form form #text_tool ul li a:hover {
background: #DDD; }/*color of the button on the drop down menu when hover*/
#write_form form #text_tool ul li.hugesize a,
#write_form form #text_tool ul li.largesize a,
#write_form form #text_tool ul li.mediumsize a {
line-height: 1em; }
#write_form form #text_tool ul li#text_color-red a {
color: red; }
#write_form form #text_tool ul li#text_color-green a {
color: green; }
#write_form form #text_tool ul li#text_color-blue a {
color: blue; }
/* Fix IE extra label padding to the right */
#write_form form label {
margin-left: 0;
margin-right: 0; }
#write_form form textarea {
width: 660px;
background-color: #;}/*background color of the writing form*/
#autocomplete_choices {
position:absolute;
top: -999; left: -999;
width:0px;
background-color: white;
border-top:1px solid #999;
border-bottom:1px solid #999;
margin:0px;
padding:0px;
z-index: 9999; }
#autocomplete_choices ul {
margin:0;
margin-top:0;
padding:0;
list-style-type: none; }
#autocomplete_choices li {
margin:0;
margin-bottom:0;
border-left:1px solid #999;
border-right:1px solid #999;
padding:2px 2px;
cursor:move;
font-size: 12px;
color: #555; }
#autocomplete_choices li.selected { background-color: #E0EACE; }
/* =layout_general_sidebar
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- general sidebar layout style used throughout the entire template
*/
#highlights { }
#highlights .highlights-meta {
background: #EEE;/*the color of the little boz below the highlighted wallpaper*/
margin-bottom: 0;
font-size: 10px;
font-weight: bold;
line-height: 2em;
text-align: center;
color: #666; }/*color of the font*/
#highlights .highlights-chooseby {
margin-top: 2px;
text-align: center;
font-size: 10px;
color: #CCC; }/*font color of the "Chosen by" text*/
#highlights .highlights-body {
overflow: hidden;
text-align: justify; }
#highlights .highlights-body img {
display: inline;
background: none;
border: 0; }
#highlights .link_box { font-size: 10px; text-align: center; }
#shoutbox-div { }
#shoutbox-div dl { font-size: 1.0em; }
#shoutbox-div dt {
padding-bottom: 2px;
margin-bottom: 2px;
border-bottom: 1px solid #DDDDDD; }/*color of the line that devided the posts in the shoutbox*/
#shoutbox-div dt:hover { border-bottom: 1px solid #8BBD17; }/*same line when hovered*/
#shoutbox-div dd {
margin: 0 5px;
margin-bottom: 1em; }
#shoutbox-div dd img {
display: inline;
background: none;
border: 0; }
#shoutbox-div ul {
margin: 0;
font-size: 10px;
list-style: none;
text-align: center; }
#shoutbox-div li {
display: inline;
margin: 0; }
#shoutbox-div form { text-align: center; }
#shoutbox-div input { display: inline; }
#myinfo { }
#myinfo .waller_rating , #myinfo .waller_rank, #myinfo .r_info {
background: #F4F4F4;/*color of the rating box*/
margin: 2px 0;
border: 1px solid #DDDDDD;/*color of the border*/
color: #888; }/*font color*/
#myinfo .waller_rating {
text-align: center;
font-size: 2.5em;
letter-spacing: 2px; }
#myinfo .waller_rank {
text-align: right;
font-size: 1.6em; }
#myinfo .waller_rank p {
margin: 2px 4px;
font-weight: bold; }
#myinfo .waller_rank p.rank {
float: left; }
#myinfo .waller_rank p.r_up, #myinfo .waller_rank p.r_dw {
float: right;
padding-left: 15px; }
#myinfo .waller_rank p.r_up {
background: transparent url(http://www.animepaper.net:8080/images/icons/rank_up.gif) no-repeat 0 60%;
color: green; }/*color of the arrow on the status bar when rising*/
#myinfo .waller_rank p.r_dw {
background: transparent url(http://www.animepaper.net:8080/images/icons/rank_down.gif) no-repeat 0 60%;
color: red; }/*color of the arrow when ranking down*/
#myinfo .waller_rank p.r_up span, #myinfo .waller_rank p.r_dw span {
display: none; }
#myinfo .r_info {
padding: 4px;
letter-spacing: 1px;
text-align: right; }
#myinfo .r_info strong {
float: left;
text-align: left; }
/* =layout_mode_regular
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- used on page that's on regular mode (most of the page)
*/
body.regular #content,
body.regular #sidebar { margin-top: 0px; }
/* =layout_mode_regular_gallery_showcase
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- gallery display showcase page
*/
#gallery_showcase { margin-bottom: 0; }
#gallery_showcase .first_col { width: 450px; }
#gallery_showcase .first_col .image_div {
margin: 0 auto;
text-align: center; }
#gallery_showcase .first_col h3 {
margin: 15px 0 -0.2em 0;
font-size: 1.8em;
font-weight: bold;
letter-spacing: 1px;
color: #AAA; }/*in the gallery this is the title color of the image (can be seen when clicking on a image*/
#gallery_showcase .first_col dl.showcase_info {
margin-top: 0;
margin-bottom: 4em;
border-top: 4px solid #DDD; }/*the border below the title*/
#gallery_showcase .first_col .post_box { margin-bottom: 0; }
#gallery_showcase .second_col { width: 220px; }
#gallery_showcase .second_col .image_div a span {
width: 100px;
margin-left: 110px; }
#gallery_showcase .second_col .generic_box p { text-align: left; }
#gallery_showcase .second_col .generic_box .body { margin-top: 1em; }
#gallery_showcase .second_col .option_box .body { margin-top: 0; }
/* For the sake of IE.. */
* html #gallery_showcase .first_col .post_box .body .inner { width: auto; }
/* =layout_mode_regular_gallery_statistic
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- gallery index page
*/
#ap_gallery_catstats_panels .second_col .generic_box .body { margin-top: 1em; }
/* =layout_mode_regular_gallery_category
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- gallery category page
*/
#ap_gallery_cats #indexes {
text-align: center;
margin-bottom: 2em;
font-size: 1.4em; }
#ap_gallery_cats .subsections p {
font-size: 1.2em; }
/* =layout_mode_regular_notification_frame
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- notification page
*/
#notification_frame {}
#notification_frame #quick_search {
margin-bottom: 0; }
#notification_frame table {
width: 100%;
border-collapse: collapse; }
#notification_frame table tr {
width: 100%; }
#notification_frame table tr.normal {
background: #E8EEFA;/*in your inbox this is the mail link background*/
font-size: 1.1em; }
#notification_frame table tr.unread {
background: transparent; }
#notification_frame table tr.unread a {
font-weight: bold;
color: #555; }
#notification_frame table tr.message {
background: #E4F8E7;
font-size: 1.1em; }
#notification_frame table tr.selected {
background: #FEF5DA;
font-size: 1.1em; }
#notification_frame table tr.normal:hover,
#notification_frame table tr.selected:hover {
background: #FEF5DA; }/*color of the message links when hover*/
#notification_frame table tr.normal a,
#notification_frame table tr.selected a {
display: block;
color: #888; }/*font color of the messages*/
#notification_frame table tr td {
padding: 5px;
border-top: 1px solid #DDD; }/*border between messages*/
#notification_frame thead tr td {
padding: 0;
border-top: 0; }
#notification_frame tfoot tr td {
padding: 0;
border-top: 0; }
#notification_frame table tr td.n_checkbox {
text-align: center;
width: 2%; }
#notification_frame table tr td.n_sender {
width: 15%; }
#notification_frame table tr td.n_status {
text-indent: -5000px;
width: 6%;
color: #888; }
html > body #notification_frame table tr td.n_status {
width: 2%; }
#notification_frame table tr.read td.n_status {
background: #E8EEFA url(http://www.animepaper.net:8080/images/icons/email_open.gif) no-repeat 50% 50%; }
#notification_frame table tr.unread td.n_status {
background: transparent url(http://www.animepaper.net:8080/images/icons/email.gif) no-repeat 50% 50%; }
#notification_frame table tr td.n_title {
width: 61%; }
html > body #notification_frame table tr td.n_title {
width: 65%; }
#notification_frame table tr td.n_time {
width: 16%; }
#notification_frame table tr td.n_msg {
width: 100%;
color: #888; }
#notification_frame table tr td.n_msg a {
display: inline; }
#notification_frame table tr td.n_msg span {
display: block;
color: #999; }
#notification_frame #notification_message {
padding: 1em 10px;
font-size: 1.1em;
line-height: 1.5em; }
/* =layout_mode_regular_userpage
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- userpage
*/
#ap_user_view #showcase { margin-bottom: 0; }
#ap_user_view #showcase .image_div {
margin: 0 auto;
text-align: center; }
#ap_user_view #showcase h3 {
margin: 15px 0 -0.2em 0;
font-size: 1.8em;
font-weight: bold;
letter-spacing: 1px;
color: #AAA; }
#ap_user_view #showcase dl.showcase_info {
margin-top: 0;
margin-bottom: 4em;
border-top: 4px solid #DDD; }/*color of the border below the avatar box*/
#ap_user_view #showcase .post_box {
margin-bottom: 2em; }
#ap_user_view #showcase_header .post_box .body p {
margin-top: 0;
margin-bottom: 0px;
font-size: 1.2em; }
#ap_user_view #showcase_header .post_box .body p.name {
margin-bottom: 5px;
font-weight: bold;
font-size: 1.6em; }
#ap_user_view #comments { padding-top: 2em; }
/* =layout_mode_showcase
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- page that's on showcase mode (gallery, main page)
*/
body.showcase #content,
body.showcase #sidebar { margin-top: 530px; }
body.showcase .image_div { margin-left: 5px; }
/* =layout_mode_showcase_main_showcase
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- Pages with those huge image showcase
*/
#main_showcase {
position: absolute;
top: 100px; left: 50%; margin-left: -440px;
display: block;
height: 500px;
width: 860px;
padding: 20px 0 0 20px;
z-index: 1; }
#main_showcase .image_div {
float: left;
margin: 0;
height: auto;
min-height: 0; }
#main_showcase .image_div span {
display: block;
position: relative;
width: 576px;
font-size: 1.7em;
font-weight: bold;
letter-spacing: 1px;
line-height: 2em;
color: #DDDDDD; }
#main_showcase .intro_div { margin-left: 590px; }
#main_showcase .intro_div h2 {
margin-top: 0;
margin-bottom: 10px;
font-size: 13px; }
#main_showcase .intro_div p {
margin-left: 0;
margin-right: 0;
font-size: 11px;
text-align: justify; }
#main_showcase .tiny_showcase {
display: block;
position: absolute;
top: 0; left:0;
z-index: 9000; }
#main_showcase .tiny_showcase .image_div {
float: none;
display: block;
margin: 0; margin-bottom: 5px; }
/* =layout_mode_download
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Used on:
-- download page duh..
*/
body.download { background-image: none; }
body.download #stretch {
margin: 0;
padding: 0;
width: 100%; }
body.download #container {
background-image: none;
margin: 0; width: 100%; }
body.download #content, body.download #sidebar {
margin: 0;
padding: 0; }
body.download .single-col { width: auto; }
/*
------------------------------------------------------------------------------
=extra
------------------------------------------------------------------------------*/
#serverstats {
background: #EEE;
position: absolute;
top: 30px;
left: 15%;
width: 70%;
margin: 5px 0;
padding: 5px;
color: #AAA;
border:3px solid #BBB;
z-index:12000;
display:none;
}
So there you have it i hope it helps
@Xenohawk: Now you dont have to hurry with the simple one ^^
EDIT: 10th Feb 2006
New code with the Xeno's CSS corrections. Now you can use bigger images without complications in the code coz of our awesome developers ^^
NOW THE FULL STYLE CUSTOMIZATION INSTRUCTIONS!
Thanks for the post. I'm sure that will help a lot of people get started.
Thanks Mrchak, this will be really helpful for a lot of people and for me XD.
EDIT: Nice work on the background for the group to the one that did it :)
EDIT: Nice work on the background for the group to the one that did it :)
Yup thanks for sharing ^__^
Thank you so much! ^_^
3 years 8 months ago
OK i have changed the title of this thread to version 1.1 since there have been some changes for the code and i think i added instructions for the whole style but i am not sure @~1@
1 Page: [ 1 ]







