[How To] Modify prosilver's header

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Suggested Hosts
osopolarbizco
Registered User
Posts: 17
Joined: Sun Apr 13, 2014 10:14 pm

Re: [How To] Modify prosilver's header

Post by osopolarbizco »

seems I needed to go into the imageset.cfg and edit the line

img_site_logo = logo.png*175*500

replacing it with my files and sizes, didnt see that mentioned in the opening post, which I can see its quite old, but still perhaps would be a good idea to add those lines for complete newbies like myself

I still need to center the banner though..... :D if possible with the titles "Foros de Medicos Lideres Foros de Cirugia Plastica y Medicina" to the left of the banner
User avatar
judgedredd
Registered User
Posts: 46
Joined: Mon Mar 10, 2014 4:58 am

Re: [How To] Modify prosilver's header

Post by judgedredd »

Have you refreshed your installation? I had the same problem when altering code. If you have followed all the steps you need to refresh the installation files. That is the missing step (for some reason - as it IS a step).

If you have not refreshed your installation (refreshing your page is not the same and will not work) login to your Administration Panel (bottom of the page)-->Styles --> (on left hand side) Style Components --> Click on each of the links - Templates, Themes, Imagesets and on the right click on Refresh for each of these.
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 »

Just an addendum to the above post: Once you've refreshed all, purge the board cache and then do a hard refresh of your browser cache with a Ctrl-F5.
Muggins
User avatar
judgedredd
Registered User
Posts: 46
Joined: Mon Mar 10, 2014 4:58 am

Re: [How To] Modify prosilver's header

Post by judgedredd »

As to that wording beside the banner I did something similar by replacing the search box code with my wording and changing the css code % amount from 70% to 30%, I think. You can see it here: http://www.matrixfiles.com/hgnb/
osopolarbizco
Registered User
Posts: 17
Joined: Sun Apr 13, 2014 10:14 pm

Re: [How To] Modify prosilver's header

Post by osopolarbizco »

thanks guys, it solved after editing the imgset.cfg

but I still need to center the banner, no idea how, help?
User avatar
judgedredd
Registered User
Posts: 46
Joined: Mon Mar 10, 2014 4:58 am

Re: [How To] Modify prosilver's header

Post by judgedredd »

Hi,

In colors.css look for these lines:

Code: Select all

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
This is what I have to center my header image:

Code: Select all

.headerbar {
	background-color: #000000;
	background-image: url("{T_THEME_PATH}/images/Matrixfiles_header.gif");
	background-repeat: no-repeat;
	background-position: center;
	color: #FFFFFF;
Play around with the variables and see what changes (though you would have to refresh your installation every time you change something). Also try and use common sense. Look at the various parts of the code and see what it does.

Look at my site to see the effects of these lines: http://www.matrixfiles.com/hgnb/
lappert
Registered User
Posts: 108
Joined: Sat Jun 17, 2006 3:45 pm

Re: [How To] Modify prosilver's header

Post by lappert »

I hope this is the right place to post this question. I'm in the process of modifying my header. I'm using the 'SE Square Left' theme, but it appears to be a modification of Prosilver, and apparently relies on many of Prosilver's files.

I want to include a bunch of elements in the headerbar, including a drop-down menu, various links and an advertising banner. Yes, it sounds like a lot, but I'm trying to somewhat replicate the theme we modded for phpBB2 and the result worked well.

First, I removed the site logo. That worked fine.

Then I added an advertising banner after the search box. This at first was a problem as it overlapped the bottom of the headerbar area, so I needed to add depth to the headerbar. After a lot of fiddling, I was able to change the line "height: 90px" to "height: 150px" in the colours.css file, but this was in the SE Square Left theme, not Prosilver (and from the top of this thread, they use another file to adjust the height, I think it's Prosilver's common.css). Is there a good reason to change it on one theme rather than the other?

And after refreshing the theme, I was able to fit the banner in the new 150px deep headerbar.

But I need more :)

Here's the problem. The Site Name and Search Box show in the (vertical) middle of the headerbar area, and each as about 20 pixels of blank space above and below them. It's like either the Site Name/Search have padding around them, or the headerbar has inner padding. In any case, I would like to remove most of that blank space and tighten up the vertical area. But I can't seem to find where that padding is generated in order to control it.

Thanks for any help on this.
User avatar
pit-PL
Registered User
Posts: 3212
Joined: Sat Nov 21, 2009 12:24 pm

Re: [How To] Modify prosilver's header

Post by pit-PL »

Remove the top margin from h1 and #search-box.
User avatar
judgedredd
Registered User
Posts: 46
Joined: Mon Mar 10, 2014 4:58 am

Re: [How To] Modify prosilver's header

Post by judgedredd »

Correct me if I am wrong but the top margin would be the first item in a 4 item set.

i.e.

Code: Select all

padding: 10px 20px 15px 25px;
The 10px, which is the first item above, is the top margin. These figures are for the margins around the 4 sides of an element and goes in this order: top, right, bottom, left.

When you have this:

Code: Select all

padding: 0px;
Then all 4 sides have zero padding (any number given here will likewise mean that all four sides will have that much padding attributed to the element).
Last edited by judgedredd on Thu May 01, 2014 11:50 pm, edited 1 time in total.
lappert
Registered User
Posts: 108
Joined: Sat Jun 17, 2006 3:45 pm

Re: [How To] Modify prosilver's header

Post by lappert »

Thanks to both who replied. I was able to identify and remove the extra padding in the h1 and search-box styles.
sherita
Registered User
Posts: 17
Joined: Mon May 19, 2014 5:02 am

Re: [How To] Modify prosilver's header

Post by sherita »

I sure hope someone here can help me, I'm about to pull my hair out. First off, new user, so feel free to speak as if talking to a child. I've searched this forum and tried the suggestions I've found, but for some reason I cannot get my header image to show up on my forum, and I cannot get rid of the search box without crashing the forum and getting an error. I have, somehow, managed to enlarge the header area (in blue) to the size of my header image, but as far as making the image actually appear...not happening. At this point, I'm pretty sure I've made a mess of things.

Can someone please help? And like I said, feel free to speak as if talking to an idiot, because apparently I am one.
User avatar
tbackoff
Former Team Member
Posts: 7068
Joined: Thu Jun 04, 2009 1:41 am
Location: cheerleading practice
Name: Tabitha Backoff

Re: [How To] Modify prosilver's header

Post by tbackoff »

Don't be so hard on yourself - we were all new once. Are you sure you have refreshed the Templates, Themes, and Imagesets under the STYLES tab for your style after making the edits?
refresh.png
refresh.png (47.47 KiB) Viewed 5805 times
Flying is the second best thrill to cheerleaders; being caught is the first.
sherita
Registered User
Posts: 17
Joined: Mon May 19, 2014 5:02 am

Re: [How To] Modify prosilver's header

Post by sherita »

Thank you. I was (and am) just frustrated with myself. I think I am making it harder than it has to be.

I managed to fix all of my issues but one. I'm trying to center the header image, but when I change the code to what is specified in the first post of this thread, it does center, but it also scoots down and part of the image is covered up/not visible. Any suggestions? I'll be happy to post up code, or provide a link to the forum.

Edit: yes, I am refreshing themes and templates after every change.
User avatar
tbackoff
Former Team Member
Posts: 7068
Joined: Thu Jun 04, 2009 1:41 am
Location: cheerleading practice
Name: Tabitha Backoff

Re: [How To] Modify prosilver's header

Post by tbackoff »

I'm not much of a styler, but if you post the code and a link, I'm sure somebody will be able to tell you what's going on.
Flying is the second best thrill to cheerleaders; being caught is the first.
sherita
Registered User
Posts: 17
Joined: Mon May 19, 2014 5:02 am

Re: [How To] Modify prosilver's header

Post by sherita »

Thanks, but after fighting with it all day, I don't think this is the right software for me. Not saying it's bad, but when I solve one issue only to have another arise, I just do not have the patience for it.
Locked

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