how to change the color of “Edit Profile” & “Settings” links

  • Resolved vollachr

    (@vollachr)


    3 years, 10 months ago

    Hi,

    I’m building my website with wordpress but for development purposes I’m building it locally on my computer with xampp.

    I’ve installed simple author box and I really like it, have only one problem (other than needing to translate it), the links for “Edit Profile” & “Settings” are constantly in the same color, I can’t seem to change them.

    I’ve been able to temporary change it by using Google Chrome’s Inspect option, I even found the relevant CSS code in the plugin’s CSS files but changing the color there doesn’t work either, is there any way changing these links color?

    Thanks.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Manuel Rocha

    (@manuelrocha88)

    3 years, 10 months ago

    @vollachr try this. At Your theme css file add this for the Edit Profile

    a.sab-profile-edit {
    color: red !important;
}

    For Settings try this:

    .sab-edit-settings > a {
    color: red !important;
}

    If You want to change both with the same color, just to like this:

    .sab-edit-settings a, a.sab-profile-edit {
    color: red !important;
}

    The !important part is really important, otherwise It doesn’t get applied.

    Thread Starter vollachr

    (@vollachr)

    3 years, 10 months ago

    I believe I already tried these, just in case I tried it just now again after I’ve seen your answer, I added it in the theme’s “Custom CSS” section, it doesn’t seem to do anything.

    To be exact I added these at the end of my theme’s custom CSS section:

    .sab-edit-settings > a {
    color: white !important;
}

a.sab-profile-edit {
    color: black !important;
}

    But the color of said links still remains without any change, tried at the beginning of the “Custom CSS” section as well, no difference.

    Thing is, currently, the “Settings” links is nearly invisible because the bottom section of the author box is in nearly the same color and I don’t want to change that, I love my color scheme, the “Edit Profile” I just want to have in a different color from the Author Name.

    UPDATE:
    Been playing around with it a little bit, still can’t get it to work, same thing for font size of the “Edit Profile” link btw.

    Anyway, after playing around with Google Chrome’s Inspect feature, I think the “!Important” part of the original plugin CSS files might be the problem, if I un-tick the checkmark next to these in Chrome’s Inspect my “Custom CSS” start to work, but that is only a temporary solution until the page reloads.

    Any way to bypass these “!Important” sections in your plugins CSS files so they won’t stop my custom CSS from working?

    • This reply was modified 3 years, 10 months ago by vollachr.
    Manuel Rocha

    (@manuelrocha88)

    3 years, 10 months ago

    @vollachr try to add this to the function file of your theme.

    add_action('wp_footer', 'sab_custom_css', 100);

function sab_custom_css()
{
	echo "<style>.sab-edit-settings > a { color: white !important; } a.sab-profile-edit { color: black !important; }</style>";
}
    Thread Starter vollachr

    (@vollachr)

    3 years, 10 months ago

    I haven’t messed around with functions editing in years, which file should it go in and where?

    EDIT:
    nevermind, figured it out, added it to the start of file inc\functions\functions.php.

    Seems to work, thanks.

    BTW, can you or someone else take a look at my other question, regarding translation of the plugin

    HERE

    • This reply was modified 3 years, 10 months ago by vollachr.
    • This reply was modified 3 years, 10 months ago by vollachr.
    benjhedera

    (@benjhedera)

    3 years, 7 months ago

    I don’t understand why you have to add custom CSS and a custom function to make this happen when you have every other text color option under the “colors” section of your plugin…

    You would think that updating the “Color of author box links” setting under the colors section of your plugin would change this… but it obviously doesn’t

    Do you guys have any intention of adding this to your plugin as a built in setting?

    I had no problems adding the custom CSS or function, however I am building a child theme including your plugin and I really dislike that there is one single custom CSS / Function that a user may have to worry about to change a very small thing.

    Just some feedback…

    Manuel Rocha

    (@manuelrocha88)

    3 years, 7 months ago

    @benjhedera We took the lead of this project from other team a few months ago. There is a little work that We still have to make. We noted down Your feedback, which makes totally sense, and We will try to add in future updates.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘how to change the color of “Edit Profile” & “Settings” links’ is closed to new replies.