Notifications
Clear all

wpForo 1.x.x [Solved] CSS for buttons and text centering

4 Posts
2 Users
0 Reactions
1,240 Views
Posts: 3
Topic starter
(@cairnsdr)
Active Member
Joined: 4 years ago

I am trying to get my forum to look more like the rest of my site, so I'd like to make the buttons have rounded corners.  

I tried adding the following to Forums -> Settings -> Styles, but it makes no difference to the rounding of the button corners. The same code does change it in Chrome Developer tools though. How can I round the buttons in my forum, and ideally also the top corners of the heading bars as well.

#wpforo #wpforo-wrap .wpf-button, .wpf-button {
background: #F6B8BD;
color: #FFFFFF!important;
border: 1px solid #F1959D;
border-radius: 100px;
}
#wpforo #wpforo-wrap .wpf-acp-footer a.wpf-button-secondary {
margin: 2px;
background: #fff;
padding: 5px 7px;
font-size: 12px;
border-radius: 100px;
}
#wpforo #wpforo-wrap .wpf-acp-content a.wpf-button-secondary {
margin: 5px auto!important;
padding: 7px 15px!important;
display: inline-block;
width: auto;
box-shadow: 0px 0px 5px #ccc;
background: #fff;
border-radius: 100px;
}

 

In addition, the text on some buttons (eg. all the buttons in the Admin Control Panel on the main forum page, and the Create Account button on the login page) is not centered. It is skewed off to the right. Example: the Create Account button here: https://ohmydarlingbride.com/community/?foro=signin. In the source code it looks like there is a icon there, but the icon color must be the same as my background color. Where would that be fixed in css?

Thank you, 

Alison

3 Replies
Sofy
Posts: 4900
 Sofy
Admin
(@sofy)
Support Team
Joined: 7 years ago

Hi @cairnsdr,

I tried adding the following to Forums -> Settings -> Styles, but it makes no difference to the rounding of the button corners. The same code does change it in Chrome Developer tools though. How can I round the buttons in my forum, and ideally also the top corners of the heading bars as well.

The problem may come from file writing permissions.

The right way to solve this problem is to fix files and folders permission.

All files in FTP should have a chmod 0644 and folders to have chmod 0755.

This article should be helpful for you: https://www.siteground.com/tutorials/ftp/change-permissions/

The similar issue is discussed here: https://wpforo.com/community/postid/50136/

In addition, the text on some buttons (eg. all the buttons in the Admin Control Panel on the main forum page, and the Create Account button on the login page) is not centered. It is skewed off to the right. Example: the Create Account button here:  https://ohmydarlingbride.com/community/?foro=signin.  In the source code it looks like there is a icon there, but the icon color must be the same as my background color. Where would that be fixed in css?

Use the CSS code below:

#wpforo #wpforo-wrap i:before {
font-family: "Font Awesome 5 Free" !important;
font-weight: 900;
}
Posts: 3
Topic starter
(@cairnsdr)
Active Member
Joined: 4 years ago

Thanks - the fix for the fontawesome code was successful. 

For the first part, though, files in my public_html folder and subfolders, including the wp- folders and writing theme folder, already have permissions of 0644, and folders have 0755.  Any other suggestions?

1 Reply
(@cairnsdr)
Joined: 4 years ago

Active Member
Posts: 3

Scratch that. When I added back the code I tried before, after adding your icon code, the rounding of corners now works. Don't know why, but I'll take it. 🙂  Thanks very much.