Jump to content

Archived

This topic is now archived and is closed to further replies.

balfred1345

Link Color in Header Tags

Recommended Posts

balfred1345

Hi,

I've got links in header tags in the footer in a columnizer section (therefore I'm using text widgets to supply the content) that aren't showing up in the proper color that I've set in Global options. The a:link is staying white, when it should be blue. The a:hover shows up correctly.

I've tested this out in tags h4 through h6 and none get the proper CSS from Global options. 

 

I tried adding the following in custom code, but it did not work:

/* unvisited link for h6 */
#site h6 > a:link {
  color:#006BED !important;
}    
 
I've tried using both <p> and <strong> tags and the a:link color does show correctly. The only problem is, that the text itself does not show up well enough against the background... which is why I want to use a header tag. 
 

You can take a look at this in the footer under NEWS at:

http://whub34.webhostinghub.com/~videoh6/cidev2.com/

 

Any help would be greatly appreciated!

 

Thanks,

Bruce

Share this post


Link to post
Share on other sites
Danny

Hi,

 

The reason as to why the text and header tags are white is because of the custom CSS you have added to the section area:

 

#site .my-blue-area {
background-color: #006;
color: #FFF;
}

If you remove the color property and white value, this should resolve your issue.
 
With the color: white removed from your code:
 

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
balfred1345

Danny,
Thanks for the reply.
 
I went ahead and commented out the custom CSS. Unfortunately, it didn't solve the problem.
 
I wasn't clear enough in my initial post, so I can see why you thought it worked. 
Here's what I have going on:
Under "News" in the footer, I've left the top block of text without <h> tags (using <p> tags), and the bottom block uses <h> tags. So the top block works as it should. The bottom is where the <h> tag is in use and is not seeming to "get" the a:link CSS. 
 
Here's what I put in the text widget so you can see what I'm talking about above:

<h4>
News
</h4>
<p><strong>
Sign up for our <a href="http://whub34.webhostinghub.com/~videoh6/cidev2.com/subscribe/">newsletter</a> and we'll keep you up to date, delivering fresh Choral Arts Ensemble news to your inbox.
</p></strong>
<h4>
Missed some Choral Arts Ensemble news? Check out our <a href="http://whub34.webhostinghub.com/~videoh6/cidev2.com/news/newsletter-archive/">newsletter archive.</a>
</h4>

 
So, you can see that in the bottom block of text the words "newsletter archive" should have the a:link color of blue. 
 
I've kept my custom CSS commented out, so that is not a variable at this time. Here's the link for your reference: http://whub34.webhostinghub.com/~videoh6/cidev2.com/
 
Thanks again for your help with this.
 
Bruce

Share this post


Link to post
Share on other sites
Jake

Hi balfred1345 - Add the following custom code which I believe will get you the look you're going for:

 

h4 > a {color: #006BED;}

 

You'll probably also want to add a hover as well with h4 > a:hover


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
balfred1345

Hi Jake. Thanks so much for the response. I went ahead and added the custom code as you suggested, and it worked. 

 

So, does this mean that the "Global Options" setting of Site Text Colors / Link Color  does not work as it should? Shouldn't this setting also cover the header tags?

 

In any event, this workaround did the job. 

 

Thanks again!

Share this post


Link to post
Share on other sites
Rob

Global options for color are as they say, global. When a specific color is desired in a particular place, it can be coded simply and easily with CSS.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
balfred1345

HI Rob -- 

I wanted the same link color as set in global options, so it should have covered the links in header tags (in widgets and displayed via columnizer), should it not?

Thanks,

Bruce

Share this post


Link to post
Share on other sites
Rob

Bruce,

 

If you're using the Custom Sidebars plugin to help make the sidebars for your widgets in the widgetizer or columnizer sections,  there seems to be an odd problem with the plugin.  It appears to strip out all the formatting in any widget added.

 

That said, I've found a plugin http://codecanyon.net/item/total-dynamic-sidebar/3287804 which does pretty much the same things as Custom Sidebars, but leaves all the formatting intact.   For $6 I think it's a bargain.

 

The plugin was simple to use, and creates as many sidebars as desired.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
balfred1345

Hi Rob,

 

Thanks! I'll go ahead and give Total Dynamic Sidebar a try as you recommended. I was thinking that whatever the cause of the problem was, it had something to do with widgets and/or the sidebar. So, this makes sense.

 

Thanks again,

Bruce

Share this post


Link to post
Share on other sites
Rob

On a rare occasion, from time to time, I actually say or do something almost smart. :D


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

  • Similar Content

    • 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.
    • Borries
      By Borries+
      I know this is not an easy problem. Maybe there is a easy solution.
      I have tryed to uses the existing solution, that I have found in the forum
      I changed the colours of my nav (simple nav) and the hover effect (a. hover).
      I really tryed to highlight the active/used link in the nav but I cant figure it out.
      I want it to be black when active.
      Any help would be appreciated. Thanks.
      http://www.marcborries.de  nav link: "Sinn & Selbst" 
    • 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 
×