Help: need customization

  • Resolved lofaro

    (@lofaro)


    10 years, 6 months ago

    Hi,

    First of all, congratulations for your impressive job. Your plugin is quite simple and powerful! Thank you.

    Please have a look at my blog: https://benvenutoinitalia.net/
    I’ve set the following colors:
    – accent color: #ce2b37
    – contrast color: #009246
    – background color: #ce2b37

    The problem now is that I would like that:
    – the activated links color is set to my accent color. This is approximately the case, but not exactly the case right now (“activated links” means “Accueil link” on the top left and right when you are on the homepage https://benvenutoinitalia.net/, or means if you prefer as a second example the “Cinema link” on the top left when you are at https://benvenutoinitalia.net/category/films/). This color is currently set to a kind of pink, you see?
    – the hover link color in the tag cloud (and only here) is set to my accent color as well. It’s currently pink or something approaching.

    I think my two problems are part of your “Decisions, not Options” philosophy ??
    But could you give me a css tweak designed specifically for my need? :-S

    Thank you very much in advance. I hope my post makes sense.

    https://www.ads-software.com/plugins/fourteen-colors/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Nick Halsey

    (@celloexpressions)

    Yeah, this is a particularly nasty instance of insufficient contrast between the accent and contrast colors. Fortunately these only affect a few spots, but the automatic contrast adjustment can lead to awkward almost-white colors. You can override it with the following custom css:

    /* Higher contrast Accent Color against contrast color */
		.site-navigation .current_page_item > a,
		.site-navigation .current_page_ancestor > a,
		.site-navigation .current-menu-item > a,
		.site-navigation .current-menu-ancestor > a,
		.site-navigation a:hover,
		.featured-content a:hover,
		.featured-content .entry-title a:hover,
		.widget a:hover,
		.widget-title a:hover,
		.widget_twentyfourteen_ephemera .entry-meta a:hover,
		.hentry .mejs-controls .mejs-button button:hover,
		.site-info a:hover,
		.featured-content a:hover {
			color: #000;
		}

		.hentry .mejs-controls .mejs-time-rail .mejs-time-current,
		.mejs-overlay:hover .mejs-overlay-button,
		.slider-control-paging a:hover:before,
		.slider-control-paging .slider-active:before,
		.slider-control-paging .slider-active:hover:before {
			background-color: #000;
		}

    For your site I think using black (#000) would be the best option, but you can change it to anything that works.

    Thread Starter lofaro

    (@lofaro)

    Hi Nick!

    It works thank you!
    Just two questions:
    – why did I need to install custom css from Jetpack to insert your css tweaks instead of simply putting those lines in my child theme? Indeed, it doesn’t work if I simply modify my child theme but I do not understand why…
    – as I’ve activated custom css, will your tweaks be persistent if I update my theme?

    Thank you!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    why did I need to install custom css from Jetpack to insert your css tweaks instead of simply putting those lines in my child theme? In

    You don’t need to, this is a management choice. You should choose which is easier to manage.

    Indeed, it doesn’t work if I simply modify my child theme but I do not understand why…

    Maybe you have a syntax error or aren’t using specific enough selectors? Jetpack’s custom CSS may be loading later on in the page giving it more weighting to override styles.

    Plugin Author Nick Halsey

    (@celloexpressions)

    Fourteen Colors loads its CSS in a <style> tag in the <head> of your site. Custom CSS plugins do the same thing. Child themes load their stylesheets from external files. The “cascading” part of CSS (cascading style sheets) basically means that CSS loaded later will override CSS loaded earlier, and <style> tags are loaded after external files. So, in this case, your child theme’s stylesheet is loading before Fourteen Colors, which is loading before Jetpack Custom CSS. So, to override part of Fourteen Colors’ output you’d need to put the CSS in the CSS plugin if you use the same selectors as Fourteen Colors.

    To make the child theme override the plugin here, you would need to use more specific CSS selectors then those that the plugin uses (which are pasted above).

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Help: need customization’ is closed to new replies.