Marko Jaric
asked 5 years ago

I liked the smaller thinner fonts (i.e., non-bolded) in the former DW Focus: News Slider categories, and also the similar fonts used in the previous DW: Tabs. I also like the small triangle pointing down on the selected tab with the previous version of the DW: Tabs, but it seems to be gone in version 1.2.6. How can I change the fonts to look like they used to in these areas, and also restore the small downward pointing triangle which used to display on the selected tab?

4 Answers
DominicStaff
answered 5 years ago

Hi,
You can try the following code in the Dashboard > DW Focus > General > Custom CSS:

.dw_focus_widget_news_slider .carousel-entry .entry-meta,
.widget_news-slider .carousel-entry .entry-meta {
  font-family: "Montserrat";
  text-transform: uppercase;
  font-size: 11px;
}

.dw_focus_widget_news_slider .carousel-entry .cat-links a,
.widget_news-slider .carousel-entry .cat-links a {
  color: #fff;
  font-family: "Montserrat";
  text-transform: uppercase;
  font-size: 11px;
}
.dw_focus_widget_news_slider .carousel-entry .entry-title,
.widget_news-slider .carousel-entry .entry-title {
  margin: 10px 0;
  font-size: 36px;
}

.nav-tabs>li>a {
  font-family: "NovecentowideNormalRegular",Georgia,"Times New Roman",Times,serif;
  text-transform: uppercase;
}

Note: You need change your font-family in the code line.

If you want to change the color for the DW Tabs widget, you can try to using the following code in the Custom CSS (Dashboard > DW Focus > General):

.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;
}

If you still face there issue, please send me a screenshot about the position that you want to change.
Hope this helps !

DominicStaff
answered 5 years ago

Please use the following code:
1) DW Focus: Slider widget:

/*Categories section of Slider widget*/
.dw_focus_widget_news_slider .carousel-entry .cat-links a, .widget_news-slider .carousel-entry .cat-links a {
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

/*Entry meta*/
.dw_focus_widget_news_slider .carousel-entry .entry-meta, .widget_news-slider .carousel-entry .entry-meta {
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

2) DW Focus: Tabs widget:

.nav li a {
   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
   text-transform: uppercase; 
} 

Hope this helps !

DominicStaff
answered 5 years ago

You can check your site now, I have helped you resolve this issue.
Regards,

Marko Jaric
answered 5 years ago

Thank you! There is still one remaining issue.

Can you please modify my "DW:Tabs" widget to display like it used to in older versions, including the little downward point triangle.

It should look like this: http://snag.gy/qHsqD.jpg
And NOT this: http://snag.gy/0qHeJ.jpg

Note that the v1.2.6 "DW:Tabs" font is too tall, and also that it overlaps the content below, and lastly that it is missing the little downward point triangle.

dominic Staff
replied 5 years ago

I have helped you resolve this issue, you can check your site now.

Powered by DW Question & Answer Pro