WordPress.org

Ready to get started?Download WordPress

Forums

CSS control of Theme subtitle and link behavior (5 posts)

  1. coachdrew82
    Member
    Posted 1 year ago #

    I seem to be completely stumped by this problem.

    http://www.fiercegentleman.com

    I want my subtitle to be 17 px not 11 px. (p.text-center.motto)

    And, I want my link behavior to match the style of my unordered list link behavior in regular <p>, but it just doesn't, despite my hacking away at it diligently for a few long hours.

    See http://fiercegentleman.com/about-fierce-gentlemen-movement/

    and compare to

    http://fiercegentleman.com/coaching/

    I have used Firebug / Firefox Inspector. I have gone into all the CSS files I can find on my web host (layout.css. foundation.css) looking for ANY line that says 11px. Cannot find one.

    I have found the code snippet that controls my desired link behavior. It is:

    a:hover color: #7777C9; text-decoration: none;
    a:focus color: #1100A8;

    But despite placing this code snippet in p declarations in layout.css, it is still not working.

    Here's what I've got in layout.css:

    p {
    font-family: inherit;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 17px;
    a:hover color: #7777C9; text-decoration: none;
    a:focus color: #1100A8;

    }

    what stupid, stupid, completely obvious thing I am overlooking?

    Many thanks!

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    I want my subtitle to be 17 px not 11 px.

    [screenshot]

    p.motto {
     font-size: 17px;
    }

    And, I want my link behavior to match the style of my unordered list link behavior in regular

    [screenshot]

    .hentry p a,
    a {
     text-decoration: underline;
     color: #000;
    }

    WAIT
    Do not edit the theme's files.

    Add your CSS modifications through this Custom CSS Manager plugin.

  3. coachdrew82
    Member
    Posted 1 year ago #

    Thanks Andrew Nevins. You are a baller.

    However, the following code is not working to produce the desired on-hover color change:

    .hentry p a,
    a {
    color: #1100A8;
    text-decoration:none;
    a:hover color: #7777C9;
    }

    The a:hover color: is misplaced somehow, isn't it?

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    See CSS syntax http://www.w3schools.com/css/css_syntax.asp

    If you want to style the anchor hover state, you put it outside of the curly braces.
    E.g;

    .hentry p a,
    a {
     color: #1100A8;
     text-decoration:none;
    }
    
    a:hover {
     color: #7777C9;
    }
  5. coachdrew82
    Member
    Posted 1 year ago #

    I knew there was something I misunderstood about the syntax.

    You are a prince of a man, Andrew Nevins. Many thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic