 85240 |
 35212 |
|
|
||
|
|
|||||||
| Welcome to the Exploding Garrmondo Weiner Interactive Swiss Army Penis. |
|
GFF is a community of gaming and music enthusiasts. We have a team of dedicated moderators, constant member-organized activities, and plenty of custom features, including our unique journal system. If this is your first visit, be sure to check out the FAQ or our GFWiki. You will have to register before you can post. Membership is completely free (and gets rid of the pesky advertisement unit underneath this message).
|
 |
|
|
Thread Tools |
 Member 39 Level 34.06 Mar 2006 
|
CSS help needed again (mainly)
I want both my forums and image gallery to merge with my site. However, it's not an easy task.
Site: http://www.jessicachobot.net/ Forums: http://www.jessicachobot.net/forums/ Gallery: http://www.jessicachobot.net/gallery/ What I want is for people to click on 'Forums' and don't notice they go to a different part. They should see the menu and the forums. Right now the forums are mostly ready. All is needed is the menu at top and the footer at the end. The IG is a different story. Creating styles is a nightmare, just check this out (while I was trying stuff):  Who can help me out here? Summary: * Forums need the menu + footer * IG needs a complete new style + menu & footer Sources: Forums CSS: Code:
/****************************************************************/
/* 1. IMPORTED STYLESHEETS */
/****************************************************************/
/* Import the basic setup styles */
@import url(imports/base.css);
/* Import the colour scheme */
@import url(imports/Mercury_cs.css);
/****************************************************************/
/* 2. TEXT SETTINGS */
/****************************************************************/
/* 2.1 This sets the default Font Group */
.pun, .pun INPUT, .pun SELECT, .pun TEXTAREA, .pun OPTGROUP {
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.pun {FONT-SIZE: 11px; LINE-HEIGHT: normal}
/* IEWin Font Size only - to allow IEWin to zoom. Do not remove comments \*/
* HTML .pun {FONT-SIZE: 68.75%}
/* End IE Win Font Size */
/* Set font size for tables because IE requires it */
.pun TABLE, .pun INPUT, .pun SELECT, .pun OPTGROUP, .pun TEXTAREA, DIV.postmsg P.postedit {FONT-SIZE: 1em}
/* 2.2 Set the font-size for preformatted text i.e in code boxes */
.pun PRE {FONT-FAMILY: monaco, "Bitstream Vera Sans Mono", "Courier New", courier, monospace}
/* 2.3 Font size for headers */
.pun H2, .pun H4 {FONT-SIZE: 1em}
.pun H3 {FONT-SIZE: 1.1em}
#brdtitle H1 {FONT-SIZE: 1.4em}
/* 2.4 Larger text for particular items */
DIV.postmsg P {LINE-HEIGHT: 1.4}
DIV.postleft DT {FONT-SIZE: 1.1em}
.pun PRE {FONT-SIZE: 1.2em}
/* 2.5 Bold text */
DIV.postleft DT, DIV.postmsg H4, TD.tcl H3, DIV.forminfo H3, P.postlink, DIV.linkst LI,
DIV.linksb LI, DIV.postlinksb LI, .blockmenu LI, #brdtitle H1, .pun SPAN.warntext, .pun P.warntext {FONT-WEIGHT: bold}
/****************************************************************/
/* 3. LINKS */
/****************************************************************/
/* 3.1 Remove underlining for main menu, post header links, post links and vertical menus */
#brdmenu A:link, #brdmenu A:visited, .blockpost DT A:link, .blockpost DT A:visited, .blockpost H2 A:link,
.blockpost H2 A:visited, .postlink A:link, .postlink A:visited, .postfootright A:link, .postfootright A:visited,
.blockmenu A:link, .blockmenu A:visited {
TEXT-DECORATION: none
}
/* 3.2 Underline on hover for links in headers and main menu */
#brdmenu A:hover, .blockpost H2 A:hover {TEXT-DECORATION: underline}
/****************************************************************/
/* 4. BORDER WIDTH AND STYLE */
/****************************************************************/
/* 4.1 By default borders are 1px solid */
DIV.box, .pun TD, .pun TH, .pun BLOCKQUOTE, DIV.codebox, DIV.forminfo, DIV.blockpost LABEL {
BORDER-STYLE: solid;
BORDER-WIDTH: 1px
}
/* 4.2 Special settings for the board header. */
#brdheader DIV.box {BORDER-TOP-WIDTH: 4px}
/* 4.3 Borders for table cells */
.pun TD, .pun TH {
BORDER-BOTTOM: none;
BORDER-RIGHT: none
}
.pun .tcl {BORDER-LEFT: none}
/* 4.4 Special setting for fieldsets to preserve IE defaults */
DIV>FIELDSET {
BORDER-STYLE: solid;
BORDER-WIDTH: 1px
}
/****************************************************************/
/* 5. VERTICAL AND PAGE SPACING */
/****************************************************************/
/* 5.1 Page margins */
HTML, BODY {MARGIN: 0; PADDING: 0}
#punwrap {width: 764px; margin: 12px auto}
/* 5.2 Creates vertical space between main board elements (Margins) */
DIV.blocktable, DIV.block, DIV.blockform, DIV.block2col, #postreview {MARGIN-BOTTOM: 12px}
#punindex DIV.blocktable, DIV.blockpost {MARGIN-BOTTOM: 6px}
DIV.block2col DIV.blockform, DIV.block2col DIV.block {MARGIN-BOTTOM: 0px}
/* 5.3 Remove space above breadcrumbs, postlinks and pagelinks with a negative top margin */
DIV.linkst, DIV.linksb {MARGIN-TOP: -12px}
DIV.postlinksb {MARGIN-TOP: -6px}
/* 5.4 Put a 12px gap above the board information box in index because the category tables only
have a 6px space beneath them */
#brdstats {MARGIN-TOP: 12px}
/****************************************************************/
/* 6. SPACING AROUND CONTENT */
/****************************************************************/
/* 6.1 Default padding for main items */
DIV.block DIV.inbox, DIV.blockmenu DIV.inbox {PADDING: 3px 6px}
.pun P, .pun UL, .pun DL, DIV.blockmenu LI, .pun LABEL, #announce DIV.inbox DIV {PADDING: 3px 0}
.pun H2 {PADDING: 4px 6px}
/* 6.2 Special spacing for various elements */
.pun H1 {PADDING: 3px 0px 0px 0}
#brdtitle P {PADDING-TOP: 0px}
DIV.linkst {PADDING: 8px 6px 3px 6px}
DIV.linksb, DIV.postlinksb {PADDING: 3px 6px 8px 6px}
#brdwelcome, #brdfooter DL A, DIV.blockmenu LI, DIV.rbox INPUT {LINE-HEIGHT: 1.4em}
#viewprofile DT, #viewprofile DD {PADDING: 0 3px; LINE-HEIGHT: 2em}
/* 6.4 Create some horizontal spacing for various elements */
#brdmenu LI, DIV.rbox INPUT, DIV.blockform P INPUT {MARGIN-RIGHT: 12px}
/****************************************************************/
/* 7. SPACING FOR TABLES */
/****************************************************************/
.pun TH, .pun TD {PADDING: 4px 6px}
.pun TD P {PADDING: 5px 0 0 0}
/****************************************************************/
/* 8. SPACING FOR POSTS */
/****************************************************************/
/* 8.1 Padding around left and right columns in viewtopic */
DIV.postleft DL, DIV.postright {PADDING: 6px}
/* 8.2 Extra spacing for poster contact details and avatar */
DD.usercontacts, DD.postavatar {MARGIN-TOP: 5px}
DD.postavatar {MARGIN-BOTTOM: 5px}
/* 8.3 Extra top spacing for signatures and edited by */
DIV.postsignature, DIV.postmsg P.postedit {PADDING-TOP: 15px}
/* 8.4 Spacing for code and quote boxes */
DIV.postmsg H4 {MARGIN-BOTTOM: 10px}
.pun BLOCKQUOTE, DIV.codebox {MARGIN: 5px 15px 15px 15px; PADDING: 8px}
/* 8.5 Padding for the action links and online indicator in viewtopic */
DIV.postfootleft P, DIV.postfootright UL, DIV.postfootright DIV {PADDING: 10px 6px 5px 6px}
/* 8.6 This is the input on moderators multi-delete view */
DIV.blockpost INPUT, DIV.blockpost LABEL {
PADDING: 3px;
DISPLAY: inline
}
P.multidelete {
PADDING-TOP: 15px;
PADDING-BOTTOM: 5px
}
/* 8.7 Make sure paragraphs in posts don't get any padding */
DIV.postmsg P {PADDING: 0}
/****************************************************************/
/* 9. SPECIAL SPACING FOR FORMS */
/****************************************************************/
/* 9.1 Padding around fieldsets */
DIV.blockform FORM, DIV.fakeform {PADDING: 20px 20px 15px 20px}
DIV.inform {PADDING-BOTTOM: 12px}
/* 9.2 Padding inside fieldsets */
.pun FIELDSET {PADDING: 0px 12px 0px 12px}
DIV.infldset {PADDING: 9px 0px 12px 0}
.pun LEGEND {PADDING: 0px 6px}
/* 9.3 The information box at the top of the registration form and elsewhere */
DIV.forminfo {
MARGIN-BOTTOM: 12px;
PADDING: 9px 10px
}
/* 9.4 BBCode help links in post forms */
UL.bblinks LI {PADDING-RIGHT: 20px}
UL.bblinks {PADDING-BOTTOM: 10px; PADDING-LEFT: 4px}
/* 9.5 Horizontal positioning for the submit button on forms */
DIV.blockform P INPUT {MARGIN-LEFT: 12px}
/****************************************************************/
/* 10. POST STATUS INDICATORS */
/****************************************************************/
/* 10.1 These are the post status indicators which appear at the left of some tables.
.inew = new posts, .iredirect = redirect forums, .iclosed = closed topics and
.isticky = sticky topics. By default only .inew is different from the default.*/
DIV.icon {
FLOAT: left;
MARGIN-TOP: 0.1em;
MARGIN-LEFT: 0.2em;
DISPLAY: block;
BORDER-WIDTH: 0.6em 0.6em 0.6em 0.6em;
BORDER-STYLE: solid
}
DIV.searchposts DIV.icon {MARGIN-LEFT: 0}
/* 10.2 Class .tclcon is a div inside the first column of tables with post indicators. The
margin creates space for the post status indicator */
TD DIV.tclcon {MARGIN-LEFT: 2.3em}
.rowcontainer { /* Used to keep the divs in a row. you can use this for any size of divs */
float: left;
margin-bottom: 5px;
width: 764px;
overflow: hidden;
background: #333;
}
.fullcolumn { float: left; width: 97%;} /* Full width column for a one column site */
.somespace { float: left; width: 2%; }
Code:
/*************************
Coppermine Photo Gallery
************************
Copyright (c) 2003-2006 Coppermine Dev Team
v1.1 originally written by Gregory DEMAR
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
********************************************
Coppermine version: 1.4.8
$Source$
$Revision: 3116 $
$Author: gaugau $
$Date: 2006-06-08 00:11:54 +0200 (Do, 08 Jun 2006) $
**********************************************/
/* Colors used: */
/* --------------------------------------------*/
/* #000000 = RBG 0, 0, 0 = (black) */
/* #66707C = RBG 102,112,124 = (dark grey) */
/* #5F5F5F = RBG 95, 95, 95 = (dark grey) */
/* #BDBEBD = RBG 189,190,189 = (light grey) */
/* #A3AAB4 = RBG 163,170,180 = (light grey) */
/* #C2C9D3 = RBG 194,201,211 = (light grey) */
/* #DEDEDE = RBG 222,222,222 = (dark white) */
/* #EFEFEF = RBG 239,239,239 = (dark white) */
/* #FFFFFF = RBG 255,255,255 = (white) */
/* #758698 = RBG 117,134,152 = (light blue) */
/* #005D8C = RBG 0, 93,140 = (medium blue) */
/* #0033CC = RBG 0, 51,204 = (medium blue) */
/* if you don't like a color, just do a search */
/* and replace on the hex color... */
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background: #758698 ;
color: Black;
margin: 0px;
}
table {
font-size: 12px;
}
h1{
font-size: 32px;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #FFFFFF;
margin: 2px;
font-style: italic;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
margin: 0px;
color: #FFFFFF;
font-style: italic;
}
h3 {
font-weight: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 2px;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 2px 0px;
}
ul {
margin-left: 5px;
padding: 0px;
}
li {
margin-left: 10px;
margin-top: 4px;
margin-bottom: 4px;
padding: 0px;
list-style-position: outside;
list-style-type: disc;
}
.textinput {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
border: 1px solid #A3AAB4;
padding-right: 3px;
padding-left: 3px;
background-color: #DEDEDE;
}
.listbox {
font-family: Verdana, Arial, Arial, Helvetica, sans-serif;
background-color: #DEDEDE;
font-size: 100%;
border: 1px solid #A3AAB4;
vertical-align: middle;
}
.button {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
border: 1px solid #005D8C;
background-image: url(images/button_bg.gif);
background-position: bottom;
}
.comment_button {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
border: 1px solid #005D8C;
background-image: url(images/button_bg.gif);
background-position: bottom;
padding-left: 3px;
padding-right: 3px;
}
.radio {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
vertical-align: middle;
}
.checkbox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
vertical-align: middle;
}
a {
color: #0033CC;
text-decoration: none;
}
a:hover {
color: #0033CC;
text-decoration: underline;
}
.bblink a {
color: #0033CC;
text-decoration: none;
}
.bblink a:hover {
color: #0033CC;
text-decoration: underline;
}
.maintable {
border: 1px solid #DEDEDE;
/* background-color: #BDBEBD; */
background-color:#C2C9D3;
margin-top: 1px;
margin-bottom: 1px;
}
.tableh1 {
background: #66707C ;
color: #FFFFFF;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
.tableh1_compact {
background: #66707C ;
color: #FFFFFF;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
.tableh2 {
background: #A3AAB4 ;
color: #000000;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
.tableh2_compact {
background: #A3AAB4 ;
color: #000000;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
.tableb {
background: #C2C9D3 ;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
.tableb_compact {
background: #C2C9D3 ;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
}
.tablef {
background: #A3AAB4;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.catrow_noalb {
background: #A3AAB4 ;
color: #000000;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
.catrow {
background: #C2C9D3 ;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
.album_stat {
font-size: 85%;
margin: 5px 0px;
}
.thumb_filename {
font-size: 80%;
display: block;
}
.thumb_title {
font-weight: bold;
font-size: 80%;
padding: 2px;
display: block;
}
.thumb_caption {
font-size: 80%;
padding: 1px;
display: block;
}
.thumb_caption a {
text-decoration: underline;
color: #000000;
}
.thumb_num_comments {
font-weight: normal;
font-size: 80%;
padding: 2px;
font-style: italic;
display: block;
}
.user_thumb_infobox {
margin-top: 1px;
margin-bottom: 1px;
}
.user_thumb_infobox th {
font-weight: bold;
font-size: 100%;
margin-top: 1px;
margin-bottom: 1px;
text-align: center;
}
.user_thumb_infobox td {
font-size: 85%;
margin-top: 1px;
margin-bottom: 1px;
text-align: center;
}
.user_thumb_infobox a {
text-decoration: none;
color: #000000;
}
.user_thumb_infobox a:hover {
color: #000000;
text-decoration: underline;
}
.sortorder_cell {
background: #66707C ;
color: #FFFFFF;
padding: 0px;
margin: 0px;
}
.sortorder_options {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #66707C ;
color: #FFFFFF;
padding: 0px;
margin: 0px;
font-weight: normal;
font-size: 80%;
white-space: nowrap;
}
.navmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 100%;
font-weight: bold;
background: #66707C ;
border-style: none;
}
.navmenu img {
margin-top: 1px;
margin-right: 5px;
margin-bottom: 1px;
margin-left: 5px;
}
.navmenu a {
position: relative;
display: block;
padding-top: 2px;
padding-right: 5px;
padding-bottom: 2px;
padding-left: 5px;
text-decoration: none;
color: #FFFFFF;
}
.navmenu a:hover {
background: #C2C9D3 ;
text-decoration: none;
color: #000000;
}
.admin_menu_thumb {
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
border: 1px solid #005D8C;
background-image: url(images/button_bg.gif);
background-position: bottom;
color: #000000;
font-weight: bold;
margin-top: 0px;
margin-bottom: 0px;
width: 85px;
}
.admin_menu_thumb a {
color: #000000;
text-decoration: none;
display: block;
position: relative;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 10px;
padding-right: 10px;
}
.admin_menu_thumb a:hover {
color: #000000;
text-decoration: underline;
}
.admin_menu {
font-family: Arial, Helvetica, sans-serif;
font-size: 85%;
border: 1px solid #005D8C;
background-image: url(images/button_bg.gif);
background-position: bottom;
background-repeat: repeat-x;
background-color: #FFFFFF;
color: #000000;
margin-top: 0px;
margin-bottom: 0px;
text-align: center;
}
.admin_menu a {
color: #000000;
text-decoration: none;
display: block;
position: relative;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 2px;
padding-right: 2px;
}
.admin_menu a:hover {
color: #000000;
text-decoration: underline;
}
td #admin_menu_anim {
background-image: url(images/button_bg_anim.gif);
}
.comment_date{
color: #5F5F5F;
font-size: 90%;
vertical-align: middle;
}
.image {
border-style: solid;
border-width:1px;
border-color: #000000;
margin: 2px;
}
.imageborder {
border: 1px solid #000000;
background-color: #FFFFFF;
margin-top: 30px;
margin-bottom: 30px;
}
.display_media {
background: #C2C9D3 ;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
.thumbnails {
background: #C2C9D3 ;
padding: 5px;
}
.footer {
font-size: 9px;
color: #292e34;
}
.footer a {
text-decoration: none;
color: #758698;
}
.footer a:hover {
color: black;
text-decoration: underline;
}
.statlink {
color: #FFFFFF;
}
.statlink a {
text-decoration: none;
color: #FFFFFF;
}
.statlink a:hover {
color: #FFFFFF;
text-decoration: underline;
}
.alblink a {
text-decoration: underline;
color: #000000;
}
.alblink a:hover {
color: #000000;
text-decoration: underline;
}
.catlink {
display: block;
margin-bottom: 2px;
}
.catlink a {
text-decoration: underline;
color: #000000;
}
.catlink a:hover {
color: #000000;
text-decoration: underline;
}
.topmenu {
font-size: 100%;
}
.topmenu a {
color: #FFFFFF;
text-decoration: none;
}
.topmenu a:hover {
color: #FFFFFF;
text-decoration: underline;
}
.topmenu td {
white-space: nowrap;
font-weight: bold;
}
.img_caption_table {
border: none;
background-color: #FFFFFF;
width: 100%;
margin: 0px;
}
.img_caption_table th {
background: #A3AAB4 ;
font-size: 100%;
color: #000000;
padding-top: 4px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
border-top: 1px solid #FFFFFF;
}
.img_caption_table td {
background: #C2C9D3 ;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 10px;
border-top: 1px solid #FFFFFF;
white-space: normal;
}
.debug_text {
border: #BDBEBD;
background-color: #EFEFEF;
width: 100%;
margin: 0px;
}
.clickable_option {
cursor: default;
}
.listbox_lang {
color: #000000;
background-color: #758698;
border: 1px solid #758698;
font-size: 80%;
font-family: Arial, Helvetica, sans-serif;
vertical-align: middle;
}
#vanity a {
display:block;
width:57px;
height:20px;
margin: 3px 20px;
}
#vanity img {border:0}
#v_php {float:left;background-image:url(../../images/powered-php.gif);}
#v_php:hover {background-image:url(../../images/h_powered-php.gif);}
#v_mysql {float:left;background-image:url(../../images/powered-mysql.gif);}
#v_mysql:hover {background-image:url(../../images/h_powered-mysql.gif);}
#v_xhtml {float:right;background-image:url(../../images/valid-xhtml10.gif);}
#v_xhtml:hover {background-image:url(../../images/h_valid-xhtml10.gif);}
#v_css {float:right;background-image:url(../../images/valid-css.gif);}
#v_css:hover{background-image:url(../../images/h_valid-css.gif);}
Jam it back in, in the dark. 
Last edited by Grawl; Aug 22, 2006 at 08:23 PM.
|
Member 39 Level 34.06 Mar 2006
|
Bump.
There's nowhere I can't reach. |
Member 66 Level 29.37 Mar 2006
|
I'm sorry but you will need to adjust these colors manually so they match with the forum style.
This thing is sticky, and I don't like it. I don't appreciate it. |
Grawl 
Rock