Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
  • #8787

    The contact form background is white. Can you help me make it transparent?

    See Link:


    I would like to know the same.



    you can change the input field background color with following code:

    .input-text, input[type="text"], input[type="input"], input[type="password"], input[type="email"], textarea, select {
    background: #FFFFFF;

    However you can’t make it transparent because of the white content area background.


    Dude –

    I don’t think we’re talking about the input text fields being white…but the box containing the contact form being white when it should be transparent if we use a bg image.


    There’s no “white” box which contains the form but that’s the standard body/content div background color. You can’t change it without affecting the whole page background (and this doesn’t make sense because the sidebar, menu, footer, etc. will be displayed with transparent background too).


    I’m sorry, but I don’t understand –

    The sidebar and menu ARE transparent when I use a bg image.

    However, the social icons up top and the contact form is not.

    Check it out here:

    I would like the contact form and the social icons up top to be transparent. Is this not possible?


    I have looked through everything with no luck…I find it hard to believe that this can’t be fixed when everything else could be transparent…


    I think this is the fieldset color – try following code:

    background-color: transparent;



    But only after I put it in the quick CSS section with the page id. I tried the same thing before with layout.css and it didn’t work…


    Now how could I go about doing this with the social icons up to?


    Try following code (in css/custom.css):

    .social_bookmarks li {
    background-color: transparent;


    Thanks Dude, but here is the problem after I put the code/s in:

    .social_bookmarks li{background-color: transparent;}

    ^that doesn’t work.

    #top .social_bookmarks li{background-color: transparent;}

    ^that tackles all the pages and does indeed make the icons transparent, however the rollover animations and colors on top are gone. This is how the website is at the current state:

    .page-id-352 .social_bookmarks li{background-color: transparent;}

    ^when I target only a specific page, it works exactly how it should, but its only targeted for that page, which is not what I want. I need it to be universal.

    How could I take the function and look of the page-id version and make it work for all the pages?


    bumping this up. Thanks!


    This is pretty much the last thing I need to solve before I consider my site finished – solution would be greatly appreciated!


    help would be greatly appreciated…




    problem solved by Kriesi, I’m done here. Thanks so much!


    I am very sorry for the support problems we are currently encountering. due to the success of angular we receive double our normal requests and on top of that one of my supporters is ill, so we struggle to bring our A Game. Hope this will be better once the new team member starts working :)

    Once again sorry that it did last that long

    As for your questions:

    the !important overwrite is probably the one thing causing problems in your css file. I would recommend to remove your changes and add the following to the bottom of your custom.css file:

    #info_text_header.minimized{background-color: transparent;}
    #top .social_bookmarks li{background-color: transparent;}

    #top .social_bookmarks .rss:hover {background-position: -42px center; background-color:#ffa133;}
    #top .social_bookmarks .facebook:hover{background-position: -42px center; background-color:#37589b;}
    #top .social_bookmarks .twitter:hover {background-position: -42px center; background-color:#46d4fe;}
    #top .social_bookmarks .mail:hover {background-position: -42px center; background-color:#9fae37;}
    #top .social_bookmarks .dribbble:hover{background-position: -42px center; background-color:#e44885;}
    #top .social_bookmarks .search:hover {background-position: -42px center; background-color:#222222;}
    #top .social_bookmarks .gplus:hover {background-position: -42px center; background-color:#de5a49;}

    that should work :)

    problem #2:

    open folder angular/framework/php

    file: class form generator

    search for line 360. it should read:

    $message = $this->form_paramas.”

    change it to

    $message = nl2br($this->form_paramas).”

    now you can create line breaks simply by hitting enter in the auto response text field. no html necessary.

    Best regards


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

The topic ‘Change contact form background’ is closed to new replies.