If you use our TishConstruct theme you might want to update the default colors. It will require small update in style.css file. Here are all of the necessary steps:
1.Log In to WordPress Admin
Access your WordPress website’s admin dashboard by logging in with your credentials.
2. Navigate to Theme Editor
From the left menu, hover over Appearance and then click on Customize. Within the Customize section, find and select the Theme Editor. This action will direct you to the editor where you can modify your theme’s files directly.
3. Access the Style.css File
Within the Theme Editor, you’ll see a list of theme files on the right-hand side. Look for the style.css file and click on it to open it in the editor. This file contains all the CSS rules for your theme, including the color definitions.
4. Identify the Color Codes to Replace
Use the editor’s search function (usually accessible with Ctrl+F) to find the main color code #002155 and the secondary color code #fd5d14. These are the colors you’re planning to change.
Example of Replacing Color Codes:
To replace the main color, after finding #002155, you would replace it with your new color code, say a different shade of blue #003399. Do this for each occurrence of #002155.
Before: color: #002155;
After: color: #003399;
Similarly, for the secondary color, replace each #fd5d14 with the new color code you’ve chosen, for example, a shade of green #77ab59.
Before: background-color: #fd5d14;
After: background-color: #77ab59;
5. Apply the Changes
After you have replaced all occurrences of the original main and secondary color codes with your new choices, review the changes to ensure accuracy.
6. Update the File
Click the Update File button to save your changes. This action will apply the new color scheme to your theme.
7. Clear Caching
If your website uses caching plugins or if your hosting provider implements caching, make sure to clear the cache to see the changes immediately on your live website.
8. Verify Changes
Visit your website to verify that the new color scheme is applied correctly. Ensure that the color changes appear as expected across different elements of your site.
Custom Style Elements for Colors
Additionally, you can set local colors to different elements. Here is an example of HTML block:
<section class="fluid-section-one full-width" style="background-image:url(https://tishonator.com/themepreview6/tishconstruct/wp-content/uploads/sites/37/2021/02/construction-1491693_1280.jpg)">
<div class="outer-container clearfix">
<!-- Content Column -->
<div class="content-column">
<div class="inner-column">
<div class="sec-title light">
<div class="separater"></div>
<div class="title">Welcome Our Company</div>
<h2>Our 28 Years <br> Working Experience.</h2>
</div>
<div class="text">Building Expert explains how you can enjoy high end flooring trends like textured wood and with new laminate flooring. As the general contractor, we first create the highe rust integrity with our clients.</div>
<!-- Fact Counter -->
<div class="fact-counter">
<div class="row clearfix">
<!-- Column -->
<div class="column counter-column col-lg-4 col-md-4 col-sm-12">
<div class="inner wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
<div class="content">
<div class="icon flaticon-man"></div>
<div class="counter-title">Trusted By</div>
<div class="count-outer count-box">
<span class="count-text" data-speed="3500" data-stop="4390">0</span>+
</div>
</div>
</div>
</div>
<!--Column-->
<div class="column counter-column col-lg-4 col-md-4 col-sm-12">
<div class="inner wow fadeInLeft" data-wow-delay="300ms" data-wow-duration="1500ms">
<div class="content">
<div class="icon flaticon-worldwide"></div>
<div class="counter-title">Certification</div>
<div class="count-outer count-box">
<span class="count-text" data-speed="2500" data-stop="2310">0</span>+
</div>
</div>
</div>
</div>
<!--Column-->
<div class="column counter-column col-lg-4 col-md-4 col-sm-12">
<div class="inner wow fadeInLeft" data-wow-delay="600ms" data-wow-duration="1500ms">
<div class="content">
<div class="icon flaticon-trophy-1"></div>
<div class="counter-title">Awards</div>
<div class="count-outer count-box">
<span class="count-text" data-speed="3000" data-stop="3390">0</span>+
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Image Column -->
<div class="image-column">
<figure class="image-box">
<img decoding="async" src="https://tishonator.com/themepreview6/tishconstruct/wp-content/uploads/sites/37/2023/08/image-1.jpg" alt="">
</figure>
<div class="color-layer"></div>
<div class="color-layer-two"></div>
</div>
</div>
</section>If you want to change the background color of the entire section while keeping the background image, you can add a background color with some opacity. This way, the color overlays the image slightly, creating a tinted effect.
htmlCopy code
<section class="fluid-section-one full-width" style="background-image:url('https://tishonator.com/themepreview6/tishconstruct/wp-content/uploads/sites/37/2021/02/construction-1491693_1280.jpg'); background-color: rgba(0, 0, 0, 0.5); background-blend-mode: multiply;">
Customizing Titles and Texts
To change the color of the titles and text within the section, you can add or modify the style attribute for those specific elements.
Main Title
<div class="title" style="color: #fd5d14;">Welcome Our Company</div>
<h2 style="color: #002155;">Our 28 Years <br> Working Experience.</h2>
<div class="text" style="color: #666;">Building Expert explains how you can enjoy high end flooring trends like textured wood and with new laminate flooring. As the general contractor, we first create the highest integrity with our clients.</div>
Customizing Counter Sections
For the counters, if you wish to set a background color or change the text color, you can add style attributes to the respective elements.
<div class="content" style="background-color: #fff; padding: 20px; border-radius: 5px;">
Counter Numbers and Titles
<div class="counter-title" style="color: #fd5d14;">Trusted By</div> <div class="count-outer count-box" style="color: #002155;">
Image Column Customizations
To adjust the styling of the image column, you can add a color overlay or change the existing one by setting the background color of the color-layer divs.
Color Overlay
<div class="color-layer" style="background-color: rgba(255, 215, 0, 0.5);"></div> <div class="color-layer-two" style="background-color: rgba(255, 165, 0, 0.7);"></div>
By directly setting these style attributes in your HTML, you gain granular control over the visual presentation of each element. This method is particularly useful for making quick, localized changes without affecting the global style sheet. However, for broader styling changes or if you plan to reuse these styles, consider adding classes and defining these styles in an external CSS file for better maintainability and readability.