[How To] Modify prosilver's header

pit-PL · Post by **pit-PL** » Sat Nov 17, 2012 2:27 pm

Move <div id="social_bar">...</div>
above 
Change

    #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;
}

Fridge · Post by **Fridge** » Sat Nov 17, 2012 6:19 pm

You can change the location of the searchbox in common.css
The edits of the social buttons are wrong, look at the navbar

muggins · Post by **muggins** » Sun Nov 18, 2012 2:14 am

Sorry, you can't change the location of an element via CSS edits.

Fridge · Post by **Fridge** » Sun Nov 18, 2012 2:31 am

So if you edit the margin-top you can't adjust the position of the search box?

pauly · Post by **pauly** » Sun Nov 18, 2012 9:19 am

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?

Cypriotmatrix · Post by **Cypriotmatrix** » Sun Nov 18, 2012 10:56 am

pit-PL wrote:Move <div id="social_bar">...</div>
above 
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....

Cypriotmatrix · Post by **Cypriotmatrix** » Sun Nov 18, 2012 11:01 am

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?

Fridge · Post by **Fridge** » Sun Nov 18, 2012 11:18 am

Cypriotmatrix wrote:What is wrong with the navbar?

This is wrong with the navbar....

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

Cypriotmatrix · Post by **Cypriotmatrix** » Sun Nov 18, 2012 11:28 am

Fridge wrote:
Cypriotmatrix wrote:What is wrong with the navbar?
This is wrong with the navbar....

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?

Fridge · Post by **Fridge** » Sun Nov 18, 2012 11:33 am

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.

Cypriotmatrix · Post by **Cypriotmatrix** » Sun Nov 18, 2012 11:48 am

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.

Fridge · Post by **Fridge** » Sun Nov 18, 2012 11:55 am

Allright.....that didn't work

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>

Cypriotmatrix · Post by **Cypriotmatrix** » Sun Nov 18, 2012 12:13 pm

Fridge wrote:Allright.....that didn't work
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!

Cypriotmatrix · Post by **Cypriotmatrix** » Sun Nov 18, 2012 12:20 pm

Well that's all folks!

Site has creashed!

Thanks for your help...

Fridge · Post by **Fridge** » Sun Nov 18, 2012 12:48 pm

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