need help referencing a particular element

[rstevenson]

Hi folk,

I need to style a very particular element in the Zen Cart interface -- the text that says "Forgot your password?" on the log-in page.

In the rendered code it comes out as...

<div class="buttonRow back important"><a href="https://www.artcardshop.com/store/index.php?main_page=password_forgotten">Forgot your password?</a></div>

I've tried various ways of identifying this class in my stylesheet but can't get it to take. How would I address elements in this class only?

I've tried...

div.buttonRow back important
.buttonRow back important
.buttonRow .back .important
.buttonRow.back.important

Those last ones were also tried with the div in front. And it seems I tried other versions too, but it gets a little confusing remembering which ones. Any ideas how to do it?

Maybe other aspects of the stylesheet are over-riding this? Perhaps my styling of all links or something like that, though I haven't used the !important statement in my styles, and I'm putting my attempts to style this bit at the bottom of my stylesheet, so it should be rendered last.

TIA

Rob

[schoolboy]

Try this, Rob

find tpl_login_default in template_default.

Make a copy on your local drive. (you'll need to send the edited file to an over-rides folder later)

There are TWO lines to change:

The first is on or near LINE 54...

<div class="buttonRow back important"><?php echo '<a href="' . zen_href_link(FILENAME_PASSWORD_FORGOTTEN, '', 'SSL') . '">' . TEXT_PASSWORD_FORGOTTEN . '</a>'; ?></div>

The second is on or near LINE 83...

<div class="buttonRow back important"><?php echo '<a href="' . zen_href_link(FILENAME_PASSWORD_FORGOTTEN, '', 'SSL') . '">' . TEXT_PASSWORD_FORGOTTEN . '</a>'; ?></div>

In BOTH instances, change buttonRow, to buttonRowEmailForgot

Send the edited file back to your over-rides folder.

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

In you stylesheet...

.buttonRowEmailForgot {
     your-styles: here;
   } 

[schoolboy]

Remember that this is a hyperlink, so if you want to change characteristics of the link, you will need to create new lines in the stylesheet to accommodate things like...

.buttonRowEmailForgot a { color: #fff333; }

.buttonRowEmailForgot a:hover { style here }

.buttonRowEmailForgot a:visited { style here }

[rstevenson]

Thanks Schoolboy. I was beginning to think I'd have to do it that way, since it's really just this particular link that needs some brightening up.

In case you were wondering, I'm doing this because a customer was unable to notice the password reminder link, and when I tried to login with an incorrect password myself, to see what was happening, I too completely missed the link. Having eventually noticed it, I decided it needed to be spruced up to better reflect its role as a VERY IMPORTANT THING.

Thanks for letting me know where in the code to make the changes, since that was going to be my next question. Have one on me.

Rob

[rstevenson]

Here's what I ended up using in my stylesheet, after making the code changes mentioned above.

.buttonRowForgotPW {
	border: solid red 1px;
	padding: 2px 4px 2px 4px;
	margin-left: 13em;
}

The red border makes it stand out just enough without my having to change any of the 'a hover visited' bits. The padding gives just a little room around the text, and the margin-left pushes the reminder over so it's directly below the password field on the log-in screen. You can see it on my retail site below by visiting the log-in page. I'll add it to the wholesale site too, probably.

Thanks again,

Rob