jagguy
asked on
style menu wordpress
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?
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?
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.
Also, can you give us a link to what you are doing so we can show you what needs to be changed?
ASKER
I am developing on my PC.
Do you know how to use Firebug? We can walk you through it.
Please make a screenshot of your page (menu) and indicate what you want to change the styling for.
ASKER
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
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
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;
}
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/
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/
ASKER
ok the code works find , but I dont get the line
background-image: url("data:image/png;base64 ,iVBORw0KG goAAAANSUh EUgAA..... .....
Also just changing the white foreground color in the content should not require a plugin but a line if css, shouldnt it?
background-image: url("data:image/png;base64
Also just changing the white foreground color in the content should not require a plugin but a line if css, shouldnt it?
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.
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.
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
be careful about any updates to that theme as your changes could get overwritten
ASKER
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
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
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
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
ASKER
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.
background-image: url("data:image/png;base64
As for the green color , I want to get rid of it but I cant see anywhere where this color is set.
So if I right click on the element I dont see the below code in boldFF or Chrome?
ASKER
FF, I see the element but the code you got
background-image: url("data:image/png;base64 ,iVBORw0KG goAAAANSUh EUgAAA
background-image: url("data:image/png;base64
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
ss3.docx