proGrey white background

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Get Involved
Locked
Maurizio1230
Registered User
Posts: 46
Joined: Sun Oct 07, 2007 11:27 am

proGrey white background

Post by Maurizio1230 »

hi all,

See my forum http://hostinvent.com/forum/
I delete the headerbar of proGrey theme

Code: Select all

<div class="headerbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <div id="site-description">
            <a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
            <h1>{SITENAME}</h1>
         <font size=4><p>{SITE_DESCRIPTION}</p></font size>
            <p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
         </div>

      <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
         <div id="search-box">
            <form action="{U_SEARCH}" method="post" id="search">
            <fieldset>
               <input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
               <input class="button2" value="{L_SEARCH}" type="submit" /><br />
               <a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_HIDDEN_FIELDS}
            </fieldset>

            </form>
         </div>
      <!-- ENDIF -->

         <span class="corners-bottom"><span></span></span></div>
      </div>
Now I'd like to delete the grey and whit background like the blue prosilver.
How can I do?
User avatar
Mighty Gorgon
Registered User
Posts: 616
Joined: Thu May 23, 2002 2:56 pm
Location: Italy
Name: Luca Libralato
Contact:

Re: proGrey white background

Post by Mighty Gorgon »

Your site requires username and password to be accessed.
Maurizio1230
Registered User
Posts: 46
Joined: Sun Oct 07, 2007 11:27 am

Re: proGrey white background

Post by Maurizio1230 »

i am sorry, now you can access
Maurizio1230
Registered User
Posts: 46
Joined: Sun Oct 07, 2007 11:27 am

Re: proGrey white background

Post by Maurizio1230 »

I'd like to delete the grey background. What file have I to edit? How?

Thank you very much
User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: proGrey white background

Post by Raimon »

You need to edit also the images, the are not transparent.
Just do the next thing:

Download transparent border images ; http://forum.phpbbservice.nl/download/file.php?id=263 upload the images to /styles/styles/proGrey/theme/images/

replace /styles/proGrey/theme/borders.css the hole file with:

Code: Select all

/*  phpBB 3.0 Style Sheet
    --------------------------------------------------------------
	Style name:	        proSilver
	Based on style:		proSilver (this is the default phpBB 3 style)
	Original author:	        subBlue ( http://www.subBlue.com/ )
	Modified by:		Raimon  ( http://www.phpbbservice.nl )
	
	Copyright 2006 phpBB Group ( http://www.phpbb.com/ )
    --------------------------------------------------------------
*/

/*  	
--------------------------------------------------------------
html, body tag copy from colours.css inhere
-------------------------------------------------------------- */
html, body {
	color: #68696D;
	background-color: #A0A8AE;
/*    background-image: url("{T_THEME_PATH}/images/yourbg.gif");*/ /* CHANGE: path and name of your image */	
}

/*  	
--------------------------------------------------------------
#wrap tag copy from common.css inhere
-------------------------------------------------------------- */
#wrap {  
   padding: 0 20px;  
   min-width: 700px;  
   width: 900px;  
   margin: 0 auto;  
}  


/* additional proSilver Markup Styles outside rouded
----------------------------------------------------------- */
.top-left, .top-right, .bottom-left, .bottom-right { 
   height: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
   weidth: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
   font-size: 2px;    /* DNC: correction IE for height of the <div>'s */
   }
   
.top-left { 
   background-image: url("{T_THEME_PATH}/images/corners_top.gif"); background-repeat:no-repeat; /* CHANGE: path and name of your image */
   background-position: 0 -20px; /* CHANGE: replace second number by negative height of one of your corners */
   margin-left: 1px;  /* CHANGE: replace by the width of one of your corners */
   margin-top: 0px;  /* CHANGE: replace by the height of one of your corners */
   margin-right: 9px; /* CHANGE: replace by the width of one of your corners */
   }
.top-right { 
   background-image: url("{T_THEME_PATH}/images/corners_top.gif"); background-repeat:no-repeat; /* CHANGE: path and name of your image */
   background-position: 100% 0;    /* DNC: position right corner at right side, no vertical changes */
   margin-left: 0px;  /* CHANGE: replace by the width of one of your corners */
   margin-top: -9px;  /* CHANGE: replace by the height of one of your corners */
   margin-right: 1px; /* CHANGE: replace by the width of one of your corners */   
   }
.top-center { 
   background-image: url("{T_THEME_PATH}/images/bg_headers.gif"); /* CHANGE: path and name of your image */
   background-position: 0 0px; /* CHANGE: replace second number by negative height of one of your corners */
   height: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
   weidth: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
   font-size: 2px;    /* DNC: correction IE for height of the <div>'s */
   margin-left: 20px;  /* CHANGE: replace by the width of one of your corners */
   margin-top: -20px;  /* CHANGE: replace by the height of one of your corners */
   margin-right: 20px; /* CHANGE: replace by the width of one of your corners */ 
   margin-bottom: -20px; /* CHANGE: replace by the width of one of your corners */ 
   }
   
.bottom-left  { 
   background-image: url("{T_THEME_PATH}/images/corners_bottom.gif"); background-repeat:no-repeat; /* CHANGE: path and name of your image */
   background-position: 0 0px; /* CHANGE: replace second number by negative height of one of your corners */
   margin-right: 0px; /* CHANGE: replace by the width of one of your corners */
   margin-left: 1px;  /* CHANGE: replace by the width of one of your corners */
   margin-top: 0px;  /* CHANGE: replace by the height of one of your corners */
   }
.bottom-right { 
   background-image: url("{T_THEME_PATH}/images/corners_bottom.gif"); background-repeat:no-repeat; /* CHANGE: path and name of your image */
   background-position: 100% -20px; /* CHANGE: replace second number by negative height of one of your corners */
   margin-right: 1px; /* CHANGE: replace by the width of one of your corners */
   margin-left: 0px;  /* CHANGE: replace by the width of one of your corners */
   margin-top: -20px;  /* CHANGE: replace by the height of one of your corners */
   }
.bottom-center { 
   background-image: url("{T_THEME_PATH}/images/bg_footers.gif"); /* CHANGE: path and name of your image */
   background-position: 0 0px; /* CHANGE: replace second number by negative height of one of your corners */
   height: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
   weidth: 20px;       /* CHANGE: replace by the height of one of your corners (= 1/2 height of the image) */
   font-size: 2px;    /* DNC: correction IE for height of the <div>'s */
   margin-left: 20px;  /* CHANGE: replace by the width of one of your corners */
   margin-top: -20px;  /* CHANGE: replace by the height of one of your corners */
   margin-right: 20px; /* CHANGE: replace by the width of one of your corners */ 
   margin-bottom: -20px; /* CHANGE: replace by the width of one of your corners */ 
   }

.inside {
   border-left: 0px solid #000000; /* YCC: color & properties of the left-borderline */
   border-right: 0px solid #000000;/* YCC: color & properties of the right-borderline */
   /* background: #FFFFFF;*/            /* YCC: background-color of the inside */
   color: #000000;                 /* YCC: default text-color of the inside */
   padding-left: 0px;              /* YCC: all texts at some distance of the left border */
   padding-right: 0px;             /* YCC: all texts at some distance of the right border */
   background-image: url("{T_THEME_PATH}/images/bg_body.gif"); /* CHANGE: path and name of your image */
   }
   
.notopgap    { margin-top: 0; }    /* DNC: to avoid splitting of the box */
.nobottomgap { margin-bottom: 0; } /* DNC: to avoid splitting of the box */

.outside {
   margin: 0 auto;
   width : 950px;
   }
to change the background color:

search on the above code:

Code: Select all

html, body {
	color: #68696D;
	background-color: #A0A8AE;
/*    background-image: url("{T_THEME_PATH}/images/yourbg.gif");*/ /* CHANGE: path and name of your image */	
}
inline find:

Code: Select all

background-color: #A0A8AE;
and change the color.
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!
Maurizio1230
Registered User
Posts: 46
Joined: Sun Oct 07, 2007 11:27 am

Re: proGrey white background

Post by Maurizio1230 »

Is it possible to not use any borders?

thank you very much
User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: proGrey white background

Post by Raimon »

Maurizio1230 wrote:Is it possible to not use any borders?

thank you very much
Do you mean you want to deleted al the borders, or do you mean deleted the top and bottom borders , so you have only a left en right border ?
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!
Maurizio1230
Registered User
Posts: 46
Joined: Sun Oct 07, 2007 11:27 am

Re: proGrey white background

Post by Maurizio1230 »

I mean all the borders.

Thanks
User avatar
Raimon
Former Team Member
Posts: 12088
Joined: Tue May 30, 2006 5:31 pm
Location: Netherlands
Name: Raimon Meuldijk
Contact:

Re: proGrey white background

Post by Raimon »

Open overall_header.html

search:

Code: Select all

<div class="outside">
   <div class="top-left"></div><div class="top-center"></div><div class="top-right"></div>
      <div class="inside">
         <div class="notopgap">
deleted it.

open overall_footer.html

search:

Code: Select all

</div>
<div class="nobottomgap"></div>
      </div>
   <div class="bottom-left"></div><div class="bottom-center"></div><div class="bottom-right">
</div>
deleted it.

after that refresh your template ( acp -> styles -> template -> refresh )

the best result you get if you change the background to white:

open borders.css

search:

Code: Select all

html, body {
   color: #68696D;
   background-color: #A0A8AE;
/*    background-image: url("{T_THEME_PATH}/images/yourbg.gif");*/ /* CHANGE: path and name of your image */   
}
replace with:

Code: Select all

html, body {
   color: #68696D;
   background-color: #FFFFFF;
/*    background-image: url("{T_THEME_PATH}/images/yourbg.gif");*/ /* CHANGE: path and name of your image */   
}
after that refresh your theme ( acp -> styles -> themes -> refresh )
Need phpBB installation, extenstions, Styles or integrate phpBB with you website?
Contact me for fair prices and good service!
Locked

Return to “[3.0.x] Styles Support & Discussion”