Formatting Hyperlinks

[kdvorak 0]

saturday greetings, everyone,

i finally abandoned my old stationpro template and upgraded to pagelines (dev…cuz i always overestimate my abilities!). it's possible there is some lingering code or formatting somewhere?

my problem is that the hyperlinks don't seem to be formatted the same in various locations, and i would like to have as much control over them as possible.

one problem was underlines. i do not personally like them. searching the forums i found this line of code:

a:link, a:active, a:hover, a:visited {text-decoration: none !important; border-bottom: 0px;}

that seemed to do the trick on the front page and in the posts. yay! thanks! i've turned it off for now but will turn it back on later.

however, the hyperlink colors and such don't seem to be working the same depending on where they're located. i will try to use the correct terminology, but i will probably still get it wrong. my apologies. here is my home page:

http://voxsylvatici.com

at the top (banner? header?), vox sylvatici, while a link, is dark green, but hovering turns it a light green. ok. i can live with that. i even like the lighter green.

the post titles are green, but hovering doesn't turn them light green. it merely shows an underline (or not, if i use the above code). i'd like them to turn the same light green (or the same darker green of the links mentioned below).

i don't know why the byline text (?) under the titles is grey instead of white.

i don't know why the author name (Sylvaticus) is not the light green of a link (which i set using the color control in site options). hovering over "Sylvaticus* makes it white, not a darker shade of green like the other links (and from were did that darker green on hover come? i can't find a place to set it.), or the lighter green like "vox sylvatici" in the header/banner.

if i go in to a post the title is no longer a link (naturally). the byline is still grey. hovering over "Sylvaticus" still turns it white.

the links are green, like i want, and which i think i set in the color control found in site options. i now know how to remove the underline on hover, but no idea where the darker green shade is set. i'd prefer to make it the same lighter green of "vox sylvatici" on the home page's banner/header.

i guess the lighter and darker isn't so much the problem but where do i control them? i can't find anything in the dashboard or site options and i'm not sure where and how to use code to do it!

please tell me there is a stupidly simple place to make all these edits? i have no idea how to code it or where to place the code.

i have skype (XXXXXXXXXXXX) and AIM (XXXXXXXXXXX) accounts and i'm happy to call or chat (which is sometimes easier than writing the answers down). heck! if you live in minneapolis, i'll gladly buy you a coffee and we can chat in person. :-)

thank you for any help and advice you can give!

keith

[Rob 547]

Keith,

"dev…cuz i always overestimate my abilities!" - You too?

Do you have Firebug? http://www.firebug.com

It would help you immensely to resolve many of these issues that are principally CSS related. You can, for example find the proper elements for the header text and hover action and then apply that to the CSS for the post titles.

Add this, for example, to your Custom Code in CSS Rules or in the pagelines-customize/style.css

.mastmeta, .cnt-comments a, .cnt-comments a:hover, .tcolor2, .lcolor2 a, .subhead, .widget-title, #branding .site-description, #callout, #commentform .required, #postauthor .subtext, .commentlist .comment-meta a, .content-pagination span, .content-pagination a .cp-num, .comment.alt .comment-author, .tcolor3, .lcolor3 a, .main_nav a, .widget-title a, h3.widget-title a, #subnav_row li a, .metabar em, .metabar a, .tags, #commentform label, .form-allowed-tags code, .rss-date, .comment.alt, .reply a, .auxilary a, .cform .emailreqtxt, .cform .reqtxt, code, pre {

    color: rgba(255, 255, 255, 0.9);

}

The default in that case was 0.6 (end line) which made it appear grey, though 255, 255, 255 is actually white. 0.9 makes it whiter. 1.0 is pure white. For the author, try #postauthor and set a color, like:

#postauthor {color: #20913E;}

#postauthor a {color: rgba(170, 230, 101, 0.8);}

Dashboard > PageLines > Site Options > Color Control handles the basics, but you can also go to Site Options > Custom Code to add customizations to CSS Rules or, if you prefer, to the PageLines Customize plugin in the style.css file there.

Since we don't provide custom support via Skype, I am editing your post to remove and protect your account IDs given that this forum is searchable on Google.

[kdvorak 0]

Rob,

Thank you!

I am really hoping to avoid custom code because…(you know: "overestimate"!). If I can't, I can't; and drat. But I'm really hoping!

I'll check out Firebug, and I'm wondering…I hesitate to type the word…if Dreamweaver might also be useful.

I think I'm already wishing there were a way to find the names of all these elements in the (a) UI sort of tool, and then just say normal = green, mouseover = light green, author = white or light green (you seem to have found this one).

Ack. If only I weren't such a beginner!

Thank you again for the above and the Firebug recommendation!

Thank you also for removing my account information. :-)

Keith

[kdvorak 0]

hmmm…. the #postauthor lines did nothing.

[kdvorak 0]

FYI: it appears to be getfirebug.com. :-)

[kdvorak 0]

your huge code entry seems to be working, though i'm not sure how. i'm playing with that 0.9 and made it 0.7. and 1.0. i'm sort of understanding what's going on, but i don't know who you found all those names and such. argh! i hate being so stupid!!

[Danny+ 1,327]

HI,

I recommend you read the documentation below, if you wish learn how to use FireBug.

http://getfirebug.com/wiki/index.php/Main_Page

[kdvorak 0]

thank you, danny. i did start reading it last night. i would prefer not to use it if possible. i would rather find out that what i need to do is easily achieved via the pagelines template, but i fear that's unlikely.

[Rob 547]

Apologies about the URL and that #postauthor didn't work.

Dreamweaver will produce, I promise, nothing but headaches as it attempts to add code, spaces, breaks and other things that will ruin the good things you wish to achieve.

Framework is largely pre-designed for you, so all you need to add are your customizations, images, and make selections. Dreamweaver is an HTML code writer. We never really have to write HTML, just change some occasional CSS. That should be good news to you.

[kdvorak 0]

certainly no need to apologize! i am grateful for the help!

yes, i've pretty much decided against dreamweaver here. i did download and install firefox and firebug.

i'm not sure why postauthor didn't work. that large section of code worked, but it changes many things on the home page, from that byline to the blogroll, etc. and i still can't figure out why the rollover for the author name is white, but the rollover for the links in the post body is a darker shade of the green.

again, maybe firebug. ack!

anyone in minneapolis? :-)

[Danny+ 1,327]

Hi,

For you post author and comments link, add this to your custom CSS.

.metabar a:hover {

color: rgba(170, 230, 101, 0.8);

}

[/CODE]

[kdvorak 0]

thanks, danny.

i'm not sure what that did, but it affected the blog post titles, but not the byline and author.

i think the humbling lesson here is that i got an amazing template and technology for developers who know what they're doing, not so much stupid designer types. i am completely defeated by this and am having a hard time rising to the challenge because i don't know enough about CSS etc. hopefully i can learn. i really don't want to install a different template.

thanks again for all the help!!

[kdvorak 0]

ok. i'm trying again.

is it possible the #postauthor didn't work because 1) you don't have a starting brace: { and 2) is it possible that it didn't work because, if i'm understanding firebug correctly, it's "author" and not "postauthor"?

[Danny+ 1,327]

Hi,

To change the color on hover, add the following code:

.post-meta .metabar em a:hover {

color: white;

}[/CODE]


Change white to whatever color you like.