Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts

    indenting words slightly on website

    Hi Guys,

    On this blog aaronhowarth.blogspot.com Im looking to indent the textboxes underneath "popular posts" slightly. Not the box itself but the text WITHIN the boxes. so at the minute the word "test" is all the way against the side, I want these to be slightly indented. Any ideas where abouts? This is a LOT of code and I'm not sure how to determine which "widget" this would be?

    CSS:

    Code:
    body {
    background:$bgcolor;
    color:$textcolor;
    font-family:Georgia Serif;
    font-size:small;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:normal;
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
    margin-top:0;
    text-align:center;
    }
    a:link {
    color:$linkcolor;
    text-decoration:none;
    }
    a:visited {
    color:$visitedlinkcolor;
    text-decoration:none;
    }
    a:hover {
    color:#333333;
    text-decoration:underline;
    }
    a img {
    border-bottom-width:0;
    border-top-width:0;
    }
    #header-wrapper {
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-attachment:scroll;
    background-color:transparent;
    background-image:url("http://1.bp.blogspot.com/_8GxSJXcDIwk/S55TXhkSXbI/AAAAAAAAAgc/iU0v_wT_fuM/s1600/header-bg.gif");
    background-position:0 0;
    background-repeat:no-repeat;
    border-bottom-color:-moz-use-text-color;
    border-bottom-style:none;
    border-bottom-width:medium;
    border-top-color:-moz-use-text-color;
    border-top-style:none;
    border-top-width:medium;
    height:190px;
    margin-bottom:0;
    margin-left:auto;
    margin-right:auto;
    margin-top:63px;
    width:1038px;
    }
    #header-inner {
    background-position:center center;
    margin-left:auto;
    margin-right:auto;
    }
    #header {
    border-bottom-color:-moz-use-text-color;
    border-bottom-style:none;
    border-bottom-width:medium;
    border-top-color:-moz-use-text-color;
    border-top-style:none;
    border-top-width:medium;
    color:$pagetitlecolor;
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
    margin-top:0;
    text-align:left;
    }
    #header h1 {
    font: $pagetitlefont;
    letter-spacing:-2px;
    line-height:normal;
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
    margin-top:0;
    padding-bottom:4px;
    padding-left:55px;
    padding-right:20px;
    padding-top:60px;
    text-transform:none;
    }
    #header a {
    color:$pagetitlecolor;
    text-decoration:none;
    }
    #header a:hover {
    color:$pagetitlecolor;
    }
    #header .description {
    color: $descriptioncolor;
    font: $descriptionfont;
    letter-spacing:0;
    line-height:normal;
    margin-bottom:5px;
    margin-left:5px;
    margin-right:5px;
    margin-top:0;
    max-width:700px;
    padding-bottom:15px;
    padding-left:55px;
    padding-right:20px;
    padding-top:0;
    text-transform:none;
    }
    #header img {
    margin-left:auto;
    margin-right:auto;
    }
    #outer-wrapper {
    font: $bodyfont;
    line-height:normal;
    margin-bottom:0;
    margin-left:auto;
    margin-right:auto;
    margin-top:0;
    padding-bottom:0;
    padding-left:0;
    padding-right:0;
    padding-top:0;
    text-align:left;
    width:1038px;
    }
    #main-wrapper {
    float:left;
    margin-left:55px;
    overflow-x:hidden;
    overflow-y:hidden;
    width:600px;
    word-wrap:break-word;
    }
    #sidebar-wrapper {
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-attachment:scroll;
    background-color:#EDEDED;
    background-image:none;
    background-position:0 0;
    background-repeat:repeat;
    border-bottom-color:-moz-use-text-color;
    border-bottom-style:none;
    border-bottom-width:medium;
    float:right;
    margin-right:55px;
    margin-top:22px;
    overflow-x:hidden;
    overflow-y:hidden;
    width:310px;
    word-wrap:break-word;
    }
    h2 {
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-attachment:scroll;
    background-color:#882323;
    background-image:none;
    background-position:0 0;
    background-repeat:repeat;
    color:$sidebarcolor;
    font:$headerfont;
    letter-spacing:0;
    line-height:1.4em;
    margin-bottom:5px;
    margin-left:-15px;
    margin-right:-15px;
    margin-top:0;
    padding-bottom:5px;
    padding-left:15px;
    padding-right:10px;
    padding-top:5px;
    text-shadow:0 0 1px #000000;
    text-transform:none;
    }
    h2.date-header {
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-attachment:scroll;
    background-color:transparent;
    background-image:none;
    background-position:0 0;
    background-repeat:repeat;
    color:#666666;
    font-family:arial;
    font-size:12px;
    font-weight:normal;
    margin-bottom:0.5em;
    margin-left:0;
    margin-right:0;
    margin-top:1.5em;
    padding-bottom:0;
    padding-left:0;
    padding-right:0;
    padding-top:0;
    text-shadow:none;
    }
    .post {
    border-bottom-color:-moz-use-text-color;
    border-bottom-style:none;
    border-bottom-width:medium;
    border-top-color:-moz-use-text-color;
    border-top-style:none;
    border-top-width:medium;
    margin-bottom:1.5em;
    margin-left:0;
    margin-right:0;
    margin-top:0.5em;
    padding-bottom:1.5em;
    }
    .post h3 {
      color:$titlecolor;
    font-size:22px;
    font-weight:normal;
    line-height:1.4em;
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
    margin-top:0.25em;
    padding-bottom:4px;
    padding-left:0;
    padding-right:0;
    padding-top:0;
    }
    .post h3 a, .post h3 a:visited, .post h3 strong {
      color:$titlecolor;
    display:block;
    font-weight:bold;
    text-decoration:none;
    }
    .post h3 strong, .post h3 a:hover {
    color:#333333;
    }
    .post-body {
    font-size:14px;
    line-height:1.6em;
    margin-bottom:0.75em;
    margin-left:0;
    margin-right:0;
    margin-top:0;
    }
    .post-body blockquote {
    line-height:1.3em;
    }
    .post-footer {
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-attachment:scroll;
    background-color:#EEEEEE;
    background-image:none;
    background-position:0 0;
    background-repeat:repeat;
    border-top-color:#CCCCCC;
    border-top-style:solid;
    border-top-width:1px;
    color:#333333;
    font: $postfooterfont;
    letter-spacing:0;
    line-height:1.4em;
    margin-bottom:0.75em;
    margin-left:0;
    margin-right:0;
    margin-top:0.75em;
    padding-bottom:5px;
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    text-shadow:0 1px 0 #FFFFFF;
    text-transform:none;
    }
    .comment-link {
    background:url("http://1.bp.blogspot.com/_8GxSJXcDIwk/S31yXopT95I/AAAAAAAAAHg/dDY1auLv8ec/s1600/comment_reply.png") no-repeat scroll left center transparent;
    margin-left:0.6em;
    padding-left:19px;
    }
    .post img, table.tr-caption-container {
    border:1px solid #CCCCCC;
    padding:1px;
    }
    .tr-caption-container img {
    border-bottom-color:-moz-use-text-color;
    border-bottom-style:none;
    border-bottom-width:medium;
    border-top-color:-moz-use-text-color;
    border-top-style:none;
    border-top-width:medium;
    padding-bottom:0;
    padding-left:0;
    padding-right:0;
    padding-top:0;
    }
    .post blockquote {
    font-family:georgia;
    margin-bottom:1em;
    margin-left:20px;
    margin-right:20px;
    margin-top:1em;
    }
    .post blockquote p {
    margin-bottom:0.75em;
    margin-left:0;
    margin-right:0;
    margin-top:0.75em;
    }
    #comments h4 {
    color:#666666;
    font-size:14px;
    font-weight:bold;
    letter-spacing:0;
    line-height:1.4em;
    margin:1em 0;
    text-transform:none;
    }
    #comments-block {
    line-height:1.6em;
    margin:1em 0 1.5em;
    }
    #comments-block .comment-author {
    -moz-background-inline-policy:continuous;
    background:none repeat scroll 0 0 #EEEEEE;
    border:1px solid #EEEEEE;
    font-size:15px;
    font-weight:normal;
    margin-right:20px;
    padding:5px;
    }
    #comments .blogger-comment-icon, .blogger-comment-icon {
    -moz-background-inline-policy:continuous;
    background:none repeat scroll 0 0 #EEEEEE;
    border-color:#EEEEEE;
    border-style:solid;
    border-width:2px 1px 1px;
    line-height:16px;
    padding:5px;
    }
    #comments-block .comment-body {
    border-left:1px solid #EEEEEE;
    border-right:1px solid #EEEEEE;
    margin-left:0;
    margin-right:20px;
    padding:7px;
    }
    #comments-block .comment-footer {
    border-bottom:1px solid #EEEEEE;
    border-left:1px solid #EEEEEE;
    border-right:1px solid #EEEEEE;
    font-size:11px;
    line-height:1.4em;
    margin:-0.25em 20px 2em 0;
    padding:5px;
    text-transform:none;
    }
    #comments-block .comment-body p {
    margin:0 0 0.75em;
    }
    .deleted-comment {
    color:gray;
    font-style:italic;
    }
    #blog-pager-newer-link {
    float:left;
    background:none repeat scroll 0 0 #EEEEEE;
    border:1px solid #CCCCCC;
    padding:5px;
    }
    #blog-pager-older-link  {
    background:none repeat scroll 0 0 #EEEEEE;
    border:1px solid #CCCCCC;
    float:right;
    padding:5px;
    }
    #blog-pager {
    text-align:center;
    }
    .feed-links {
    clear:both;
    line-height:2.5em;
    }
    .sidebar {
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-attachment:scroll;
    background-color:transparent;
    background-image:none;
    background-position:0 0;
    background-repeat:no-repeat;
      color: $sidebartextcolor;
    font-size:14px;
    line-height:1.5em;
    margin-bottom:15px;
    margin-left:15px;
    margin-right:15px;
    margin-top:0;
    padding-bottom:0;
    padding-left:0;
    padding-right:0;
    padding-top:0;
    }
    .sidebar ul {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
    margin-top:0;
    padding-bottom:0;
    padding-left:0;
    padding-right:0;
    padding-top:0;
    }
    .sidebar li {
    background:none repeat scroll 0 0 #F8F8F8;
    border-color:#E8E8E8 #CCCCCC #CCCCCC #E8E8E8;
    border-style:solid;
    border-width:1px;
    line-height:1.5em;
    margin:0 0 4px;
    padding:3px 6px;
    }
    .sidebar .widget, .main .widget {
    border-bottom-color:-moz-use-text-color;
    border-bottom-style:none;
    border-bottom-width:medium;
    border-top-color:-moz-use-text-color;
    border-top-style:none;
    border-top-width:medium;
    margin-bottom:1.5em;
    margin-left:0;
    margin-right:0;
    margin-top:0;
    padding-bottom:0;
    padding-left:0;
    padding-right:0;
    padding-top:0;
    }
    .main .Blog {
    border-bottom-width:0;
    }
    .profile-img {
    border-bottom-color:#CCCCCC;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-top-color:#CCCCCC;
    border-top-style:solid;
    border-top-width:1px;
    float:left;
    margin-bottom:5px;
    margin-left:0;
    margin-right:5px;
    margin-top:0;
    padding-bottom:4px;
    padding-left:4px;
    padding-right:4px;
    padding-top:4px;
    }
    .profile-data {
    color:#999999;
    font-family:'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
    font-size:78%;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:normal;
    font-variant:normal;
    font-weight:bold;
    letter-spacing:0.1em;
    line-height:1.6em;
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
    margin-top:0;
    text-transform:uppercase;
    }
    .profile-datablock {
    margin-bottom:0.5em;
    margin-left:0;
    margin-right:0;
    margin-top:0.5em;
    }
    .profile-textblock {
    line-height:1.6em;
    margin-bottom:0.5em;
    margin-left:0;
    margin-right:0;
    margin-top:0.5em;
    }
    .profile-link {
    font-family:'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
    font-size:78%;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    letter-spacing:0.1em;
    line-height:normal;
    text-transform:uppercase;
    }
    #twitter-badge {
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-attachment:scroll;
    background-color:transparent;
    background-image:url("http://4.bp.blogspot.com/_8GxSJXcDIwk/S55TonXpr3I/AAAAAAAAAgk/hI_fGv64DM8/s1600/twitter-badge-maroon.png");
    background-position:0 0;
    background-repeat:repeat;
    height:139px;
    left:740px;
    position:absolute;
    top:-5px;
    width:218px;
    }
    #twitter-badge a {
    display:block;
    height:139px;
    text-indent:-9999px;
    width:218px;
    }
    #PageList1 {
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-attachment:scroll;
    background-color:#882323;
    background-image:none;
    background-position:0 0;
    background-repeat:repeat;
    font-family:rockwell,"Courier New",Courier,georgia,arial,helvetica;
    font-size:14px;
    margin-bottom:0;
    margin-left:auto;
    margin-right:auto;
    margin-top:0;
    text-transform:uppercase;
    width:940px;
    }
    #PageList1 .widget-content {
    }
    #PageList1 a {
    color:#750000;
    text-shadow:0 1px 0 #FFFFFF;
    }
    body#layout #searchform {
    display:none;
    }
    body#layout #twitter-entry {
    display:none;
    }
    body#layout #crosscol-wrapper {
    display:none;
    }
    body#layout #searchbox {
    display:none;
    }
    #Attribution1 {
    display:none;
    }
    body#layout #footer {
    display:none;
    }
    
    #content-wrapper {
    background-image:url("http://4.bp.blogspot.com/_8GxSJXcDIwk/S55UFgjNkWI/AAAAAAAAAgs/y7C2McCfhBU/s1600/wrap-bg.gif");
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
    margin-top:0;
    padding-bottom:0;
    padding-left:0;
    padding-right:0;
    padding-top:0;
    }
    #searchform {
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-attachment:scroll;
    background-color:#E5E5E5;
    background-image:none;
    background-position:0 0;
    background-repeat:repeat;
    border-bottom-color:#FFFFFF;
    border-bottom-style:solid;
    border-bottom-width:20px;
    border-top-color:#882323;
    border-top-style:solid;
    border-top-width:2px;
    height:40px;
    text-align:left;
    }
    input.inputs {
    margin-bottom:0;
    margin-left:24px;
    margin-right:0;
    margin-top:8px;
    width:185px;
    }
    input.go {
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-attachment:scroll;
    background-color:#AB1515;
    background-image:none;
    background-position:0 0;
    background-repeat:repeat;
    color:#FFFFFF;
    font-family:rockwell,georgia;
    }
    #twitter-entry {
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-attachment:scroll;
    background-color:transparent;
    background-image:url("http://1.bp.blogspot.com/_8GxSJXcDIwk/S55UORtvQ4I/AAAAAAAAAg0/mmu9tNxfN4c/s1600/twitter.gif");
    background-position:0 0;
    background-repeat:repeat;
    float:right;
    height:91px;
    margin-bottom:10px;
    margin-right:57px;
    margin-top:46px;
    width:334px;
    }
    .crosscol .PageList li, .footer .PageList li {
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-attachment:scroll;
    background-color:transparent;
    background-image:url("http://1.bp.blogspot.com/_8GxSJXcDIwk/S55UVzbtxEI/AAAAAAAAAg8/Gg3z6zQy04Q/s1600/cat-nav-bg.png");
    background-position:0 0;
    background-repeat:repeat;
    border-bottom-color:#999999;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-top-color:#999999;
    border-top-style:solid;
    border-top-width:1px;
    float:left;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin-bottom:7px;
    margin-left:0.75em;
    margin-right:0;
    margin-top:7px;
    padding-bottom:4px;
    padding-left:12px;
    padding-right:12px;
    padding-top:4px;
    }
    div#twitter_div {
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
    margin-top:0;
    padding-bottom:0;
    padding-left:0;
    padding-right:0;
    padding-top:0;
    }
    ul#twitter_update_list  {
    font-family:georgia;
    font-size:12px;
    font-style:italic;
    list-style:none outside none;
    margin:10px 30px 18px 95px;
    padding:0;
    }
    .widget-content {
    margin-bottom:0;
    margin-left:0;
    margin-right:0;
    margin-top:0;
    padding-bottom:0;
    padding-left:0;
    padding-right:0;
    padding-top:0;
    }
    #footer {
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-attachment:scroll;
    background-color:transparent;
    background-image:url("http://2.bp.blogspot.com/_8GxSJXcDIwk/S55Ue12CYvI/AAAAAAAAAhE/7QO2ifbe7SM/s1600/footer-bg.gif");
    background-position:left top;
    background-repeat:no-repeat;
    clear:both;
    height:106px;
    margin-bottom:0;
    margin-left:auto;
    margin-right:auto;
    margin-top:0;
    padding-bottom:0;
    padding-left:49px;
    padding-right:49px;
    padding-top:40px;
    position:relative;
    text-align:left;
    width:940px;
    }
    #credits {
    clear:both;
    display:block;
    font-family:georgia;
    font-size:11px;
    padding-bottom:0;
    padding-left:0;
    padding-right:7px;
    padding-top:2px;
    text-align:right;
    text-shadow:0 1px 0 #FFFFFF;
    }
    HTML:

    Code:
    <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
                <b:includable id='main'>
      <b:if cond='data:title'><h2><data:title/></h2></b:if>
      <div class='widget-content popular-posts'>
        <ul>
          <b:loop values='data:posts' var='post'>
          <li>
            <b:if cond='data:showThumbnails == &quot;false&quot;'>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (1) No snippet/thumbnail -->
                <a expr:href='data:post.href'><data:post.title/></a>
              <b:else/>
                <!-- (2) Show only snippets -->
                <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                <div class='item-snippet'><data:post.snippet/></div>
              </b:if>
            <b:else/>
              <b:if cond='data:showSnippets == &quot;false&quot;'>
                <!-- (3) Show only thumbnails -->
                <div class='item-thumbnail-only'>
                  <b:if cond='data:post.thumbnail'>
                    <div class='item-thumbnail'>
                      <a expr:href='data:post.href' target='_blank'>
                        <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                      </a>
                    </div>
    I thought there would be some CSS for "widget-content popular-posts" but there doesn't seem to be???

    Thanks
    Aaron
    Don't Click Here!

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    264
    Thanks
    49
    Thanked 1 Time in 1 Post
    Try this in your CSS.

    .item-title {
    padding-left: 1em;
    }

  • Users who have thanked SRD75 for this post:

    aaronoafc (05-24-2013)

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SRD75 View Post
    Try this in your CSS.

    .item-title {
    padding-left: 1em;
    }
    Excellent! That did it. Thanks so much
    Don't Click Here!

  • #4
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Hmmm I thought it had however this didn't work!? Got it in my CSS on aaronhowarth.blogspot.com but it's still the same!?
    Don't Click Here!

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,276
    Thanks
    28
    Thanked 272 Times in 266 Posts
    Quote Originally Posted by aaronoafc View Post
    Any ideas where abouts? This is a LOT of code and I'm not sure how to determine which "widget" this would be?
    Every browser except IE now allows you to right-click an element and select Inspect Element to go to the code for it. In IE, you have to press F12, click the cursor icon in the F12 Developer Tools pane that appears, then click the relevant element for the same result.

    Quote Originally Posted by aaronoafc View Post
    Hmmm I thought it had however this didn't work!? Got it in my CSS on aaronhowarth.blogspot.com but it's still the same!?
    Code:
    .popular-posts li { padding: 1em !important; }
    /* or */
    .popular-posts li { text-indent: 1em; }
    You apparently have padding specified somewhere else, so I had to force the code to take effect using !important. It'd be a good idea to track that down and change it there to avoid confusing code, but an !important declaration can be used as an override in the meantime.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    aaronoafc (05-25-2013)

  • #6
    New Coder
    Join Date
    Feb 2012
    Posts
    85
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Arbitrator View Post
    Every browser except IE now allows you to right-click an element and select Inspect Element to go to the code for it. In IE, you have to press F12, click the cursor icon in the F12 Developer Tools pane that appears, then click the relevant element for the same result.

    Code:
    .popular-posts li { padding: 1em !important; }
    /* or */
    .popular-posts li { text-indent: 1em; }
    You apparently have padding specified somewhere else, so I had to force the code to take effect using !important. It'd be a good idea to track that down and change it there to avoid confusing code, but an !important declaration can be used as an override in the meantime.
    Thanks so much! That did the trick
    Don't Click Here!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •