How to change the background color in category column

Hello Hristo !
Please send me your site, We will help you change the background in the categories on the DW Focus.

Hi Hristo ! When post a new question, you can click the Insert/ edit image on the MceToolbar and insert an image. See the screenshot:
Also, Please send me your site for further checking.
Hope this helps !

Hi Hristo !
You can  use the Imgur  for upload a screenshot then send me your link to image.
 

Hi,
please check the images and give me the instructions how to change it.

Thanks!

Hi Hristo !
I can not find your image anywhere. Please check again.

Hi ! 1. To change the background color of the DW Focus: Headeline widget, you log in to Dashboard > Appearance > Customize > General Setting, add the following code to the Header Script:

<style>
.under-navigation {
     background: #...;
     color: #...;
}
.under-navigation .widget-title {
      color: #...;
}
.under-navigation li a {
      color:#...;
}
</style>

– To change the first image in the category, You can add the following code to the Header Script

<style>
.archive .content-inner.layout-grid .hentry:first-child .entry-thumbnail, .archive .content-inner.layout-grid .hentry:first-child .entry-thumbnail img {
    height: 218px;
    margin-right: 15px;
    width: 365px;
}
</style>

/*change background content bar*/

<style>
.content-bar {
    background: #...;
}

.page-title {
   color: #fff;
}
.archive .post-layout a {
   color:#...;
}
.archive.color-category .post-layout a.active {
   background: #...;
   border-color: #...;
}
</style>

2. 3. To change background for each categories on the home page in the DW Focus, You can log in to Dashboard > Posts > Categories, then select  the category style (e.g: Green/ Blue ) + To change background for the category style: blue

<style>
.widget.news-category .color-blue.category-title{
    background:  #...;
    color: #.....;
}
</style>

Notice: If you want to change another category, You just need replace the name of category style in the line code (E.g: green / yellow / orange / violet / blue / cyan ) :

.widget.news-category .color-blue.category-title {}

+ To change the Text  color in the category (E.g: All / Movies / Music / TV), You can add the following code:

<style>
.widget.news-category .child-category a {
    color: #....;
}
.widget.news-category .child-category a.active, .widget.news-category .child-category a:hover {
    color: #...;
}
</style>

– If you want to change the background for all categories, You can add the following code to the Header Script:

<style>
.widget.news-category .category-title {
    background: #...;
}
.widget.news-category .child-category a {
    color: #....;
}
.widget.news-category .child-category a.active, .widget.news-category .child-category a:hover {
    color: #...;
}

</style>

Hope this helps !

Hi Hristo,

To add the thumbnails for each post, please follow the steps here:
1) Open up the dw-focus-categories.php file in themes/dw-focus/widgets folder, find the code below (around line 290):

<li><h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'dw_focus' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2></li>

.. and change it into this:

<li>
 <?php if( has_post_thumbnail( get_the_ID() ) ) { ?>
 <div class="entry-thumbnail">
 <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'dw_focus' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_post_thumbnail(array(50,50)); ?></a>
 </div>
 <?php } ?>
 <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'dw_focus' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
 </li>

2) Go to Dashboard / Appearance / Customize / General Setting, and add the following code to the Header Code section:

<style>
.widget.news-category .other-entry li {clear:both;}
.other-entry .entry-thumbnail {float: left;}
.widget.news-category .other-entry h2 {margin-left: 60px;}
</style>

Hope this helps!