<div class="container show-user">
<div class="title-bar">
<h1>View Profile - $[user.name] ($[user.username])</h1>
</div>
<div class="content cap-bottom">
<div class="ui-tabMenu">
<ul class="ui-helper-clearfix">
{foreach $[menu]}<li{if $[menu.active]} class="ui-active"{/if}><a href="$[menu.href]">$[menu.text]</a></li>{/foreach}
</ul>
</div>
<div class="pad-all-double clear">
<div class="float-left">
<div class="float-left pad-right">$[user.avatar_medium]</div>
<div class="name_and_group float-right">
<span class="big_username" style="color: $[user.color];">$[user.name]</span><br />
{if $[user.group]}
$[user.group.name]<br />$[user.group.stars]
{else}
$[user.rank.name]<br />$[user.rank.stars]
{/if}
</div>
</div>
<div class="float-right controls">
$[options]
$[send_message_button]
$[edit_profile_button]
$[follow_button]
$[invite_button]
<div class="float-right clear pad-top">
Username: <span class="note pad-right">$[user.username]</span>
{if $[user.is_online]}
Member is Online
{else}
Last Online: <span class="note">$[user.last_online]</span>
{/if}
</div>
</div>
</div>
<div class="pad-all-double ui-helper-clearfix clear">
$[content]
</div>
</div>
</div>
Alright so in this code you can see the buttons “send_message_button, follow_button”…ect…
PaulOB
August 3, 2017, 8:16am
2
Hi,
Unfortunately there’s not enough information in your post for us to help you. Please read the posting basics thread to see the best way to pose your problem.
At present you show no CSS for us to look at and you haven’t posted pure html but some other programming language instead. We need either to see the site in question or at least a cut-down working demo of the problem that exhibits the behaviour you are looking to correct.
4 Likes
This is in the Html template of my site, I posted the hole code i want to modify so idk what else to show.
Under where it says: <div class="float-right control">
We need to see the CSS which goes with this. Where is the styling information which is currently setting those buttons to black?
/* Buttons */
@buttons_background_image: url('//images.proboards.com/v5/gradients/light.png');
@buttons_background_attachment: @empty;
@buttons_background_repeat: repeat-x;
@buttons_background_position: center center;
@buttons_border: 1px solid darken(@buttons_background_color, 20%);
@buttons_border_radius: 5px;
@buttons_text_font: 12px Verdana, Arial;
@buttons_text_decoration: none;
@buttons_hover_background: lighten(@buttons_background_color, 5%) url('//images.proboards.com/v5/gradients/top-light-40-trans.png') center repeat-x;
@buttons_hover_border: 1px solid darken(@buttons_background_color, 20%);
@buttons_hover_text_color: lighten(@buttons_text_color, 20%);
@buttons_hover_text_font: @buttons_text_font;
@buttons_hover_text_decoration: @buttons_text_decoration;
@buttons_active_background: @container_highlight_color;
@buttons_active_border: 1px solid darken(@buttons_background_color, 20%);
@buttons_active_text_color: @link_color;
@buttons_active_text_font: @buttons_text_font;
@buttons_active_text_decoration: @buttons_text_decoration;
.button, a.button, input[type="submit"], input[type="button"], button { color: @buttons_text_color; font: @buttons_text_font; text-decoration: @buttons_text_decoration; background-color: @buttons_background_color; background-image: @buttons_background_image; background-attachment: @buttons_background_attachment; background-repeat: @buttons_background_repeat; background-position: @buttons_background_position; border: @buttons_border; .rounded-corners(@buttons_border_radius); min-height: 20px; line-height: 20px !important; padding: 2px 0px; display: inline-block; vertical-align: middle; margin-left: 3px; cursor: pointer; white-space: nowrap; }
.button:hover, input[type="submit"]:hover, input[type="button"]:hover, button:hover { color: @buttons_hover_text_color; font: @buttons_hover_text_font; text-decoration: @buttons_hover_text_decoration; background: @buttons_hover_background; border: @buttons_hover_border; }
.button:active, input[type="submit"]:active, input[type="button"]:active, button:active, .shoutbox_refresh_button.active, .liked.likes-button, .button.state-selected { color: @buttons_active_text_color; font: @buttons_active_text_font; text-decoration: @buttons_active_text_decoration; background: @buttons_active_background; border: @buttons_active_border; }
a.button { padding: 2px 6px; }
.button .status { padding: 0 6px 0 2px; .rounded-corners(0); border: @buttons_border; border-width: 0px 1px 0px 0px; float: left; overflow: hidden; word-wrap: break-word; white-space: nowrap; }
.button .status img { display: block; margin-top: 2px; position: relative; left: 2px; }
.button .icon { padding: 1px 2px 1px 1px; border: 0; float: left; line-height: normal !important; }
input[type="submit"], input[type="button"], button { padding: 2px 6px; min-height: 26px; }
.button-x { position: absolute; top: 50%; right: 3px; margin-top: -8px; cursor: pointer; display: block; text-indent: -9999px; width: 16px; height: 16px; background: url('//images.proboards.com/v5/icons-default.png') -16px -32px no-repeat; }
.button-x:hover { background: url('//images.proboards.com/v5/icons-default.png') 0px -32px no-repeat; }
.button.post-options { padding: 2px 0 2px 0; }
.reply_button { float: right; }
Is that it?
I don’t see anything making them black…
If u go on the site and look at a members profile: http://platinumscape.boards.net/user/16
Under “Gift” are 2 Black buttons almost fully hidden in the background. One is “Send Message” and the other is “Edit Profile”
I really need them white, can’t find what to edit
Unfortunately, I can’t see those two buttons - presumably because I’m not a logged-in member.
As @PaulOB said, your HTML is not pure HTML, but has something mixed in with it. Likewise, the CSS seems to be using something like LESS or SASS, neither of which I know, so I can’t help there.
If you use the “view source” option in your browser, then copy and paste the source for the relevant section of code, that would at least help up to see what you’re trying to target.
Ok i cant do that on my phone so I will do it when i get home asap and thanks
1 Like
PaulOB
August 3, 2017, 4:37pm
10
I just signed up and I still can’t see the buttons in question?
Unless its the gift button and the others to the left as they seem to be black?
If you look carefully you can see “edit profile” lol
PaulOB
August 3, 2017, 7:44pm
14
A picture is worth a 1000 words
Do you know how to edit your css files? If so you need to find the rule where you have set the button color which is this variable.
@buttons_text_color
It’s not defined in the css you posted above but you need to find it and change it to the color you want.
e.g.
@buttons_text_color: #fff;
That will change all buttons to that color but you may also need to look at the hover and active colors also if they are also dark.
If you only want to change the color of specific items then you will need to add a class to the item in the html and use that to change the color.
e.g.
.my-button,a.my-button{color:#fff}<a href="/..." class="button my-button" etc...
Thats soooooo helpful omg, but the thing is when i go to edit my HTML template all it shows about that button is this. And as you said it’s not pure html or something so i’m confused on what to edit
I believe i’ll have to change
<div class="float-right controls"> $[options] $[send_message_button] $[edit_profile_button] $[follow_button] $[invite_button]
With something like this?
<div class="float-right controls"> $[options] $[send_message_button] <span> class="$[edit_profile_button]" style="color: #ffffff"> $[follow_button] $[invite_button]
Btw this didn’t really work, it did show the button in white but when you click it it doesn’t work anymore…
PaulOB
August 3, 2017, 8:17pm
16
First just try changing the css file. You must have access to that somewhere?
I assume you are using some forum software of some sort so you will need to look at the documentation as most will give you access to variables or at least to add a custom css file.
I assume you’ve done some customisation yourself already or is this the first time you have tried changing things?
Definetly changed some things myself
I found this
All these are already set to white… i’m lost
I found it! The color was set as a rgba color in the CSS it was hidden very well but I changed it and got it fixed (: thanks for helping me out
2 Likes
system
November 3, 2017, 10:55am
20
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
