Delicacy – Changing the color of the ribbons

  • Resolved GoodMorningLondon

    (@goodmorninglondon)


    11 years, 4 months ago

    Hello,

    I am just setting up the Delicacy theme for my blog : http://www.goodmorninglondon.fr, 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,

    Aurélie

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter GoodMorningLondon

    (@goodmorninglondon)

    11 years, 4 months ago

    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 🙂

    WPyogi

    (@wpyogi)

    11 years, 4 months ago

    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…

    Thread Starter GoodMorningLondon

    (@goodmorninglondon)

    11 years, 4 months ago

    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 🙂

    WPyogi

    (@wpyogi)

    11 years, 4 months ago

    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;
}

    Thread Starter GoodMorningLondon

    (@goodmorninglondon)

    11 years, 4 months ago

    It didn’t work… 🙁

    WPyogi

    (@wpyogi)

    11 years, 4 months ago

    Try changing the

    padding: none !important;

    to

    padding: 0 !important;

    Thread Starter GoodMorningLondon

    (@goodmorninglondon)

    11 years, 4 months ago

    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.