1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Styling a widget directl in the code or with external CSS

Discussion in 'Web Design' started by Scorpion Ghost, Oct 5, 2013.

  1. Scorpion Ghost

    Scorpion Ghost Senior Member

    Joined:
    Mar 22, 2013
    Messages:
    865
    Likes Received:
    171
    Ok, maybe the title isn't very clear. I wasn't exactly sure how to "put it"..

    So i have a Blogger blog, and i installed a widget earlier in the HTML area of my blog. I can edit the styling of my widget (borders, width, padding etc) directly into the widget right there where i installed it.

    However, the widget also has an ID=name, which i can use to style the widget by adding the codes i need in the Add Custom CSS area of my Blogger Blog.

    My question is, is it better to style it in the HTML area in the widget's code, or in the CSS area? Basically, will it make any difference on loading time, or on visibility across various web browsers, will it make any difference where i insert the styling codes??

    Thanks.

    -----------

    EDIT: Admin, please correct the mistake i made in the Title. "Direct" ---> "Directly"

    Sorry for the inconvenience.
     
    Last edited: Oct 5, 2013
  2. buckybrendan

    buckybrendan Registered Member

    Joined:
    Aug 6, 2013
    Messages:
    64
    Likes Received:
    72
    Occupation:
    Web Developer
    Location:
    Ireland
    Ok i think you mean In-line and External.

    Go to template. Edit HTML. Below the title tag which is near the top there is a section which has the font all one color which is blue. it has <b:skin><![CDATA[/* something like that at the start.

    Write your code in that section.
     
  3. Scorpion Ghost

    Scorpion Ghost Senior Member

    Joined:
    Mar 22, 2013
    Messages:
    865
    Likes Received:
    171
    Alright yeah that's basically where CSS codes get inserted if you write them in the Template -> Customize -> Advanced -> Add CSS section of the blog. So it's better if i write my CSS codes in there instead of in the widget directly? Because i have the script for a widget and in the script itself there is a code that looks like this:

    HTML:
    document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()"><div id="scrollsmily" style="font-size:small; font-weight:bold;color:#000000;">Hide Emoticons</div></a>';
    }
    So i can style the widget directly from here. What is better?
     
    Last edited: Oct 6, 2013
  4. buckybrendan

    buckybrendan Registered Member

    Joined:
    Aug 6, 2013
    Messages:
    64
    Likes Received:
    72
    Occupation:
    Web Developer
    Location:
    Ireland
    Not sure by what you mean which is better. But since all styles are already in the section i told you, and that is where Google put all their styles and also every template i have seen has their styles in that section as well.

    I see no reason to break with tradition, It has no affect on seo but will affect loading time of the page. You will have to just test it out and see which one loads faster. But the time difference will be so small that you will have to use a website to track loading times.

    I dont know one myself but have seen loads of them websites mentioned here on bhw.

    Sorry i cant help you any further.
     
  5. Scorpion Ghost

    Scorpion Ghost Senior Member

    Joined:
    Mar 22, 2013
    Messages:
    865
    Likes Received:
    171
    That's okay.

    Thank you for taking the time to respond buckybrendan. :)
     
  6. Dhruv11

    Dhruv11 Newbie

    Joined:
    Oct 21, 2012
    Messages:
    33
    Likes Received:
    12
    It doesnt matters at all where you put the CSS code. It can be external (in a separate css file), internal (inside the HEAD TAG)or in-line.
    But if you only wish to add few CSS properties then do it in-line. So that in future whenever u plan to change the CSS properties you dont have to look around in lengthy external or internal CSS codes.
     
  7. buckybrendan

    buckybrendan Registered Member

    Joined:
    Aug 6, 2013
    Messages:
    64
    Likes Received:
    72
    Occupation:
    Web Developer
    Location:
    Ireland
    Actually there isnt really any external for blogger. so it has to be done in-line or internal. Also the reason for internal and external is so you can see just styles and no other code. like html and javascript getting in your way. Its best practice to use external and internal. in-line is limited in choice of styles.

    so go with the internal like i originally stated.
     
  8. Dhruv11

    Dhruv11 Newbie

    Joined:
    Oct 21, 2012
    Messages:
    33
    Likes Received:
    12
    I dont really mind in-line if less than 5 css properties are to be written. Yes in-line is frowned upon but its convenient to write the code directly in relevant tag rather than defining it up as inline. Just my POV :D