Jump to content
kdvorak

Formatting Hyperlinks

Recommended Posts

kdvorak    0
kdvorak

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


Fabricando fabri fimus.

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
kdvorak    0
kdvorak

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


Fabricando fabri fimus.

Share this post


Link to post
Share on other sites
kdvorak    0
kdvorak

hmmm…. the #postauthor lines did nothing.


Fabricando fabri fimus.

Share this post


Link to post
Share on other sites
kdvorak    0
kdvorak

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


Fabricando fabri fimus.

Share this post


Link to post
Share on other sites
kdvorak    0
kdvorak

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!!


Fabricando fabri fimus.

Share this post


Link to post
Share on other sites
kdvorak    0
kdvorak

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.


Fabricando fabri fimus.

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
kdvorak    0
kdvorak

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? :-)


Fabricando fabri fimus.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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]


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
kdvorak    0
kdvorak

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!!


Fabricando fabri fimus.

Share this post


Link to post
Share on other sites
kdvorak    0
kdvorak

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"?


Fabricando fabri fimus.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      every since Chrome introduce scroll anchoring (see chrome://flags) blog posts on my page start scroll automatically as soon as the user scrolls down a bit. It is super annoying and I don't know exactly what triggers the incompatibility with Chrome's latest feature that is supposed to improve usability.
      Since I don't know what causes it (Pagelines, or a Plugin), I would like to disable the feature using a CSS override that Google describes as follow:
      "Scroll anchoring aims to be the default mode of behavior when launched, so that users benefit from it even on legacy content. A CSS property overflow-anchor can disable scroll anchoring in part or all of a webpage (opt out), or exclude portions of the DOM from the anchor node selection algorithm. This property supports the following values when applied to an element E:
      overflow-anchor: auto (the default value) declares that the DOM subtree rooted at E is eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E. overflow-anchor: none declares that the DOM subtree rooted at E is not eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E." Do you guys happen to know how to use that property with the ROOT element so it applies to the whole page?
      Thanks
      Michael 
    • wyo22ski
      By wyo22ski+
      Hello,
       
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      }
       
      Any suggestions welcome.  Thanks 
    • Objectif-Mariage
      By Objectif-Mariage+
      Hello. 
      I have just realized that CSS (Less plugin) , is not working..... I have disable all plugins (except PL CUSTOM LESS and PL5) , and ... it's not working ... 
      It's not the first time. Usually I had trouble with a plugin name Autoptimize , but it's Desactivate now , all memory have been purge, and it's still not working! :-/ So it's not from this plugin. 
      NB : When I am logged on my website, if i go on the black wordpress dashboard bar, go on the PL icon, clic on </> LESS/CSS => then the page suddenly apply the CSS .... But As soon that i reload the page, nothing. I think the problem is that the plugin LESS/CSS does not load properly (if I can say that with my simples words).
      I order to keep the site "good looking" I have temporally copy/paste all my LESS code in a plugin : Script n Styles that apply the LESS/CSS code... but it's not a solution for long time.
      Can someone help me ? Did I do something wrong ? Is it an update ? 
       
      my website : https://www.wedding-photography-minneapolis.com
    • Jason
      By Jason+
      Feel free to delete this post if its not helpful or its just plain wrong.
       
      I though it might be useful to share how I customize the size of the builder. (reduce my eyestrain )
      1 - install stylerbot extension in chrome (stylerbot keeps this css every time you access the url)
       
      2- add this css to stylerbot for the site you are working on
      .CodeMirror {
          font-size: 14px;
          height: 600px;
      }
      .pl-workarea.pl-has-sidebar .pl-workarea-sidebar-container {
          right: 0px;
          width: 500px;
      }
      .pl-workarea.pl-has-sidebar .iframe-container {
          right: 500px ;
      }
       
      change sizes to suit.
       
      Cheers.
    • Jason
      By Jason+
      Hi.
      I can't seem to get the Teamwork section to accept custom css. I am trying to change the padding from 7em to 1em on the splash part
      I have tried
        .pl-sn-teamwork .pl-tw-splash {
          padding-top: 1em;
          padding-bottom: 1em;
        }
       
      This works in chrome inspect but when added to custom css nothing happens.
      I have also tried most of the classes I can see accoiated with this section but again nothng seems to happen.
      Any ideas?
×