Look and feel

Hi @ijtzib,

At the moment, Data Projects and Data Forms are limited to preset jQuery UI themes found in WP Data Access > Settings > Front-end.

See here: https://share.zight.com/d5uJDBbw

You can probably force a custom CSS for the UI but it’ll take a bit of work since there are a lot of elements to target. ??

Peter is currently working on a new version of?WP Data Access?which is more customizable in terms of styling. ? We don’t have an exact ETA yet.

Hope this helps! Let us know if you have more questions.

Hi Kim,

Thank you for your response. Yes it be great if there is more flexibility in terms of customizing the jQuery UI themes for the project forms and hopefully it can come soon. however how about customizing the forms using the other shortcode eg. [wpdadiehard project_id=”3″ page_id=”51″] .

Is there a way to customize using the CSS… change colors, customize the buttons etc… Also HTML to customize the layout and so on, for the specific project form or page. This is in contrast to using the jQuery UI theme. OR should you guide me on how to customize the jQuery UI theme instead? What advice can you give me? Thank you for you kind assistance. Below screenshot of my parent child form.

https://snipboard.io/93jkHq.jpg

Hi @ijtzib,

It’s possible to customize the form using CSS, but you’ll have to target them manually and specifically.

For example, for this form: https://share.zight.com/04uREWyG

You may change the colors of the buttons for the form above using the following CSS:

#wpda_simple_form_0 button{
background-color: #5858a9;
}

You can find each specific selector by using your browser’s developer tools and checking your page’s elements. For reference: Finding CSS Selectors in Your Browser – HelpDocs Support

Hope that helps!

Hi Kim,

Thank you. I followed your instructions and it did worked but the ADD NEW button did not inherited the changes. So went to the inspector and it does change there but eg. the code below was copied from the inspector. but when I plug it in the additional css of my theme nothing happens. Also see SS.

https://snipboard.io/3yKg1a.jpg

.wrap .add-new-h2, .wrap .add-new-h2:active, .wrap .page-title-action, .wrap .page-title-action:active {    
   border-radius: 33px;;

}

Hi @ijtzib,

Could you remove the extra ; symbol on the end and also add !important?

For example:

.wrap .add-new-h2, .wrap .add-new-h2:active, .wrap .page-title-action, .wrap .page-title-action:active {    
   border-radius: 33px !important;

}

If that doesn’t work, could you send us a link to this page so we can help you identify the selectors?

Let us know how it goes. ??

Hi Kim,

That was the trick. Had to make it !important. ?? Thank you!