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.

Change Topic Title width and height

View previous topic View next topic Go down

Solved Change Topic Title width and height

Post by Valoish on November 25th 2016, 6:01 pm

Technical Details


Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari
Screenshot of problem : http://image.prntscr.com/image/dc8eab4b13c442058bede354d76d196e.png
Who the problem concerns : All members
When the problem appeared : Today
Forum link : http://www.canvasforums.com

Description of problem

Is there a way to change the textarea/input width for topic titles? I have a topic title colorizer thing on my forum, but since I increased the padding on the dropdown menus the colorizer shifted under the topic title field. It used to be next to it.

Also, is there a way to change the height/add padding to the input area so that it's the same height as the dropdown
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 53
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Change Topic Title width and height

Post by Luffy on November 25th 2016, 10:05 pm

Hello @Valoish,

How long in pixels you want the input to be?
You can use this code for it's width and height:
Code:
input.post
but this will change the bottom 2 as well. If you want only the title input to change then you can use this one:
Code:
input.post[name="subject"]





avatar
Luffy
Manager
Manager

Male Posts : 4788
Reputation : 484
Language : Greek, English
Location : Greece

http://vibes.forumotion.com/

Back to top Go down

Solved Re: Change Topic Title width and height

Post by Valoish on November 25th 2016, 11:43 pm

@Luffy,

I'm not too sure how many pixels.. I'd prefer for it to be responsive (so percentages, I guess) so that it looks good on all screen resolutions.
I played around with the code you gave me and I made the input areas and the topic color selector float left. It looks fine on PC but when I open it on mobile its still misaligned x_x
Any way to fix it for mobile? Or would I just use a media query and adjust the CSS values that way?

Edit: I figured it out~! Now it works well on both PCs and Mobile Devices

This is the CSS I added:
Code:
input.post, textarea.post { float: left; }

select[name=topic_color] { float: left; }

@media only screen and (min-device-width: 320px) and (max-device-width: 485px) { input.post[name="subject"] { width: calc(100% - 176px)!important; } }

Thanks for your help, Luffy! ^^
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 53
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Solved Re: Change Topic Title width and height

Post by Luffy on November 25th 2016, 11:59 pm

Sure thing! No problem! Have a nice day!

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





avatar
Luffy
Manager
Manager

Male Posts : 4788
Reputation : 484
Language : Greek, English
Location : Greece

http://vibes.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