Modifying CSS panel-body

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

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

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 662
Joined: 2018-04-01 10:12

Re: Modifying CSS panel-body

Post by pböttcher » 2019-11-18 20:21

Hi,

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

fbrano
Veteran Member
Posts: 42
Joined: 2018-03-19 10:39

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.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 306
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 499 times

Homepage BEFORE

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

Best,
Jan

fbrano
Veteran Member
Posts: 42
Joined: 2018-03-19 10:39

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

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 306
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?

fbrano
Veteran Member
Posts: 42
Joined: 2018-03-19 10:39

Re: Modifying CSS panel-body

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

Image

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 306
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!

Moh Youba
Veteran Member
Posts: 120
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