Solved

style menu wordpress

Posted on 2014-02-23
18
483 Views
Last Modified: 2014-02-27
Hi

In wordpress theme twenty fourteen I want to style the vertical  menu links .
To do this I need to go to the style.css sheet and select what tag to style them?
0
Comment
Question by:jagguy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
  • 3
  • +1
18 Comments
 
LVL 17

Expert Comment

by:nanharbison
ID: 39880478
Are you using the addon to Firefox called Firebug? If you install that, you can right click on any element on your page and see the html and CSS. And then it lets you add styles to the CSS. I use to determine which html element is using which CSS rule. If I add styles to the CSS of what I think will change the menu color or size or font or something, and it doesn't work, that means I am not changing the right thing. You can also mouse over the html on the left and Firebug will highlight that element on the page.
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 39880479
Also, can you give us a link to what you are doing so we can show you what needs to be changed?
0
 

Author Comment

by:jagguy
ID: 39882074
I am developing on my PC.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 17

Expert Comment

by:nanharbison
ID: 39882160
Do you know how to use Firebug? We can walk you through it.
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 39882253
Please make a screenshot of your page (menu) and indicate what you want to change the styling for.
0
 

Author Comment

by:jagguy
ID: 39884778
Hi,

not only do i want the links styles but the background color wont change .

I want my links, and background color to look like  this so I dont need much

http://www.eternea.org/
ss.docx
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 39884953
You can start by adding this to your styles.css

ul li a {
  background-color: #141414;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==");
  color: #FFFFFF;
  display: block;
  font-family: Helvetica,Arial,Verdana,Sans-serif;
  font-size: 12px;
  line-height: 180%;
  padding: 13px 20px;
}

Open in new window

0
 
LVL 29

Expert Comment

by:chilternPC
ID: 39885134
Wordpress provide  plugins for the twenty fourteen theme to allow you to change lots of items without messing with the code.

i.e  changing colours and style the other for change nearly everything else.

you can download them directly from your wordpress admin site into your site from the admin page:
go to Plugins - Add New then search for "twenty fourteen" and they are the first 2 plugins, install and activate.

see details or download them here..

https://wordpress.org/plugins/fourteen-colors/

http://wordpress.org/plugins/fourteen-extended/
0
 

Author Comment

by:jagguy
ID: 39885253
ok the code works find , but I dont get the line

  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..........

Also just changing the white foreground color in the content should not require a plugin but a line if css, shouldnt it?
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 39885306
The background-image is taken straight from your reference site.

Instead of referring to an external image file - the raw PNG data is encoded into the style itself.

Also just changing the white foreground color in the content should not require a plugin but a line if css, shouldnt it?
Exactly! - world has gone plugin mad - downloading megabytes of plugin to do the simplest things.
0
 
LVL 29

Expert Comment

by:chilternPC
ID: 39885346
if you are just changing the code and not creating a child theme,
be careful about any updates to that theme as your changes could get overwritten
0
 

Author Comment

by:jagguy
ID: 39885418
The background-image is taken straight from your reference site.

Instead of referring to an external image file - the raw PNG data is encoded into the style itself.


Could you please tell me how to get this from the reference site. It is quite clever.
However the hover color is greenish over the link and I dint want this, and they horizontal menu on my website gets effected and I dont want that either.

Where do I get rid of the green color?
ss2.docx
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 39885490
If you are using FireFox with Firebug or Chrome you can simply right click on the element and select Inspect Element - this will give you a console window from where you can inspect html , css and script.

Not sure where the green comes from - does not appear to be on the eternea site. The background in question is a 1x50px gray gradient image (see attached)
bg.png
0
 

Author Comment

by:jagguy
ID: 39887148
So if I right click on the element I dont see the below code in bold

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA

As for the green color , I want to get rid of it but I cant see anywhere where this color is set.
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 39887984
So if I right click on the element I dont see the below code in bold
FF or Chrome?
0
 

Author Comment

by:jagguy
ID: 39888464
FF, I see the element but the code you got


background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA
0
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39888563
The right click the menu item in the vertical menu on the left (say Home) and select Inspect Element

In the console window make sure the <a href="index.aspx"> is selected.

In the Style panel on the right you should see the style
#cssmenu > ul > li.active a {
  background-color: #070707;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwRTNGNUIzNDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUwRTNGNUI0NDhBMjExRTI5MjY0Q0ZBRDcxOTYxNUNFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTBFM0Y1QjE0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTBFM0Y1QjI0OEEyMTFFMjkyNjRDRkFENzE5NjE1Q0UiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6JCXrGAAAANElEQVR42mIwMrL6z8TAwPAXlfiDyvqNykIjfqGyiCB+4uL+JMUUNMvRCDSHo3nrL0CAAQBzOzIE69Ar8wAAAABJRU5ErkJggg==");
  background-repeat: repeat-x;
  box-shadow: 0 0 3px #000000 inset;
}

Open in new window

see attached screenshot
firebug.jpg
0
 

Author Comment

by:jagguy
ID: 39888610
ok I see this but on my wordpress see below displays the rollover image with much more white  on the link so it doesnt display the same.
ss3.docx
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question