Page 119 of 136

Re: [How To] Modify prosilver's header

Posted: Sat Nov 17, 2012 2:27 pm
by pit-PL
Move <div id="social_bar">...</div>
above <!-- IF not $S_IN_PORTAL or S_DISPLAY_PHPBB_MENU -->
Change

Code: Select all

    #social_bar {
       height: 20px;
       margin: 0 auto;
       position: relative;
       right: 10px;
       top: -53px;
    }
    #social_buttons {
       float: right;
    }
to

Code: Select all

#social_bar {
	text-align: right;
}

Re: [How To] Modify prosilver's header

Posted: Sat Nov 17, 2012 6:19 pm
by Fridge
You can change the location of the searchbox in common.css
The edits of the social buttons are wrong, look at the navbar ;-)

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 2:14 am
by muggins
Sorry, you can't change the location of an element via CSS edits. :roll:

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 2:31 am
by Fridge
So if you edit the margin-top you can't adjust the position of the search box? :mrgreen:

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 9:19 am
by pauly
what is an ideal size for the image to put in the header if say you want it like the one above... to fill area?

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 10:56 am
by Cypriotmatrix
pit-PL wrote:Move <div id="social_bar">...</div>
above <!-- IF not $S_IN_PORTAL or S_DISPLAY_PHPBB_MENU -->
Change

Code: Select all

    #social_bar {
       height: 20px;
       margin: 0 auto;
       position: relative;
       right: 10px;
       top: -53px;
    }
    #social_buttons {
       float: right;
    }
to

Code: Select all

#social_bar {
	text-align: right;
}
Thanks for this.

I have done exactly what you said.

But in what file do I do the second part. I looked for it and couldn't find it so I just added:

Code: Select all

#social_bar {
	text-align: right;
}
into common.css

but no joy.... :(

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 11:01 am
by Cypriotmatrix
Fridge wrote:You can change the location of the searchbox in common.css
The edits of the social buttons are wrong, look at the navbar ;-)
What is wrong with the navbar? :?

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 11:18 am
by Fridge
Cypriotmatrix wrote:What is wrong with the navbar? :?
This is wrong with the navbar....
Image

The social buttons html is influencing the position of the navbar.
Try placing the social html after:

Code: Select all

            <div id="site-description">
                <a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
                <h1>{SITENAME}</h1>
                <p>{SITE_DESCRIPTION}</p>
                <p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
            </div> 
and adjust with css ;)

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 11:28 am
by Cypriotmatrix
Fridge wrote:
Cypriotmatrix wrote:What is wrong with the navbar? :?
This is wrong with the navbar....
Image

The social buttons html is influencing the position of the navbar.
Try placing the social html after:

Code: Select all

            <div id="site-description">
                <a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
                <h1>{SITENAME}</h1>
                <p>{SITE_DESCRIPTION}</p>
                <p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
            </div>
and adjust with css ;)
I did see that but didn't think it was that important.

So, this:

Code: Select all

<!-- IF not $S_IN_PORTAL or S_DISPLAY_PHPBB_MENU -->
    <div id="social_bar">
                <div id="social_buttons">
                   <a href="http://cyprus-forum.net/feed.php"><img alt="RSS" src="{T_THEME_PATH}/images/social/social_rss.png"></a>
                   <a href="http://www.facebook.com/CyprusForum"><img alt="Facebook" src="{T_THEME_PATH}/images/social/social_facebook.png"></a>
                   <a href="https://twitter.com/ForumCyprus"><img alt="Twitter" src="{T_THEME_PATH}/images/social/social_Twitter.png"></a>
                </div>
    </div>
              <div class="navbar">
goes after

Code: Select all

            <div id="site-description">
                <a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
                <h1>{SITENAME}</h1>
                <p>{SITE_DESCRIPTION}</p>
                <p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
            </div>  
and adjust with css ;)[/quote]

Is that right?

And what do I change in common.css?

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 11:33 am
by Fridge
No, you only add

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> 
and remove the same piece that you placed earlier bofore

Code: Select all

<div class="navbar"> 
In common.css you can adjust the placement of the searchbox, to rase it, just adjust the margin-top.

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 11:48 am
by Cypriotmatrix
Fridge wrote:No, you only add

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>
and remove the same piece that you placed earlier bofore

Code: Select all

<div class="navbar">
In common.css you can adjust the placement of the searchbox, to rase it, just adjust the margin-top.
OK this is what I have done so far:

Code: Select all

<div id="site-description">
        				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
        				<h1>{SITENAME}</h1>
        				<p>{SITE_DESCRIPTION}</p>
        				<p class="skiplink"><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="get" 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_SEARCH_HIDDEN_FIELDS}
        				</fieldset>
        				</form>
        			</div>
        		<!-- ENDIF -->
        
        			<span class="corners-bottom"><span></span></span></div>
        		</div>
        
<!-- IF not $S_IN_PORTAL or S_DISPLAY_PHPBB_MENU -->
                <div id="social_buttons">
                   <a href="http://cyprus-forum.net/feed.php"><img alt="RSS" src="{T_THEME_PATH}/images/social/social_rss.png"></a>
                   <a href="http://www.facebook.com/CyprusForum"><img alt="Facebook" src="{T_THEME_PATH}/images/social/social_facebook.png"></a>
                   <a href="https://twitter.com/ForumCyprus"><img alt="Twitter" src="{T_THEME_PATH}/images/social/social_Twitter.png"></a>
                </div>
    </div>
        	
        			<div class="inner"><span class="corners-top"><span></span></span>
But still the navbar remains the same.

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 11:55 am
by Fridge
Allright.....that didn't work :D
Then try placing it within the site description. Place it right after:

Code: Select all

 <p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 12:13 pm
by Cypriotmatrix
Fridge wrote:Allright.....that didn't work :D
Then try placing it within the site description. Place it right after:

Code: Select all

 <p class="skiplink"><a href="#start_here">{L_SKIP}</a></p> 
that didn't work either.

check out the site, it looks silly! :lol:

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 12:20 pm
by Cypriotmatrix
Well that's all folks!

Site has creashed!

Thanks for your help... :lol:

Re: [How To] Modify prosilver's header

Posted: Sun Nov 18, 2012 12:48 pm
by Fridge
On my forum i've put it in de site description and it works without a problem....

Image