Jump to content

Archived

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

balfred1345

Link Color in Header Tags

Recommended Posts

balfred1345    5
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    1,327
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    5
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    74
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    5
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    547
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    5
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    547
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.

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


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

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