Simple but Cool Tricks

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
jrcervantest
Veteran Member
Posts: 32
Joined: 2020-06-22 00:00

Simple but Cool Tricks

Post by jrcervantest » 2020-07-15 03:10

For you AppGini enthusiast and amateur coders like me, I found a couple of cool css scripts online that allows you to add some simple items to your projects, as well as changing your project background color without having to mod your theme file. Thought it was pretty nice. I figured I’m always asking for help, why not contribute as best I can. I recommend playing with one syntax at a time to see how it influences your site page.

Adds include the following,
- Change all text from upper to lower case and vice versa (Table View Only)
- Add a continuous image border
- Change page background color
- Change your navbar background color
- Add a vertical stack navigation icon w/fixed scroll (you can change color, add image or text and a url link)

Not sure if any of these items already exists in the forum, if so, then please disregard. If interested, simply add the following scripts to your header-extras.php and all pictures in your hook folder. Hope you find some benefit from it.


Varying styles for background color font case, border images, etc..-

Code: Select all

<style>
body{
  background-color: #BBCCB6;
  text-align: left;
  text-transform: uppercase;
  background-image: url("hooks/1.png");
  background-repeat: repeat-y;
  margin-top: 0px;
  padding:0px;
}

.navbar { 
  background-color: #000027;
  font-family: Arial, Helvetica, sans-serif;
}
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  display: block;
  text-align: left;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
vertical ribbon box on left of screen with fixed scroll from cloudlare.com

Code: Select all

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;height:2000px;}
	
.icon-bar {
  position: fixed;
  top: 34%;
  margin-left: -78px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}
.icon-bar a:hover {
  background-color: #ff902a;
}
.icon1{
  background: #657262;
  color: white;
}
.icon2 {
  background: #8D8D8D;
  color: white;
}
.icon3 {
  background: #657262;
  color: white;
}
.icon4 {
  background: #8D8D8D;
  color: white;
}
.icon5 {
  background: #657262;
  color: white;
}
.content {
  margin-left: 70px;
  font-size: 12px;
}
</style>
<body>

<div class="icon-bar">
  <a href="https://www.google.com" class="icon1"><img src="hooks/2.png"></a> 
  <a href="#" class="icon2"><img src="hooks/3.png"></a> 
  <a href="#" class="icon3"><img src="hooks/4.png"></a> 
  <a href="#" class="icon4"><img src="hooks/3.png"></a>
  <a href="#" class="icon5"><img src="hooks/4.png"></a> 
</div>
Attachments
Picture1.png
Sample Project
Picture1.png (180.99 KiB) Viewed 7178 times


SkayyHH
Veteran Member
Posts: 309
Joined: 2015-04-27 21:18
Location: Germany

Re: Simple but Cool Tricks

Post by SkayyHH » 2020-07-18 18:46

nice :-) You can just use e.g. the inspector in the Firefox browser examine the elements and find out the classes and then change them accordingly. I put the styles in the footer. then you covered all pages.

jkeble
Posts: 2
Joined: 2020-08-15 18:48

Re: Simple but Cool Tricks

Post by jkeble » 2020-08-29 21:10

thanks for this helped me out a lot on my latest project!

sblasic
Posts: 6
Joined: 2021-02-22 15:55

Re: Simple but Cool Tricks

Post by sblasic » 2021-04-02 08:42

Hi,
I'm a total novice here - so, my question is probably "ridiculous" - but here it is:

Where to copy/edit that CSS - in what file of the app?
Thank you in advance for the clarification!

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 949
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: Simple but Cool Tricks

Post by onoehring » 2021-04-03 06:24

Hi,

AG is using bootstrap. Probably \resources\initializr\css\bootstrap.css ... but as you say, you are a beginner .. why not simply use AG as it is for the moment?

You can change "colors" in AG like so:
f3.png
f3.png (41.02 KiB) Viewed 366 times
Olaf

sblasic
Posts: 6
Joined: 2021-02-22 15:55

Re: Simple but Cool Tricks

Post by sblasic » 2021-04-08 11:52

Olaf, thank you for the reply!

Pre-built themes are OK - but I need to change some elements to match the rest of my site (font-face, font-colour, button colour etc.).

So I have to "play" with CSS - thank you for pointing out to the right folder!

Post Reply