WordPress.org

Ready to get started?Download WordPress

Forums

FAQ-tastic: Need your help with formatting (12 posts)

  1. littleblomma
    Member
    Posted 3 years 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! :)

  2. Joseph
    Member
    Posted 3 years 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;
    }
  3. littleblomma
    Member
    Posted 3 years 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 :)

  4. Joseph
    Member
    Posted 3 years 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;
    }
  5. littleblomma
    Member
    Posted 3 years 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!

  6. Joseph
    Member
    Posted 3 years ago #

    Hide the whole div.

    .faq_approve {
    	display: none;
    }
  7. littleblomma
    Member
    Posted 3 years 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?

  8. Joseph
    Member
    Posted 3 years 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.

  9. littleblomma
    Member
    Posted 3 years 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?

  10. Joseph
    Member
    Posted 3 years 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.

  11. littleblomma
    Member
    Posted 3 years 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?

  12. Joseph
    Member
    Posted 3 years 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]-->

Topic Closed

This topic has been closed to new replies.

About this Topic