Modifying CSS panel-body

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
User avatar
fbrano
Veteran Member
Posts: 70
Joined: 2018-03-19 10:39
Location: Slovakia
Contact:

Modifying CSS panel-body

Post by fbrano » 2019-11-18 16:30

Hey there,

Im lately straggling with modifying CSS style in a code. On my home page after login I've made custom filters for filtering record from my main table:
Image.
As you can see, there is a white frame around all these button. I figured out through developer tools in firefox that this div is called panel-body:
Image

And if I change the value in px from 15 to 0 the white border disappears:
Image

Can you help me how could I make these changes permanent and where I need to edit it?
Thanks in advance guys
ver 23.15 1484

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: Modifying CSS panel-body

Post by pbottcher » 2019-11-18 20:21

Hi,

maybe you can try to change the color of the background for the panel to transparent.
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

User avatar
fbrano
Veteran Member
Posts: 70
Joined: 2018-03-19 10:39
Location: Slovakia
Contact:

Re: Modifying CSS panel-body

Post by fbrano » 2019-11-19 16:31

Any ides how?
pböttcher wrote:
2019-11-18 20:21
Hi,

maybe you can try to change the color of the background for the panel to transparent.
ver 23.15 1484

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Modifying CSS panel-body

Post by jsetzer » 2019-11-19 17:20

Hi,

I'm not sure if this is what you are looking for. Maybe this short code can help you:

Code in header-extras.php

Code: Select all

<!-- file: hooks/header-extras.php -->
<script>
    $j(function() {
        $j(".table_links > div > .panel > .panel-body").unwrap();
        $j(".custom_links > div > .panel > .panel-body").unwrap();
    });
</script>
(I have set a gray background-color to illustrate the changes)

Homepage AFTER

yuiZynL4EU.png
yuiZynL4EU.png (25.02 KiB) Viewed 13191 times

Homepage BEFORE

chrome_fnwHZ7EM0l.png
chrome_fnwHZ7EM0l.png (29.93 KiB) Viewed 13191 times

Best,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
fbrano
Veteran Member
Posts: 70
Joined: 2018-03-19 10:39
Location: Slovakia
Contact:

Re: Modifying CSS panel-body

Post by fbrano » 2019-11-20 11:14

Many thanks! works great!
jsetzer wrote:
2019-11-19 17:20
Hi,

I'm not sure if this is what you are looking for. Maybe this short code can help you:

Code in header-extras.php

Code: Select all

<!-- file: hooks/header-extras.php -->
<script>
    $j(function() {
        $j(".table_links > div > .panel > .panel-body").unwrap();
        $j(".custom_links > div > .panel > .panel-body").unwrap();
    });
</script>
(I have set a gray background-color to illustrate the changes)

Homepage AFTER


yuiZynL4EU.png


Homepage BEFORE


chrome_fnwHZ7EM0l.png


Best,
Jan
ver 23.15 1484

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Modifying CSS panel-body

Post by jsetzer » 2019-11-20 13:10

Great, can you post a screenshot?
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
fbrano
Veteran Member
Posts: 70
Joined: 2018-03-19 10:39
Location: Slovakia
Contact:

Re: Modifying CSS panel-body

Post by fbrano » 2019-11-21 20:34

Image
ver 23.15 1484

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Modifying CSS panel-body

Post by jsetzer » 2019-11-21 20:36

Much better now, well done!
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

Moh Youba
Veteran Member
Posts: 228
Joined: 2017-03-12 09:31

Re: Modifying CSS panel-body

Post by Moh Youba » 2019-12-03 21:06

Hello

Just trying and it is working well

Thank you

Post Reply