[How To] Modify prosilver's header

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Ideas Centre
User avatar
pit-PL
Registered User
Posts: 3084
Joined: Sat Nov 21, 2009 12:24 pm

Re: [How To] Modify prosilver's header

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

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

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 » 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 ;-)

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 » Sun Nov 18, 2012 2:14 am

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

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 2:31 am

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

pauly
Registered User
Posts: 93
Joined: Tue Nov 13, 2012 9:50 am

Re: [How To] Modify prosilver's header

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
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 10:56 am

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.... :(

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 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
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 11:18 am

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 ;)

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 11:28 am

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?

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 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
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 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
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 11:55 am

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>

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:13 pm

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:

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:20 pm

Well that's all folks!

Site has creashed!

Thanks for your help... :lol:

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 12:48 pm

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

Image

Locked

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