Page 120 of 136

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 12:53 pm
by Cypriotmatrix
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... :?

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 1:33 pm
by Cypriotmatrix
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? :?

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 1:47 pm
by Mick
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.

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 1:55 pm
by Cypriotmatrix
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. :)

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 2:22 pm
by Mick
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.

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 2:48 pm
by Cypriotmatrix
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.

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 3:00 pm
by Cypriotmatrix
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?

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 3:17 pm
by Fridge
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

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 3:34 pm
by Cypriotmatrix
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

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 3:45 pm
by Mick
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.

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 4:03 pm
by Cypriotmatrix
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

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 5:25 pm
by Cypriotmatrix
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... :(

Re: [How To] Modify prosilver's header

Posted: Mon Nov 19, 2012 5:03 am
by Cypriotmatrix
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? :?

Re: [How To] Modify prosilver's header

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

Re: [How To] Modify prosilver's header

Posted: Tue Nov 20, 2012 7:34 am
by Cypriotmatrix
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