WordPress.org

Ready to get started?Download WordPress

Forums

Styling RSS sidebar widget - Find overide css (14 posts)

  1. chikajm
    Member
    Posted 1 year ago #

    Hi,

    I've been trying to style my RSS widget in my sidebar to make it display 'block' style or with the list syle position 'inside'. I've tried and tried everything I could think of but it's just not working.

    Here is my site: http://www.chikabarry.com/blog
    The RSS widget is at the bottom of the sidebar on the right handside.

    I've tried setting the style for '.rsswidget' in the css stylesheet because I thought this might be the only way I could isolate the style of that speicific widget, but I was wrong!

    It's still displaying as an 'unblocked' list as if whatever I do the style for this widget is being overwritten somewhere.

    Please someone help. I'm just able to get by with the little css that I know so any help would be really appreciated.

    Many thanks,
    Chika.

  2. JungleSpace.net
    Member
    Posted 1 year ago #

    You can use tools like Inspect Element on Google Chrome to check which css file has the higher priority. Right click on the RSS, and click Inspect Element.

  3. chikajm
    Member
    Posted 1 year ago #

    I've done this and I can see using firebug that the only CSS that is seems to be following #sidebar a
    There's no indication of style for the "rsswidget" at all in the inspect element area.

    Please help.

  4. esmi
    Forum Moderator
    Posted 1 year ago #

    Then you need to add the relevant CSS.

  5. chikajm
    Member
    Posted 1 year ago #

    I've tried that...
    I tried adding:

    .rsswidget a {
    display: block;

    to the stylesheet but it didn't work... :(

    I tried in the sidebars2 php file too but that didn't work either.

    My css is not great at all so I know I'm just going wrong somewhere.

    Could you please advise me on the right coed and where to put it please?

    Many thanks,
    C.

  6. JungleSpace.net
    Member
    Posted 1 year ago #

    Use the below. The anchor tag is having the rsswidget class.

    #sidebar2 a.rsswidget {
    display:block
    }
  7. chikajm
    Member
    Posted 1 year ago #

    That still didn't work.
    Do you have any other suggestions. It stubborly stays exactly the same even when entering the above code...
    What could be overriding it?

    Please help.
    C.

  8. JungleSpace.net
    Member
    Posted 1 year ago #

    May I know which CSS file do you edit?

  9. chikajm
    Member
    Posted 1 year ago #

    I edited the just the main CSS Stylesheet

  10. JungleSpace.net
    Member
    Posted 1 year ago #

    If it is style.css, which line did you put your modification at?

    It is best to put it somewhere below of the file. Please paste your modifications here.

  11. chikajm
    Member
    Posted 1 year ago #

    Thanks so much..

    I pasted it in both sidebar and at the bottom of the css.
    Still it didn't work...

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

    /*
    Theme Name: Satoshi v2.0
    Theme URI: http://www.vooshthemes.com
    Description: A Free Portfolio Theme Developed By Voosh Themes. Please look at the <a href="../wp-content/themes/satoshi/instructions/instructions.html">instructions</a> that are included with the file you downloaded <a href="../wp-content/themes/satoshi/instructions/instructions.html">(satoshi/instructions/instructions.html)</a> for details about how to configure this theme.
    Author: Voosh Themes
    Author URI: http://www.vooshthemes.com
    */
    
    /* -- Color: Red - #9e1c1c -- */
    
    @import "styles/reset.css";
    
    /* -------------------- */
    /* -- General Styles -- */
    /* -------------------- */
    
    body { font-family: "Georgia", Georgia, serif; background: url(images/main-bg-1.png); repeat-x; background-color: yellow; display: block; } 
    
    #wrap { width: 960px; margin: 0 auto; padding: 5px 60px 60px 60px; background: #fff; display: block; !important; overflow: auto; }
    .wrap { background: #fff;  display: block; !important; }
    
    h1, h2, h3, h4, h5 { color: #222; }
    h1 { font-size: 38px; margin: 0 0 30px 0; }
    h2 { font-size: 34px; margin: 0 0 7px 0; }
    h3 { font-size: 14px; margin: 30px 0 10px 0; }
    h4 { font-size: 21px; line-height: 25px; margin: 15px 0 3px 0; color: #7e7e7e; }
    h5 { font-size: 19px; line-height: 25px; margin: 0px 0 0px 0; color: #000;}
    h6 { font-size: 12px; margin: 0px 0 0px 0;}
    h7 { font-size: 28px; line-height: 33px; margin: 35px 0 3px 0; }
    p { font-size: 11px; line-height: 18px; margin: 0 0 15px 0; }
    a { text-decoration: none; color: #03a7c5; }
    a:hover { color: #222; }
    
    /* ------------ */
    /* -- Header -- */
    /* ------------ */
    #header { float: left; width: 100%; margin: 0px 0 0 0; }
    #header img { float: left; }
    #header h1 { float: left; font-size: 80px; margin: 8px 0 0 0; }
    #header h1 a { color: #222; }
    #header img.description { float: right; margin: 0px 0 0 0; }
    
    /* --------- */
    /* -- Nav -- */
    /* --------- */
    #nav { float: left; margin: 0px -15px 0 0; width: 100%; background-color:#ccc;}
    .menu li { padding: 0; float: left; position: relative; background-color:#ccc;}
    .menu a { display: block; padding:  7px 35px 7px 10px; margin: 0; color: #222; font-size: 13px; text-transform: uppercase; font-weight: normal; background-color:#ccc; border-right: 1px #fff solid;  }
    .menu .current a { color: #222; background-color: #e5e5e5; }
    .menu .current a, .menu li:hover > a { color: #222; background-color: #fff; }
    .menu ul { background: #fff; display: none; margin: 0; padding: 0; width: 260px; position: absolute; top: 25px; left: 0px; border-right: #fff; }
    .menu ul li { float: none; margin: 0; padding: 0; }
    .menu ul li:hover a, .menu li:hover li a { color: #555;}
    .menu ul a:hover { background: #f2c32d !important; color: #222 !important; }
    .menu li:hover > ul { display: block; }
    .menu ul a { font-size: 16px; padding-left: 10px; text-transform: none; font-weight: normal; }
    .menu ul ul { left: 250px; top: -3px; }
    .menu li.current_page_item a { color: #222;  background-color: #e5e5e5;}
    .menu .sub-menu li.current_page_item a { color: #222; background-color: #fff;  }
    
    /* ---------------- */
    /* -- Front Page -- */
    /* ---------------- */
    #headline { float: left; margin: 55px 0 0 0; padding-bottom: 45px; border-bottom: 1px #bcbcbc solid; width: 100%; }
    #headline img { margin-left: -4px; }
    #headline h2 { font-size: 50px; line-height: 55px; margin-bottom: 10px; color: #222 !important; }
    #featured-section { clear: both; float: left; margin: 36px 0 0 0; padding-bottom: 0px; width: 100%;  }
    #featured-section a { color: #03a7c5; }
    #featured-section-image { float: left; background: url(images/featured-img-bg.png) no-repeat; width: 960px; height: 494px; }
    #featured-section-image img { margin: 1px 0 0 1px; }
    #featured-section-details { float: left; width: 450px; margin: 15px 0 5px 0; }
    #featured-section-details h2 { font-size: 15px; color: #222; margin-bottom: 8px; margin-top: 8px; text-transform: uppercase; }
    #featured-section-details p { font-size: 16px; line-height: 26px; }
    .more-details-button { float: left; background: url(images/portfolio-button.png) no-repeat; width: 88px; height: 16px; text-indent: -9999px; margin: 0 0 20px 0px; }
    .more-details-button:hover { float: left; background: url(images/portfolio-button-hover.png) no-repeat; }
    #recent-work { clear: both; float: left; margin: 2px 0 0 0; padding-bottom: 50px; padding-top: 10px; width: 100%; border-top: 1px #5c5c5c solid; }
    #recent-work h2 { font-weight: normal; font-size: 12px; color: #5c5c5c; padding: 0px 0 0 1px;}
    .recent-project { float: left; margin-left: 50px; width: 280px; margin-bottom: -50px; }
    .recent-project img { border: 1px #ddd solid; }
    .first { margin-left: 0; }
    .recent-project h3 { font-size: 12px; font-weight: bold; color: #222; margin: 15px 0 5px 0; }
    .recent-project p { font-size: 12px; }
    
    /* ------------- */
    /* -- Content -- */
    /* ------------- */
    #main { clear: both; float: left; margin: 35px 0 0 0; width: 100%; background-color:#fff; }
    .title { margin-top: 0; font-size: 28px; color: #000; margin-bottom: 5px; }
    #content { float: left; width: 450px; background-color: #fff; border-top: 1px #000 solid ;  padding: -10px 0 50px 0; padding-bottom: 0px; }
    
    /* --------------- */
    /* -- Portfolio -- */
    /* --------------- */
    #portfolio-content { float: left; margin: 20px 0 0 0px; }
    .portfolio-item { float: left; margin-left: 58px; margin-bottom: 40px; }
    .portfolio-item p { margin-bottom: 8px; padding-bottom: 7px; padding-top: 7px; border-bottom: 1px #000 solid; }
    .portfolio-item img { border: 1px #ddd solid; }
    .first { margin-left: 0; }
    #project-content { float: left; width: 960px; }
    #project-content h1 { font-size: 15px; font-weight: bold; color: #000; margin: 0 0 3px 0; padding: 15px 0 0 0; }
    #project-content a { color: #03a7c5; font-style: italic; font-weight:bold; }
    #project-content p { margin: 10px 0px 15px; }
    #project-image-large { float: right; }
    #project-image-large img { border: 0px #ddd solid; }
    .lightbox img {
        margin-bottom: 30px;
    }
    
    /* ----------- */
    /* -- Posts -- */
    /* ----------- */
    
    h2 { padding-top: 10px; }
    
    h3 { clear: left; }
    
    h3.post-meta { margin: -8px 0 20px 0; padding: 0; color: #888; font-size: 12px;  }
    #text-align { float: left; clear: left; }
    .alignleft {
    float: left;
    }
    .alignright {
    float: right;
    }
    
    h3.the-tags { margin: -8px 0 20px 0; padding: 0; color: #888; font-size: 12px;  }
    #text-align { float: left; clear: left; }
    .alignleft {
    float: left;
    }
    .alignright {
    float: right;
    }
    
    h3.the-category { margin: -8px 0 20px 0; padding: 0; color: #888; font-size: 12px;  }
    #text-align { float: left; }
    .alignleft {
    float: left;
    }
    .alignright {
    float: right;
    }
    
    h2 { clear: left; }
    
    h2.post-meta { margin: -8px 0 20px 0; padding: 0; color: #888; font-size: 12px;  }
    #text-align { float: left; clear: left; }
    .alignleft {
    float: left;
    }
    .alignright {
    float: right;
    }
    
    h2.the-tags { margin: -8px 0 20px 0; padding: 0; color: #888; font-size: 12px;  }
    #text-align { float: left; clear: left; }
    .alignleft {
    float: left;
    }
    .alignright {
    float: right;
    }
    
    h2.the-category { margin: -8px 0 20px 0; padding: 0; color: #888; font-size: 12px;  }
    #text-align { float: left; }
    .alignleft {
    float: left;
    }
    .alignright {
    float: right;
    }
    
    h6.alignright {float: right;}
    
    h6 {float: left; clear: both; text-align:right;}
    .post { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px #000 solid; width: 100%; float: left; }
    .post-title { font-style: none; margin-top: 20px; line-height: 24px; float: left; border-bottom: #ccc 1px solid;}
    .post-title a, .archive-title { font-style: none; color: #000; font-size: 20px; text-transform: uppercase;}
    .post-title a:hover, .archive-title a:hover { color: #ccc; }
    .more-link { display: block; margin: 10px 0 0 0; }
    .archive-title a { margin-bottom: 30px; }
    .post-navigation { font-size: 14px; }
    .post img {
    margin: 0 0 10px 0;
    max-width: 455px;
    width: expression(this.width > 100% ? 100%: true);
    height: auto;
    clear: left;
    float: left;
    }
    .post p a { font-style: italic; font-weight:bold;}
    
    .post em {font-style: italic; }
    
    /* ------------- */
    /* -- Sidebar -- */
    /* ------------- */
    #sidebar {  float: right; margin: -20px 20px 0px 25px; padding: -50px 0px 5px 30px; background-color:;  width: 206px; border-left: #ccc 1px solid; }
    .sidebar-title { text-transform: uppercase; font-weight:bold; margin: 0px 0px 10px 0px; color: #000; line-height: 1.4em; padding: 25px 0px 10px 8px; border-bottom: #ccc 1px solid; border-top: #000 1px solid;   }
    .sidebar-contact-title { color: #000; margin-bottom: 0; }
    #sidebar a { text-decoration: none; color: #000; padding: 0px 0px 10px 23px; }
    #sidebar h3 { margin: 20px 0px 10px 22px; padding: 26px 0px 0px 0px; }
    #sidebar a:hover { color: #ccc; }
    #sidebar li {font-size: 12px; padding: 0px 25px 10px 0px;}
    
    #sidebar2 { float: right; margin: -20px 20px 0px 25px; padding: -50px 0px 5px 30px; background-color:;  width: 206px; border-left: #ccc 1px solid; }
    .sidebar2-title { text-transform: uppercase; font-weight:bold; margin: 0px 0px 10px 0px; color: #000; line-height: 1.4em; padding: 25px 0px 8px 10px; border-bottom: #ccc 1px solid; border-top: #000 1px solid;  }
    .sidebar2-contact-title { color: #000; margin-bottom: 0; }
    #sidebar2 a { text-decoration: none; color: #000; padding: 0px 0px 10px 23px;    }
    #sidebar2 a li { text-decoration: none; color: #000; padding: 0px 0px 10px 23px;   }
    #sidebar2 h3 { margin: 20px 0px 10px 22px; padding: 26px 0px 0px 0px; }
    #sidebar2 a:hover { color: #ccc; }
    #sidebar2 li {font-size: 12px; padding: 0px 25px 10px 0px;   }
    #sidebar2 p {font-size: 12px; text-decoration: none; color: #000; padding: 0px 0px 10px 10px; 
    
    /* -------------- */
    /* -- Comments -- */
    /* -------------- */
    #comments { clear: both; float: left; width: 480px; border-top: 2px #eee solid; margin-top: -20px; }
    #comments h3 { padding-bottom: 0; }
    .commentlist { margin: 25px 0 30px 0; }
    .commentlist .comment { border: 1px solid #dddddd; padding: 15px; margin: 15px 0 0 0; background: url(images/input-bg.png) repeat-x; }
    .commentlist .fn { color: #555555; font-size: 18px; margin-bottom: 15px; display: block; }
    .commentlist .url { color: #9e1c1c; font-size: 18px; }
    .commentlist .comment-meta { color: #888888; text-transform: uppercase; font-size: 10px; margin: -4px 0 0 0; }
    .commentlist img { float: right; width: 25px; height: 25px; margin: 0 0 0 7px; padding: 2px; border: 1px solid #cccccc; }
    .commentlist p { margin: 10px 0 10px 0; }
    .commentlist .comment-reply-link { margin: 5px 0 0 -7px; display: block; }
    .commentlist em { font-style: italic; font-size: 12px; }
    
    /* respond form */
    #respond h3 { margin-bottom: 10px; }
    #respond .cancel-comment-reply { padding: 0 0 10px 0; }
    #commentform { width: 480px; margin: 0 0 0 0; }
    #commentform input { background: url(images/input-bg.png) repeat-x; float: left; color: #555555; width: 255px; font-size: 14px; padding: 12px 12px 12px 12px; margin-bottom: 20px; font-family: arial, sans-serif; border: 1px #ddd solid; }
    #commentform textarea { background: url(images/input-bg.png) repeat-x; color: #555555; width: 456px; height: 238px;  margin: 5px 0 0 0; font-size: 14px; padding: 12px 12px; font-family: arial, sans-serif; border: 1px #ddd solid; line-height: 20px; }
    #commentform .submit { background: url(images/comment-button.png) no-repeat; cursor: pointer; margin: 25px 0 0 -7px; color: #fff; width: 175px; height: 40px; border: none; padding: 8px 0; text-indent: -9999px; }
    #commentform .submit:hover { background: url(images/comment-button-hover.png) no-repeat; color: #fff; }
    #commentform label { float: left; padding: 8px 0 0 20px; text-transform: uppercase; color: #888888; font-size: 10px; }
    #commentform .logged { margin: 0; }
    .commentlist .comment-reply-link { margin: 10px 0 0 0; color: #9e1c1c; font-size: 12px; }
    .commentlist .comment-reply-link:hover { color: #555; }
    
    /* ------------------ */
    /* -- Contact Form -- */
    /* ------------------ */
    #contact-form { width: 300px; }
    #contact h2 { padding-top: 20px; }
    #contact-form input { border: 1px #ddd solid; padding: 15px; width: 250px; margin: 0 0 15px 0; font-family: arial; color: #555; font-size: 12px; background: url(images/input-bg.png) repeat-x; }
    #contact-form textarea { border: 1px #ddd solid; padding: 15px; width: 375px; margin: 0 0 15px 0; font-family: arial; color: #555; font-size: 12px; background: url(images/textarea-bg.png) repeat-x; line-height: 18px; }
    #contact-form .submit { background: url(images/submit-button.png) no-repeat; cursor: pointer; margin: 0 0 0 0px; color: #fff; width: 175px; height: 40px; border: none; padding: 8px 0; text-indent: -9999px; }
    #contact-form .submit:hover { background: url(images/submit-button-hover.png) no-repeat; }
    #response { border: 1px #ddd solid; padding: 15px; color: #9e1c1c; background-color: #eee; }
    .hide { display: none; }
    
    /* ------------ */
    /* -- Footer -- */
    /* ------------ */
    #footer { clear: both; float: left; padding: 10px 0 50px 0; border-top: ; margin: 10px 0 0 0; width: 100%; }
    #footer p { font-size: 12px; color: #888;  }
    #footer .copyright { float: left; }
    #footer .design { float: right; }
    
    #sidebar a.rsswidget {
    display: block;
    list-style-position: inside;
    }
    
    #sidebar2 a.rsswidget {
    display:block;
    list-style-position: inside;
    }
  12. chikajm
    Member
    Posted 1 year ago #

    By the way... I tried it with and without that list-style-position: inside;

    It still didn't work...
    C.

  13. JungleSpace.net
    Member
    Posted 1 year ago #

    list-style-position is an attribute for the UL element not the A element.

    You can refer here.

    http://www.w3schools.com/cssref/pr_list-style-position.asp

    The CSS file has the UL list-style set to none. Even then setting the list-style-position attribute will not have any effect.

  14. chikajm
    Member
    Posted 1 year ago #

    Hi, I'm back.
    If you're still interested in helping I would really appreciate it.
    I STILL cannot get this to work. I was considering starting again with an entirely new theme because I could not get the RSS feed to display properly. Can you please help?

    I don't quite understand what you're suggesting.
    Do I need to find the correct code to alter the A UL element?
    As you say the list-style-position will not work. Is that because the UL are links?

    Apologies for my lack of knowledge on this. I'm still very amateur with my CSS.

    Many thanks,
    C.

Topic Closed

This topic has been closed to new replies.

About this Topic