Jump to content
kdvorak

Formatting Hyperlinks

Recommended Posts

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

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

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

hmmm…. the #postauthor lines did nothing.


Fabricando fabri fimus.

Share this post


Link to post
Share on other sites
kdvorak

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


Fabricando fabri fimus.

Share this post


Link to post
Share on other sites
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

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

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

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

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

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

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

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!
      I have noticed that my primary sidebar becomes intermittently invisible when browsing through various blog articles on michaelkummer.com/blog.
      See:
      https://www.dropbox.com/s/z646sgoa3mfjl1j/Screenshot 2018-07-12 15.57.46.jpg?dl=0 and https://www.dropbox.com/s/vdledzzgginvwgv/Screenshot 2018-07-12 15.57.57.jpg?dl=0
      Upon refresh, the sidebar appears. I have been using the following CSS code to hide the sidebar on mobile without any issues. 
      @media only screen and (max-width: 993px) {
      /* hide sidebars */
           .plsb {
              display: none !important;
          }
      }
      I tried to add the following CSS to force the sidebar to show on screens that are wider than 994 pixels but to no avail. Any clue what could be causing this issue?
    • Michael Kummer
      By Michael Kummer+
      Hi guys!
      I am using the LESS/CSS Pagelines extension and tried to add the following code to make use of FontAwesome:
      a.c2a:before {
          content: "\f07a\00a0";
          font-family: "Font Awesome 5 Pro";
          Font-weight: 900;
          font-style: normal;
          font-weight: normal;
          text-decoration: inherit;
          padding-left: 4px;
      }
       
      The issue is that as soon as I have the CSS via the Custom Styling text box, Pagelines (or the extension) strips out the backslashes (\). As a result, I had to abandon the CSS/LESS extension and instead add all my CSS code to a separate .css file.
      Is there a fix or workaround for this?
      Thanks
      Michael
    • glyph.marketing
      By glyph.marketing+
      Hello, I am having a problem similar to that experienced by Michael Kummer here. We have pages that show this automatic scrolling issue (examples here and here) and it is sufficiently annoying that we have seen customers bounce while trying to convert. Strangely, it only happens at specific resolutions, so it can be difficult to reproduce. In general we can only consistently reproduce it on a 4k resolution with a browser width between 1517 and 1536px. 
      Thanks to Michael Kummer's help we were able to set the overflow-anchor property to none in the entire body, which fixed the issue as far as we can tell, but also obviously disabled scroll anchoring for the whole site. I tried applying it to the specific element that looked like it was being reloaded, which was the PL Meganav extension, but that was unsuccessful. 
      Can anyone help us figure out which element or ID we can apply this property to, so that we can fix the scrolling issue but not disable scroll anchoring for the entire site?
      Thank you - 
      Glyph Language Services
    • chamois_blanc
      By chamois_blanc+
      Hello,
      Shouldn't the image PL5 component be using the srcset/picture css directives to pick the correct size for an image? or it does already and I don't know how to use it? Thank you for any advice or enlightenment.
    • Dan Haddock
      By Dan Haddock
      Plugins Active and installed: 
      Akismet Anti-Spam
      Coming Soon Page & Maintenance Mode by SeedProd
      Contact Form 7
      Cookie Law Info
      DMS Professional Tools  
      Enhanced Media Library  
      Flamingo
      Google Analytics for WordPress by MonsterInsights
      Google XML Sitemap
      Jetpack by WordPress.com
      Legull 
      Loginizer   
      MailChimp for WordPress
      PageLines Updater    
      Schema App Structured Data 
      Sucuri Security - Auditing, Malware Scanner and Hardening
      Uber reCaptcha    
      Yoast SEO
      Wordpress Version: 4.8.1
      Pagelines Version: 2.2.4
       
      Good Evening/Afternoon or Morning, 
      I am running into a problem with CSS styling not applying inside of most browsers (Safari, Firefox) when I am logged in to wordpress, and all browsers that I have tested when I am logged off and the site has been made public (Chrome, Firefox and Safari).
      As a result, I have managed to identify the probable cause. It looks as though these browsers are refusing to render my sites compiled CSS file due to it being a HTTP URL rather than HTTPS.
      I have attempted to change this URL to HTTPS in my browser, however it brings back an ERROR: File not found page - https://www.shortfilmblog.com/wp-content/uploads/pagelines/compiled-css-core-1505847507.css
      What would you suggest in this regard? Would this be resolvable from your end?
      Happy to provide any further details required.
×