WordPress.org

Ready to get started?Download WordPress

Forums

Magazine Basic -- how to customize pages list in sidebar? (3 posts)

  1. kmort
    Member
    Posted 5 years ago #

    This is such a beautiful theme!

    But I've gotten stuck!

    I would like to tweak the font color/attributes of the list of pages and sub pages that I've got displayed in the left sidebar using the Pages widget.

    http://blog.harperhewes.com/

    For instance, I'd like to use a different font color and/or bullets to make the sub-pages stand out relative to the main pages.

    I've gone through the style.css file several times, but I can't seem to find the code that sets those elements.

    Can anybody help me out? Thanks!

  2. kmort
    Member
    Posted 5 years ago #

    I've isolated another clue on this -- would welcome any ideas about what to try next!

    The color of the page lists displayed in the Pages sidebar widget is 205B87.

    So I did a search of that in the code and found it in two places in style.css -- here:

    a {
    text-decoration: none;
    outline: none;
    color: #205B87;
    }

    and here:

    ol.commentlist li div.comment-meta a { color:#205B87; text-decoration:none; }

    So I thought, okay. I'll comment out the first one and set the color at black.

    a {
    text-decoration: none;
    outline: none;
    // color: #205B87;//
    color: 000000;
    }

    I reloaded the blog page -- and in IE -- there is no change.

    But -- in Firefox SOME of the page names listed in the sidebar are still displayed in that light blue #205B87 -- and others are now displayed as PURPLE? #800080????

    http://blog.harperhewes.com/

    That's not a color I set anywhere, and when I do a text search on the theme files it doesn't show up.

    The pages being displayed as purple are pages for which I have designated other pages as child pages.

    What I want to do is control the look of the child pages in the list . . .

    Also obviously I want to make it consistent in FF & IE. Any idea why IE would render this differently?

    I'm going to keep sleuthing but if anyone has any ideas of where I could look, I'd be very appreciative!

    Here's my style.css code as it stands right now. Pretty much the default magazine basic file except some font settings and I put in some borders & a background.

    (Could the background be doing something to a font color? LOL):

    /* Basic Tag Elements */

    a {
    text-decoration: none;
    outline: none;
    // color: #205B87; //
    color: 000000;
    }

    a:hover {
    text-decoration: underline;
    }

    img {
    border: 0;
    }

    body {
    color: #444;
    margin: auto;
    font-size: 14px;
    padding: 0 20px;
    font-family: Calibri, Arial, Helvetica, sans-serif;
    /*begin code to give patterned background */
    background-color: transparent;
    background-image: url(' http://blog.harperhewes.com/wp-content/pattern5.png');
    background-repeat: repeat;
    background-position:0 0;
    color: #333;
    }

    h1 a, h2 a, h3 a, h4 a, h5 a {
    color: #38335B;
    text-transform: capitalize;
    }

    h1 {
    font-family: Georgia, Times New Roman, serif;
    }

    textarea {
    width: 97%;
    }

    /* Header Elements */

    #header{
    background: #fff;
    border-top: 5px solid #38335b;
    float: left;
    width: 100%;
    }

    #search-header {
    width: 180px;
    }

    #login {
    height: 16px;
    font-size: 12px;
    color: #fff;
    text-align: right;
    padding: 7px 10px 9px;
    background: url(images/login.png) repeat-x;
    }

    #login a {
    color: #fff;
    }

    #login ul {
    padding: 0;
    margin: 0;
    }

    #login ul li {
    display: inline;
    }

    .dot:before {
    content: url(images/whitedot.png) " ";
    }

    #title {
    font-size: 48px;
    margin: 20px 0 0;
    padding: 0 15px;
    line-height: 34px;
    }

    #title a {
    color: #222;
    }

    #title a:hover {
    color: #cc0000;
    text-decoration: none;
    }

    #description {
    font-size: 16px;
    margin: 10px 0 20px;
    padding: 0 15px;
    }

    #navigation {
    clear: left;
    background: url(images/login.png) repeat-x;
    float: left;
    width: 100%;
    height: 25px;
    }

    ul.menu * {
    margin:0;
    padding:0
    }

    ul.menu ul {position:absolute; top:25px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none;}
    ul.menu ul li {position:relative; border:1px solid #aaa; width:159px; margin:0;}
    ul.menu ul li a {display:block; padding:5px 7px 5px 12px; color: #555; background-color:#d1d1d1; border-right: 0; font-size: 12px;}
    ul.menu ul li a:hover {background-color:#c5c5c5;}
    ul.menu ul ul {left:159px; top:-1px;}

    ul.menu {
    list-style:none;
    padding: 0;
    margin: 0;
    }

    ul.menu li {
    position:relative;
    font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
    list-style-type: none;
    float: left;
    text-transform: uppercase;
    font-size: 14px;
    padding: 0;
    margin: 0;
    position: relative;
    }

    ul.menu a {
    display: block;
    font-weight: bold;
    color: #fff;
    border-right: 1px solid #fff;
    padding: 3px 12px 4px 12px;
    }

    ul.menu a:hover {
    color: #444;
    background: #c5c5c5;
    text-decoration: none;
    }

    ul.menu .menulink:hover, ul.menu .menuhover {
    color: #444;
    background-color:#c5c5c5;
    }

    #sub-navigation {
    clear: both;
    border-bottom: 1px solid #222;
    float: left;
    width: 100%;
    padding-top: 2px;
    }

    #sub-navigation img {
    float: left;
    position: relative;
    top: 3px;
    }

    #sub-navigation ul {
    padding: 0 0 0 5px;
    margin: 0;
    }

    #sub-navigation li {
    list-style-type: none;
    float: left;
    text-transform: uppercase;
    font-size: 12px;
    padding: 0;
    margin: 4px 0 3px;
    }

    #sub-navigation ul.pages li:after {
    content: url(images/blackdot.png);
    }

    #sub-navigation a {
    color: #222;
    padding: 4px 5px 3px 5px;
    }

    #sub-navigation a:hover {
    text-decoration: underline;
    }

    /* Main Elements */

    #mainwrapper {
    float: left;
    width: 100%;
    padding: 10px 0 10px 0;
    margin: 0;
    border-top: 5px solid #38335b;
    border-bottom: 5px solid #38335b;
    background: #fff;
    }

    #sidebar {
    float: left;
    margin: 0 10px;
    padding: 5px 0 0;
    }

    #secondsidebar {
    float: left;
    margin: 0 10px;
    padding: 5px 0 0;
    }

    .side {
    line-height: 20px;
    font-size: 18px;
    margin-bottom: 0;
    }

    .side-widget {
    float: left;
    margin: 0 0 10px;
    padding: 0 10px 15px;
    background: url(images/bg-hatch.gif);
    border: 1px solid #ddd;
    }

    .side-widget ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    }

    .side-widget ul li {
    padding: 0;
    margin: 0;
    font-size: 13px;
    }

    .side-widget ul li {
    padding-left: 15px;
    margin: 2px 0;
    }

    .side-widget h2 {
    font-size: 14px;
    border-bottom: 1px solid #ddd;
    padding: 10px 0 5px;
    margin-top: 0;
    text-align: center;
    text-transform: uppercase;
    }

    .side-widget .storycontent {
    border-bottom: 1px solid #ddd;
    }

    .side-widget .noline {
    border-bottom: 0;
    }

    .posts {
    border-bottom: 1px solid #aaa;
    margin-bottom: 20px;
    }

    .posts h2 {
    margin: 10px 0 0;
    }

    .readmore {
    color: #cc0000;
    }

    #footer {
    clear: both;
    float: left;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    font-size: 11px;
    border-top: 1px solid #222;
    border-bottom: 5px solid #38335b;
    background: #fff;
    }

    /* Left Content Elements */

    #leftcontent {
    float: left;
    margin: 0 10px;
    padding: 0;
    }

    #leftcontent h5 {
    font-family:Calibri, Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #cc0000;
    margin-bottom: 5px;
    font-size: 14px;
    }

    #leftcontent h1 {
    margin: 0;
    padding: 0;
    font-size: 24px;
    line-height: 26px;
    }

    .more-link {
    font-size: 11px;
    text-align: right;
    color: #cc0000;
    }

    .tags a {
    color: #cc0000;
    }

    .meta {
    font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #888;
    }

    .post {
    float: left;
    border-bottom: 1px solid #aaa;
    margin-bottom: 10px;
    padding-bottom: 10px;
    width: 100%;
    }

    #twocol {
    float: left;
    margin-bottom: 3px;
    padding: 10px 0 0;
    background: url(images/line.png) repeat-y 50% 0;
    }

    #twocol img {
    width: 80px;
    float: left;
    margin: 0;
    margin: 0 10px 5px 0;
    }

    #twocol h1 {
    font-size: 18px;
    line-height: 20px;
    }

    .mainhr {
    float: left;
    background: #aaa;
    clear: both;
    width: 100%;
    height: 1px;
    border: 0;
    }

    .twopost {
    width: 46%;
    float: left;
    }

    .twopost2 {
    margin-left: 7.5%;
    }

    #threecol {
    float: left;
    background: url(images/line.png) repeat-y 31.5% 0;
    margin-top: 3px;
    }

    #threecol2 {
    float: left;
    padding: 0;
    background: url(images/line.png) repeat-y 67% 0;
    }

    #threecol img {
    width: 40px;
    float: left;
    margin: 0 10px 5px 0;
    }

    .threepost {
    width: 29%;
    float: left;
    border-top: 1px solid #aaa;
    padding-top: 10px;
    }

    .threepost h2, .twopost h2 {
    margin: 0;
    font-size: 16px;
    line-height: 18px;
    }

    .threepost2, .threepost5 {
    padding: 10px 0 0;
    margin: 0 6%;
    }

    .threepost1, .threepost2, .threepost3 {
    border-top: 0;
    }

    .threepost1, .threepost4 {
    clear: left;
    }

    /* Other Elements */

    #leftcontent h1.catheader {
    margin-top: 3px;
    color: #cc0000;
    font-weight: normal;
    }

    #leftcontent .post h1 {
    color: #000;
    margin-top: 3px;
    }

    .red, .entry a {
    color: #cc0000;
    }

    #tagcloud {
    width: 400px;
    text-align: center;
    margin: auto;
    padding: 20px;
    }

    #tagcloud a {
    color: #cc0000;
    }

    /* Comment Elements */

    h3#comments {
    text-transform: none;
    padding-bottom: 5px;
    }

    #postcomments {
    padding-top: 20px;
    }

    h4#comments, #respond h3 { color:#333; font:normal 240% georgia,times,serif; margin:0 0 .1em; padding:0 0 .1em; }

    #respond p { font-size:11px; margin:0 0 1em; }

    ol.commentlist { list-style:none; margin:0; padding:0; }

    ol.commentlist li { border:1px solid #d5d5d5; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; margin:0 0 10px; padding:5px 7px 5px 64px; position:relative; }

    ol.commentlist li.pingback comment-author { padding:0 170px 0 0; }

    ol.commentlist li div.vcard { font-weight:bold; font-size: 14px; line-height: 16px; font-family: helvetica,arial,sans-serif; }

    ol.commentlist li div.vcard cite.fn { font-style:normal; font-size: 11px; }

    ol.commentlist li div.vcard cite.fn a.url, .cancel-comment-reply a { color:#cc0000; text-decoration:none; }

    ol.commentlist li div.vcard cite.fn a.url:hover, .cancel-comment-reply a:hover { color:#000; }

    ol.commentlist li div.vcard img.avatar { background: #fff; border:1px solid #aaa; padding: 5px; left:7px; position:absolute; top:7px; }

    ol.commentlist li div.comment-meta { font-weight:bold; font-size: 10px; line-height: 16px; font-family: helvetica,arial,sans-serif; position:absolute; right:10px; text-align:right; top:5px; }

    ol.commentlist li div.comment-meta a { color:#205B87; text-decoration:none; }

    ol.commentlist li p { font-weight:normal; font-size: 12px; line-height: 16px; font-family: helvetica,arial,sans-serif; margin:5px 0 12px; }

    ol.commentlist li ul { font-weight:normal; font-size: 12px; line-height: 16px; font-family: helvetica,arial,sans-serif; list-style:square; margin:0 0 12px; padding:0; }

    ol.commentlist li div.reply { background:#999; border:1px solid #666; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; color:#fff; font:bold 9px/1 helvetica,arial,sans-serif; padding:6px 5px 4px; text-align:center; width:36px; }

    ol.commentlist li div.reply:hover { background:#cc0000; border:1px solid #cc0000; }

    ol.commentlist li div.reply a { color:#fff; text-decoration:none; text-transform:uppercase; }

    ol.commentlist li ul.children { list-style:none; margin:12px 0 0; text-indent:0; }

    ol.commentlist li ul.children li.depth-2 { margin:0 0 3px; }

    ol.commentlist li ul.children li.depth-3 { margin:0 0 3px; }

    ol.commentlist li ul.children li.depth-4 { margin:0 0 3px; }

    ol.commentlist li ul.children li.depth-5 { margin:0 0 3px; }

    ol.commentlist ul.children li.odd { background:#fff; }

    ol.commentlist ul.children li.even { background:#f6f6f6; }

    ol.commentlist li.pingback div.vcard { padding:0 170px 0 0; }

    .commentnumber {
    position: absolute;
    left: 7px;
    bottom: 3px;
    font-size: 14px;
    color: #ccc;
    }

    /* WordPress Required Elements */

    .aligncenter,
    div.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    .alignleft, div.alignleft {
    float: left;
    margin-right: 10px;
    }

    .alignright, div.alignright {
    float: right;
    margin-left: 10px;
    }

    .wp-caption {
    border: 1px solid #ddd;
    text-align: center;
    background-color: #f3f3f3;
    padding-top: 4px;
    margin: 0;
    /* optional rounded corners for browsers that support it */
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }

    .wp-caption img {
    margin: 0;
    padding: 0;
    border: 0 none;
    }

    .wp-caption p.wp-caption-text {
    font-size: 11px;
    line-height: 17px;
    padding: 0 4px 5px;
    margin: 0;
    }

    #today {
    color: #cc0000;
    }

    #wp-calendar {
    margin: auto;
    }

    .posts {
    float: left;
    }

    .posts img {
    margin: 10px 10px 10px 0;
    float: left;
    width: 100px;
    }

  3. c.bavota
    Member
    Posted 5 years ago #

    You sidebar widgets' styles are here:

    .side-widget {
    float: left;
    margin: 0 0 10px;
    padding: 0 10px 15px;
    background: url(images/bg-hatch.gif);
    border: 1px solid #ddd;
    }
    
    .side-widget ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    }
    
    .side-widget ul li {
    padding: 0;
    margin: 0;
    font-size: 13px;
    }
    
    .side-widget ul li {
    padding-left: 15px;
    margin: 2px 0;
    }

    Add something like:

    .side-widget ul li a {
    color: #ff0000
    }

    to change the colour of the links in the sidebar widgets.

Topic Closed

This topic has been closed to new replies.

About this Topic