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

    • 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 
    • 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 
×