highlight username ?

sinner

hi, i'm running vanilla 2.0.18.10, i'm wondering how to highlight the username when a user is loged in? thanks.

vrijvlinder

Not sure I understand. You want to highlight a specific user , all users or only the user who is logged in so he can see his/her name better ?

vrijvlinder

this is the css for that part but it affects all users

.MessageList .Meta .Author a {
font-size: 15px;
font-weight: bold;
color:#0f0;
background:#666;
border:1px solid #0f0;
}

sinner

yes, i want the user to see his/her name better, so they can click on it to change their profile settings.

peregrine

you should post a screenshot and circle the name exactly where you are talking about. The menu line, the discussion, or should V play a guessing game.

better yet, you should look at a firebug tutorial and you could do it yourself by finding the element and making it bold.

vrijvlinder

Not all the links that are about the User are under the same css class or rule . The one I posted above is for the discussion and comments. This one is for the one that appears on the menu.

    #Menu li.UserNotifications a {
    font-weight: bold;
    color: #ff0;
    }

#Menu li.UserNotifications a:hover {
    font-weight: bold;
    color: #f00;
    }

vrijvlinder

Here are some links you need to read

https://developers.google.com/chrome-developer-tools/

http://stackoverflow.com/questions/5789739/how-to-use-chrome-web-inspector-to-view-hover-code

http://www.youtube.com/watch?v=zKQVnbb0SyE

sinner

hi, i think it's better if i could change the username's color when user is logged in. for example, the text is currently white, i want it to display yellow or different color. (attached screenshot) where do i edit this? where is the css file located? i looked into my theme's ccs file, but there is no such code displayed above.

peregrine

where is the css file located? i looked into my theme's ccs file, but there is no such code displayed above.

you add rules to your custom.css in yourtheme/design/custom.css

if there isn't one, create a file in the design folder of your theme.

please look at the links in this thread
http://vanillaforums.org/discussion/comment/204878/#Comment_204878

V already answered above

http://vanillaforums.org/discussion/comment/205693/#Comment_205693

     #Menu li.UserNotifications a {
    font-weight: bold;
    color: yellow;
    }
    #Menu li.UserNotifications a:hover {
    font-weight: bold;
    color: green;
    }

vrijvlinder

@sinner said: i looked into my theme's ccs file, but there is no such code displayed above.

Yes it is correct the code is not in the default style css . I put it together for you.

When you can't find a specific rule for an item, you can sometimes use it's parent as a selector if the parent has a specific class.

In this case the a link has no class but the < li > has the UserNotifications class in which case the result if you take that is :

#Menu (because it is in the menu) li.UserNotifications (specific to logged in user) a (the link to User profile.) 

Sometimes css rules do not exist and you need to create your own.

sinner

tried everything, didn't work.

vrijvlinder

ok try adding !important after the color code

 #Menu li.UserNotifications a {
    font-weight: bold;
    color: #ff0!important;
    }
    #Menu li.UserNotifications a:hover {
    font-weight: bold;
    color: #f00!important;
    }

vrijvlinder

You can also add jquery to your default.master.php , if it is a tpl enclose the script in {literal}script here{/literal} tags. This will add a specific class to that link. Then you add the css for it in the custom.css

    <script type="text/javascript"> 
    $(document).ready(function() {
        $( 'li.UserNotifications a' ).addClass( 'UserName' );

    });
    </script>


the css for that will be: 

#Menu li.UserNotifications a.UserName{
    color:#ff0;
}
#Menu li.UserNotifications a.UserName:hover{
    color:#f00;
}