-
No, I just replace the template default colors for the colors I want.
Just to clarify, I”m changing the code that came with the style.css, not overriding it at the end with new code, that seems to do the trick.
You know what? just ignore me. I forgot a few tags. You can use custom CSS, but I missed a few. I’ll try this one more time and when I’m absolutely sure, I’ll post my completed CSS tags.
Until further notice, pay no mind to the village idiot. 😛
Ok, this seems to do the trick and I’m happy with what i’ve got. One Thing though, the only css that couldn’t be overridden by the custom CSS was this:
#access li.current_page_item > a {
background:#555;
}I had to change that in the style.css file. However, you change these in the custom CSS and save for the header becoming a solid color in mobile sizes when I hit the navigation button, it works just fine.
body {
background: #f2eae6;
}#header{
background-image:url(http://www.mcgilltestsite.com/stitchymamatest/files/2012/08/DenimTile.png);
}
#access {
background:#bf927c;
background:-moz-linear-gradient(#d9a58d, #a67e6c);
background:-webkit-linear-gradient(#d9a58d, #a67e6c);
background:-o-linear-gradient(#d9a58d, #a67e6c);
background:-ms-linear-gradient(#d9a58d, #a67e6c);
background:linear-gradient(#d9a58d, #a67e6c);
}.drop-down-toggle {
background:#d9a58d;
}#access li li a {
background:#d9a58d;
border-top:#f2b89d 1px solid;
border-bottom:#a67e6c 1px solid;
}#access li li a:hover {
background:#f2b89d;
}#access li ul {
box-shadow:0 0 3px #d9a58d;
}.dropcap-black:first-letter {
background: #d9a58d;
}#footer-area {
background:#bf927c;
border-top:#f2c9b6 1px solid;
}#footer-area .tagcloud a {
background:#f2b89d;
background:-moz-linear-gradient(#f2b89d, #d9a58d);
background:-webkit-linear-gradient(#f2b89d, #d9a58d);
background:-o-linear-gradient(#f2b89d, #d9a58d);
background:-ms-linear-gradient(#f2b89d, #d9a58d);
background:linear-gradient(#f2b89d, #d9a58d);
}#footer-area .tagcloud a:before {
background:#bf927c;
}#copyright {
background: #a67e6c;
border-top: #d9a58d 1px solid;
}#access a {
background:#d9a58d;
background:-moz-linear-gradient(#d9a58d,#a67e6c);
background:-webkit-linear-gradient(#d9a58d,#a67e6c);
background:-o-linear-gradient(#d9a58d,#a67e6c);
background:-ms-linear-gradient(#d9a58d,#a67e6c);
background:linear-gradient(#d9a58d,#a67e6c);
}#access .menu a:hover {
background:#f2c9b6;
}#access li li a {
background:#e5af95;
border-top-color:#ffc2a6;
}#access li li li a {
background:#f2b89d;
border-top-color:#f2c9b6;
}#footer {
clear: both;
border-top: #d9a58d 1px solid;
}Ok, I’m done for the day. I’ve got that done and I got a CSS3 font rule set and it all works. I’m happy. Anyone have any recomendations to improve it, let me know. http://www.mcgilltestsite.com/stitchymamatest/
You can add more css for the resized version as follows:
@media screen and (max-width: 960px) {
}
You can use the max-width parameter to specify when to use the code in the brackets. The two I’m using are 960px and 760px.
To get around the effect that you saw, I simply positioned the header relatively and gave it a higher z-index than the menu (anything over 2, I think). That brought the text ahead of the menu, and then it was just a matter of changing the color, code which I also enclosed in the above parameters.
However, for your case, I suggest you add something like this to your code:
@media screen and (max-width: 760px) {
#access {
background: none !important;
}
}As that seems to do the trick on my implementation. You might have some glitches, but they should be easy to solve.
If you want to take a look at all of the CSS modifications I’ve made, you can find them here: http://pastie.org/4572913
Particularly, I would suggest you adopt a couple small things, like giving #access a webkit background and changing the position of the menu button to line up with the search bar.
Good luck! I hope this helps! ):
You must be logged in to reply to this topic.