ckubs george
asked 9 years ago

Found a site that apparently uses the old DW Focus prior 1.2 update, with maybe some small customisations. http://trendsonline.staging.wpengine.com/category/e-handel/
How can I achieve those chages?

  • The category header, with grid/list buttons in black colour and the category accent colour where is the case, looks more noticeable, and cool than the blank one with top-bottom lines that DW Focus( 1.2.6) has now.

  • The first post with larger thumbnail feature is gone or I have to do something to set it up?

  • I like the menu links each one with the category accent color when hovered. Tried to achive that with this kind of custom CSS “`
    .navbar-nav .color-violet:hover{ color: #C64F9D !important;}
    .navbar-nav .color-violet a:hover{ color: #C64F9D !important;}

    And the code works, but I can't set the active menu item color, same way. When I put ```
    .color-violet .navbar-nav .active a {
    color: #C64F9D;
    }

    for example, all the links of the active item dropdown have the violet color, not only the parent active item.

  • Also, the category menu navigation looks cool on the site I mentioned if it’s not custom work and that way it looked before.

  • And a pretty small bug. On the yellow colour scheme you should change the colour to something like #FFCC00 because right now the yellow and orange schemes, use both the orange colour.

Thank you for the response.

1 Answers
DominicStaff
answered 9 years ago

Hi,

  • To add the background color for the Categories header, you can add the following code to the Custom CSS:

    .layout-select a {
    color: #fff;
    }
    .archive header.page-header {
    background-color: #000;
    }
  • The first post with larger thumbnail feature is gone or I have to do something to set it up?
    In the latest version, our theme does not support to make the first post with larger thumbnail.

  • To change hover color for the menu and sub-menu, you can use the following code:
    For Example: Selected blue style
.navbar-nav .color-blue a:hover {
    color: #2bc61d!important;
}
.navbar-nav .active.color-blue a,
.navbar-nav .active.color-blue a:hover,
.navbar-nav .active.color-blue a:focus {
    color: #2bc61d!important;
}
  • At the moment, the category menu navigation in the site that you mentioned, it’s a custom work.
  • About the yellow colour, we will check and fix it. Thank for your feedback. I much appreciate it.
    Regards,
ckubs
replied 9 years ago

I didn’t explained correctly. As category menu I was reffering at the bottom pagination. Custom work or notI don’t see it something too big too implement. I would be any chance that colour scemes integration in the navigation along with colour scheme integration in the menu I told you about and maybe the background colour for the category header could come in a future release? About the last one I notice that not the category header but also the tabbed widget and the menu, dumped the mopre noticeable headers in favor of lines and white, harder to spot.

About your suggestion, when I ad that code( as I did, something similar before) on the active category with blue scheme all the links are blue all the time. Ones from the dropdown also not only the .active parent element. Only blue, no more hover. It’s not something big but, since your theme had it before, and looked so good with it, I tried to achieve it somehow.

dominic Staff
replied 9 years ago

To change the color for categories menu (parent & sub-categories), you can use the following code:
Example: Violet style

.navbar-nav .active.color-blue a,
.navbar-nav .active.color-blue a:hover,
.navbar-nav .active.color-blue a:focus {
    color: #C64F9D!important;
}

Fix color in sub-categories and title.

.navbar-nav .active .dw-mega-menu a {
    color: #555 !important;
}

To change the link in the content of each categories, you can use the following code:

.archive.color-violet .hentry .entry-content a {
    color: #C64F9D;
}

To change the categories header, you can use the following code:

.archive.color-violet .page-header {
    background-color: #C64F9D;
}
.archive.color-violet .page-header h1 {
    border-top-color: #C64F9D;
    color: #fff;
}
.layout-select a { color: #fff; }

To change color for the DW Tabs widget, you can add the following code in the Custom CSS.

.nav-tabs {
   background: #000;
}
.nav-tabs .active a, .nav-tab .active a:hover {
    position: relative; 
    color: #fff !important;
    background: #ee3224 !important;
    height: 43px !important;
}
.nav-tabs li {
   margin-bottom: 0px;
}
.nav-tabs li.active a, .nav-tabs li.active a:hover, .nav-tabs li.active a:focus {
   border: none;
}
.nav li a:hover, .nav li a:focus {
    background-color: #111;
}
.nav-tabs li a {
    border: none;
    height: 43px;
    color: #fff;
}

Then add the following code to the style.css file:

.nav-tabs .active a:before, .nav-tabs .active a:hover:before {
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-top: 6px solid #EE3224;
   bottom: -6px;
   content: "";
   height: 0px;
   left: 50%;
   margin-left: -6px;
   position: absolute;
   width: 0px;
}

Hope this helps !

ckubs
replied 9 years ago

With a little more tweaking your suggestions do the job. But since they are only CSS changes involved I don’t know why don’t you apply them to the theme as from the user perspective there is too much " add that code".

The theme looks much better in my opinion with the category header styled that way, looks much better with category pagination styled as in the demo link I posted in the main question, the category with first post bigger looked cool enough to make the theme stand out and theme should benefit more from the category accent colour feature, so the category with blue accent for example to have all the #EE3224( category menu link hover/active, submenu links hover, article, comments, sidebar ) replaced with blue.

You should improve the social media section by adding more social networks or by giving the option to the users to chose their own icons from Fontawesome( something like the feature from DW Megamenu), the link colour, the link background and the link.

Also I notice a small bug. When added to custom CSS box, after I click save setiings, this ">" is replaced with this ">".

Thank you for the help and I hope DW Focus will get better as it deserves. I see you tried to make the design lighter but the old style fits it better. For a lighter one you should consider sometimes in the future to make a complettely new news theme.

dominic Staff
replied 9 years ago

Thank you for interesting in our product and your feedback. We appreciate it.
I sent and notified our technical team about this problem. We will discuss about it.
Any your suggestion will make our product become better and better.
Regards,

ckubs
replied 9 years ago

And I almost made it, even though there is a lot of mess over there as I didn’t clean my CSS codes and made the customisation on the parent theme.

The category header, the more noticeable DW Tabs widget header, the restyled( well, a little bit) category navigation, the submit comment buton same style as the navigation style. http://goo.gl/FIpuXH

I still couldn’t make the active menu link in the color of the category color( well without affecting the submenu links also), I miss the bigger first post in the archive( but hey I’m happy you read my suggestion and maybe take it into consideration), I have to add some smooth CSS transitions and still have to change some links( from comments area) from the default colour to the category colour where it’s selected and basically that way I see the better DW Focus. πŸ˜€

Also I want to clean the post meta in the archive page a little bit by moving the comments number over the post thumbnail but unfoirtunatelly I can’t find an archive.php file where to change that. Your theme is a little more complex than that.

dominic Staff
replied 9 years ago

About the active menu link , you can send me username & password of your site for further checking.
Also, you can tell me detail about the position that you want to display the comment number on the post thumbnail. I will help you. Please send me a screenshot.
Regards,

ckubs
replied 9 years ago

About the comment thumbnail this is what I want to achieve http://oi57.tinypic.com/2u8xgew.jpg
My only problem is I don’t know what files I need to edit( like archive.php …etc) and if I edit them I can copy them to the child theme, to not lose the changes when I update?
About the active menu link when I add this .color-blue .navbar-default .navbar-nav .active a, .color-blue .navbar-default .navbar-nav .active a:hover, .color-blue .navbar-default .navbar-nav .active a:focus { color: #07C; }
I get all my dropdown links blue on non hovered state, as you see http://goo.gl/FIpuXH

dominic Staff
replied 9 years ago

I have checked your site and get a notification: This Account Has Been Suspended.
In the latest version, we have used the index.php & content.php file to instead archive.php as the old version.
If you want to make the comment section display as your screenshot, you can download the content-archive.php here: https://www.dropbox.com/s/xdrrlbb6kfab3ly/content-archive.php?dl=0
Then paste the file into the wp-contentthemesdw-focus folder.

Open the index.php file. Find the line 66 and replace the code line with the new code:
<?php get_template_part( 'content-archive', get_post_format() ); ?>

Finally, add the following code to the style.css file:

.custom-comment-archive {
    position: absolute;
    background-color: #F955F9;
    bottom: 0;
    padding: 2px;
    right: 0;
}
.custom-comment-archive .fa.fa-comment {
    color: #fff;
}
.custom-comment-archive a:hover {
    color: #fff;
}
.custom-comment-archive a {
    color: #fff;
}

Hope this helps !

ckubs
replied 9 years ago

Had a small problem with my hosting and now it’s fixed.

About moving the comments from the post meta, I foud the files finally made the change but didn’t keeped it after all. I did something else, just removed the categories icon and the post meta looks more cleaner now. as you see http://goo.gl/FIpuXH

Also, about the active menu item, I made a screenshot too with let’s say the problem.
When I add the code .color-blue .navbar-default .navbar-nav .active a, .color-blue .navbar-default .navbar-nav .active a:hover, .color-blue .navbar-default .navbar-nav .active a:focus { color: #07C; } to custom CSS, I get this
http://oi59.tinypic.com/2rhryg6.jpg

dominic Staff
replied 9 years ago

About the categories color, you can remove the following code:

.color-blue .navbar-default .navbar-nav .active a, .color-blue .navbar-default .navbar-nav .active a:hover, .color-blue .navbar-default .navbar-nav .active a:focus {
    color: #07C; 
}

Then use the following code:

.navbar-nav .active.color-blue a:hover, .navbar-nav .active.color-blue a:active, .navbar-nav .active.color-blue a:focus {
    color: #07C!important;
}

Hope this helps !

ckubs
replied 9 years ago

No, it doesn’t work. I guess I still have to use my code then to define again the dropdown link colour with !important added … and hope it will help. Unfortunatelly I have a lot of CSS override code, already. The theme was cooler before 1.2 when the hover and active colour in the category colour were there by default. Also, I see the menu in the mobile version, it does’t display dropdowns with subcategories, due to the Mega Menu implementation I guess.

But well I guess this is the the solve for now regarding CSS part. If I start to move from the actual theme, active right now to a child theme, I can put my override CSS code in the child theme style.css or do I have to make a different file?

dominic Staff
replied 9 years ago

Apologies about the code line in previous comment, I have some confusion, you can use the following code:

.navbar-nav .active.color-blue a:hover, .navbar-nav .active.color-blue a, .navbar-nav .active.color-blue a:focus {
    color: #07C!important;
}

if you agree, please send me username & password of your site, I will check and help you resolve this issue.
Also, you can create a child theme and add the CSS codes to the style.css file in the child theme.
Regards,

ckubs
replied 9 years ago

Nevermind. Thank you for all the help but nothing changes. Since I have to use .navbar-nav .active.color-blue a, all the dropdown links get the active menu colour, on their non hovered state. But, it’s not so big of a problem after all I guess I have to make some more CSS ovverides with !important for the submenu links too.

If you would add the hover and active menu links in the category accent colour in a future theme release, like it was prior to 1.2 release, would be awesome. Also, as I noticed in another post, change, the yellow scheme colour to yellow( now it’s using the same orange as for the orange scheme), make a little more use of category accent colour in articles( comment buttons …etc), make the mobile menu to show deopdowns with subcategories somehow, and maybe bring back the first post with large thumbnail feature for the archive, and this theme will be twice as appealing and awesome.

I’ll mark the post as solved.

ckubs
replied 9 years ago

Ok, so basicaly I wanted to have a hover on the dropdown of the active menu. After all this hassle I found it to be quite cool to have all the dropdown links in their non hovered state in the colour of the active parent link and I reevrsed the situation. And for the tab links I added the #555 for the hover state, and #000 for the articles title and comment hover links. πŸ™‚

Powered by DW Question & Answer Pro