FAQ-tastic: Need your help with formatting

  • littleblomma

    (@littleblomma)


    13 years, 5 months ago

    Hello everyone, I’m quite new to the css language, so often bump into brickwall when making adjustments.

    I’m using FAQ-tastic plugin to build a simple FAQ page for my client (www.darek-therapy.com/faq). Now while most formatting looks ok on screen, I still need to change two things:
    1. The first line of the answer should be inline with the rest of the text (which has padding-left of 160px) – but I don’t know how 🙁
    2. Change the font of the question to Arial.

    The css code is as follows:

    .faq h3
    {
    font-size: 1em;
    font: Arial !important;
    font-weight: bold;
    margin: 160px;
    display; table;
    }

    .faq h3 a
    {
    font-weight: bold;
    padding-left: 0px;
    display: table;
    }

    .faq li
    {
    display: table;
    padding: 0px 0px 0px 5px;
    padding-left: 160px;
    }

    .faq_approve
    {
    font-size: 0.8em;
    float: left;
    padding: 1px 00px 90px 1px;
    text-align: left;
    margin-top: -3px;
    color: #999;
    display: inline-table;
    }

    .faq_approve img
    {
    margin-top: 4px; display: none;
    }

    .faq_approve p
    {
    display: none;
    padding: 0px; margin: 0;
    }

    .faq p:first-line
    { display: inline;
    padding-left: -160px;
    }

    .faq p:last-child
    { text-align: left;
    display: inline;
    margin-bottom: 0px;
    }

    .faq .author
    { display: none;
    float: right;
    padding-bottom: 5px;
    font-size: 0.9em;
    }

    Your advice is much appreciated! 🙂

Viewing 11 replies - 1 through 11 (of 11 total)
  • Joseph

    (@jpe24524)

    13 years, 5 months ago

    Remove

    .faq h3 { ... }
.faq p:first-line { ... }
.faq p:last-child { ... }

    and add the following

    .faq h3 {
	float: left;
	font-size: 1em;
	font-weight: bold;
	margin: 1.8em 1em 0 0;
}
.faq p {
	margin: 1.8em 0 0;
	padding: 0;
}

    Thread Starter littleblomma

    (@littleblomma)

    13 years, 5 months ago

    Thanks very much for your prompt reply, Joseph!

    I tried the code you suggested but it didn’t seem to work – http://www.darek-therapy.com. Could you give me a hand with it?

    Thanks 🙂

    Joseph

    (@jpe24524)

    13 years, 5 months ago

    My mistake. Must have disabled some rules when I was trying it out. I’ve also forgotten about the arial font.

    Add .entry to both rules so it becomes this:

    .entry .faq h3 {
	float: left;
	font-size: 1em;
	font-weight: bold;
	margin: 1.8em 1em 0 0;
	font-family: arial;
}
.entry .faq p {
	margin: 1.8em 0 0;
	padding: 0;
}

    Thread Starter littleblomma

    (@littleblomma)

    13 years, 5 months ago

    That does look better but still not quite there yet…

    I think the problem is on the number bullet and the “rating” function (I disabled it before but it comes back – I think it’s controlled by “.faq_approve p” isn’t it?

    If we could get rid of the number (in black) and the rating function it’d be brilliant! Many thanks Joseph!

    Joseph

    (@jpe24524)

    13 years, 5 months ago

    Hide the whole div.

    .faq_approve {
	display: none;
}

    Thread Starter littleblomma

    (@littleblomma)

    13 years, 5 months ago

    With the original code I had, the “display: none” stopped the relevant functions to take place. However, with our new code the “display: none” doesn’t work anymore…

    Joseph, is there any other code we can use, which can stop that function comes up and make the other formatting we want?

    Joseph

    (@jpe24524)

    13 years, 5 months ago

    I’ve tested it and it does work. I don’t see that rule in your style.css.

    What you currently have is this:

    .faq_approve {
	color:#999999;
	display:inline-table;
	float:left;
	font-size:0.8em;
	margin-top:-3px;
	padding:1px 0 90px 1px;
	text-align:left;
}

    Replacing that with just

    .faq_approve {
	display: none;
}

    would do the trick.

    Thread Starter littleblomma

    (@littleblomma)

    13 years, 5 months ago

    Argh I’m really sorry to keep bugging you… everything works but one – how do we get rid of the numbering which floats around?

    Joseph

    (@jpe24524)

    13 years, 5 months ago

    The numbering is hard coded by the plugin so you can’t remove it with CSS.

    Check the plugin for options to remove it or else you’ll need to either modify the plugin or use javascript.

    Thread Starter littleblomma

    (@littleblomma)

    13 years, 5 months ago

    That’s alright – I will write to the developer to see what they will say.

    Funny enough, the numbering doesn’t appear in all computers. Now the problems are:
    The answers are not starting as a new paragraph.
    The right side margin of 90px doesn’t work

    Any ideas how to fix that Joseph? Or we can’t really do that with css?

    Joseph

    (@jpe24524)

    13 years, 5 months ago

    Oh, I see what you meant by numbering floating around. I thought you want to get rid of the numbering of the Q&As.

    It’s an IE7 issue, like always…

    Try adding the following to remove the numbering:

    .entry .faq ol li {
	list-style-type: none;
}

    For the pharagraph problem, create a new style sheet called ie7.css in your theme folder with the following content:

    .entry .faq p {
	margin: 4px 0 0;
}

    Once that’s done, open header.php and add the following just before </head>:

    <!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/ie7.css" />
<![endif]-->

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘FAQ-tastic: Need your help with formatting’ is closed to new replies.