Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 7, 2017 at 3:42 pm #873747
    Unternehmerich

    Hello together,

    i want to style three different contact forms on one website with different background-colors. (Enfold) The code i´m using is already working but for one style for all contactforms.
    The question is how i can make three different codes working for three different page names. I tried with if(is_page) but it didnt work.

    The code i´m using (maybe you can tell me a more kind one)

    .input-text, #top .main_color input[type=”text”], .main_color input[type=”input”], .main_color input[type=”password”], .main_color input[type=”email”], .main_color input[type=”number”], .main_color input[type=”url”], .main_color input[type=”tel”], .main_color input[type=”search”], #top .main_color textarea, .main_color select {
    border-color: #000000;
    background-color: #89bd26;
    color: #ffffff;

    the contact form for “Page one” should have the back-ground color : #89bd26
    “” “Page two” ” ” : #004883
    “” “Page three” ” ” : #f07a60

    i hope you can help me
    greetings Felix

    November 8, 2017 at 6:27 am #874035
    Rikard

    Hey Florian,

    If you inspect each page in your browser, you will find the page ID class in the body tag. You can use that to target the forms on the different pages:

    .page-id-101 .element {
  Your CSS
}

    Best regards,
    Rikard

    November 8, 2017 at 10:32 am #874092
    Unternehmerich

    hey,
    thank you for your quick response, but it doesnt work when i use
    .page-id-34 .element {
    CSS
    }
    the code isn´t working, but the ID is the right one.

    I linked the website in private content, hope you can help me

    thank you again
    best regards

    November 9, 2017 at 6:42 am #874444
    Rikard

    Hi,

    The code I posted was just an example, it won’t do anything. You would have to replace .element with the class of the element you are trying to target and then also add the CSS arguments inside of the block where it reads CSS. Since you posted some CSS in your first post I thought you might know CSS but I’m guessing I was wrong?

    If you need further help then please explain exactly what you are looking to achieve.

    Best regards,
    Rikard

    November 9, 2017 at 5:47 pm #874796
    Unternehmerich

    Hey,
    I think we missunderstood each other :) I just know some simple coding to change some css or html, but I have no advanced skills.
    When I wrote “.page-id-34 .element {CSS}” I just used it as a placeholder but I worked with a real code.
    So when I use
    #top .main_color textarea { background-color: #89BD26; }
    #top .main_color input[type=’text’] { background-color: #89BD26; }
    the colorstyle of my contact form is changing the right way, but on every contact form on my Website.

    But I have 3 different contact forms on 3 different pages on the same website and they should all have some different color style. But when I use .page-id-34 this way..

    .page-id-34 #top .main_color textarea { background-color: #89BD26; }
    .page-id-34 #top .main_color input[type=’text’] { background-color: #89BD26; }

    the code isn´t working anymore.
    So I need help to distinguish these 3 different pages with the ID´s 34,36,38, to make a different colorstyle for each ID.

    I hope I was able to explain my Problem clearly to you.

    Greetings

    November 12, 2017 at 1:45 pm #875733
    Rikard

    Hi,

    Please try this instead:

    .page-id-34 textarea { background-color: #89BD26; }
.page-id-34 input[type=’text’] { background-color: #89BD26; }

    Generally you don’t need this bit:

    #top .main_color

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.