Help with customising menu

daisychainsanddreamers · Member · Jan 12, 2015 at 11:42 pm
Copy link

Add topic to favorites
Hi,

I am redesigning my blog and have been working on the following CSS. I want to add my own font to the banner menu and have created images of the text to create buttons. How do I place these inside my banner, link through and use as a new menu? Does this make sense?

Also I’m struggling creating a banner shape… any suggestions?

#page {
background:transparent;
}

#colophon, #content, #secondary {
background:#fff;
}

#masthead {
padding-top:0;
margin:0;
}

#access {
border:none;
background:#fff;
padding:5px 0;
}

#masthead img {
display:none;
}

#masthead a.custom-header {
width:1050px;
height:300px;
background-image:url(“http://placehold.it/1050×252”);
}

#content {
padding:23px;
margin-left:0;
}

#secondary {
margin:0;
padding:23px;
width:380px;
}

#secondary .widget {
padding-left:0;
}
#access {
margin-top:.615em;
margin-bottom:-0.95em;
}

#main {
padding-top:1.615em;
}

#secondary {
margin-right:0%;
width:30.5833%;
}

#content {
margin-left:0%;
}
#content {
width:671px;
}

#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:-14.5em;
border-right-width:13em;
border-left-color:transparent;
}

#menu-item-800:after {
right:-14.5em;
border-left-width:13em;
border-right-color:transparent;
}

Thanks

The blog I need help with is: (visible only to logged in users)
staff-happychia · Staff · Jan 13, 2015 at 7:55 am
Copy link
Do you want to set a background images to the current menu items, Home, About Me, Lifestyle, DIY etc just because you want to get the required font?

Which font are you after?

We can surely set images to the background of the menu items but how about we instead change the font of the current menu items to make it easy? Is that okay?

Could you upload the images you have created and provide their links?
daisychainsanddreamers · Member · Jan 13, 2015 at 9:54 am
Copy link
1) That’s right, but I also want to add some daisy icons. I’m working with an illustrator and haven’t received the final artwork yet but want to have it ready to slot in.

The font is Aracne Light.

https://daisychainsanddreamers.files.wordpress.com/2015/01/home.jpg
https://daisychainsanddreamers.files.wordpress.com/2015/01/about.jpg
https://daisychainsanddreamers.files.wordpress.com/2015/01/lifestyle.jpghttps://daisychainsanddreamers.files.wordpress.com/2015/01/diy.jpg
https://daisychainsanddreamers.files.wordpress.com/2015/01/beauty.jpghttps://daisychainsanddreamers.files.wordpress.com/2015/01/fashion.jpg

I haven’t got the daisy artwork to use yet but basically it’s circle shaped and will sit the same height as the menu text. I want to have a play around with it’s location but may include it before each bit of menu text.

2) To turn the menu into a solid banner shape I’m having real problems. Is this something I can also add as an image and set the menu buttons over the top?

Thanks so much for your help.
daisychainsanddreamers · Member · Jan 13, 2015 at 9:56 am
Copy link
Ah those links didn’t work but if you wouldn’t mind showing me what code I need to use and I can add in the relevant links.
designsimply · Member · Jan 18, 2015 at 8:15 pm
Copy link
Here is a trick to adjust the height of the images using a query string: add ?h=value to the end of the image URL like this:

https://daisychainsanddreamers.files.wordpress.com/2015/01/home.jpg?h=32

If you use the same height for each image, it will work better in the end.

Next, you need to use an image replacement technique in CSS to swap out the text for your images. I like this technique:
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

To make the change, you need to have links to all of the images, their widths, and then you need to look at the page source to figure out each menu item’s ID value so you can use that to target each one separately with some custom CSS. For example, the “About” menu item has an ID value of “menu-item-4574” which you can find if you use your browser tools to view the HTML source.

It’s a little complex if you’re not used to dealing with CSS, so I put together an example for you:
```
#access a {
	height: 32px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

#page #access #menu-item-4572 a {
	background: transparent url(https://daisychainsanddreamers.files.wordpress.com/2015/01/home.jpg?h=32) no-repeat;
	width: 87px;
}

#page #access #menu-item-4574 a {
	background: transparent url(https://daisychainsanddreamers.files.wordpress.com/2015/01/about.jpg?h=32) no-repeat;
	width: 106px;
}

#page #access #menu-item-4581 a {
	background: transparent url(https://daisychainsanddreamers.files.wordpress.com/2015/01/lifestyle.jpg?h=32) no-repeat;
	width: 161px;
}

#page #access #menu-item-4580 a {
	background: transparent url(https://daisychainsanddreamers.files.wordpress.com/2015/01/beauty.jpg?h=32) no-repeat;
	width: 128px;
}

#page #access #menu-item-4579 a {
	background: transparent url(https://daisychainsanddreamers.files.wordpress.com/2015/01/diy.jpg?h=32) no-repeat;
	width: 46px;
}

#page #access #menu-item-4582 a {
	background: transparent url(https://daisychainsanddreamers.files.wordpress.com/2015/01/fashion.jpg?h=32) no-repeat;
	width: 128px;
}
```
The first block is the part of the image replacement technique that hides the text so you can use a background image in its place. I picked 32px as the height because it seemed good. If you wanted to adjust that number, you’d want to change it in the first block as well as in the query strings like “?h=32” in all the url() functions below. After the first block, there is a CSS snippet that targets each menu item specifically and then sets a proper width according to how big the image turned out to be based on a 32px height. Note that if you adjust the height values, you would probably want to adjust the widths as well and you’d need to check each one individually.

I tested out the images, and they look really cool! Try out the example above and see what you think.

No items found.