Styling Ticker with Custom CSS

  • michellewylee

    (@michellewylee)


    9 years, 3 months ago

    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/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author metaphorcreations

    (@metaphorcreations)

    9 years, 3 months ago

    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

    (@michellewylee)

    9 years, 3 months ago

    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

    The word ‘Trending’ should start directly above the outline of the logo…

    Thanks for your help.

    Plugin Author metaphorcreations

    (@metaphorcreations)

    9 years, 3 months ago

    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

    (@michellewylee)

    9 years, 3 months ago

    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

    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

    (@metaphorcreations)

    9 years, 3 months ago

    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

    (@nilanjanb)

    9 years, 2 months ago

    Can you help me understand where do you put this css?

    Plugin Author metaphorcreations

    (@metaphorcreations)

    9 years, 2 months ago

    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.