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.

Phbb2 > Phbb3 : Display Issues

View previous topic View next topic Go down

Solved Phbb2 > Phbb3 : Display Issues

Post by Gothboy77 on March 4th 2014, 10:01 pm

I recently upgraded my forum from phbb2 to phbb3 and am having some slight issues. Any help is greatly appreciated.

http://imageupper.com/i/?S0200010020013K13939668161014290
http://imageupper.com/i/?S0200010020023K13939668161014290
http://imageupper.com/i/?S0200010020033K13939668161014290


Last edited by Gothboy77 on March 4th 2014, 10:05 pm; edited 1 time in total (Reason for editing : images)

Gothboy77
Forumember

Posts : 29
Reputation : 0
Language : English

http://Brickmania.findtalk.biz

Back to top Go down

Solved Re: Phbb2 > Phbb3 : Display Issues

Post by masesm on March 4th 2014, 10:57 pm

1. 
Go to ACP > Display > Colors > and find the dark color for the text and change it.

2.
Code:
.postprofile{
width: 12%;
}

.postbody{
width: 82%;
}
you can decide how much the profile and the post itself occupy the page by changing their percentages. The code above is my default.

3.
Code:
#search-box {
display: none;
}

masesm
Forumember

Male Posts : 67
Reputation : 5
Language : English, Java, JavaScript, HTML, CSS.
Location : United States

http://sicktier.forumotion.com/

Back to top Go down

Solved Re: Phbb2 > Phbb3 : Display Issues

Post by Gothboy77 on March 6th 2014, 4:16 pm

Thanks! 

I don't want to get rid of the search box though, I would just like to move it. Also I would like to get rid of the thin black line below the navbar on the home page if possible

Gothboy77
Forumember

Posts : 29
Reputation : 0
Language : English

http://Brickmania.findtalk.biz

Back to top Go down

Solved Re: Phbb2 > Phbb3 : Display Issues

Post by Ange Tuteur on March 6th 2014, 4:25 pm

Hello Gothboy77,

For the title color add this :
You can change the color if you wish
Code:
.h3 {
    color:#58d;
    border-color:#58d;
}

For the border under the nav, and search bar position, add this :
Code:
ul.navlinks { border:none; }
p.nomargin {
    position:relative;
    bottom:80px;
}

All codes should go in :
Administration Panel > Display > Colors > CSS stylesheet

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Phbb2 > Phbb3 : Display Issues

Post by Gothboy77 on March 6th 2014, 4:37 pm

Oh my goodness thank you so much! Now I only have one question, is there a way to center the navbar vertically like so?

http://imageupper.com/i/?S0200010080013C1394119958101592

Again, thank you so much for your help!


EDIT: Ah and one more thing; Is it possible to change the magnifying glass icon on the search box to something different? That small white pixel bothers me LOL

Gothboy77
Forumember

Posts : 29
Reputation : 0
Language : English

http://Brickmania.findtalk.biz

Back to top Go down

Solved Re: Phbb2 > Phbb3 : Display Issues

Post by Ange Tuteur on March 6th 2014, 4:46 pm

Try adjusting its height with this :
Code:
.headerbar + .navbar { height:40px; }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Phbb2 > Phbb3 : Display Issues

Post by Gothboy77 on March 6th 2014, 4:53 pm

Ok, I did that code and the navbar looks good, but now this happened

http://imageupper.com/i/?S0300010020013V13941208971018739

Also you probably didn't see my edit (sorry about that) but I'd also like to fix or even change that lil magnifying glass icon in the searchbox. Thanks for all your help!

Gothboy77
Forumember

Posts : 29
Reputation : 0
Language : English

http://Brickmania.findtalk.biz

Back to top Go down

Solved Re: Phbb2 > Phbb3 : Display Issues

Post by Ange Tuteur on March 6th 2014, 5:00 pm

That space is from the adverts.

You can remove the search image with the following CSS.
Code:
input.search { background-image:none; padding-left:0; }

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Phbb2 > Phbb3 : Display Issues

Post by Gothboy77 on March 6th 2014, 5:07 pm

Well that space only appears after I add that navbar code. If I go to my CSS and remove it, the navar is no longer vertically aligned, but the gap goes away? Hmmm....

The code for the search box worked. I assume I can upload my own photo and use the direct link for the "background-image" ?

Gothboy77
Forumember

Posts : 29
Reputation : 0
Language : English

http://Brickmania.findtalk.biz

Back to top Go down

Solved Re: Phbb2 > Phbb3 : Display Issues

Post by Ange Tuteur on March 6th 2014, 5:14 pm

If you want to change the background image, remove the last code and use this :
Code:
input.search { background-image:url('IMG SRC'); }

I see the space now, it is kind of hard to see.

Remove this from your CSS :
Code:
p.nomargin {
    position:relative;
    bottom:80px;
}

and add this :
Code:
#search-box {
    position:absolute;
    top:190px;
    right:80px;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Phbb2 > Phbb3 : Display Issues

Post by Gothboy77 on March 6th 2014, 5:26 pm

Sweet, sweet. I had to edit the pixel amount for the "top" property in order to get the search box aligned with the navbar, but that black gap went away woo! Thank you!

Also, for some reason my custom image for the search box won't appear. I am guessing it has to be a certain size? Mine is currently 32x32 so its probably too big. I will try 16x16 and 8x8.

Gothboy77
Forumember

Posts : 29
Reputation : 0
Language : English

http://Brickmania.findtalk.biz

Back to top Go down

Solved Re: Phbb2 > Phbb3 : Display Issues

Post by Ange Tuteur on March 6th 2014, 5:28 pm

It should be 16*16

Is this solved now ?

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Phbb2 > Phbb3 : Display Issues

Post by Gothboy77 on March 6th 2014, 5:30 pm

Well I resized it to 16x16 and uploaded it.

http://i56.servimg.com/u/f56/14/92/91/09/search11.png

It will not show up though. I must be doing something wrong ..

Code:
input.search { background-image:url('http://i56.servimg.com/u/f56/14/92/91/09/search11.png'); }

Gothboy77
Forumember

Posts : 29
Reputation : 0
Language : English

http://Brickmania.findtalk.biz

Back to top Go down

Solved Re: Phbb2 > Phbb3 : Display Issues

Post by Ange Tuteur on March 6th 2014, 5:32 pm

Ooh I forgot you need to edit the background position !

here :
Code:
input.search {
   background-image:url('http://i56.servimg.com/u/f56/14/92/91/09/search11.png');
    background-position:left;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Phbb2 > Phbb3 : Display Issues

Post by Gothboy77 on March 6th 2014, 5:36 pm

Woohoo! (And silly me I should have known that. I know HTML decently well but I get stumped on CSS sometimes (cant remember name values like .postbody, etc)

This topic is solved. Thanks Ange  Smile

Gothboy77
Forumember

Posts : 29
Reputation : 0
Language : English

http://Brickmania.findtalk.biz

Back to top Go down

Solved Re: Phbb2 > Phbb3 : Display Issues

Post by Ange Tuteur on March 6th 2014, 5:42 pm

You're welcome I love you

Topic solved and archived

Have a good day. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

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