style child view

Resolved rhargis
(@rhargis)

3 years, 4 months ago

Hi,

I have a working parent/child data project. I am trying to figure out how to stylize the child view when I view the row data.

Any help would be appreciated, thanks!

Viewing 10 replies - 1 through 10 (of 10 total)

Plugin Contributor Kim L
(@kimmyx)

3 years, 4 months ago

Hi @rhargis,

Is this for frontend styling?

If yes, you can style simply style your tables with CSS.

Let us know if you need help with that! 🙂

Some references for styling your tables are here too: https://wpdataaccess.com/docs/data-tables/style-manager/

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

Thread Starter rhargis
(@rhargis)

3 years, 4 months ago

Hi,

I looked at the link you provided, but I’m a little confused. I’m trying to style a child view from a Premium Data Project, and it appears the style manager is for Premium Data Tables. Please see the screen shot below for the child view I am trying to style.

Thanks!

http://www.ceenet.com/screenshot.png

Plugin Contributor Kim L
(@kimmyx)

3 years, 4 months ago

Hi @rhargis,

Apologies for the confusion! Data Forms are built using jQuery UI so there are preset styling/themes that can be set in Settings > WP Data Access > Front-end tab.

Please see this demo: https://share.getcloudapp.com/WnuZWklJ

Hope this helps!

Thread Starter rhargis
(@rhargis)

3 years, 4 months ago

Hi,

I was aware of selecting the jQuery theme, and as you can see from my screenshot it was changed from the default, how ever my problem is styling the child view, also in the screen shot. I can use css to modify the parent view no problem, but I’m have problems using css on the child view.

I need/want to be able to bold the label text and change the size of the input fields.

Thanks.
Plugin Contributor Kim L
(@kimmyx)

3 years, 4 months ago
Hi @rhargis,

Thanks for the clarification!

I had to test it out on my own project first (https://share.getcloudapp.com/mXubNZWx), but can you try this CSS, just adjust the values:
```
ng-container label {
font-weight: bold !important;
}

.ui-widget input {
	font-size: 24px !important;
}
```
Let us know if this works. 🙂
Thread Starter rhargis
(@rhargis)

3 years, 4 months ago
Hi Kim,

The first css bolds the label correctly, however the second one changes the size of the search input field on the parent page.

When I inspect the input field on the child, this is the css associated with it below. I’m not a css expert so I’m not sure what to override, hope this helps.

Thanks for all your help, I really appreciate it.

/* “.inherited-styles-for-exported-element” is a generated class for the inherited styles of the exported element, feel free to rename it. */
- {
  box-sizing: border-box;
  }
.inherited-styles-for-exported-element {
color: #222;
font-family: Verdana, Arial, sans-serif;
font-size: 100%;
font-weight: 500;
line-height: 1.7em;
}

textarea {
font-family: Verdana, Arial, sans-serif;
font-size: 1em;
margin: 0;
}

:focus {
outline: 0;
}

.wpdadataforms-control {
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: rgba(0, 0, 0, .075) 0 1px 1px inset;
display: block;
line-height: 1.42857;
padding: 6px 12px;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
width: 100%;
}

textarea:focus {
border-color: #2d3940;
color: #3e3e3e;
}

textarea[class*=wpdadataforms-control] {
min-height: 110px;
}

:where(.is-layout-flex) {
column-gap: .5em;
row-gap: .5em;
}

:where(.wp-block-group.has-background) {
padding: 1.25em 2.375em;
}

:where(.wp-block-columns.is-layout-flex) {
column-gap: 2em;
row-gap: 2em;
}
Plugin Author Passionate Programmer Peter
(@peterschulznl)

3 years, 4 months ago

Hi @rhargis,

Just wanted to let you know Kim is sick! Do you ming waiting for her? She’s better with CSS than the rest of us… 😉

Best regards,
Peter

Thread Starter rhargis
(@rhargis)

3 years, 4 months ago

@peterschulznl

No problem, thanks for the heads up!

Plugin Contributor Kim L
(@kimmyx)

3 years, 4 months ago

Hi @rhargis,

Thanks for your patience! I’m back to help you out. 😀

Would it be alright for us to see your page where this table is? That way I’d be able to identify which specific classes to target.

You can send us a new message here: https://wpdataaccess.com/contact/

Plugin Contributor Kim L
(@kimmyx)

3 years, 3 months ago

Hi there,

I’m going to mark this as resolved as we haven’t heard from you in a while.

Feel free to create a new thread if you have other questions.

Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘style child view’ is closed to new replies.