Problem with text colors (same as background tile)

  • Resolved ambrosa

    (@ambrosa)


    12 years, 1 month ago

    Dear Sir,
    I’ve started to use you plugin to make a gallery but I’ve some problems with colors.
    Really, I’m a newbie ??

    I’ve made 3 examples here (about in the middle of the page):
    https://www.diamocilazampa.it/public/wp/index.php/cercano-casa/
    It’s a no-profit organization about dog care.

    I want to use color #688848 for sliding tile with image but text has same color and is not visible.

    Into first example I’ve set category color to #000000 even if I don’t see the text.

    Into the second example I’ve used color #688848 but excerpt is not visibile (same color) and post name is in blue

    Into third example category/color mixed.

    Can you kindle tell me how I can change colors in css theme ?
    My idea is to have the sliding text (tiles with image) white and post name link fixed white.

    Thank you very much for your efforts: your plugin is very nice and FAST.
    It lacks only the ‘order post’ capability (by date, by author …. , ascending, descending)

    https://www.ads-software.com/extend/plugins/post-tiles/

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

    (@ethanhackett)

    I’m not totally sure but I think it may have something to do with your theme css files being called after the plugin css files. Go into your theme’s header.php file and look for the <?php wp_head(); ?> and make sure that it get’s called after the css files for the theme.

    CSS is applied in order from when it’s called so if an anchor is targeted and then targeted again later it overrides the other one.

    If that doesn’t fix it you can use the !important tag in the css to override other css. Try adding this to your themes css file

    #post-tiles li a {
	color: #ffffff !important;
}
#post-tiles li.featured-image.up a {
	color: #688848 !important;
}
li.featured-image.up h3 {
	color: #2b86aa !important;
	border-bottom: 1px dotted #2b86aa;
}
    Thread Starter ambrosa

    (@ambrosa)

    Thanks for your kind reply.

    1) into header.php, the function wp_head() is called AFTER theme CSS
    This is the HTML page source: you can see that is correct as you suggested to me.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Diamoci La Zampa   &raquo; Cercano casa</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="generator" content="WordPress 3.5" /> <!-- leave this for stats -->
<link rel="stylesheet" href="https://www.diamocilazampa.it/public/wp/wp-content/themes/emerald-stretch/style.css" type="text/css" media="screen" />
  <!--[if IE]><link rel="stylesheet" href="https://www.diamocilazampa.it/public/wp/wp-content/themes/emerald-stretch/ie.css" type="text/css" media="screen" /><![endif]-->
  <link rel="pingback" href="https://www.diamocilazampa.it/public/wp/xmlrpc.php" />
  <link rel="alternate" type="application/rss+xml" title="Diamoci La Zampa RSS 2.0 Feed" href="https://www.diamocilazampa.it/public/wp/index.php/feed/" />
  <link rel="alternate" type="text/xml" title="Diamoci La Zampa RSS Feed" href="https://www.diamocilazampa.it/public/wp/index.php/feed/rss/" />
  <link rel="alternate" type="application/atom+xml" title="Diamoci La Zampa Atom 0.3" href="https://www.diamocilazampa.it/public/wp/index.php/feed/atom/" />
  <link rel="Shortcut Icon" href="https://www.diamocilazampa.it/public/wp/wp-content/themes/emerald-stretch/img/favicon.ico" type="image/x-icon" />
    <link rel='stylesheet' id='admin-bar-css'  href='https://www.diamocilazampa.it/public/wp/wp-includes/css/admin-bar.min.css?ver=3.5' type='text/css' media='all' />
<link rel='stylesheet' id='farbtastic-css'  href='https://www.diamocilazampa.it/public/wp/wp-admin/css/farbtastic.css?ver=1.3u1' type='text/css' media='all' />
<link rel='stylesheet' id='post-tiles-css'  href='https://www.diamocilazampa.it/public/wp/wp-content/plugins/post-tiles/post-tiles.css?ver=3.5' type='text/css' media='all' />
<link rel='stylesheet' id='wp-cpl-base-css-css'  href='https://www.diamocilazampa.it/public/wp/wp-content/plugins/wp-category-posts-list/static/css/wp-cat-list-theme.css?ver=2.0.3' type='text/css' media='all' />'

    2) I’ve added the code you suggested in previous post into my theme style.css
    Nothing change (?!) even if I put the code at the beggining of .css or at the end.

    Now, in my third example https://www.diamocilazampa.it/public/wp/index.php/cercano-casa/ I’ve added a category with white background. Now it’s readeable (obviously).

    Notice that now in my examples there are a post without images.
    Background is green and text white (as I wish). But if you go over with mouse pointer, text became green as background. I suppose that the problem is in .css into ‘hover’ properties.

    So I’ve added into theme .css only the following code (I’ve not included your previous code):

    #post-tiles li a:hover {
	color: #ffffff !important;
}

    And it works ! ??

    The only problem is that the post title is in blue (I wish white).
    Any idea ?

    Thread Starter ambrosa

    (@ambrosa)

    Solved.
    Thanks to Firefox and its new debug feature (style analizer).

    I’ve added the following code at the top of my theme style.css (or at the bottom, it’s the same).

    /* POST TILE plugin customization , ambrosa 24.01.2013 */

/* excerpt color without mouse over */
#post-tiles li a {
	color: #ffffff !important;
}

/* excerpt color with mouse over */
#post-tiles li a:hover {
	color: #ffffff !important;
}

/* title color for tile without an image */
#post-tiles li h3 {
	color: #ffee10 !important;
}

/* title color for tile with an image */
#post-tiles li.featured-image.up h3 {
	color: #ffee10 !important;
}
/*--------------------------------------------------------*/

    Plugin Author ethanhackett

    (@ethanhackett)

    Very strange but I’m glad you were able to find a solution. Thanks for taking the time to come back and share it with us incase someone else runs into the same problem.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Problem with text colors (same as background tile)’ is closed to new replies.