Trying to change some text elements. - CSS-Tricks

This topic is empty.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts

August 29, 2013 at 10:43 am #148518

Participant

Hello everyone,

I am new here and was wondering if you all might be able to help me out. And I apologize if I am not posting to the correct topic area.

So here is my current dilemma. I have a poll posted on my web site and at the bottom is what appears to be a footer in silver text that is virtually impossible to see. After playing around with Firebug for Mozilla Firefox and coming to the conclusion that the color orange was going to a much better choice.

I am currently using Google Blogger and their poll widget that they have included for free use. Using Firebug I am able to see how the change would work but I am unable to find the line of code that I need to get to to change the color.

My site is http://www.TenkaraGrasshopper.com so I hope that you guys might be able to help me out. Thanks

August 29, 2013 at 1:00 pm #148530

Jay Honnold

Participant

Hey TenkaraGrasshopper!

In order to change the color of the font, you are going to just need to change the CSS that relates to it.

Below I have pasted the source code to the frame that holds your poll

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css"> body {font: normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif}</style>
<style type="text/css">
  html, body {
    border: 0px;
    margin: 0px;
    padding: 0px 0px 0px 1px;
    background-color:transparent;
  }

  body, .questionText, .answerText {
    color:#333;
  }

  .answerText, .resultText, .resultBar, .pollStats, .voteButton, a, .errormsg {
    font-size: 12px;
  }
  .questionText {
    font-weight:bold;
  }

  a:link, a:visited, a:hover, a:active {
    color: #c30;
  }

  fieldset {
    border:0 none;
    padding:0;
    margin:5px 0;
  }
  .pollStats {
    color:silver;
    display:block;
    margin:5px 0;
  }
  .resultBar {
    border:none;
    margin-top:1px;
    margin-bottom:1px;
    padding-top:1px;
    padding-bottom:1px;

      background-color:#c30;

    white-space:nowrap;
  }
  td.answerText {
    border:0px;
    padding-left:0px;
    padding-top:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
  }
  td.answerText>div {
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
  }
  .resultText {


      color: #b7b7b7;


    border:solid 1px  #c30 ;
    padding-top:2px;
    white-space:nowrap;
  }
  td input {
    height:13px !important;
  }
  div.errormsg {
    border:none;
    color: #990000;
  }

  div.questionText {
    display: none;
  }

  </style>
</head>
<body><div style="width:100%;" id="rootCont">
<div class="questionText">What Tenkara topics would you like to see on TenkaraGrasshopper in the future?</div>
<table cellspacing="0" border="0" cellpadding="0" style="width:100%; margin: 0px; padding: 0px; border: 0px; ">
<tr><td class="answerText"><div title="Rod reviews">Rod reviews</div></td>
<td style="margin-top:2px; padding-top:2px;"><div style="position:relative;z-index:0;"><div class="resultText" title="Rod reviews"> 
1
(50%)</div>
<div class="resultBar" title="Rod reviews" style="position:absolute;left:0px;top:0px;z-index:-1;width:50%"> </div></div></td></tr> <tr><td class="answerText"><div title="Tenkara Fly Patterns">Tenkara Fly Patterns</div></td>
<td style="margin-top:2px; padding-top:2px;"><div style="position:relative;z-index:0;"><div class="resultText" title="Tenkara Fly Patterns"> 
1
(50%)</div>
<div class="resultBar" title="Tenkara Fly Patterns" style="position:absolute;left:0px;top:0px;z-index:-1;width:50%"> </div></div></td></tr> <tr><td class="answerText"><div title="Accessory Reviews">Accessory Reviews</div></td>
<td style="margin-top:2px; padding-top:2px;"><div style="position:relative;z-index:0;"><div class="resultText" title="Accessory Reviews"> 
0
(0%)</div>
<div class="resultBar" title="Accessory Reviews" style="position:absolute;left:0px;top:0px;z-index:-1;width:0%"></div></div></td></tr> <tr><td class="answerText"><div title="Trip reports">Trip reports</div></td>
<td style="margin-top:2px; padding-top:2px;"><div style="position:relative;z-index:0;"><div class="resultText" title="Trip reports"> 
1
(50%)</div>
<div class="resultBar" title="Trip reports" style="position:absolute;left:0px;top:0px;z-index:-1;width:50%"> </div></div></td></tr> <tr><td class="answerText"><div title="History">History</div></td>
<td style="margin-top:2px; padding-top:2px;"><div style="position:relative;z-index:0;"><div class="resultText" title="History"> 
0
(0%)</div>
<div class="resultBar" title="History" style="position:absolute;left:0px;top:0px;z-index:-1;width:0%"></div></div></td></tr> <tr><td class="answerText"><div title="Technique ">Technique </div></td>
<td style="margin-top:2px; padding-top:2px;"><div style="position:relative;z-index:0;"><div class="resultText" title="Technique "> 
1
(50%)</div>
<div class="resultBar" title="Technique " style="position:absolute;left:0px;top:0px;z-index:-1;width:50%"> </div></div></td></tr> <tr><td class="answerText"><div title="Book reviews">Book reviews</div></td>
<td style="margin-top:2px; padding-top:2px;"><div style="position:relative;z-index:0;"><div class="resultText" title="Book reviews"> 
0
(0%)</div>
<div class="resultBar" title="Book reviews" style="position:absolute;left:0px;top:0px;z-index:-1;width:0%"></div></div></td></tr> <tr><td class="answerText"><div title="Videos">Videos</div></td>
<td style="margin-top:2px; padding-top:2px;"><div style="position:relative;z-index:0;"><div class="resultText" title="Videos"> 
0
(0%)</div>
<div class="resultBar" title="Videos" style="position:absolute;left:0px;top:0px;z-index:-1;width:0%"></div></div></td></tr> <tr><td class="answerText"><div title="Reviews of other Tenkara blogs">Reviews of other Tenkara blogs</div></td>
<td style="margin-top:2px; padding-top:2px;"><div style="position:relative;z-index:0;"><div class="resultText" title="Reviews of other Tenkara blogs"> 
0
(0%)</div>
<div class="resultBar" title="Reviews of other Tenkara blogs" style="position:absolute;left:0px;top:0px;z-index:-1;width:0%"></div></div></td></tr> <tr><td class="answerText"><div title="Random Stuff (if so suggestions greatly appreciated)">Random Stuff (if so suggestions greatly appreciated)</div></td>
<td style="margin-top:2px; padding-top:2px;"><div style="position:relative;z-index:0;"><div class="resultText" title="Random Stuff (if so suggestions greatly appreciated)"> 
1
(50%)</div>
<div class="resultBar" title="Random Stuff (if so suggestions greatly appreciated)" style="position:absolute;left:0px;top:0px;z-index:-1;width:50%"> </div></div></td></tr></table>
<br>

<div class="pollStats">Votes so far:  2 
<br>
Poll closed
<br></div></div></body>
<iframe id="commframe" style="display: none;"></iframe>
<script type="text/javascript">
      try {
        var host = "www.tenkaragrasshopper.com";
        var baseUri = 'http://' + host + '/robots.txt';
        document.getElementById('commframe').src = baseUri +
            '#' + document.getElementById('rootCont').offsetHeight;
      } catch(o) { }
    </script></html>

Within this you can find where it says “Votes so far:” <div class="pollStats">Votes so far: 2 <br>Poll closed<br></div>

The CSS class that relates to this is pollStats.

That can be found here: .pollStats { color:silver; display:block; margin:5px 0; }

You can now simply change the silver to any color you desire, such as orange or any #, rgb, or rgba color!

I hope this helps,

Zomby

August 30, 2013 at 7:52 am #148604

TenkaraGrasshopper

Participant

Thanks zomby I appreciate it. The only problem I am having is where to find that frame. By that I mean what line do I need to find to get to that. The Blogger HTML editor I am using does not seem to be giving me the right stuff. So can you let me know what line I need to look at to find this. Thanks, your help is greatly appreciated.

I am very new to HTML coding so I am very slow at learning but I am also learning some cool stuff and with your help I hope to get even better.

August 30, 2013 at 10:09 am #148613

Paulie_D

Member

Doubtful if you will be able to change that class using the Blogger interface unless there is a widget setting.

You would have to download the template, edit the CSS manually and re-upload the template.

Just make sure you take/keep a backup.

September 5, 2013 at 8:38 am #149160

TenkaraGrasshopper

Participant

OK guys. So I am unable to find the CSS code in the html editor on Blogger. I was wondering if any of you might be able to help me achieve this by maybe doing a remote admin with me and show me how to do this. If you are interested please feel free to contact me and hopefully we can get this worked out. Thanks guys.

September 5, 2013 at 8:56 am #149162

Paulie_D

Member

A closed poll with only 2 responses….just remove it would be the best option IMO.

If you need to add a new poll, I would assume that there would be some configuration options

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The forum ‘Other’ is closed to new topics and replies.