Title: Styling Ticker with Custom CSS
Last modified: August 22, 2016

---

# Styling Ticker with Custom CSS

 *  [michellewylee](https://wordpress.org/support/users/michellewylee/)
 * (@michellewylee)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/styling-ticker-with-custom-css/)
 * I am trying to style the news ticker but have zero knowledge on css.
 * I have googled and tried
 * > div {
   >  background-color: #b0c4de; }
 * However, this changes the whole page background. How do I style this?
 * I would like:
    – White background – black text – change font
 * I would also like to edit so there is more padding on left and right hand side–
   at the moment the ticker sits on the far left.
 * Please help!
 * Thanks
 * [https://wordpress.org/plugins/ditty-news-ticker/](https://wordpress.org/plugins/ditty-news-ticker/)

Viewing 7 replies - 1 through 7 (of 7 total)

 *  Plugin Author [metaphorcreations](https://wordpress.org/support/users/metaphorcreations/)
 * (@metaphorcreations)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/styling-ticker-with-custom-css/#post-5656640)
 * You can try:
 *     ```
       .mtphr-dnt {
         font-family: 'Comic Sans', sans-serif;
         color: #000 !important;
         background: #FFF;
       }
       ```
   
 * Feel free to adjust the font I used in this example.
 * For the padding I would have to see your site to see how you are using the ticker.
 *  Thread Starter [michellewylee](https://wordpress.org/support/users/michellewylee/)
 * (@michellewylee)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/styling-ticker-with-custom-css/#post-5656666)
 * Thank you for your quick response.
 * The white background worked thanks. I still need to tweak the styling so it fits
   the feel of the brand…
 * Here is a preview of what it currently looks like:
    [https://www.dropbox.com/s/spuc4qkdcg6qxah/trending%20snippet.png?dl=0](https://www.dropbox.com/s/spuc4qkdcg6qxah/trending%20snippet.png?dl=0)
 * The word ‘Trending’ should start directly above the outline of the logo…
 * Thanks for your help.
 *  Plugin Author [metaphorcreations](https://wordpress.org/support/users/metaphorcreations/)
 * (@metaphorcreations)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/styling-ticker-with-custom-css/#post-5656788)
 * Sorry, but there isn’t any way to give you any advice without actually seeing
   your site. Every theme is built different with different css/styles applied. 
   I would need to actually see how your theme is built and the css that is used(
   view that actual code in the browser’s developer tools) to be able to give any
   suggestions.
 *  Thread Starter [michellewylee](https://wordpress.org/support/users/michellewylee/)
 * (@michellewylee)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/styling-ticker-with-custom-css/#post-5656907)
 * Hi Metaphorcreations,
 * Thanks for your reply. I really appreciate your assistance in styling your news
   ticker..
 * The site is currently set to private and I am unable to share it. Please find
   attached how I would ideally like the newsticker to appear. Do you think this
   is possible? The font used displayed in my screenshot is “Droidiga”.
 * Screenshot: [https://www.dropbox.com/s/yv2yj4fbwti115v/top%20newsticker.png?dl=0](https://www.dropbox.com/s/yv2yj4fbwti115v/top%20newsticker.png?dl=0)
 * Look forward to hearing your comments. If we can discuss further, I would be 
   happy to share the theme / preview of site privately.
 * Thanks,
    Michelle
 *  Plugin Author [metaphorcreations](https://wordpress.org/support/users/metaphorcreations/)
 * (@metaphorcreations)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/styling-ticker-with-custom-css/#post-5656910)
 * Michelle – You should be able to style the ticker to look like you want. I am
   unable to help much more with customization the look of it for you, though, as
   I have a pretty packed schedule. Pretty much any web developer should be able
   to help you out with this, though, as it is just css that would need to be adjusted.
 *  [nilanjanb](https://wordpress.org/support/users/nilanjanb/)
 * (@nilanjanb)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/styling-ticker-with-custom-css/#post-5656957)
 * Can you help me understand where do you put this css?
 *  Plugin Author [metaphorcreations](https://wordpress.org/support/users/metaphorcreations/)
 * (@metaphorcreations)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/styling-ticker-with-custom-css/#post-5656958)
 * If you’re using a custom theme you can add it directly to the theme’s stylesheet.
   Otherwise you can add css to your Dashboard > News Tickers > Settings page. If
   you add it there it will not get overwritten by any theme or plugin updates.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Styling Ticker with Custom CSS’ is closed to new replies.

 * ![](https://ps.w.org/ditty-news-ticker/assets/icon.svg?rev=2650696)
 * [Ditty – Responsive News Tickers, Sliders, and Lists](https://wordpress.org/plugins/ditty-news-ticker/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/ditty-news-ticker/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/ditty-news-ticker/)
 * [Active Topics](https://wordpress.org/support/plugin/ditty-news-ticker/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/ditty-news-ticker/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/ditty-news-ticker/reviews/)

## Tags

 * [background](https://wordpress.org/support/topic-tag/background/)
 * [colour](https://wordpress.org/support/topic-tag/colour/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [font](https://wordpress.org/support/topic-tag/font/)
 * [styling](https://wordpress.org/support/topic-tag/styling/)

 * 7 replies
 * 3 participants
 * Last reply from: [metaphorcreations](https://wordpress.org/support/users/metaphorcreations/)
 * Last activity: [11 years, 6 months ago](https://wordpress.org/support/topic/styling-ticker-with-custom-css/#post-5656958)
 * Status: not resolved