Hi guys,
over the past days I tried to get the colors used at the demo site:
https://demo2.piwigo.com/
Unfortunately without success....
Can somebody tell me which color scheme is used on the demo site?
Cheers
Ralf
Offline
If you use Firefox you can open Web Developer -> Inspector (Shift+Ctrl+C), in Chromium it's under More tools -> Developer tools (Shift+Ctrl+I). Then travel through the elements of the page, the style window in its Computed tab displays the colors of the selected element. There are also 43 color picker extension Add-ons for Firefox ... for example https://addons.mozilla.org/firefox/addon/colorzilla/
Offline
Hi,
i am already trying to do this.
My hope was that there is a secific color scheme used which I can download somewhere.
Cheers
Ralf
Offline
The colorscheme is "Bootstrap Default" and Hannah has added these CSS rules with plugin LocalFiles Editor:
.bg-dark, .btn-primary{ background-color: #324259!important; } .bg-light, .dropdown-item.active{ background-color:#A8B2BE!important; color:white!important; } .bg-light a, .navbar-dark .navbar-nav .nav-link{ color:white!important; } .dropdown-item:hover{ background-color: #324259!important; color:white!important; } .jumbotron{ background-image:url("https://demo2.piwigo.com/uploads/u/i/v/uiv7aelffa//2020/07/23/20200723145604-bc6caef5.jpg"); background-position:bottom; padding:0; } .jumbotron .container-fluid{ padding:0; } #theHeader img{ width:20%; margin:0 auto; } #theHeader{ padding:4rem; background-color:rgba(0,0,0,0.4); text-align:center; } .navbar-nav .dropdown-item{ color: #324259!important; } .navbar-nav .dropdown-item:hover{ color: #A8B2BE!important; } a{ color: #324259!important; } .slider-wrapper{ margin-top:80px; } .enter-link{ margin: 40px auto; position: absolute; padding: 15px; transform: translateX(-50%); background-color: #A8B2BE; left: 50%; } #tagCloud{ margin:15px 5%; }
Offline
Hi PLG,
thanks a million :-)
Cheers
Ralf
Offline
Hi plg,
I have noticed that on the demo site the color of the tags on the picture page are not readable because of the dark color.
I have done some modifications to make fonts matching the other colors - if your are interested you can grab the code below.
Cheers
Ralf
.bg-dark,
.btn-primary{
background-color: #324259!important;
}
.bg-light,
.dropdown-item.active{
background-color:#A8B2BE!important;
color:white!important;
}
.bg-light a,
.navbar-dark .navbar-nav .nav-link{
color:white!important;
}
.dropdown-item:hover{
background-color: #324259!important;
color:white!important;
}
.jumbotron{
background-image:url("https://www.ralf-kerkhoff.de/uploaded/logo/logo.jpg");
background-position:bottom;
padding:0;
}
.jumbotron .container-fluid{
padding:0;
}
#theHeader img{
width:20%;
margin:0 auto;
}
#theHeader{
padding:4rem;
background-color:rgba(0,0,0,0.4);
text-align:center;
}
.navbar-nav .dropdown-item{
color: #324259!important;
}
.navbar-nav .dropdown-item:hover{
color: #A8B2BE!important;
}
a{
color: #324259!important;
}
.slider-wrapper{
margin-top:80px;
}
.enter-link{
margin: 40px auto;
position: absolute;
padding: 15px;
transform: translateX(-50%);
background-color: #A8B2BE;
left: 50%;
}
#tagCloud{
margin:15px 5%;
}
.navbar-brand {
color:white!important;
}
.btn.btn-primary.btn-raised.mr-1 {
color:white!important;
}
.nav-link.active{
color:white!important;
background-color: #324259!important;
}
Offline
Thank you, I have changed demo2 CSS :-)
Offline
Thank you to the above people for the css code, very handy. I have a question, perhaps for @pig (do tags work in this forum?) about the demo site and the Bootstrap theme in general.
I see that the demo site hits an issue I too have hit, namely, when Additional Pages is used to replace the homepage, there is no way to get to the main gallery page, ie. the page with thumbs to all the galleries.
Ideally, the drop-down "Albums" menu item would include at the top "All Albums", or some such workaround.
I wonder if this is possible?
Offline