15 {{ upvoteCount | shortNum }}
15 {{ upvoteCount | shortNum }}

Where is this code on this site?

by outwest
13 replies
  • WEB DESIGN
    • |
Online backup, computer backup and pc backup from MyPCBackup

I looked at the source code on this page I want to style a page similarly to this

I cant for the life of me figure out how they coded the upper left hand corner
myPcBackup.com logo

Its not an image file
I guess its coded in a style sheet somewhere on there but I will be damned if I can find how or where
#code #site
  • Profile picture of the author redexclub
    NO!! it is attached with the background image!!
    Signature
    {{ DiscussionBoard.errors[6525965].message }}
    • Profile picture of the author outwest
      Originally Posted by redexclub View Post

      NO!! it is attached with the background image!!
      When I right click and say view background image I dont see it>

      What is the url of the background image?
      Signature
      Tech article writing .Native English Speaker(with Proof)
      specializing in SmartPhones , Internet security, high tech gadgets, search engines, tech shows, digital cameras.
      {{ DiscussionBoard.errors[6526002].message }}
  • Profile picture of the author redexclub
    here it is http: //mpb . jdistatic.com/images/My-PC-Backup-Logo . png

    it was behind the code!!
    Signature
    {{ DiscussionBoard.errors[6526030].message }}
  • Profile picture of the author outwest
    Hey Thanks
    I had to modify that url you posted to work, but yes it works
    when you say behind the code? I even checked all the css stylesheet codes and could not find it

    how did you find that?
    Signature
    Tech article writing .Native English Speaker(with Proof)
    specializing in SmartPhones , Internet security, high tech gadgets, search engines, tech shows, digital cameras.
    {{ DiscussionBoard.errors[6526060].message }}
  • Profile picture of the author outwest
    Can anyone else offer assistance as to where the background image is hidden

    "behind the code" doesnt tell me much

    and "I am expert" tells me just about as much, which is no help also
    Signature
    Tech article writing .Native English Speaker(with Proof)
    specializing in SmartPhones , Internet security, high tech gadgets, search engines, tech shows, digital cameras.
    {{ DiscussionBoard.errors[6526875].message }}
  • Profile picture of the author BillyW
    Outwest, if you have Google Chrome, go to the webpage and right-click. At the very bottom of the pop-up box you'll see the option "inspect element"; click that option. Once clicked, you will see a box appear at the bottom of the page (displaying the pages HTML code). Scroll down until you see <div id="header" class="inner-width">; click the arrow to expand. Once expanded, you will see <div id="header-main" class="inner-pad">; click to expand. Once expanded, click the <h1> section. Right below that you will see <a href="http://www.mypcbackup.com" title="Online Backup from MyPCBackup">Online Backup from *MyPCBackup</a>; click it. Now, to the right-hand side, you will see the CSS for:

    h1 a {
    display: block;
    background: url(/images/My-PC-Backup-Logo.png) no-repeat center
    transparent;
    width: 350px;
    height: 59px;
    text-indent: -9999px;

    The background links to the image.

    I hope I didn't lose you. If so let me know.

    And Redexclub, if by being able to do this means I'm an "expert", then I guess I should start charging more.
    Signature
    Qosso.com - Exceptional Branding At Affordable Prices
    {{ DiscussionBoard.errors[6527538].message }}
    • Profile picture of the author outwest
      Originally Posted by BillyW View Post

      Outwest, if you have Google Chrome, go to the webpage and right-click. At the very bottom of the pop-up box you'll see the option "inspect element"; click that option. Once clicked, you will see a box appear at the bottom of the page (displaying the pages HTML code). Scroll down until you see <div id="header" class="inner-width">; click the arrow to expand. Once expanded, you will see <div id="header-main" class="inner-pad">; click to expand. Once expanded, click the <h1> section. Right below that you will see <a href="http://www.mypcbackup.com" title="Online Backup from MyPCBackup">Online Backup from *MyPCBackup</a>; click it. Now, to the right-hand side, you will see the CSS for:

      h1 a {
      display: block;
      background: url(/images/My-PC-Backup-Logo.png) no-repeat center
      transparent;
      width: 350px;
      height: 59px;
      text-indent: -9999px;

      The background links to the image.

      I hope I didn't lose you. If so let me know.

      And Redexclub, if by being able to do this means I'm an "expert", then I guess I should start charging more.

      Hi thanks very much for taking the time for such a detailed answer, hard to get answers like that


      I use firefox, and not chrome, any chance of getting firefox to do this?
      Signature
      Tech article writing .Native English Speaker(with Proof)
      specializing in SmartPhones , Internet security, high tech gadgets, search engines, tech shows, digital cameras.
      {{ DiscussionBoard.errors[6527628].message }}
  • Profile picture of the author John Ayling
    Yes. Install the Firebug extension - once you get used to it you won't be able to live without it.
    Signature
    Software Marketing & Licensing System for WordPress Plugins, Themes & .NET Software
    >> 72 Hour Special <<
    {{ DiscussionBoard.errors[6527647].message }}
    • Profile picture of the author FredBliss
      Originally Posted by John Ayling View Post

      Yes. Install the Firebug extension - once you get used to it you won't be able to live without it.
      Second this. Firebug is the single biggest time-saver for inspecting DOM, solving CSS issues, etc.... You'll love it.
      {{ DiscussionBoard.errors[6527679].message }}
  • Profile picture of the author outwest
    What would be the easiest way to remove that image in the code
    even if a person wanted to leave that part of the page blank

    I am attempting to style a page similarly to that one

    Ok I did find where
    #wrapper { background: url(/images/page-bg.png
    is located from the main view source code that appears on the main page

    It is located on this stylesheet link
    http://mpb.jdistatic.com/css/style|tabs|popups_popup
    |popups_create-account|forms|error|v=1324578164
    Signature
    Tech article writing .Native English Speaker(with Proof)
    specializing in SmartPhones , Internet security, high tech gadgets, search engines, tech shows, digital cameras.
    {{ DiscussionBoard.errors[6527717].message }}
  • Profile picture of the author outwest
    OK thanks I figured it out thanks to all your help

    man its tricky to find some of these files with this CSS stylesheet stuff
    Signature
    Tech article writing .Native English Speaker(with Proof)
    specializing in SmartPhones , Internet security, high tech gadgets, search engines, tech shows, digital cameras.
    {{ DiscussionBoard.errors[6527918].message }}
  • Profile picture of the author mmrumii
    Always I use firebug to know the code of any site. you can use it.
    I'm sure it'll help your out to learn any code of any site.
    Signature
    Blog about Content Locking and CPA
    {{ DiscussionBoard.errors[6530905].message }}

Trending Topics