[How To] Modify prosilver's header

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Get Involved
Cypriotmatrix
Registered User
Posts: 139
Joined: Sun Mar 21, 2010 3:40 am
Contact:

Re: [How To] Modify prosilver's header

Post by Cypriotmatrix » Sun Nov 18, 2012 12:53 pm

Fridge wrote:On my forum i've put it in de site description and it works without a problem....

Image
Thanks for your help mate.

I have a bit of an issue. The edits caused the site to crash and I don't know what I did wrong... :?

Cypriotmatrix
Registered User
Posts: 139
Joined: Sun Mar 21, 2010 3:40 am
Contact:

Re: [How To] Modify prosilver's header

Post by Cypriotmatrix » Sun Nov 18, 2012 1:33 pm

OK I still have the problem with the navbar.

www.cyprus-forum.net

Also, I need to move the social buttons so that they do not interfere with the search window.

How do I do this? :?

User avatar
Mick
Support Team Member
Support Team Member
Posts: 21321
Joined: Fri Aug 29, 2008 9:49 am
Location: Watching cricket - definitely

Re: [How To] Modify prosilver's header

Post by Mick » Sun Nov 18, 2012 1:47 pm

Cypriotmatrix wrote:Also, I need to move the social buttons so that they do not interfere with the search window
What other issues are you talking about, the navbar or the crashing? For the interfering of the icons problem you might consider Remove search box & add search icon in navbar.
"The more connected we get the more alone we become" - Kyle Broflovski

Cypriotmatrix
Registered User
Posts: 139
Joined: Sun Mar 21, 2010 3:40 am
Contact:

Re: [How To] Modify prosilver's header

Post by Cypriotmatrix » Sun Nov 18, 2012 1:55 pm

Mick wrote:
Cypriotmatrix wrote:Also, I need to move the social buttons so that they do not interfere with the search window
What other issues are you talking about, the navbar or the crashing? For the interfering of the icons problem you might consider Remove search box & add search icon in navbar.
Yes that is one issue, but the other issue is the navbar error (line short) highlighted above due to some error.

Can I fix this somehow.

BTW, what will it look like if I add search icon? Don't i need to download an image?

I have resolved the crashing. :)

User avatar
Mick
Support Team Member
Support Team Member
Posts: 21321
Joined: Fri Aug 29, 2008 9:49 am
Location: Watching cricket - definitely

Re: [How To] Modify prosilver's header

Post by Mick » Sun Nov 18, 2012 2:22 pm

Cypriotmatrix wrote:but the other issue is the navbar error (line short) highlighted above due to some error.
Without knowing exactly what you've been doing it's difficult to say but it looks like you have an
extra <!-- ENDIF --> here:

Code: Select all

<!-- ENDIF -->
        
        	</div>
        
        	<a name="start_here"></a>
        	<div id="page-body">
There may be other such issues, you need to go through your edits.
Cypriotmatrix wrote:BTW, what will it look like if I add search icon? Don't i need to download an image?
Read the KB, there's no mention of downloading anything. All you're doing is removing the search box in the header and adding an (existing) icon and search link to the navbar.
"The more connected we get the more alone we become" - Kyle Broflovski

Cypriotmatrix
Registered User
Posts: 139
Joined: Sun Mar 21, 2010 3:40 am
Contact:

Re: [How To] Modify prosilver's header

Post by Cypriotmatrix » Sun Nov 18, 2012 2:48 pm

Mick wrote:
Cypriotmatrix wrote:but the other issue is the navbar error (line short) highlighted above due to some error.
Without knowing exactly what you've been doing it's difficult to say but it looks like you have an
extra <!-- ENDIF --> here:

Code: Select all

<!-- ENDIF -->
        
        	</div>
        
        	<a name="start_here"></a>
        	<div id="page-body">
There may be other such issues, you need to go through your edits.
Cypriotmatrix wrote:BTW, what will it look like if I add search icon? Don't i need to download an image?
Read the KB, there's no mention of downloading anything. All you're doing is removing the search box in the header and adding an (existing) icon and search link to the navbar.
OK cheers for that.

I followed those instructions and removed the search window and added the search icon.

Worked well and happy with this solution. Thankyou.

Cypriotmatrix
Registered User
Posts: 139
Joined: Sun Mar 21, 2010 3:40 am
Contact:

Re: [How To] Modify prosilver's header

Post by Cypriotmatrix » Sun Nov 18, 2012 3:00 pm

Mick wrote:
Cypriotmatrix wrote:but the other issue is the navbar error (line short) highlighted above due to some error.
Without knowing exactly what you've been doing it's difficult to say but it looks like you have an
extra <!-- ENDIF --> here:

Code: Select all

<!-- ENDIF -->
        
        	</div>
        
        	<a name="start_here"></a>
        	<div id="page-body">
There may be other such issues, you need to go through your edits.
I tried removing the extra ENDIF but that didn't work.

The navbar issue came about when I added the social bar.

This is what I di and after doing this, the issue arose:


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>
This has resulted in a broken navbar (short line) etc. What is interfering with the navbar and how do I fix it?

Fridge
Registered User
Posts: 307
Joined: Sat Nov 11, 2006 1:41 am
Location: Rotterdam, The Netherlands
Name: Martin
Contact:

Re: [How To] Modify prosilver's header

Post by Fridge » Sun Nov 18, 2012 3:17 pm

Oké, i will try to explane it for the last time :D
This one is from scratch so remove all other edits.

This is how i done it.
Open a new file with notepad en paste into:

Code: Select all

#social_bar {
    position: relative;
    top: 60px;
    margin-right: -43%;
    height: 20px;
}
#social_buttons {
   float: right;
}

#social_buttons img {
    padding: 0px 0px;
    float: left;
}
And save it as social.css

Open stylesheet.css and paste on a new line at the bottom:

Code: Select all

@import url("social.css");
save it and upload both files to your theme folder.

Open overall_header.html and find:

Code: Select all

<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p> 
Place on a new line your html for the social bar, mine is:

Code: Select all

    <div id="social_bar">
         <div id="social_buttons">
            <a href="http://www.zonnigforum.nl/feed.php" onclick="window.open(this.href); return false;"><img alt="RSS" src="{T_THEME_PATH}/images/social_rss.png"/></a>
            <a href="https://www.facebook.com/zonnigforum" onclick="window.open(this.href); return false;"><img alt="Facebook" src="{T_THEME_PATH}/images/social_facebook.png"/></a>
            <a href="https://twitter.com/Zonnigforum" onclick="window.open(this.href); return false;"><img alt="Twitter" src="{T_THEME_PATH}/images/social_Twitter.png"/></a>
         </div>
    </div> 
Save it and upload it to your template folder.

Go to your ACP and renew the template en theme under styles, purge the cache and go to your inden.php to see the result. Perform if necessary a cache flush of your browser with Ctrl+F5

Cypriotmatrix
Registered User
Posts: 139
Joined: Sun Mar 21, 2010 3:40 am
Contact:

Re: [How To] Modify prosilver's header

Post by Cypriotmatrix » Sun Nov 18, 2012 3:34 pm

Fridge wrote:Oké, i will try to explane it for the last time :D
This one is from scratch so remove all other edits.

This is how i done it.
Open a new file with notepad en paste into:

Code: Select all

#social_bar {
    position: relative;
    top: 60px;
    margin-right: -43%;
    height: 20px;
}
#social_buttons {
   float: right;
}

#social_buttons img {
    padding: 0px 0px;
    float: left;
}
And save it as social.css

Open stylesheet.css and paste on a new line at the bottom:

Code: Select all

@import url("social.css");
save it and upload both files to your theme folder.

Open overall_header.html and find:

Code: Select all

<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p> 
Place on a new line your html for the social bar, mine is:

Code: Select all

    <div id="social_bar">
         <div id="social_buttons">
            <a href="http://www.zonnigforum.nl/feed.php" onclick="window.open(this.href); return false;"><img alt="RSS" src="{T_THEME_PATH}/images/social_rss.png"/></a>
            <a href="https://www.facebook.com/zonnigforum" onclick="window.open(this.href); return false;"><img alt="Facebook" src="{T_THEME_PATH}/images/social_facebook.png"/></a>
            <a href="https://twitter.com/Zonnigforum" onclick="window.open(this.href); return false;"><img alt="Twitter" src="{T_THEME_PATH}/images/social_Twitter.png"/></a>
         </div>
    </div> 
Save it and upload it to your template folder.

Go to your ACP and renew the template en theme under styles, purge the cache and go to your inden.php to see the result. Perform if necessary a cache flush of your browser with Ctrl+F5
That worked, but I prefer the social buttons to be where they were on the right side.

This has made the header to wide.

www.cyprus-forum.net/index.php

User avatar
Mick
Support Team Member
Support Team Member
Posts: 21321
Joined: Fri Aug 29, 2008 9:49 am
Location: Watching cricket - definitely

Re: [How To] Modify prosilver's header

Post by Mick » Sun Nov 18, 2012 3:45 pm

There's no need to keep posting the code, it's all here: How to add social icons

And don't use notepad! Use a good text editor such as Notepad++ and make sure you save your files with encoding UTF-8 without BOM.
"The more connected we get the more alone we become" - Kyle Broflovski

Cypriotmatrix
Registered User
Posts: 139
Joined: Sun Mar 21, 2010 3:40 am
Contact:

Re: [How To] Modify prosilver's header

Post by Cypriotmatrix » Sun Nov 18, 2012 4:03 pm

Thanks guys that's all well and good.

But how do I move the social buttons to the right and in the middle of the header box.
Have a look where they are at the moment: www.cyprus-forum.net/index.php

Cypriotmatrix
Registered User
Posts: 139
Joined: Sun Mar 21, 2010 3:40 am
Contact:

Re: [How To] Modify prosilver's header

Post by Cypriotmatrix » Sun Nov 18, 2012 5:25 pm

Interesting.

All the links in the navbar: UCP/messages/view your posts/search/FAQ/members/logout

don't seem to work. :?

Oh man, this stuff is so frustrating.

How can I fix this. I don't have a clue what causes this... :(

Cypriotmatrix
Registered User
Posts: 139
Joined: Sun Mar 21, 2010 3:40 am
Contact:

Re: [How To] Modify prosilver's header

Post by Cypriotmatrix » Mon Nov 19, 2012 5:03 am

OK I just realized that the navbar links work for IE, but NOT Mozilla.

In Mozilla the following navbar icons don't work: UCP/messages/view your posts/search/FAQ/members/logout

Would this be a coding issue? If so, how do I fix it? :?

This is getting more frustrating by the day. :lol:

Also, how can I get the social icons to appear to the right and in the middle? What coding edit is required for that? Is there a tutorial somehwere? :?

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 » Mon Nov 19, 2012 10:12 pm

I registered so I could see the code when logged in. It looks like you have line breaks that are breaking the links:

Code: Select all

                <ul class="linklist leftside">
                        <li class="icon-ucp">
                            <a href="./ucp.php" title="User Control Panel" accesskey="e">User Control Panel</a>
                                 (<a href="./ucp.php?i=pm&folder=inbox"><strong>0</strong> new messages</a>) &bull;
                            <a href="./search.php?search_id=egosearch">View your posts</a>
                            
                        </li>
                    </ul>
     
Should be:

Code: Select all

                <ul class="linklist leftside">
                        <li class="icon-ucp"><a href="./ucp.php" title="User Control Panel" accesskey="e">User Control Panel</a>(<a href="./ucp.php?i=pm&folder=inbox"><strong>0</strong> new messages</a>) &bull;<a href="./search.php?search_id=egosearch">View your posts</a>
                            
                        </li>
                    </ul>
     
That should get you going, φίλος. εβίβα! :mrgreen:
Muggins

Cypriotmatrix
Registered User
Posts: 139
Joined: Sun Mar 21, 2010 3:40 am
Contact:

Re: [How To] Modify prosilver's header

Post by Cypriotmatrix » Tue Nov 20, 2012 7:34 am

muggins wrote:I registered so I could see the code when logged in. It looks like you have line breaks that are breaking the links:

Code: Select all

                <ul class="linklist leftside">
                        <li class="icon-ucp">
                            <a href="./ucp.php" title="User Control Panel" accesskey="e">User Control Panel</a>
                                 (<a href="./ucp.php?i=pm&folder=inbox"><strong>0</strong> new messages</a>) &bull;
                            <a href="./search.php?search_id=egosearch">View your posts</a>
                            
                        </li>
                    </ul>
Should be:

Code: Select all

                <ul class="linklist leftside">
                        <li class="icon-ucp"><a href="./ucp.php" title="User Control Panel" accesskey="e">User Control Panel</a>(<a href="./ucp.php?i=pm&folder=inbox"><strong>0</strong> new messages</a>) &bull;<a href="./search.php?search_id=egosearch">View your posts</a>
                            
                        </li>
                    </ul>
That should get you going, φίλος. εβίβα! :mrgreen:
Thank you for making so much effort! You took the time to register just to get the code and assist me. :)

Σε ευχαριστο φιλε.

εβίβα! :D

Locked

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