Adding some CSS3 to my template

(@lmarso)

Hey, I was just trying to put some CSS3 code to my template. But i couldn’t find what tags I had to change. Can someone help me?

My theme is Catch Everest V1.1

My website is ” http://henriqueguimaraes.net/multimediaonline/ “

This is the code I think I would change:

/* =Menu
----------------------------------------------- */

#header-right .menu li {
	display: inline;
	margin: 0;
}
#header-right .menu ul {
	display: inline;
}
#header-right .menu a {
	border-left: 1px solid #e6e6e6;
	padding: 0 4px 0 8px;
	padding: 0 0.4rem 0 0.8rem;
	text-decoration: none;
}
#header-right .menu a:hover {
	color: #0088cc;
}
#header-right .menu  li.current_page_item > a,
#header-right .menu  li.current-menu-item > a {
	color: #000;
}
#header-right .menu > li:first-child > a {
	padding-left: 0;
    border-left: none;
}
#header-menu {
	background-color: #ffffff;
	margin-bottom: 0;
}
#header-menu #access,
#colophon #access-footer {
	clear: both;
	display: block;
	float: left;
	margin: 0 auto;
	width: 100%;
}
#header-menu ul.menu,
#colophon #access-footer ul.menu {
	list-style: none;
	padding-left: 0;
	text-align: center;
	border-top: 1px solid #603388;
	border-bottom: 1px solid #603388;
}
#header-menu ul.menu li {
	display: inline-block;
	position: relative;
	text-align: left;
}
#header-menu ul.menu a,
#colophon #access-footer ul.menu a {
	color: #000000;
	display: block;
	line-height: 45px;
	line-height: 4.5rem;
	padding: 0 20px;
	padding: 0 2rem;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}
#header-menu ul.menu ul {
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	display: none;
	float: left;
	margin: 0;
	position: absolute;
	top: 45px;
	top: 4.5rem;
	left: 0;
	list-style: none;
	width: 188px;
	z-index: 99999;
}
#header-menu ul.menu ul ul {
	left: 100%;
	top: 0;
}
#header-menu ul.menu ul a {
	background: #ffffff;
	color: #000000;
	font-size: 12px;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 23px;
	line-height: 2.3rem;
	height: auto;
	padding: 10px;
	width: 168px;
}
#header-menu ul.menu li:last-child,
#header-menu ul.menu ul li {
	border:none;
}
 #header-menu ul.menu li:hover > a,
#header-menu ul.menu a:focus,
#colophon #access-footer ul.menu a:hover,
#colophon #access-footer ul.menu a:focus {
	border-bottom: 1px solid #603388;
	border-top: 1px solid #603388;
}
#header-menu ul.menu li:hover > ul {
	display: block;
}
#header-menu .menu .current-menu-item > a,
#header-menu .menu .current-menu-ancestor > a,
#header-menu .menu .current_page_item > a,
#header-menu .menu .current_page_ancestor > a,
#colophon .menu .current-menu-item a {
border-top: 3px solid #673695;
border-bottom: 3px solid #673695;
}
#access-secondary {
	background-color: #e6e6e6;
	clear: both;
    display: block;
    float: left;
    margin: 0 auto;
    width: 100%;
}
#access-secondary ul.menu {
	font-size: 13px;
	font-size: 1.3rem;
}
#access-secondary ul.menu li {
    border-right: 1px solid #dedede;
}
#access-secondary ul.menu a {
	color: #373737;
	line-height: 35px;
	line-height: 3.5rem;
}
#access-secondary ul.menu ul {
    list-style: none;
	top: 35px;
    top: 3.5rem;
}
#access-secondary ul.menu ul a {

}
#access-secondary ul.menu ul ul {
	top: 0;
}
#colophon #access-footer {
	margin-bottom: 0;
}
#colophon #access-footer ul.menu li {
	border-left: 1px solid #444;
	float: left;
}
#colophon #access-footer ul.menu ul {
	border-left: 1px solid #444;
    display: inline;
    float: left;
    list-style: none outside none;
    margin: 0;
}
#colophon #access-footer ul.menu a {
    display: inline;
    float: left;
}
#colophon #access-footer ul.menu li:first-child {
    border: none;
}

/* =Responsive Menu (Tinynav.js)
-------------------------------------------------------------- */
.default-menu {
	display: none !important;
}
.sb-options li:last-child {
	display: none;
}
.tinynav {
    display: none;
	font-size: 16px;
}
.sb-holder {
    display: none;
    height: 40px;
    margin: 0 auto;
    position: relative;
    width: 100%;
}
.sb-selector {
    display: block;
    height: 40px;
    left: 0;
    line-height: 42px;
    outline: none;
    overflow: hidden;
    position: absolute;
    text-indent: 10px;
    top: 0;
    width: 100%;
}
.sb-selector:link,
.sb-selector:visited,
.sb-selector:hover {
    color: #fff;
    font-weight: bold;
    outline: none;
    text-decoration: none;
    text-shadow: 0 -1px 0 #000;
}
.sb-toggle {
    background: url(images/select-icons.png) 0 10px no-repeat;
    display: block;
    height: 40px;
    outline: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
}
.sb-toggle-open {
    background: url(images/select-icons.png) 0 -45px no-repeat;
}
.sb-holder-disabled {
    background-color: #3c3c3c;
    border: 1px solid #515151;
}
.sb-options {
    background-color: #3a3d41;
    list-style: none;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 30px;
    width: 100%;
    z-index: 99;
    overflow-y: auto;
}
.sb-options li {
    padding: 0;
}
.sb-options a {
    border-bottom: 1px solid #666;
    display: block;
    font-size: 12px;
    outline: none;
    padding: 6px 4px;;
    text-indent: 4px;
}
.sb-options a:link,
.sb-options a:visited {
    color: #eee;
    text-decoration: none;
}
.sb-options a:hover,
.sb-options a:focus,
.sb-options a.sb-focus {
    background-color: #2d2d2d;
}
.sb-options li.last a {
    border-bottom: none;
}
.sb-options .sb-disabled {
    border-bottom: dotted 1px #515151;
    color: #999;
    display: block;
    padding: 7px 0 7px 3px;
}
.sb-options .sb-group {
    border-bottom: dotted 1px #515151;
    color: #ebb52d;
    display: block;
    font-weight: 700;
    padding: 7px 0 7px 3px;
}
.sb-options .sb-sub {
    padding-left: 17px;
}

What I want is to make on the menu “hover” something like this without messing up the entire menu:
http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition1

Thx for the help

Viewing 15 replies - 1 through 15 (of 15 total)

kirkclarke
(@kirkclarke)

10 years, 8 months ago
I tweaked this style:
```
#header-menu ul.menu a,
#colophon #access-footer ul.menu a {
color: #000000;
display: block;
line-height: 45px;
line-height: 4.5rem;
padding: 0 20px;
padding: 0 2rem;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
transition: width .8s;
-webkit-transition: width .8s;
min-width: 100px;
}
```
And added the transition timing as well as a min-width so the menu items are around the same width.

And added this:
```
ul.menu a:hover {
width: 135px;
}
```
Which controls the width of the expansion.

You might want to rename or change the font-size of technical areas so it’s closer to the same width as the other menu links.
It’s rough but it may help. I also suggest using firebug for firefox or development tools in google chrome.
Thread Starter Lmarso
(@lmarso)

10 years, 8 months ago

not working as I thought… what I wanted was, when the list of technical areas is on “hover” to have that effect… I hope you understand what I’m saying. If u checked it right now you will see it’s kinda messed up. I did as you told. Thanks for helping me by the way

kirkclarke
(@kirkclarke)

10 years, 8 months ago

“Technical Areas” is a lot longer than the min-width of 100px, so it gives that issue. I suggest changing the name of the page so that is shorter (or reducing the font-size more).

It’s all a matter of finding the right balance between the length of all the menu items, their min-width (which cannot be shorter than the largest menu item) and the hover width.
Thread Starter Lmarso
(@lmarso)

10 years, 8 months ago
I understood that problem… The thing is, that I need this code:
```
#colophon #access-footer ul.menu a:focus {
	border-bottom: 1px solid #603388;
	border-top: 1px solid #603388;
```
For the the list from technical areas, projects and contacts to appear.

But when I put that code, it automatically disables de transition.
kirkclarke
(@kirkclarke)

10 years, 8 months ago
Looking at your website it seems you’ve taken away the transition, in the css. What I added didn’t mess with the section mentioning the borders.
```
#header-menu ul.menu a,
#colophon #access-footer ul.menu a {
color: #000000;
display: block;
line-height: 45px;
line-height: 4.5rem;
padding: 0 20px;
padding: 0 2rem;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
transition: width .8s;
-webkit-transition: width .8s;
min-width: 100px;
}
```
Should be a separate style from
```
#header-menu ul.menu li:hover > a,
#header-menu ul.menu a:focus,
#colophon #access-footer ul.menu a:hover,
#colophon #access-footer ul.menu a:focus {
	border-bottom: 1px solid #603388;
	border-top: 1px solid #603388;
}
```
Thread Starter Lmarso
(@lmarso)

10 years, 8 months ago

I’ve applied your code like you told. Still not opening the list. Am I doing something wrong?

kirkclarke
(@kirkclarke)

10 years, 8 months ago

I don’t think you are, but could you paste the entire css again, like in your OP. Otherwise [No, please never ask that]

Also don’t forget to add the various transition styles for all the different supporting browsers out there, such as:

-moz-transition: width .8s;
-o-transition:width .8s;

You’ve already got webkit.

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

10 years, 8 months ago

@kirkclarke, If you cannot resolve the issue and you think it requires a level of support greater than this forum can provide then forward OP onto CodePoet or WP Jobs. Please never ask for someone’s installation credentials.

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

10 years, 8 months ago

@lmarso, Where are you making these CSS modifications?

kirkclarke
(@kirkclarke)

10 years, 8 months ago

My apologies, won’t happen again.

Thread Starter Lmarso
(@lmarso)

10 years, 8 months ago

@kirkclarke here’s the menu code

[Excessive code deleted – CSS is all visible on your site so no need to post it – IF you need to post lengthy code, please use a pastebin – http://codex.wordpress.org/Forum_Welcome#Posting_Code%5D
Thread Starter Lmarso
(@lmarso)

10 years, 8 months ago
@andrew Nevins here:
```
#header-menu ul.menu a,
#colophon #access-footer ul.menu a {
color: #000000;
display: block;
line-height: 45px;
line-height: 4.5rem;
padding: 0 20px;
padding: 0 2rem;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
transition: width .8s;
-webkit-transition: width .8s;
min-width: 100px;
}
```
and here
```
#header-menu ul.menu li:hover > a,
#header-menu ul.menu a:focus,
#colophon #access-footer ul.menu a:hover,
#colophon #access-footer ul.menu a:focus {
	border-bottom: 1px solid #603388;
	border-top: 1px solid #603388;
}

#header-menu ul.menu a,

#colophon #access-footer ul.menu a {
color: #000000;
display: block;
line-height: 45px;
line-height: 4.5rem;
padding: 0 20px;
padding: 0 2rem;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
transition: width .8s;
-webkit-transition: width .8s;
min-width: 100px;
}

ul.menu a:hover {
width: 135px;
}
```
kirkclarke
(@kirkclarke)

10 years, 8 months ago

@lmarso Not sure if I can figure out where the issue lies, so may want to undo the changes that I’ve proposed for now (I was able to get it working within my browsers, so I know we’re close), also I don’t believe you need to duplicate the style that I mentioned tweaking.

Best of Luck.

Thread Starter Lmarso
(@lmarso)

10 years, 8 months ago

Ok, thanks for helping anyway.

Andrew Nevins
(@anevins)

WCLDN 2018 Contributor | Volunteer support

10 years, 8 months ago

Are you using a Custom CSS plugin?

Viewing 15 replies - 1 through 15 (of 15 total)

The topic ‘Adding some CSS3 to my template’ is closed to new replies.

Adding some CSS3 to my template

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics