The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Forum Header Re-design

View previous topic View next topic Go down

Solved Forum Header Re-design

Post by Valoish on Tue Jan 03, 2017 4:15 pm

Technical Details


Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Other
Who the problem concerns : All members
When the problem appeared : N/A
Forum link : http://www.canvasforums.com

Description of problem

Hi,

I'd like to redesign the header of my forum. At the moment, the logo is contained within the bodyline and has a transparent BG to it.
This is what it looks like now:

And this is what I'd like for it to look like after the re-design:

So basically, I wanna get the Logo out of the bodyline, so that it can be in its own container that is 100% in width, with a background color and an image slider thing under the logo.


Last edited by Valoish on Wed Jan 04, 2017 11:56 pm; edited 1 time in total
avatar
Valoish
Forumember

Female Posts : 287
Reputation : 52
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Forum Header Re-design

Post by Kami-sama on Tue Jan 03, 2017 6:53 pm

You can do that in templates "Overall header" Smile
avatar
Kami-sama
Forumember

Female Posts : 272
Reputation : 6
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Forum Header Re-design

Post by Valoish on Tue Jan 03, 2017 6:56 pm

@Kami-sama wrote:You can do that in templates "Overall header" Smile
I thought of that as well, but I barely ever changed up the templates on my own so I'd rather not risk breaking them x___x
avatar
Valoish
Forumember

Female Posts : 287
Reputation : 52
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Forum Header Re-design

Post by Kami-sama on Tue Jan 03, 2017 7:03 pm

I can not worry about breaking it Wink Tere is always the default template code there. Also, you can copy the code you ave and save it in case you ave it already wit changes.

Regarding the logo. At te line 254 you have the logo code like this one:
Code:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

So just change it the way you want and move it above bodyline table.
avatar
Kami-sama
Forumember

Female Posts : 272
Reputation : 6
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Forum Header Re-design

Post by Valoish on Tue Jan 03, 2017 8:14 pm

I tried moving the logo just above the bodyline table and it messed up the whole forum x_x

Nvm I figured that out~ now the only thing I need help with is setting up the CSS Selectors I should be targeting o;

Fiured that out as well LOLOL. I'd like to keep this topic open though, in case I have more questions or run into any issues.
avatar
Valoish
Forumember

Female Posts : 287
Reputation : 52
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Forum Header Re-design

Post by Kami-sama on Tue Jan 03, 2017 8:41 pm

Good to hear!
P.S. could you share how you figured out the selector?
avatar
Kami-sama
Forumember

Female Posts : 272
Reputation : 6
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Solved Re: Forum Header Re-design

Post by Valoish on Tue Jan 03, 2017 9:04 pm

@Kami-sama oh sure!
All I did was add
Code:
class="CanvasLogo"
to the table's cell that contains all the Logo coding.

So it went from this:
Code:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<!-- BEGIN switch_logo_left -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_left -->
<td align="center" width="100%" valign="middle">
<!-- BEGIN switch_logo_center -->
<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
<br />
<!-- END switch_logo_center -->
<div class="maintitle">{MAIN_SITENAME}</div>
<br />
<span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
</td>
<!-- BEGIN switch_logo_right -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_right -->
</tr>
</table>

To this:
Code:
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<!-- BEGIN switch_logo_left -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_left -->
<td align="center" width="100%" valign="middle" class="CanvasLogo">
<!-- BEGIN switch_logo_center -->
<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
<br />
<!-- END switch_logo_center -->
<div class="maintitle">{MAIN_SITENAME}</div>
<br />
<span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
</td>
<!-- BEGIN switch_logo_right -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_right -->
</tr>
</table>
And then I just targeted that class in my Stylesheet using .CanvasLogo {}
avatar
Valoish
Forumember

Female Posts : 287
Reputation : 52
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Forum Header Re-design

Post by Valoish on Wed Jan 04, 2017 11:56 pm

This is solved now :3
avatar
Valoish
Forumember

Female Posts : 287
Reputation : 52
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Forum Header Re-design

Post by APE on Fri Jan 06, 2017 6:12 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules



avatar
APE
Manager
Manager

Male Posts : 10254
Reputation : 955
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum