• Hi,
    I’ve got a minor problem:
    The code below works fine except for 2 things:
    1. Change of font-size is not accepted (in #clarboxLeft li), I’d like it to be 13 or 14px but nothing happens when I change the size.
    2. There is no difference between a:link & a:visited. Actually the color of a:visited #397EB7 shows as the a:link color and there is no change when the link has been visited.

    Maybe my Tempera theme is overriding what I’m trying to do.
    The CSS is in “My Custom CSS” and the html is in a text widget in my left sidebar.
    The clarboxLeft looks as I want it except for those 2 things.
    I’m pretty much a beginner at html & CSS coding so what I’ve done may be too complicated or there is a glitch somewhere.

    HTML:

    <div id="clarboxLeft">
                  <center><img class="size-full wp-image-383" src="http://localhost:8888/wp-content/uploads/2014/05/ClarSolo-Sidebar-Title.jpg"
                  alt="Solo Clarinet Sidebar Title" width="180" height="30"></center>
                  <ul class="itemLinks">
    <li><a title="Clarinet Solo Beginner" href="http://localhost:8888/clarinet-solo-beginner/">Beginners</a></li>
    <li><a title="Clarinet Solo Intermediate" href="http://localhost:8888/clarinet-solo-intermediate/">Intermediate</a></li>
    <li><a title="Clarinet Solo Advanced" href="http://localhost:8888/clarinet-solo-advanced/">Advanced</a></li>
    <li><a title="Clarinet Solo Professional" href="http://localhost:8888/clarinet-solo-professional/">Professional</a></li>
    </div>

    CSS:

    #clarboxLeft {
    width: 220px;
    border: 2px solid #BDBDBD;
    background-color: #faf2ea;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 7px 0;
    margin: 0 auto;
    }
    #clarboxLeft ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    }
    #clarboxLeft li {
    font-family: arial;
    font-weight: normal;
    font-size: 12px;
    text-align:left;
    line-height: 1.5em;
    padding: 0 0 2px 8px;
    margin: 0 0 0 55px;
    }
    .itemLinks a:link {text-decoration:none; color: #ffffff !important; }
    .itemLinks a:visited {color: #397EB7 !important; }
    .itemLinks a:hover {color: #FC622F !important; }
    .itemLinks a:active {color: #FC622F !important; }

    I can’t give a link to the site as it is only on my computer (MAMP) and unfinished.

    Any help will be much appreciated. Thanks.

    GB

The topic ‘Cannot change Font size & link color’ is closed to new replies.