Results 1 to 6 of 6

Thread: How to LINK Css to A html only description?

  1. #1
    Join Date
    Mar 2014

    How to LINK Css to A html only description?

    I'm really not great with coding, I know a enough to edit and fiddle but not much! Basically on my site here I need to make my descriptions (which only allow html) an add to cart button. The css for one of my add to cart buttons is this: [purchase_link id="1455" style="button" color="gray" text="Purchase"], all I need is SOME way maybe through a stylesheet kinda thing, link this css by an id or something? I know how to upload a file to my server...

    For instance in my site to have those rollovers I have something like this in my custom css...

    display: block;
    width: 286px;
    height: 450px;
    background: url("http://joellepoulos.com/wp-content/uploads/2014/03/ruthless.jpg") no-repeat 0 0;


    which I link in the html description by doing this: <a id="ruthless"<span></span></a>

    so how would I correctly link/id these add to cart buttons? PLEASE HELP i've been trying to figure this out for days!

  2. #2
    Join Date
    Mar 2005
    Behind you...
    Looks like we're going to have to clear some things up first.

    I don't really know what your add to cart button code is, but it's not CSS (nor HTML). It appears to be some form of a bbcode perhaps. That being said, without knowing what the actual HTML of the button is, it becomes a little tricky to try and apply CSS to it.

    Ultimately though there are 2 ways to apply CSS to an element. You can directly attach the CSS to the 'style' attribute of an element, or you can use a stylesheet (external or inline).

    But I will need to know more to help you further. For instance, where is this 'add to cart button' code coming from (some sort of CMS, e-commerce platform)? And what does the actual HTML on the page look like for this button (view the source of the page)?
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Mar 2014
    That makes sense actually. Yes it's an e-commerence wordpress plugin. I put a button on a page here. I did that it's one of two pieces of code:

    /* <![CDATA[ */
    var edd_scripts = {"ajaxurl":"http:\/\/joellepoulos.com\/wp-admin\/admin-ajax.php","ajax_nonce":"b8a94482c0","position_in_cart":"","already_in_cart_message":"You have already added this item to your cart","empty_cart_message":"Your cart is empty","loading":"Loading","select_option":"Please select an option","ajax_loader":"http:\/\/joellepoulos.com\/wp-content\/plugins\/easy-digital-downloads\/assets\/images\/loading.gif","is_checkout":"0","default_gateway":"paypal","redirect_to_checkout":"0","checkout_page" :"http:\/\/joellepoulos.com\/checkout","permalinks":"1"};
    /* ]]> */


    <div class="entry-content">
    <form id="edd_purchase_1455" class="edd_download_purchase_form" method="post">

    <div class="edd_purchase_submit_wrapper">
    <a href="#" class="edd-add-to-cart button gray edd-submit" data-action="edd_add_to_cart" data-download-id="1455" data-variable-price=no data-price-mode=single style="display:none;"><span class="edd-add-to-cart-label">&pound;4.00&nbsp;&ndash;&nbsp;Purchase</span> <span class="edd-loading"><i class="edd-icon-spinner edd-icon-spin"></i></span></a><input type="submit" class="edd-add-to-cart edd-no-js button gray edd-submit" name="edd_purchase_download" value="&pound;4.00&nbsp;&ndash;&nbsp;Purchase" data-action="edd_add_to_cart" data-download-id="1455" data-variable-price=no data-price-mode=single style="display:none;"/><a href="http://joellepoulos.com/checkout" class="edd_go_to_checkout button gray edd-submit" >Checkout</a>
    <span class="edd-cart-ajax-alert">
    <span class="edd-cart-added-alert" style="display: none;">
    <i class="edd-icon-ok"></i> Added to cart </span>

  4. #4
    Join Date
    Mar 2014
    Do you know what? You've helped my figure it out perfectly!! 2nd code works like a GEM when put in my description box! Thank you SO much!!

  5. #5
    Join Date
    Mar 2014
    Ah man! My other comment won't post... basically It's in the source code and if I copy that I can get it to work perfectly! Thanks so much!!!

  6. #6
    You can do that by adding file on your server and you link to it directly from each HTML file. The link is just a simple line of HTML that you put in the <head> section of your HTML document, it looks like this:

    <link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />

    You need to inser a correct path for this.

    It's a long process so you can check this on this site.


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center