WordPress.org

Ready to get started?Download WordPress

Forums

Delicacy
[resolved] Delicacy - Changing the color of the ribbons (8 posts)

  1. GoodMorningLondon
    Member
    Posted 1 year 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

  2. GoodMorningLondon
    Member
    Posted 1 year 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 :)

  3. WPyogi
    Volunteer Moderator
    Posted 1 year 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...

  4. GoodMorningLondon
    Member
    Posted 1 year 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 :)

  5. WPyogi
    Volunteer Moderator
    Posted 1 year 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;
    }
  6. GoodMorningLondon
    Member
    Posted 1 year ago #

    It didn't work... :(

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Try changing the

    padding: none !important;

    to

    padding: 0 !important;
  8. GoodMorningLondon
    Member
    Posted 1 year ago #

    Thanks so much, it finally worked!! :)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags