Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Saturday, May 24, 2014

Changing Flipcard Default Background Color in Blogger Dynamic View

Spoken by at 10:14 PM
Before
After
When you do not have an image to be used as thumbnail for a given flipcard, by default, the front card would assume a greyish background color. Here's how you can change this default color.

Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog. 
.flipcard .items .item .card .front, .flipcard .items .item .card .back{
background-color: white !important;
}
To change the color, simply replace the word 'white' in Line 2 above. You can either use simple color text such as 'red', 'green' 'blue' etc, or, you can generate your own hex color tag if you prefer to use a specific color.
Labels: ,

29 comments:

  1. هادیMay 24, 2014 at 11:35 PM

    thanks alot

    ReplyDelete
  2. هادیMay 25, 2014 at 2:02 AM

    hello again
    I want to change the font color of flipcard both back and front.
    is there any cod for that?
    thanks

    ReplyDelete
    Replies
    1. YoboyMay 25, 2014 at 6:43 AM

      This should help. For front:

      .flipcard .items .item .card .front .title{
      color: red !important;
      }

      For back:

      .flipcard .items .item .card .back .title{
      color: yellow !important;
      }

      Delete
  3. هادیMay 25, 2014 at 7:24 PM

    thanks
    you could right a reference book about these css codes!

    ReplyDelete
  4. هادیMay 25, 2014 at 8:27 PM

    hello again
    I have another problem.
    I have 34 items in header bar.
    but when the width gets narrower they combine to each other as a pages dropdown menu.
    my broblem is that some of these items are been lost.

    this image tells the whole story:
    http://dl.1002mp3.ir/images/1.jpg

    and this is my weblog:
    www.1006mp3.ir

    is there any way to fix this problem?
    thanks

    ReplyDelete
    Replies
    1. YoboyMay 28, 2014 at 12:26 PM

      Hi Mate,

      I'm afraid that is the default behaviour. There isn't much we can do about it since the number of items is alot. I've thought about forcing the links to go to a new line but that doesn't turn out well on different monitors unfortunately..

      Delete
  5. The Fall of Great WallMay 29, 2014 at 12:46 PM

    I am very sorry if I go out of the topic

    I am very furstrated with my blog, unable to change the background text of posts after trying for more than three weeks, with hundred of sites!!!! and codes!!!!

    please can you help me??? I am seriously need help please!!!

    this is my blog

    unified-front-against-china.blogspot.com

    you see the yellow background on text in the posts

    how can I change that through CSS? or any other way??

    Thanks...waiting your help

    ReplyDelete
  6. The Fall of Great WallMay 29, 2014 at 12:54 PM

    Yeah, I forget to mention, I want to change the yellow background color to another color, for the entire posts

    Thanks

    ReplyDelete
    Replies
    1. YoboyJune 3, 2014 at 11:23 AM

      Hello there,

      I couldn't find any text with yellow background. Have you gotten this fixed? If you still need help with this, could you post a screenshot showing where exactly is this yellow background you're referring to?

      Delete
    2. The Fall of Great WallJune 3, 2014 at 1:07 PM

      thanks

      yes I fixed it yesterday, but the code I add it,cause another changes, makes the widget too the same background...do you know how to remove the widget Cyan color background???

      Thanks

      Delete
    3. YoboyJune 3, 2014 at 1:14 PM

      The text background in your posts originated from your post's styling, not your template. As such, the best way to get this removed is by editing your posts (one at a time) and remove the background highlight manually. This is the cleanest way.

      But if for some reason that doesn't work, you can try adding a code to your template - which of course is not recommended:

      .post-body div div span{
      background-color: transparent !important;
      }

      Delete
    4. The Fall of Great WallJune 3, 2014 at 3:38 PM

      Thanks

      but where in template I can add this??? mean the code

      as for why I add code to change color, is because I dont want to go change whole posts color every time I want to changes the colors, of both text and backgrounds..will coast too much time

      Thanks

      Delete
    5. The Fall of Great WallJune 3, 2014 at 3:46 PM

      just for explination, I need only widget background color to be removed, not the posts background colors

      thanks

      Delete
    6. YoboyJune 9, 2014 at 5:29 AM

      Add it to your CSS box:

      Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      Delete
    7. The Fall of Great WallJune 9, 2014 at 5:21 PM

      thanks for your replay

      but where is the code?? as for your former one..I have tried, it does remove some of the widget backgrounds..and remove the post background! which I don't want

      can you post the code?

      Thanks..appreciated

      Delete
    8. YoboyJune 9, 2014 at 10:12 PM

      Try this. But as I've told you before, this is not the way you should go for to clean your text background. It needs to be done via your post editor, not some code. Honestly, using code is the lazy way to go about this - and in the future, you will face problem again.

      .post-body div div span, .post-body div span{
      background-color: transparent !important;
      }

      Delete
    9. The Fall of Great WallJune 10, 2014 at 5:37 PM

      I am sorry to say that you seems didn't read my post

      I said I DON'T WANT to REMOVE the background post text color,

      I want to REMOVE, the WIDGET background color, especialy the footer, which every widget have black background color..and the description in the header

      Thanks..sorry if I offended you

      Delete
    10. The Fall of Great WallJune 11, 2014 at 10:56 PM

      Thank you very much

      I have added your code, and change the color(from transparent to another) and delete my old code, that change the background text color, your code is better, didn't add backgrounds on widget, that was annoying me

      Thanks very much...sorry if I disturbed you..appreciated :)

      Delete
  7. The Fit.MeJune 22, 2014 at 6:34 PM

    Hi Yoga,
    I was trying to revamp my blog and chose dynamic views. While searching for how to customize, I landed up on your page. I have customized a lot as per my requirement as per your tutorials. Thank you so much :-)

    Just wanted to check with you, how do I add the facebook, google plus, and subscribe via email widgets on my blog. I couldn't find a tutorial here. Could you please guide me on this. I want it like you have on this page on the right hand side. Thank you in advance.

    You can check out my blog here www.cookingepisodes.com

    Regards,
    Jayashree

    ReplyDelete
    Replies
    1. YoboyJune 24, 2014 at 3:37 AM

      Hello Jayashree,

      I'm afraid the DV templates are not customisable, and as such third party scripts are often not compatible. To date I havent seen a fully working method to add social media icons.

      As for Subscribe via email widget, see the following:
      http://www.southernspeakers.net/2012/10/follow-by-email-gadget-can-be-readily.html

      Delete
  8. עופר מגדJune 30, 2014 at 3:26 AM

    Dear Yoga,
    slightly off-topic,
    Do you have any idea how to make all gadgets appear in dynamic view? I mean, I added 10 gadgets to my blog but only the first 9 are shown... If I remove one of these nine then the missing gadget reappear...
    Thanks a lot,
    Ofer.

    ReplyDelete
    Replies
    1. YoboyJuly 5, 2014 at 12:11 PM

      You might have altered the dock's position in the past, and this could be clipping the tenth gadget away. Bring it a little up and you should be able to see your tenth gadget:

      http://www.southernspeakers.net/2012/03/adjust-gadgets-vertical-position-in.html

      Delete
    2. עופר מגדJuly 13, 2014 at 7:44 PM

      Well, it appears that the problem was this code:

      #gadget-dock div.gadget-item:last-child, #spk{
      display: none !important;
      }

      and I cannot recall why did I added it...

      Thanks anyway,
      Ofer.

      Delete
  9. GouravJuly 10, 2014 at 10:04 PM

    hey how to underline and customize Post Title on "classic in dynamic view". I tried your methods.none of them worked for me.are those Theme specific?

    ReplyDelete
    Replies
    1. YoboyJuly 11, 2014 at 2:16 PM

      This should do:

      .classic .title.entry-title{
      text-decoration: underline;
      }

      Delete
  10. AnonymousNovember 25, 2014 at 3:50 AM

    Is it possible to add a marquee text in place of our header? And can we add html formatted videos into our blogs?

    ReplyDelete
    Replies
    1. YoboyNovember 28, 2014 at 12:46 AM

      I'm afraid marquee text isn't possible in DV templates at the moment.

      Some video players could work if you insert the embed code to your post's HTML section.

      Delete
  11. ApoorvaMarch 1, 2015 at 3:57 AM

    hey how i can only fix the classic view of dynamic template

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.

Subscribe to: Post Comments (Atom)