Support » Theme: Delicacy » Delicacy – Changing the color of the ribbons

  • Resolved GoodMorningLondon



    I am just setting up the Delicacy theme for my blog :, and would like the color of the ribbon to match the color of my header banner.

    Where should I go to change it? Should I modify the images directly, or can I do it in the CSS?

    Many thanks in advance,


Viewing 7 replies - 1 through 7 (of 7 total)
  • I actually manage to change it by editing the image directly, but now I am stuck with a blue line on top of it…any ideas on how to remove it?

    Thanks πŸ™‚



    Forum Moderator

    That the background color of that element — showing because of borders or padding or margins. Look for those in this CSS:

    #navigation {
        background: url("ribbon.png") repeat-x scroll left bottom #4387C1;
        border-left: 1px solid #6DA2D7;
        border-right: 1px solid #6DA2D7;
        border-top: 1px solid #6DA2D7;
    #navigation {
        font-family: Georgia,Times,serif;
        font-style: italic;
        margin: 0 -9px;
        padding: 3px 10px;
        position: relative;
        z-index: 999;

    You could change the background color codes to match the ribbon color or remove the borders, padding, etc.

    Hopefully you are using a custom CSS option for all these changes? If not, your changes will be deleted when the theme is updated…

    Thanks for your answer but actually I don’t have the same code portion, and I couldn’t find what to remove on mine:

    #navigation {font-family: Georgia,Times,serif; font-style: italic; position: relative; z-index: 999; margin: 0 -9px; padding: 3px 10px;}
    .main-menu ul {display: inline-block; margin:0; padding: 0;}
    	.main-menu li {display: inline; float: left; font-size: 16px; position: relative;}
    	.main-menu li a {color:#FFFFFF; display: block; float: left; padding: 15px 15px 16px;}
    .ribbon {display: block; height: 61px; position: absolute; width: 30px; bottom:-8px;}
    .ribbon-left {left: -20px;}
    .ribbon-right {right: -20px;}
    #navigation {background: url("images/red/ribbon.png") repeat-x left bottom ;}
    .ribbon-left {background: url("images/red/ribbon-borders.png") no-repeat left top;}
    .ribbon-right {background: url("images/red/ribbon-borders.png") no-repeat right top;}

    Would you be able to tell me exactly what I should change?

    Thanks a lot πŸ™‚



    Forum Moderator

    Where are you making changes? — as noted above, don’t make changes in the theme files or they will all be lost when the theme is updated.

    Try adding this to your CSS code:

    #navigation {
       border: none !important;
       padding: none !important;

    It didn’t work… πŸ™



    Forum Moderator

    Try changing the

    padding: none !important;


    padding: 0 !important;

    Thanks so much, it finally worked!! πŸ™‚

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Delicacy – Changing the color of the ribbons’ is closed to new replies.