[Solved] Change header colour and footer

Posted by: Chinli

Please how can I change youplay theme hearder and footer color from blue to another color

Make sure you perform a backup before modification just to be on the safe side.

In /themes/youplay/css/style.css you will need to find these pieces of code and edit with your own colors, I added comments to help you with editing your color scheme. Search for the red text in style.css to see the code and make changes.

Header Code

header {
height: 56px;
padding: 0 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
/* The below is the header background color */
background-color: white;
}

Search Box

nav.navbar-findcond .search-header input {
height: 35px;
padding-left: 35px;
color: #444;
width: 500px;
transition: all 0.2s;
/* The below code is changes the color of search box background */
background-color: #eceff0;
/* The below code is changes the color of search box border */
border: 1px solid #ddd;
border-radius: 2em;
}

Search Box Icon

nav.navbar-findcond .search-header svg.feather {
position: absolute;
top: 0;
cursor: pointer;
left: 2px;
/* The below code is changes the color of the search icon */
color: #637076;
margin: 8px;
transition: all 0.2s;
}

Search Bar Focus

nav.navbar-findcond .search-header input:focus {
/* The below code is when you click into the search box and it has a border color */
border-color: #04abf2;
}

Search Icon Focus

nav.navbar-findcond .search-header input:focus + svg {
/* The below code changes the color of the search icon when you are searching */
color: #04abf2;
}

Right Icons and Text

nav.navbar-findcond ul.navbar-nav a {
/* The below code changes the text color and icon colors on the right side */
color: #3e3e3e;
font-size: 16px;
padding: 16px 15px;
border: 0;
box-shadow: none;
transition: all .15s ease-in-out;
border-radius: 0;
}

Change the Lightbulb Color

.toggle-mode .slider svg.feather {
/* Change the color of the lightbulb on the left
fill: #696969;
margin: 0px;
width: 24px;
height: 24px;
}

Footer Code

.pt_footer .container-fluid {
padding: 55px 0 90px;
/* The below is the footer text color */
color: #e6e6e6;
/* The below is the footer background color */
background: #2380a8;
}

Once you modify the code to your liking, save it.

Then find in /themes/youplay/layout/container.html

<link rel="stylesheet" href="{{CONFIG theme_url}}/css/style.css" id="style-css">

Change to

<link rel="stylesheet" href="{{CONFIG theme_url}}/css/style.css?ver=1.0.1" id="style-css">

Save it and upload your modified files.

Anytime you make changes to the style.css, change the ver=1.0.1 up to the next increment. This is so it automatically reloads the css file and doesn't force you or your users to clear their cache.

Can't find above code in the style. CSS, or should I add the code to custom. Style

Posted by: Chinli

Can't find above code in the style. CSS, or should I add the code to custom. Style

The code isn't going to exactly match due to my code comments. Do a search for the red text.

Thank you so much I have changed it

You're welcome 🙂