[How To] Modify prosilver's header

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Suggested Hosts
User avatar
Lumpy Burgertushie
Registered User
Posts: 67395
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: [How To] Modify prosilver's header

Post by Lumpy Burgertushie »

The Gatekeeper wrote:Thank you Robert.
That was the place to look, and I have managed that change successfully.

I appreciate that to most people using phpBB they will understand this terminology. That is why in my post I did specify "typical members of the public", ie people who hopefully will be visiting my site and do not know about such things. I suspect that this first page is the only place that "Board" is mentioned.
I posted another cry for help, because I was on a help page where the first thing it stated was "In phpBB3 there are no categories ....", and as there were innumerable references to categories, I found this very confusing. ( I cannot now find locate where I found that).

Anyway, thanks for your help. Much appreciated. I am getting there slowly.
yes, I agree that the statement about no categories is really confusing. I hope that in future versions they find a better way to explain that.

glad to help,

robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.3 Styles by PlanetStyles.net

If nobody is in the forest, does a tree really fall?

User avatar
tahoebuff
Registered User
Posts: 1429
Joined: Tue Jul 20, 2004 12:33 am
Location: Nevada
Name: Michael
Contact:

Re: [How To] Modify prosilver's header

Post by tahoebuff »

Sinom wrote:Hello richbouchard!

Please see - http://www.phpbb.com/community/viewtopi ... 5#p8675775

Regarding the 8th item on your menu. You can change the width of your menu links to a % of 100%, where as if you add another item the others would shrink.

@Peter

Go to \styles\prosilver\theme\images and create a new folder in that called social
Place your images inside that folder. As a test I used images from here.

Next, open colours.css and add at the bottom of the file:

Code: Select all

#social_bar {
	height: 20px;
	margin: 0 auto;
	position: relative;
	right: 10px;
	top: -53px;
}
#social_buttons {
	float: right;
}
Go to \styles\prosilver\template and open overall_header.html

Find:

Code: Select all

<div class="navbar">
Add on a new line before:

Code: Select all

<div id="social_bar">
				<div id="social_buttons">
					<a href="Link to your feeds"><img alt="RSS" src="{T_THEME_PATH}/images/social/social_rss.png"></a>
					<a href="http://www.facebook.com/"><img alt="Facebook" src="{T_THEME_PATH}/images/social/social_facebook.png"></a>
					<a href="http://www.twitter.com/"><img alt="Twitter" src="{T_THEME_PATH}/images/social/social_Twitter.png"></a>
				</div>
</div>
Don't forget to refresh your style in the ACP.

This should result with:

Image

Hugs :ugeek:
I got this working on my header...but, am tinkering with the style Artodia Black and want to know the ideal settings/image size to make it fit within this style. The .png image is currently dropping down on it's own line.

Thanks in advance :)
Tahoe

m82a1pa
Registered User
Posts: 31
Joined: Mon Aug 27, 2012 9:15 pm

Re: [How To] Modify prosilver's header

Post by m82a1pa »

Hi folks,

I'm late to the party. I'm in the process of setting up my first board. I've not had too many issues yet.

I'm using the prosilver GS-Zone Edition which does not inherit changes from prosilver. What I've been unable to do is change the top header color (where the board logo, board name & description, and search box is located) from charcoal to black.

I've been reading in this thread and I though by changing the colours.css file, I could do this:

.headerbar {
background-color: #12A3EB;
background-image: url("{T_THEME_PATH}/images/bg_header.gif");
color: #FFFFFF;

by changing background-color: #000000, but there is no change.

Obviously, I was incorrect.

Can anyone help?

Here's the board: http://m82a1pa.blogdns.org/phpbb/index.php

User avatar
Lumpy Burgertushie
Registered User
Posts: 67395
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: [How To] Modify prosilver's header

Post by Lumpy Burgertushie »

that is because it is an image , not a color.

remove this line:
background-image: url("{T_THEME_PATH}/images/bg_header.gif");
save the file and upload it back to the server.
refresh your style's theme after you make the changes.


robert
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.3 Styles by PlanetStyles.net

If nobody is in the forest, does a tree really fall?

m82a1pa
Registered User
Posts: 31
Joined: Mon Aug 27, 2012 9:15 pm

Re: [How To] Modify prosilver's header

Post by m82a1pa »

Thanks Robert - Quick reply. I should have asked this morning & saved a lot of tinkering.

I just recolored the gif and it works great.

User avatar
Asylum1
Registered User
Posts: 5
Joined: Mon Sep 03, 2012 6:47 pm

Re: [How To] Modify prosilver's header

Post by Asylum1 »

I need to center my header on my site.
I have done most of the mods on this topic and they are working,
but I cant seem to get this header centered for the life of me.
I tried changing logo to this but didnt work.
#logo {
width: auto;
padding: 0px;
}
Can I get some help please.
Here is a link to my site and the code.

Code: Select all

/* General Markup Styles
---------------------------------------- */

* {
	/* Reset browsers default margin, padding and font sizes */
	margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
	/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
	height: 101%;
}

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #FFFFFF;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
}

h1 {
	/* Forum name */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-right: 200px;
	color: #FFFFFF;
	margin-top: 15px;
	font-weight: bold;
	font-size: 2em;
}

h2 {
	/* Forum header titles */
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #3f3f3f;
	font-size: 2em;
	margin: 0.8em 0 0.2em 0;
}

h2.solo {
	margin-bottom: 1em;
}

h3 {
	/* Sub-headers (also used as post headers, but defined later) */
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 3px;
	padding-bottom: 2px;
	font-size: 1.05em;
	color: #989898;
	margin-top: 20px;
}

h4 {
	/* Forum and topic list titles */
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, Sans-serif;
	font-size: 1.3em;
}

p {
	line-height: 1.3em;
	font-size: 1.1em;
	margin-bottom: 1.5em;
}

img {
	border-width: 0;
}

hr {
	/* Also see tweaks.css */
	border: 0 none #FFFFFF;
	border-top: 1px solid #CCCCCC;
	height: 1px;
	margin: 5px 0;
	display: block;
	clear: both;
}

hr.dashed {
	border-top: 1px dashed #CCCCCC;
	margin: 10px 0;
}

hr.divider {
	display: none;
}

p.right {
	text-align: right;
}

/* Main blocks
---------------------------------------- */
#wrap {
	padding: 0 20px;
	min-width: 650px;
}

#simple-wrap {
	padding: 6px 10px;
}

#page-body {
	margin: 4px 0;
	clear: both;
}

#page-footer {
	clear: both;
}

#page-footer h3 {
	margin-top: 20px;
}

#logo {
	width: auto;
    padding: 0px;
}

a#logo:hover {
	text-decoration: none;
}

/* Search box
--------------------------------------------- */
#search-box {
  color: #FFFFFF;
  position: relative;
  display: block;
  text-align: right;
  white-space: nowrap; /* For Opera */
  line-height: 1em;

}

#search-box #keywords {
	width: 95px;
	background-color: #FFF;
}

#search-box input {
	border: 1px solid #b0b0b0;
}

/* .button1 style defined later, just a few tweaks for the search button version */
#search-box input.button1 {
	padding: 1px 5px;
}

#search-box li {
	text-align: right;
	margin-top: 4px;
}

#search-box img {
	vertical-align: middle;
	margin-right: 3px;
}

/* Site description and logo */




/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
	background: #ebebeb none no-repeat 0 0;
	color: #FFFFFF;
	margin-bottom: 4px;
	padding: 0 5px;
	height: 200px;
}

.navbar {
	background-color: #ebebeb;
	padding: 0 10px;
}

.forabg {
	background: #b1b1b1 none repeat-x 0 0;
	margin-bottom: 4px;
	padding: 0 5px;
	clear: both;
}

.forumbg {
	background: #ebebeb none repeat-x 0 0;
	margin-bottom: 4px;
	padding: 0 5px;
	clear: both;
}

.panel {
	margin-bottom: 4px;
	padding: 0 10px;
	background-color: #f3f3f3;
	color: #3f3f3f;
}

.post {
	padding: 0 10px;
	margin-bottom: 4px;
	background-repeat: no-repeat;
	background-position: 100% 0;
}

.post:target .content {
	color: #000000;
}

.post:target h3 a {
	color: #000000;
}

.bg1	{ background-color: #f7f7f7;}
.bg2	{ background-color: #f2f2f2; }
.bg3	{ background-color: #ebebeb; }

.rowbg {
	margin: 5px 5px 2px 5px;
}

.ucprowbg {
	background-color: #e2e2e2;
}

.fieldsbg {
	/*border: 1px #DBDEE2 solid;*/
	background-color: #eaeaea;
}

span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
	font-size: 1px;
	line-height: 1px;
	display: block;
	height: 5px;
	background-repeat: no-repeat;
}

span.corners-top {
	background-image: none;
	background-position: 0 0;
	margin: 0 -5px;
}

span.corners-top span {
	background-image: none;
	background-position: 100% 0;
}

span.corners-bottom {
	background-image: none;
	background-position: 0 100%;
	margin: 0 -5px;
	clear: both;
}

span.corners-bottom span {
	background-image: none;
	background-position: 100% 100%;
}

.headbg span.corners-bottom {
	margin-bottom: -1px;
}

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
	margin: 0 -10px;
}

.rules span.corners-top {
	margin: 0 -10px 5px -10px;
}

.rules span.corners-bottom {
	margin: 5px -10px 0 -10px;
}

/* Horizontal lists
----------------------------------------*/
ul.linklist {
	display: block;
	margin: 0;
}

ul.linklist li {
	display: block;
	list-style-type: none;
	float: left;
	width: auto;
	margin-right: 5px;
	font-size: 1.1em;
	line-height: 2.2em;
}

ul.linklist li.rightside, p.rightside {
	float: right;
	margin-right: 0;
	margin-left: 5px;
	text-align: right;
}

ul.navlinks {
	padding-bottom: 1px;
	margin-bottom: 1px;
	border-bottom: 1px solid #FFFFFF;
	font-weight: bold;
}

ul.leftside {
	float: left;
	margin-left: 0;
	margin-right: 5px;
	text-align: left;
}

ul.rightside {
	float: right;
	margin-left: 5px;
	margin-right: -5px;
	text-align: right;
}

/* Table styles
----------------------------------------*/
table.table1 {
	/* See tweaks.css */
}

#ucp-main table.table1 {
	padding: 2px;
}

table.table1 thead th {
	font-weight: normal;
	text-transform: uppercase;
	color: #FFFFFF;
	line-height: 1.3em;
	font-size: 1em;
	padding: 0 0 4px 3px;
}

table.table1 thead th span {
	padding-left: 7px;
}

table.table1 tbody tr {
	border: 1px solid #cfcfcf;
}

table.table1 tbody tr:hover, table.table1 tbody tr.hover {
	background-color: #f6f6f6;
	color: #000;
}

table.table1 td {
	color: #6a6a6a;
	font-size: 1.1em;
}

table.table1 tbody td {
	padding: 5px;
	border-top: 1px solid #FAFAFA;
}

table.table1 tbody th {
	padding: 5px;
	border-bottom: 1px solid #000000;
	text-align: left;
	color: #333333;
	background-color: #FFFFFF;
}

/* Specific column styles */
table.table1 .name		{ text-align: left; }
table.table1 .posts		{ text-align: center !important; width: 7%; }
table.table1 .joined	{ text-align: left; width: 15%; }
table.table1 .active	{ text-align: left; width: 15%; }
table.table1 .mark		{ text-align: center; width: 7%; }
table.table1 .info		{ text-align: left; width: 30%; }
table.table1 .info div	{ width: 100%; white-space: normal; overflow: hidden; }
table.table1 .autocol	{ line-height: 2em; white-space: nowrap; }
table.table1 thead .autocol { padding-left: 1em; }

table.table1 span.rank-img {
	float: right;
	width: auto;
}

table.info td {
	padding: 3px;
}

table.info tbody th {
	padding: 3px;
	text-align: right;
	vertical-align: top;
	color: #000000;
	font-weight: normal;
}

.forumbg table.table1 {
	margin: 0 -2px -1px -1px;
}

/* Misc layout styles
---------------------------------------- */
/* column[1-2] styles are containers for two column layouts 
   Also see tweaks.css */
.column1 {
	float: left;
	clear: left;
	width: 49%;
}

.column2 {
	float: right;
	clear: right;
	width: 49%;
}

/* General classes for placing floating blocks */
.left-box {
	float: left;
	width: auto;
	text-align: left;
}

.right-box {
	float: right;
	width: auto;
	text-align: right;
}

dl.details {
	/*font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;*/
	font-size: 1.1em;
}

dl.details dt {
	float: left;
	clear: left;
	width: 30%;
	text-align: right;
	color: #000000;
	display: block;
}

dl.details dd {
	margin-left: 0;
	padding-left: 5px;
	margin-bottom: 5px;
	color: #828282;
	float: left;
	width: 65%;
}

/* Pagination
---------------------------------------- */
.pagination {
	height: 1%; /* IE tweak (holly hack) */
	width: auto;
	text-align: right;
	margin-top: 5px;
	float: right;
}

.pagination span.page-sep {
	display: none;
}

li.pagination {
	margin-top: 0;
}

.pagination strong, .pagination b {
	font-weight: normal;
}

.pagination span strong {
	padding: 0 2px;
	margin: 0 2px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #bfbfbf;
	border: 1px solid #bfbfbf;
	font-size: 0.9em;
}

.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active {
	font-weight: normal;
	text-decoration: none;
	color: #747474;
	margin: 0 2px;
	padding: 0 2px;
	background-color: #eeeeee;
	border: 1px solid #bababa;
	font-size: 0.9em;
	line-height: 1.5em;
}

.pagination span a:hover {
	border-color: #d2d2d2;
	background-color: #d2d2d2;
	color: #FFF;
	text-decoration: none;
}

.pagination img {
	vertical-align: middle;
}

/* Pagination in viewforum for multipage topics */
.row .pagination {
	display: block;
	float: right;
	width: auto;
	margin-top: 0;
	padding: 1px 0 1px 15px;
	font-size: 0.9em;
	background: none 0 50% no-repeat;
}

.row .pagination span a, li.pagination span a {
	background-color: #FFFFFF;
}

.row .pagination span a:hover, li.pagination span a:hover {
	background-color: #d2d2d2;
}

/* Miscellaneous styles
---------------------------------------- */
#forum-permissions {
	float: right;
	width: auto;
	padding-left: 5px;
	margin-left: 5px;
	margin-top: 10px;
	text-align: right;
}

.copyright {
	padding: 5px;
	text-align: center;
	color: #555555;
}

.small {
	font-size: 0.9em !important;
}

.titlespace {
	margin-bottom: 15px;
}

.headerspace {
	margin-top: 20px;
}

.error {
	color: #bcbcbc;
	font-weight: bold;
	font-size: 1em;
}

.reported {
	background-color: #f7f7f7;
}

li.reported:hover {
	background-color: #ececec;
}

div.rules {
	background-color: #ececec;
	color: #bcbcbc;
	padding: 0 10px;
	margin: 10px 0;
	font-size: 1.1em;
}

div.rules ul, div.rules ol {
	margin-left: 20px;
}

p.rules {
	background-color: #ececec;
	background-image: none;
	padding: 5px;
}

p.rules img {
	vertical-align: middle;
	padding-top: 5px;
}

p.rules a {
	vertical-align: middle;
	clear: both;
}

#top {
	position: absolute;
	top: -20px;
}

.clear {
	display: block;
	clear: both;
	font-size: 1px;
	line-height: 1px;
	background: transparent;
}
Last edited by Asylum1 on Sat Dec 21, 2013 3:17 am, edited 2 times in total.

User avatar
pit-PL
Registered User
Posts: 3091
Joined: Sat Nov 21, 2009 12:24 pm

Re: [How To] Modify prosilver's header

Post by pit-PL »

Change

Code: Select all

.headerbar {
	background: #ebebeb none no-repeat 0 0;
to

Code: Select all

.headerbar {
	background: #ebebeb none no-repeat 50% 0;

User avatar
Asylum1
Registered User
Posts: 5
Joined: Mon Sep 03, 2012 6:47 pm

Re: [How To] Modify prosilver's header

Post by Asylum1 »

Thanks man that worked like a charm.

My next question is how do I get the white tabs off my corners?

Also do you know how to add a nav link that I can link back to my main website.
Last edited by Asylum1 on Sat Dec 21, 2013 3:18 am, edited 1 time in total.

User avatar
muggins
Registered User
Posts: 1183
Joined: Fri Feb 22, 2008 5:12 pm
Location: Texas
Name: Donovan
Contact:

Re: [How To] Modify prosilver's header

Post by muggins »

Code: Select all

<div id="wrap">
    <a id="top" name="top" accesskey="t"></a>
    <div id="page-header">
        <div class="headerbar">
            <div class="inner"><span class 
The white corners will be in your CSS files, probably colours.css. Look for a background: #fff element that tells a class how to display. Maybe 'wrap' or 'inner'?
Muggins

User avatar
pit-PL
Registered User
Posts: 3091
Joined: Sat Nov 21, 2009 12:24 pm

Re: [How To] Modify prosilver's header

Post by pit-PL »

In common.css find

Code: Select all

span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
	font-size: 1px;
	line-height: 1px;
	display: block;
	height: 5px;
	background-repeat: no-repeat;
}
after background-repeat: no-repeat;
add visibility: hidden;
In overall_header.html change

Code: Select all

<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>
to

Code: Select all

<li class="icon-home"><a href="http://www.gunsclan.com/">Home</a> <strong>&#8249;</strong> <a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

User avatar
muggins
Registered User
Posts: 1183
Joined: Fri Feb 22, 2008 5:12 pm
Location: Texas
Name: Donovan
Contact:

Re: [How To] Modify prosilver's header

Post by muggins »

pit-PL wrote:In common.css find

Code: Select all

span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
	font-size: 1px;
	line-height: 1px;
	display: block;
	height: 5px;
	background-repeat: no-repeat;
}
after background-repeat: no-repeat;
add visibility: hidden;
Arrgh! :D
Muggins

User avatar
Asylum1
Registered User
Posts: 5
Joined: Mon Sep 03, 2012 6:47 pm

Re: [How To] Modify prosilver's header

Post by Asylum1 »

pit-PL wrote:In common.css find

Code: Select all

span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {
	font-size: 1px;
	line-height: 1px;
	display: block;
	height: 5px;
	background-repeat: no-repeat;
}
after background-repeat: no-repeat;
add visibility: hidden;
In overall_header.html change

Code: Select all

<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>
to

Code: Select all

<li class="icon-home"><a href="http://www.gunsclan.com/">Home</a> <strong>&#8249;</strong> <a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>&#8249;</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

Thanks man that all worked like a champ.
They need a thanks button on here.
Thanks for your help too Muggins.

User avatar
Asylum1
Registered User
Posts: 5
Joined: Mon Sep 03, 2012 6:47 pm

Re: [How To] Modify prosilver's header

Post by Asylum1 »

You guys are on a roll so lets try one more.

How do you change the poster side id from the right side to the left side.

User avatar
Brf
Support Team Member
Support Team Member
Posts: 51986
Joined: Tue May 10, 2005 7:47 pm
Location: {postrow.POSTER_FROM}
Contact:

Re: [How To] Modify prosilver's header

Post by Brf »

Asylum1 wrote:How do you change the poster side id from the right side to the left side.
You have a poster in your prosilver header?

User avatar
Asylum1
Registered User
Posts: 5
Joined: Mon Sep 03, 2012 6:47 pm

Re: [How To] Modify prosilver's header

Post by Asylum1 »

Im talking about the user info on the right side when you post in the forums.

Where it shows your name and post count.

How do you move it to the left side?

Locked

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