[Solved] Change header colour and footer  

  RSS

Chinli
(@chinli)
Active Member
Joined: 8 months  ago
Posts: 8
November 11, 2018 12:45 am  

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


ReplyQuote
Disquy
(@disquy)
Member Admin
Joined: 1 year  ago
Posts: 85
November 11, 2018 2:13 am  
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.

This post was modified 8 months  ago 5 times by Disquy

ReplyQuote
Chinli
(@chinli)
Active Member
Joined: 8 months  ago
Posts: 8
November 11, 2018 2:53 pm  

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


ReplyQuote
Disquy
(@disquy)
Member Admin
Joined: 1 year  ago
Posts: 85
November 11, 2018 3:51 pm  
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.


ReplyQuote
Chinli
(@chinli)
Active Member
Joined: 8 months  ago
Posts: 8
November 12, 2018 7:58 pm  

Thank you so much I have changed it


ReplyQuote
Disquy
(@disquy)
Member Admin
Joined: 1 year  ago
Posts: 85
November 13, 2018 3:14 pm  

You're welcome 🙂


ReplyQuote
Share: