Linking to an external css stylesheet

  • kwts

    #4940

    I’m building a table and want to call on some css coding for speech bubbles so the bubbles appear in each section of the table.

    When I put this code into the html editor, all looks great:

    <link rel="stylesheet" href="
    http://www.knowwhattosay.com/wp-content/uploads/2012/07/speech.css">
    <style type="text/css">
    <!--
    @import url("
    http://www.knowwhattosay.com/wp-content/uploads/2012/07/speech.css");
    -->
    </style>

    However, the code disappears when I make any alteration to the visual editor?

    This may be a newbie question, but is there another way I should be linking to my speech bubble stylesheet? Or do I have to never touch the visual editor?

    http://www.knowwhattosay.com/?page_id=110

    Mod

    Kenneth John Odle

    #29987

    If you are using a child theme, you can simply add those codes to the child theme’s style sheet.

    <!-- and --> are HTML comment markers. Anything you place between them will be ignored by a browser, so there is no need to repeat that.

    This code

    <link rel="stylesheet" href="
    http://www.knowwhattosay.com/wp-content/uploads/2012/07/speech.css">
    <style type="text/css">

    is for creating an internal stylesheet.

    You can link to an external style sheet, but you will need to use a child theme and link to it via WordPress’s wp_head() action hook. The code looks like this:

    add_action ('wp_head', 'extstyle' );
    function extstyle() {
    echo "<link rel='stylesheet' id='graphene-stylesheet-css' href='http://www.example.com/styles.css' type='text/css' media='screen' />";
    }

    The href works best if it is an absolute URL. If you understand media types, you can add style sheets for whatever device you care to support.

    But seriously, if you’re going to go through that much trouble, it’s easier (and probably helps page load times) to just include that code in a child theme style sheet.

    kwts

    #29988

    Hi Kenneth,

    Thanks for this. I am using a child theme. I would much rather create internal stylesheets and put code into the child theme style sheet. I am though still a little stumped. Right now I have the code you suggested

    ‘<link rel=”stylesheet” href=”

    http://www.knowwhattosay.com/wp-content/uploads/2012/07/speech.css“>

    <style type=”text/css”>,

    In my Graphene Child Style Sheet.

    I have the speech bubble code I am calling to, in my wordpress media library, with the url above.

    I have a table produced on my shop page.

    What code do I need to put in my html editor on the shop page to get the speech bubbles into the table?

    Apologies if I am asking basic questions. I learnt enough to get it working, but have no idea how to fix this in wordpress!

    Admin

    Syahir Hakim

    #29989
    Quote:
    I am using a child theme. I would much rather create internal stylesheets and put code into the child theme style sheet.

    If you’re using a child theme, just place all of the additional CSS into the child theme’s style.css file. There’s no need to create another separate CSS file.

    Mod

    Kenneth John Odle

    #29990

    What you need to understand is that <link rel="stylesheet" href="http://www.knowwhattosay.com/wp-content/uploads/2012/07/speech.css"><style type="text/css"> is HTML and not CSS, and thus doesn’t belong in your style sheet.

    That code above will only work if you are inserting into the <head> of an HTML document. The only way to do that on WordPress is to use a child theme and hook it to the wp_head() action hook I mentioned above.

    Quote:
    What code do I need to put in my html editor on the shop page to get the speech bubbles into the table?

    The only way to do this in the html editor would be to define these styles as inline styles. In other words, you would have to add the entire style information to each and every element that you are styling. This both defeats the purpose of having an external stylesheet (where you only have to define styles once) and the increase in page loading time that having an external style sheet provides.

    If you do link to an external stylesheet or add this code to your child theme style sheet (which is, believe me, the way to go, for reasons I will explain in a moment) Then you simply add that class to whatever element you want styled that way, like this:

    <table class="triangle-right-top">

    Anything in a style sheet that starts with a “.” is a class (.triangle-right-top) and anything that starts with a “#” is an id (#container). Looking at the style sheet you’ve linked to, it looks like just about everything in it is a class.

    A moment has passed. Here are those reasons I mentioned earlier:

    Looking at that stylesheet, I count just over 1300 lines of code. That’s 39,487 extra bytes being loaded every time someone visits your page. Think about it. Are you really going to use every bit of code in that stylesheet? If so, link to it using wp_head(). But if you are only going to use a handful of those styles (or even only a dozen or so), it really makes more sense to simply copy those styles over to your own style sheet, to save on page loading times. It looks like the author of that style sheet really added a lot of comments (which is good, because it makes it easier for the rest of us to figure out what is going on), but that still adds to the weight of that sheet. The good news is that it is well-commented enough you could probably figure out which bits of code you can copy.

    My two cents/pence, anyway. Let us know how you get on.

    Ken

    Mod

    Kenneth John Odle

    #29991

    So….yes. What Syahir said.

    kwts

    #29992

    Lol, yes what Syahir said – thanks Syahir I am now fully using the child theme style sheet.

    Ken, thank you so much for your help. I found the code I needed, followed the steps you laid out and all is working perfectly :o)

    Sasha.

    Anonymous

    #29993

    Marking thread as resolved. You can do this yourself as well.

    kwts

    #29994

    Cheers Josh, will remember to do this next time

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

You must be logged in to reply to this topic.

Do NOT follow this link or you will be banned from the site!