I want a bigger header.

• 

  daisychainsanddreamers · Member · Oct 16, 2014 at 7:48 pm

  • Copy link

  Thanks. Again very useful.

  The code to change the title colour in my newsfeed doesn’t seem to be working.

  Could you explain this please? I don’t quite follow – “The navigation menu, like all HTML elements, will end up by default as a big rectangle, one which we’ve applied some nice borders too. If you want to make it look different you will most likely have to create an image and apply that to the element in the background.”

  I’d like to keep the hover effect in the navigation bar, is there any way I can do this while still using images?

  I don’t think applying the images to the background is going to work in my sidebar. I’d like to change the font and have a daisy either side or directly to the left of each title e.g. Welcome. is this not possible?

  Thank you

• 

  hallluke · Member · Oct 16, 2014 at 8:41 pm

  • Copy link

  Hmmm, I don’t see it applied in your custom CSS. Maybe try this instead:

  .wf-active .entry-title a {
    color:#f00;
  }
  
  .wf-active .entry-title a:hover {
    color:#0f0;
  }

  While creating shapes for a ribbon-style menu is possible in CSS it’s quite complicated, leave it with me for a bit and I’ll see if there’s anything I can figure out. If this doesn’t lead to anything your best bet is to create an image of how you want the banner ribbon to look and apply it as a background image to the entire element.

  You can use a separate image for the hover state if you like, here’s an example to match the previous code I gave you:

  #menu-links .menu-item-1279:hover {
    background:url("HOVERIMAGEURL");
  }

  Here’s how you’d use similar code to replace the widget titles:

  #secondary #text-5 .widget-title {
    background:url("http://placehold.it/250x60") no-repeat;
    height:50px;
    padding-left:20px;
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
  }

• 

  daisychainsanddreamers · Member · Oct 16, 2014 at 9:08 pm

  • Copy link

  Thanks. The colour change worked with that code (won’t be applying it until I have the full redesign coded).

  Thanks so much for looking into ribbons for me.

  I think the best think to do is for me to design my mast head and widget/menu titles then have a proper play.

  Learnt a lot from that link and your advice so thanks so much.

• 

  hallluke · Member · Oct 16, 2014 at 9:59 pm

  • Copy link

  My pleasure, I can’t wait to see the finished* site, be sure to post back here so I can take a look.

  When you create your images if you need more help adding them in with CSS be sure to let me know. Just post the URLs you want to use and which title or menu they should be replacing (if it’s not obvious) and I’ll give you some more pointers to get you up and running!

  Try this out to create a little ribbon effect with CSS, it might not be perfect in all browsers so it’s definitely worth testing first!

  #access {
    padding-bottom:2px;
  }
  
  #menu-item-1279:before, #menu-item-800:after {
    content:"";
    position:absolute;
    display:block;
    top:0;
    border:23px solid #ccc;
  }
  
  #menu-item-1279:before {
    left:-3em;
    border-right-width:1em;
    border-left-color:transparent;
  }
  
  #menu-item-800:after {
    right:-3em;
    border-left-width:1em;
    border-right-color:transparent;
  }

  * As much as it will ever be truly finished – if you’re anything like me you’ll continue tweaking things forever!

• 

  daisychainsanddreamers · Member · Oct 16, 2014 at 10:55 pm

  • Copy link

  Thank you. That would be a massive help. It’s hard to really fiddle with the layout without the finished elements. Will definitely share the finished thing!

  Had a go with the ribbon and appeared as two grey double triangle shapes positioned next to the menu text on either side. Tried to move them but can’t seem to get them right. Maybe a browser thing as you mentioned?

• 

  hallluke · Member · Oct 17, 2014 at 6:41 am

  • Copy link

  I didn’t paste in the code to change the background colour of the menu items, oops! Imagine everything else was grey too! It is based on the example found on this cool ribbon builder, but without the 3D effect. Is that what you were aiming for?

• 

  hallluke · Member · Oct 17, 2014 at 7:21 am

  • Copy link

  Try using this instead to get a better idea of what I was going for:

  #access {
    padding-bottom:2px;
  }
  
  #access li {
    background:#ccc;
    margin-top:2px;
    height:45px;
  }
  
  #menu-item-1279:before, #menu-item-800:after {
    content:"";
    position:absolute;
    display:block;
    top:0;
    border:23px solid #ccc;
  }
  
  #menu-item-1279:before {
    left:-2.5em;
    border-right-width:1em;
    border-left-color:transparent;
  }
  
  #menu-item-800:after {
    right:-2.5em;
    border-left-width:1em;
    border-right-color:transparent;
  }

• 

  daisychainsanddreamers · Member · Oct 20, 2014 at 5:50 pm

  • Copy link

  Thanks, so when I go to make the changes how would I get rid of the existing navigation bar behind? and add in my new menu options inside?

  Thanks

• 

  hallluke · Member · Oct 20, 2014 at 6:46 pm

  • Copy link

  If you’re asking about swapping out the text for images in the navigation menu then I gave you some code which should still work earlier in this thread. That should still do the trick!