Help me get the correct css to change please...

[Brian Jester]

Hello,

I want to style the hover state links on the account-menu.tpl. Meaning after you login to the website, the links like: My Messages, My Profile, Favorites etc (except for the Logout link is correct for some reason, and I didn't manually change it in the html)..How would I style the background color on the hover state of the links? I mean, I know how to do it, but I don't know the element to apply it to. I do however, have the background colored to the way I want on the hover state, but it's not fitting the whole way across the menu.

I will post the link in a pm.

Edit: This topic has been resolved!

Can you please check message #25, on page #3 as that starts a similar topic, but for the same menu

Thank you
Brian

[Aleksandar Apostolovski]

I think you should edit the style.css file in your template folder

Example: /templates/auto_flatty/css/style.css

[Pete Young]

in your style css at around line 136 you will see the normal colour, then just below that at around line 143 you will see the hover command / option you can edit it there.

.currency-selector .font1,
.font2,
a.font2 { /* light font on the dark bg or instead */
color: #0a0c08;
}
.currency-selector .font1.active {
color: #111111;
font-weight: 400;
}
.currency-selector .font1:hover,
a.font2:hover {
color: #89a172;

if in chrome (or other option) right click on the text on the website you want to edit and select inspect then from there you can see the initial line of code / line 136 and if you then click on that link in editor you will go to the sources option (from elements) where you can scroll down to see the line of code to edit for the hover option.


your script may be different to mine so your line numbers may differ but follow above guide and you will have your answer.


Pete

[Brian Jester]

Hello,

Thanks to both of you for your replies, however, I checked in the style.css around line 143, and I found that line to be exactly the same as what you have posted pete, but I added background color: #000, but it didn't change it. Like I said originally, I have a black background, behind the links, but it doesn't fill the entire width of the menu, is there anything else you can suggest? I have put background: #000, and width: 100% with no luck. I am not sure it's in the style.css file, I think the change I made was in the stellarnav.css file, but I honestly can't say for sure, I could've changed that hover code in the flynax css file.

[Aleksandar Apostolovski]

Can you attach a screenshot? After editing the css I suggest you use incognito mode to see the changes because of local cache.

[Brian Jester]

Can you attach a screenshot? After editing the css I suggest you use incognito mode to see the changes because of local cache.

I just sent you private message, have a look at the website, and compare the Welcome menu with the category menu as in the hover state over the links. I couldn't find the issue and spent a couple of hours of frustration on this.

[Aleksandar Apostolovski]

I thought I was into making things perfect but you dude can beat me
Edit your stellarnav.css and find this:

.stellarnav ul ul {
top: auto;
width: 265px; ---------------> CHANGE THIS TO 262px
position: absolute;
z-index: 9900;
text-align: center;
display: none;
background: #ddd;

[Pete Young]

Brian, if you are still having dramas also send me a link please

[Aleksandar Apostolovski]

I read your first post again and I think that if it's not my upper suggestion then you are definitely searching for these options:

Location 1: stellarnav.css
----------------------------
.stellarnav li a {
padding: 15px;
display: block;
text-decoration: none;
color: #777;
font-size: inherit;
font-family: inherit;
box-sizing: border-box;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
transition: all .3s ease-out;

-----------------------------------------------------
Location 2: stellarnav.min.css

.stellarnav li a {
padding: 15px;
display: block;
text-decoration: none;
color: #777;
font-size: inherit;
font-family: inherit;
box-sizing: border-box;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
transition: all .3s ease-out;

----------------------------------------------

Either you will want to play with the transition options or you could just simply delete the 3 last lines in the both files.
Tell me if I'd finally understood your wish

[Brian Jester]

I thought I was into making things perfect but you dude can beat me
Edit your stellarnav.css and find this:

.stellarnav ul ul {
top: auto;
width: 265px; ---------------> CHANGE THIS TO 262px
position: absolute;
z-index: 9900;
text-align: center;
display: none;
background: #ddd;

Thank you for this, but this actually wasn't the solution. However, your bottom next result was in fact the correct answer, and I applaud you for you excellence!

Sorry for my late reply.

Thank you again, Aleksandar!
Brian