12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

Newbie At WP Design... Stuck - Help Please...

by npaige
10 replies
  • WEB DESIGN
    • |
Hi folks,

So I am just setting up my first site in WordPress.
I created a logo and inserted it.
So far so good except for one thing...
Please assist me if you can

My site: Mountain River Stream |
The word "River" is a blue I made in Pixlr.
It says HSL: 254eb8
I like this color.

There is a blue line, a kind of border line to the right of my logo.
I did not create it but I I am fine with it there.
However, I want it to be the same blue color as "River".
You can see it is not as bright.. kind of dull.

How can I edit this?
I don't know what this line is called or where to look for it.
Can I change it to the HSL color?

Thanks much,
Dr. Nicki
#design #newbie #stuck
  • Profile picture of the author Patrick
    Go to default.css line 34 in themes/freshlife/styles/

    Change the .nav element to...

    .nav {
    border-bottom: 3px solid #254eb8;
    }
    Signature
    Freelance WordPress Developer | Free WordPress Themes | Free WordPress Plugins | Free WordPress Support
    {{ DiscussionBoard.errors[7587686].message }}
    • Profile picture of the author npaige
      Is it this line - }
      .nav li ul li {
      border-bottom: 3px solid #254eb8;

      How do you find line 34?

      Thanks!

      Originally Posted by schwarzes View Post

      Go to default.css line 34 in themes/freshlife/styles/

      Change the .nav element to...

      .nav {
      border-bottom: 3px solid #254eb8;
      }
      {{ DiscussionBoard.errors[7587840].message }}
      • Profile picture of the author UtterlyWeb
        Schwarzes has pointed you in the right direction. To give you a little more detail -
        Go to your CSS editor and do a "Find" (ctrl+f on a PC and cmd+f on a mac) for ".nav". You want to get to the following code =

        .nav {
        border-bottom: 3px solid #2266BB;


        }

        Once there, just change the hex code above so that it becomes -

        .nav {
        border-bottom: 3px solid #254eb8;


        }

        Save the changes and voila!
        {{ DiscussionBoard.errors[7587906].message }}
        • Profile picture of the author npaige
          Well I think I did it!
          It looks like this...
          }
          .nav li ul li {
          border-bottom: 3px solid #254eb8;

          It is not .topnav, correct?

          Thank you!

          Originally Posted by UtterlyWeb View Post

          Schwares has pointed you in the right direction. To give you a little more detail -
          Go to your CSS editor and do a "Find" (ctrl+f on a PC and cmd+f on a mac) for ".nav". You want to get to the following code =

          .nav {
          border-bottom: 3px solid #2266BB;


          }

          Once there, just change the hex code above so that it becomes -

          .nav {
          border-bottom: 3px solid #254eb8;


          }

          Save the changes and voila!
          {{ DiscussionBoard.errors[7587928].message }}
          • Profile picture of the author UtterlyWeb
            If you are building the website on your own, I highly recommend doing so using Firefox and Firebug. It'll make these kind of changes very easy.

            Are you familiar with Firebug?
            {{ DiscussionBoard.errors[7588163].message }}
            • Profile picture of the author npaige
              I do use firefox and recently saw a tutorial on WP where firebug was mentioned. It is an addon, correct? Can you say more about it? How it is used...

              Thank you very much,
              Dr. Nicki


              Originally Posted by UtterlyWeb View Post

              If you are building the website on your own, I highly recommend doing so using Firefox and Firebug. It'll make these kind of changes very easy.

              Are you familiar with Firebug?
              {{ DiscussionBoard.errors[7589471].message }}
              • Profile picture of the author UtterlyWeb
                I'll do my best. But to get the hang of it you will have to get your hands dirty with firebug AND CSS as well.

                You are right, firebug is indeed an addon.

                (1) So as a first step download/install it. Once done, you should see a small "bug" icon on the top or bottom corner of firebox.

                (2) Click on it to activate it. Oh, make sure that when you click on it, the page you want to analyze is the one open in firefox. So in your case, once you are on the Mountain River Stream homepage, activate firebug.

                (3) Once activated, a pop-up like window shows up. This pop-up is partitioned into two - the left side displays the HTML and the right side, the CSS for the page open in firefox.

                (4) There'll be a small button with a mouse pointer on the pop up .This is the "Click an element in the page to inspect" button. Go ahead and click on it.

                (5) Now take your mouse pointer onto the page loaded in Firefox (your homepage) and hover over the element you'd like to inspect. In your case, that's the blue bottom border.

                This step can get a little tricky. Make sure to not click your mouse button, instead just hover over the elements.

                (6) Once you are satisfied with the selection, click on it to lock the selection.

                Now the firebug popup should show the CSS pertaining to your selection, on the right side. You can make changes to the CSS in the pop-up and see how that impacts the style on your page.

                That's pretty much it.

                Just remember, the changes made to the CSS via firebug are but temporary (they'll vanish and take you back to sq. 1 when you refresh the page). To make the changes permanent you will have to go to your CSS editor, make the same changes there and then save.

                Hope that helps.

                Reeta
                {{ DiscussionBoard.errors[7589745].message }}
                • Profile picture of the author npaige
                  Thank you SO much for taking the time and energy to detail this explanation. I really appreciate it! This will be very helpful...

                  Dr. Nicki

                  Originally Posted by UtterlyWeb View Post

                  I'll do my best. But to get the hang of it you will have to get your hands dirty with firebug AND CSS as well.

                  You are right, firebug is indeed an addon.

                  (1) So as a first step download/install it. Once done, you should see a small "bug" icon on the top or bottom corner of firebox.

                  (2) Click on it to activate it. Oh, make sure that when you click on it, the page you want to analyze is the one open in firefox. So in your case, once you are on the Mountain River Stream homepage, activate firebug.

                  (3) Once activated, a pop-up like window shows up. This pop-up is partitioned into two - the left side displays the HTML and the right side, the CSS for the page open in firefox.

                  (4) There'll be a small button with a mouse pointer on the pop up .This is the "Click an element in the page to inspect" button. Go ahead and click on it.

                  (5) Now take your mouse pointer onto the page loaded in Firefox (your homepage) and hover over the element you'd like to inspect. In your case, that's the blue bottom border.

                  This step can get a little tricky. Make sure to not click your mouse button, instead just hover over the elements.

                  (6) Once you are satisfied with the selection, click on it to lock the selection.

                  Now the firebug popup should show the CSS pertaining to your selection, on the right side. You can make changes to the CSS in the pop-up and see how that impacts the style on your page.

                  That's pretty much it.

                  Just remember, the changes made to the CSS via firebug are but temporary (they'll vanish and take you back to sq. 1 when you refresh the page). To make the changes permanent you will have to go to your CSS editor, make the same changes there and then save.

                  Hope that helps.

                  Reeta
                  {{ DiscussionBoard.errors[7591476].message }}
  • Profile picture of the author weboasis
    You still have a lot of work ahead.

    Why don't hire a professional web designer?
    {{ DiscussionBoard.errors[7589410].message }}

Trending Topics