Need help? Check out our Support site, then


Tweenty Fourteen "Customize colors", lost of black backgroung

  1. I would like to know, if there is any trouble in background colors, using default, pictures of main posts are on black background, but if I customize colors, and if I choose black background, pictures of main posts are on a gray background ???

    See Default with Black background

    And the "grey" background ?

    - Any help on this subject ?

    The blog I need help with is dvismusic.com.

  2. We Volunteers cannot view private blogs. I do not know if you have purchased an annual renewable custom design upgrade and if this is a CSS editing question posting into the support forum rather than the CSS Forum or not.

    WordPress.com sells custom design upgrades. They allow us to "preview" change that do not actually display on the blog unless we purchase the upgrade.

    If you have not purchased the custom design upgrade note that no changes you try out aside from those such as Custom Background, Custom Header, etc. which are stated on the theme description pages in the features column (right hand side) will be visible to visitors.
    http://en.support.wordpress.com/custom-design/
    http://en.support.wordpress.com/custom-design/editing-css/
    http://en.support.wordpress.com/custom-design/custom-fonts/

    You do not need to load the design tools unless you have the Custom Design upgrade. All of these functions can be accessed from your dashboard - without loading the custom design tools - no upgrade required.
    Appearance > Header
    Appearance > Background
    Appearance > Theme Options (applicable only to some themes)
    Settings > Reading (set a static front page)
    Site Title and Tagline > Settings > General

    If you are using the preview mode for the Custom Design upgrade some of the settings in that mode will save but they won't show up on the front end unless you purchase the upgrade.

    To go back to the free options, go to Appearance → Themes → Customize → Colors and click the "exit the preview" link in yellow at the top of the panel on the right.

    See also: http://dailypost.wordpress.com/2014/01/18/video-tutorial-customizing-your-theme/

  3. Thanks for your answer Timethief,

    Our site is not yet ready to be public.

    We have purchased a package with color customization.

    Even if the site is still private , you could see the problem on the 2 screen-copy files ...

    Perhaps Having a glance on this 2 files could help to provide any support during our "private" development process ?

    Regards
    DvisMusic

  4. jeremeylduvall
    Staff

    Hi @DvisMusic,

    I want to make sure I correctly understand your question. You would like a black background on the TwentyFourteen theme (as it is now), but you would like the background on the featured posts at the top of the screen to remain grey. Is that correct? If so, I'm happy to provide the CSS to make that happen!

  5. Hi Jeremeylduvall

    I am happy to see your positive answer.

    No Grey ... I would like the background on the featured posts remain black just like it is now in this theme. In fact, I would like to change the menu highlight color to Red (currently green) , Links highlight color in orange and also have a full black background for all posts instead of white.

    I you could do this, I would really appreciate your help !
    Dvismusic
    -> Red is my fetish color

  6. jeremeylduvall
    Staff

    I would like to change the menu highlight color to Red

    You can do this by adjusting the two accent colors in the Customizer as shown here:

    https://cloudup.com/cOeZxyOQRuV

    Changing the second accent color to red and the third accent color to orange should do the trick!

    full black background for all posts instead of white.

    Is this similar to what you're looking for?

    https://cloudup.com/cICdsB7K1Wq

    If so, you'll need to enter this CSS in Appearance -> Customize -> CSS:

    div#primary.content-area {
    	background-color: #000;
    }
    
    .site-content .entry-content {
    	background-color: #000;
    }
    
    .site-content .entry-meta {
    	background-color: #000;
    }
    
    h1.entry-title a {
    	color: #fff;
    	background-color: #000;
    }
    
    div.entry-meta a {
    	color: #fff;
    	background-color: #000;
    }
    
    #content header.entry-header {
    	background-color: #000;
    }

    There may be some small adjustments that will need to be made once the CSS is active. We can fix any minor color swaps if necessary!

  7. Hi, You're really helpfull !

    I get the trick for the accent color red and orange.

    I just add the CSS you send me and I have now the black background !

    - As you told me we still have small adjustments to make, for the color of title in posts and widgets area, the "dark grey" color characters are not easy to read on a black background, see screen capture :

    https://www.dropbox.com/s/aqhjd5caksva1ta/Capture%20d’écran%202014-04-11%20à%2001.36.56.png

    - Could you do something else with the CSS to change that or there is an accent color to change this also ?

    And, unfortunatelly, I still have the "white" background behind the title area under each featured posts, see this screen capture :

    https://www.dropbox.com/s/xvbe3s434ucw30s/Capture%20d’écran%202014-04-11%20à%2001.31.10.png

    - Furthermore in iphone format, the background of widgets column appears also with a white background :

    https://www.dropbox.com/s/u0lqvdum2s1n6ye/Photo%2011-04-2014%2001%2041%2038.png

    I hope you will be able to find a way to finalize this with me as we are really near to the style I would like have for my new site !!

    Many thanks again for your help
    dvismusic

  8. jeremeylduvall
    Staff

    Hi!

    See the patches below:

    - As you told me we still have small adjustments to make, for the color of title in posts and widgets area, the "dark grey" color characters are not easy to read on a black background, see screen capture :

    Can you give this a try?

    .content-sidebar .widget .widget-title {
    	color: #fff;
    }
    
    .milestone-header .event {
    	color: #fff;
    }
    
    .milestone-header .date {
    	color: #fff;
    }

    And, unfortunatelly, I still have the "white" background behind the title area under each featured posts, see this screen capture :

    This should fix that:

    .grid .featured-content .entry-header {
    	border-color: #000;
    }
    
    .featured-content .entry-header {
    	background-color: #000;
    }

    - Furthermore in iphone format, the background of widgets column appears also with a white background :

    Give this little snippet a try:

    .content-sidebar {
    	background-color: #000;
    }
  9. Hi!

    Your last patches are giving good results ! Many thanks again.

    Using CSS to customize this great theme to fit my own design is really interesting and I am really near my goal . . .

    Perhaps you could give me last advices :

    - First : to change font color in each post, for title, sub-title and line, as those are currently dark-grey, and are not really readable with a dark background , having white-grey for example or white will be more clear :

    See https://www.dropbox.com/s/c139gh30ky6tx78/Capture%20d%E2%80%99%C3%A9cran%202014-04-11%20%C3%A0%2022.55.50.png

    - And to finish : I would like to have separating bar and icon on the right side widget to be reverse colors of the existing theme twentyfourteen, using its ephemera widgets, you could see and understand that on the 2 following pictures :

    #1 Original theme :

    https://www.dropbox.com/s/z3rnp3xqh5sbiz4/Capture%20d%E2%80%99%C3%A9cran%202014-04-11%20%C3%A0%2022.59.54.png

    #2 My customization with black background :
    https://www.dropbox.com/s/ixy4l6crw4zm2d8/Capture%20d%E2%80%99%C3%A9cran%202014-04-11%20%C3%A0%2022.59.43.png

    Here separating bars and icon are dark on dark, we can see them . . .

    I would like to have white bars and sub-title font in white to, with my black background, and also reverse icon on this very interesting twenty fourteen ephemera widgets . . .

    Hoping you will understand my last requests, and you can find a way to succeed

    Best regards,
    DvisMusic

  10. Furthermore, I would like alos to ask you about this last side effect, I still have white background when I open a post or a page :

    https://www.dropbox.com/s/c140xtxt12e3m3c/Capture%20d%E2%80%99%C3%A9cran%202014-04-11%20%C3%A0%2023.15.15.png

    https://www.dropbox.com/s/g4d5iobqscx75xr/Capture%20d%E2%80%99%C3%A9cran%202014-04-11%20%C3%A0%2023.15.22.png

    - Perhaps there is something else to add to CSS to replace those last white background by black on ?

    - Let me know also, if I need to add all those patches with a specific order to enter them in CSS customization ?

    Thanks ind advance for your tremendous help !!!
    DvisMusic

  11. jeremeylduvall
    Staff

    - First : to change font color in each post, for title, sub-title and line, as those are currently dark-grey, and are not really readable with a dark background , having white-grey for example or white will be more clear :

    This code should do the trick!

    p {
    	color: #fff;
    }
    
    h1.entry-title {
    	color: #fff;
    }
    
    .post-navigation .meta-nav {
    	color: #fff;
    }
    .post-navigation a {
    	color: #fff;
    }
    
    .comment-reply-title {
    	color: #fff;
    }

    - And to finish : I would like to have separating bar and icon on the right side widget to be reverse colors of the existing theme twentyfourteen, using its ephemera widgets, you could see and understand that on the 2 following pictures :

    Give this a go!

    .content-sidebar .widget .widget-title a {
    	color: #fff;
    }
    
    .content-sidebar .widget_twentyfourteen_ephemera .entry-meta a {
    	color: #fff;
    }
    
    .widget p {
    	color: #fff;
    }

    I'm actually not sure how to reverse the colors of the icon you're referring to. That question is best directed to the CSS experts in the CSS Forum here:

    http://en.forums.wordpress.com/forum/css-customization

    For future reference, that's going to be your best bet for large-scale customizations like this one.

    Furthermore, I would like alos to ask you about this last side effect, I still have white background when I open a post or a page :

    That should be fixed with this!

    div#main-content.main-content {
    	background-color: #000;
    }
  12. Many thanks for your last answer, I am currently not able to access WP on my computer, trying to customize CSS on iPad is not easy, I will apply your last patches next week. I will let you know as soon as I have implemented them ...
    DvisMusic

  13. jeremeylduvall
    Staff

    Sounds great! Let me know if they achieve the look you're going for.

  14. Hi,
    I have learned a lot with your last answer, I apply your recommendations to CSS and the result is there, great !
    As you told me, I will post on the other forum for colors of icon.
    - Perhaps you could give me a last help before, on the dark line above this icon, is it part of this icon, or could we also change the color to white ?
    See this screen shot :
    https://www.dropbox.com/s/ixy4l6crw4zm2d8/Capture%20d’écran%202014-04-11%20à%2022.59.43.png

    I would like again to thank you for your graceful help, I really appreciate it - Dvismusic

  15. jeremeylduvall
    Staff

    Hi!

    Currently, I don't see that widget active on your blog. Could you enable it for a moment so I can take a look?

  16. Hi,

    Thanks, I have published some posts to activate this widget, with video and image categories, so you see and let me know ...

    Regards,
    DvisMusic

  17. jeremeylduvall
    Staff

    Are you looking for something like this?

    https://cloudup.com/cZFndLpaMnO

    If so, you can use this CSS code:

    .content-sidebar .widget .widget-title {
    border-top: 5px solid #fff;
    }
    
    .content-sidebar .widget_twentyfourteen_ephemera .widget-title:before {
    background-color: #fff;
    color: #000;
    }

    Let me know if that's what you're looking for!

  18. Hi, yes, it's just like this.
    I try your new CSS code and this is the way, I use orange color instead of white to fit my logo colors within this great theme.
    You really help me a lot !
    May I ask you 2 others questions ?

    #1 The first one will probably be easy for you : I would like to change the color orange of the highlight item in the menu, with a stronger orange color, could you tell me how to do this ?
    See https://www.dropbox.com/s/oemye019j05usgc/Capture%20d%E2%80%99%C3%A9cran%202014-04-25%20%C3%A0%2000.20.23.png

    #2 For the second, it seems that is not possible to do this within wordpress. com :
    I would like to add, on a "wordpress.com" site, the following slider frontage possibility, see the link bellow :
    - http://sequel.wpdefault.com/
    Currently in Twenty Fourteen theme, with have the choice between grid or slider for featured content, I would like to maintain the grid for featured contents and add a slider frontpage, just like in sequel example who uses 2 plugins in addition to the child theme! Fourteen Extended & Styles: TwentyFourteen!
    - When I asked "Is it possible or not within wordpress.com offer ?" on CSS Customization forum, I had the following answer :

    thesacredpath
    Staff
    Apr 24, 2014, 9:39 PM

    Hi there, this is not possible here at WordPress.com. The site you reference is using the self-hosted version of WordPress and some plugins to get that functionality. At WordPress.com users cannot install plugins.

    Thanks again for your tremendous for help
    DvisMusic
    I am to the nearest to finalize the blog for which I need help : dvismusic.com.

  19. jeremeylduvall
    Staff

    Hi!

    The first one will probably be easy for you : I would like to change the color orange of the highlight item in the menu, with a stronger orange color, could you tell me how to do this ?

    I've played around with this quite a bit, and I can't seem to find the correct selector. I would ask in the CSS Customizations forum. They'll be able to point you in the right direction!

    For the second, it seems that is not possible to do this within wordpress. com : I would like to add, on a "wordpress.com" site, the following slider frontage possibility, see the link bellow : - http://sequel.wpdefault.com/

    Indeed - this is not possible at WordPress.com. The site you referenced to is using some additional plugins and customizations that are not available for WordPress.com sites.

    Let me know if you need anything else!

  20. Hi,

    I understand your last anwsers, for the point #1, I have submitted the following issue :
    http://en.forums.wordpress.com/topic/twenty-fourteen-image-header-how-to-change-for-a?replies=22#post-1767882
    For point #2, I am aware now about the differences between .com and .org environment for WordPress.

    I have another point where I would appreciate your support, I will prepare this in my next answer in 1 or 2 days ... Have a good week-end !

    Dvismusic

  21. jeremeylduvall
    Staff

    Sounds great! Keep me posted.

  22. Hi,

    I'am back with another question linked to the fact we have change the background to dark . . .

    I would like to manage color for, both, audio player and audio playlist, could you help me to do this ?

    For the audio playlist, I would like to manage background color, to avoid white and put orange for example, see :
    https://www.dropbox.com/s/bjbfvd1phcz7o8r/Capture%20d’écran%202014-05-01%20à%2014.55.23.png

    For audio player, I would like to customize colors to :
    https://www.dropbox.com/s/djsvqgwiap4pm5t/Capture%20d%E2%80%99%C3%A9cran%202014-05-01%20%C3%A0%2015.00.21.png

    Thanks to you again for your precious help,
    DvisMusic

  23. jeremeylduvall
    Staff

    Please see my answers below!

    For the audio playlist, I would like to manage background color, to avoid white and put orange

    .wp-playlist-dark {
    background-color: ####;
    }

    For audio player, I would like to customize colors to : https://www.dropbox.com/s/djsvqgwiap4pm5t/Capture%20d%E2%80%99%C3%A9cran%202014-05-01%20%C3%A0%2015.00.21.png

    I believe you're referring to how the volume bar gets pushed down to the bottom here:

    https://cloudup.com/ckoxD7ebauI

    Is that correct? If so, that is a bug we're aware of and currently looking to fix. Let me know if you're referring to something else!

  24. Hi !

    For the audio playlist, I would like to manage background color, to avoid white and put orange

    .wp-playlist-dark {
    background-color: ####;
    }

    This is not working . . . I steel have a white background

    For audio player, I would like to customize colors to : https://www.dropbox.com/s/djsvqgwiap4pm5t/Capture%20d%E2%80%99%C3%A9cran%202014-05-01%20%C3%A0%2015.00.21.png

    I believe you're referring to how the volume bar gets pushed down to the bottom here:

    https://cloudup.com/ckoxD7ebauI

    I have noticed this bug ... What I would like to do is to customize colors of the player, I have found this on an old wordpresstips blog :

    https://wpbtips.wordpress.com/2009/05/10/customizing-the-audio-player/

    Could we use such parameters with new WP player, or is it possible to do such with CSS customization ?

    I hope this is clear for your ?
    Thanks again, DvisMusic

  25. jeremeylduvall
    Staff

    Hi!

    These questions are best directed to the CSS Support forum here:

    http://en.forums.wordpress.com/forum/css-customization

    We have some CSS gurus there that will be able to let you know if this is possible or not. Please direct all further CSS questions there.

    If you have any additional support questions, feel free to drop them here!

  26. Hi, I will use the appropriate CSS Support forum, and will let you know.
    Thanks to you, DvisMusic

  27. jeremeylduvall
    Staff

    Not a problem! Please let me know if you need any additional help with features of the theme or WordPress.com.

  28. HI, I am back with a new question, perhaps you could help me ?

    I would like to set the hover color set when you choose an item in the menu generated for ipad and iphone, see :

    https://www.dropbox.com/s/wfcvtrt8b9uqtpn/Capture%20d%E2%80%99%C3%A9cran%202014-05-04%20%C3%A0%2017.07.48.png

    The current selected item is in orange, I would like to have the hover color in red, when you choose a new item in the menu ...

    Thanks for your support,
    DvisMusic

  29. HI, I am back with a new question, perhaps you could help me ?

    I would like to set the hover color set when you choose an item in the menu generated for ipad and iphone, see :

    https://www.dropbox.com/s/wfcvtrt8b9uqtpn/Capture%20d%E2%80%99%C3%A9cran%202014-05-04%20%C3%A0%2017.07.48.png

    The current selected item is in orange, I would like to have the hover color in red, when you choose a new item in the menu ...

    Thanks for your support,
    DvisMusic

  30. Sorry, I have doubled this entry, I move to fast . . .

Topic Closed

This topic has been closed to new replies.

About this Topic