Custom CSS Problem

  • cluborange

    #3617

    Hey guys, me again, amateur graphene fan with not s slightest clue.

    Just two problems.

    1. I used ‘Custom CSS’ to style some elements, like give rounded corners to things on the sidebar. Here is all css I added, I’m not a huge fan of CSS.


    .header_title a:hover { text-decoration: underline; }

    #top-bar { background: #A1C436;

    border-bottom: 0px;

    }

    .sidebar h3 { background: #46A5E5;

    border-bottom: 0px;

    -moz-border-radius: 15px 15px 0 0;

    -webkit-border-radius: 15px 15px 0 0;

    border-radius: 15px 15px 0 0;

    }

    #archives-2,

    #recent-posts-2,

    #categories-2

    {

    -moz-border-radius: 15px;

    -webkit-border-radius: 15px;

    border-radius: 15px;

    }

    #post-33,

    #post-19 {

    -moz-border-radius: 10px;

    -webkit-border-radius: 10px;

    border-radius: 10px;

    }

    #header-menu,

    #header-menu-wrap

    {

    background: #46A5E5;

    }

    .archive-title

    {

    -moz-border-radius: 15px;

    -webkit-border-radius: 15px;

    border-radius: 15px;

    }

    #header { height: 100px;

    border-top: 0px;

    background: #A1C436;

    }

    .header_title

    {

    top: 50px;

    }


    This might be wrong, and I’d appreciate if you point out my mistakes, but it looked fine in the browser.

    When I validated css on w3c, it gave me more than 100 (!) errors like

    Property -webkit-box-shadow doesn’t exist : 0 0 10px #000

    Value Error : background Too many values or values are not recognized : url(images/sprite_master.png) -38px top no-repeat

    them.

    The question is, is it OK to add css to custom cs field without altering the original stylesheet?

    And how to get rid of all those errors?

    Thank you, only one probelm, turned out.

    http://wordpress.byethost7.com not finished

    Josh

    #25250

    From what I can tell, your code looks okay. What’s funny, is the errors being generated are not located in the css you posted.

    Are you sure the errors are being generated only when you add this to your custom css?

    cluborange

    #25251

    Actually, I just checked it without custom CSS, and got the same terrible-looking things! I set “CSS level 3” in W3C, but the thing seems not to understand CSS 3…

    So I presume the errors were in the original theme, or I’m using a wrong validator.

    Oh, just to make sure, can you just add custom CSS to “Custom CSS” field without altering anything else? Doesn’t it create two different properties for the page elements? Or does the theme know that my custom CSS should be used instead of the original?

    Here are some of the errors, if you want to see them…


    .clearfix Property zoom doesn’t exist : 1

    421 #container 0 is not a box-shadow value : 0 0 10px #000

    585 #nav .menu ul 0 is not a box-shadow value : 0 1px 2px #555

    763 .page-title Value Error : background linear-gradient(left top,#0f2d4d,#2880c3 ) is not a background-color value : linear-gradient(left top,#0f2d4d,#2880c3 )

    764 .page-title Value Error : background -moz-linear-gradient(left top,#0f2d4d,#2880c3 ) is not a background-color value : -moz-linear-gradient(left top,#0f2d4d,#2880c3 )

    765 .page-title Value Error : background -webkit-linear-gradient(left top,#0f2d4d,#2880c3 ) is not a background-color value : -webkit-linear-gradient(left top,#0f2d4d,#2880c3 )

    792 .featured_slider Value Error : background linear-gradient(left top,#0f2d4d,#2880c3 ) is not a background-color value : linear-gradient(left top,#0f2d4d,#2880c3 )

    793 .featured_slider Value Error : background -moz-linear-gradient(left top,#0f2d4d,#2880c3 ) is not a background-color value : -moz-linear-gradient(left top,#0f2d4d,#2880c3 )

    794 .featured_slider Value Error : background -webkit-linear-gradient(left top,#0f2d4d,#2880c3 ) is not a background-color value : -webkit-linear-gradient(left top,#0f2d4d,#2880c3 )

    821 .full-sized.featured_slider #slider_root 0 is not a box-shadow value : 0 0 5px #555

    Josh

    #25252

    Anything you add to your custom css gets (added to) the original theme stylesheet. Your default theme stylesheet loads first, then any modifications you make in the custom css gets added to the default theme.

    That’s why you only need to make modifications via your custom css. It’s NOT going to replace the theme stylesheet… it just gets added to it.

    So, the theme stylesheet is loaded first. Then, it we decided to change something, for example a page color, we would add it to the custom css box. This addition would be loaded AFTER the theme stylesheet, so it’s properties would overwrite the original once it is loaded.

    Try it first for yourself. Clear everything out of your custom css box (saving it to a notepad file first), and then add just one property to experiment and see how it works.

    cluborange

    #25253

    Thanks Josh, you’re really helpful!

    I was experimenting in this exact way, it’s what happens behind the scenes bothered me. You explained it.

    But doesn’t this cause the issue of “flashing original css stylesheet (without modifications) before the modifications load”? Like if the connection is slow or something, like with custom fonts?

    And just one last question… You know in the original menu, under the header, there’s “HOME” button? And if you ARE on the homepage, it is highlighted in white?

    Well when I’m on the post page, “HOME” is still highlighted, as if I’m on the home page; but I’m not, and I don’t want it this way. How would you stop it from highlighting on the posts page?

    Thanks.

    Mod

    Kenneth John Odle

    #25254

    Property -webkit-box-shadow doesn’t exist : 0 0 10px #000

    -webkit-box-shadow is CSS3, not CSS2.

    This is from Syahir’s post about Graphene:

    Note that due to the usage of a few bits of CSS3 in a CSS2.1 stylesheet, validating the CSS will yield a few errors.

    (You can read the entire bit here: http://www.khairul-syahir.com/wordpress-dev/graphene-theme)

    Doesn’t it create two different properties for the page elements?

    CSS stands for cascading style sheet. You can redefine an element as many times as you wish with css, and it is the last one that will take precedence. For example:

    p {color:blue;}
    p {color:red;}
    p {color:yellow;}

    will make your text yellow, because that is the last color you defined for your paragraphs.

    The CSS specifications do this to avoid conflicts if things should be defined more than once. Whatever is last is what will go.

    cluborange

    #25255

    Thanks Kenneth, that’s some really helpful information! (nice blog, btw)

    So I don’t have to do anything about all those errors? They’re not a big issue with the cross-browser support and stuff like that?

    Mod

    Kenneth John Odle

    #25256

    Nope–every time I do something with one of my blogs, I check it in all major browsers and it looks fine. Then I check it in IE and it looks okay. I’ve never had any complaints that people can’t access my site.

    nice blog, btw

    Thanks! It’s a result of hours of hard work and plenty of help from the folks on this forum, and especially from Syahir for developing such a great theme.

    cluborange

    #25257

    Yeah, the theme is great indeed. I hope I get some help from the people here as well, as my work is far from being finished…

    Anyway, thanks for all the help, the topic is closed 🙂

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.