Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Using footer CSS style on other part of survey page

Hello all,

On my survey, I'm trying to apply the footer section CSS style to the Header 1 section. To achieve that, I've called the "footer" class, like usually is done in the footer section. Predictably, because the Header 1 section has it's own CSS style, not all of the footer CSS style properties were applied to the selected text. My question is if (and how) can I achieve what I want? (I do not want to put the text in the footer section because I want to display it above the question box)

Here's the code (in the "Header 1" box):
<p>1st paragraph (Header 1 style)</p>

<div class="footer">

<p>2nd paragraph (Footer style)</p>

<p>3rd paragraph (Footer style)</p>
</div>


Thank you all in advance,
João Fernandes
asked Oct 29, 2012 by João Fernandes Bronze (2,040 points)
retagged Nov 15, 2012 by Walter Williams
your exact code works fine by me? (ssiweb 7.0.26 which I should upgrade :))
Which version of SSI Web are you running?
I'm running version 7.0.26.

1.1. Original "Header 1" box text: http://i.imgbox.com/acrMCV1f.png
1.2. HTML code:
<p>Qual o valor, em média, da sua factura mensal de electricidade?</p>

<p>(se tem uma ideia do valor médio da sua factura mensal de electricidade, por favor indique-o)</p>

<p>(se for empresário / responsável por um escritório / serviço / agência, indique o valor médio mensal da factura de electricidade da sua empresa / escritório / serviço / agência)</p>
</div>

2.1. "Header 1" box text with footer style applied: http://i.imgbox.com/adv1wS3o.png
2.2. HTML code:
<p>Qual o valor, em média, da sua factura mensal de electricidade?</p>

<div class="footer">

<p>(se tem uma ideia do valor médio da sua factura mensal de electricidade, por favor indique-o)</p>

<p>(se for empresário / responsável por um escritório / serviço / agência, indique o valor médio mensal da factura de electricidade da sua empresa / escritório / serviço / agência)</p>
</div>


3. How I want the text to appear (in red, an example of this theme footer text style): http://i.imgbox.com/acy2srrG.png

Thank you all,
João

1 Answer

+1 vote
Not sure what the problem is.  When I open the sample CiW study from the help menu, which has a style sheet applied to it, and I use code like this:

<div class="footer">
this is my sample div
</div>

it turns it grey just like the footer of the question.

I'd try to remove the p tags and just have some sample text to see if perhaps there is something in the style being more specific than the div class, so it's "winning."  You can also open up the style sheet you currently have applied (its in the graphics folder of your study) and find the section for the footer to see what color the text is.  Write that then directly in using a font tag or make your own class to add to the style?
answered Oct 30, 2012 by Brian McEwan Gold Sawtooth Software, Inc. (38,765 points)
Hello Brian,

Thanks for your answer. Indeed, when I use the CiW sample study, using that code works. But in my questionnaire in particular that isn't happening. Though, some of the footer properties are being applied: the letter color is, as expected, turned grey, for instance (see the images in my last post). This happens with or without using paragraphs.

I'm not by far a CSS expert, but I thought that applying the footer style would put the text inside the div with that exact style. What I see now is that the color is applied correctly, but the font remains bold (just like the Header 1 style). Also, the text has an indentation that I don't know where it came from, since I made little to no changes in the .css file that I can remember. But I'll check it again.

Perhaps the best way to illustrate this is presenting a mixed example: http://i.imgbox.com/adsaxN1w.png

HTML code:
<p>Header 1 text within a paragraph</p>

<div class="footer">
Header 1 text inside the footer class
</div>

Header 1 "plain" text
I'm no CSS expert either.  I would bet that either you've changed the question via the paintbrush icon to bold the entire Header 1 area, or because the footer class does not explicitly say that the font weight should be normal, it's inheriting the boldness from the header 1 area.

Personally I would just make my own so I know I'm not inheriting something from another class, i.e. <div id="mine"> and then define what the "mine" formatting should be.
Solved it by making my own style, something I thought would present the same results. But I was wrong :] Thanks!

.note
{
    font-weight:normal;
    color: #808080;
}
...