Simple but Cool Tricks
Posted: 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..-
vertical ribbon box on left of screen with fixed scroll from cloudlare.com
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>
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>
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.