• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Tutorial: How to Use Your Browser's Inspect Tool

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Tutorial: How to Use Your Browser's Inspect Tool

This topic is: not a support question

Tagged: css, font color, genesis, header, theme

  • This topic has 37 replies, 26 voices, and was last updated 4 years, 11 months ago by MissKitty.
Viewing 20 posts - 1 through 20 (of 38 total)
1 2 →
  • Author
    Posts
  • February 4, 2017 at 9:12 am #200561
    Victor Font
    Moderator

    Most of the questions that we community volunteers answer on this forum are related to CSS changes. In most cases, the answer can be found very easily by using your browser's inspect tool. This tutorial will help point you in the right direction: https://victorfont.com/how-to-use-your-browsers-inspect-tool/


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    March 1, 2017 at 12:29 pm #202263
    Susan
    Moderator

    Thanks for sharing, Victor! This should be pinned to the front page!

    March 1, 2017 at 3:29 pm #202275
    Victor Font
    Moderator

    Thank you!


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    March 11, 2017 at 6:39 am #202873
    oldirishlad
    Member

    Victor

    Thank you very much, I am going to implement your suggestion

    Tom

    March 24, 2017 at 4:32 am #203767
    Robertp
    Member

    Thanks for sharing. I"ve done it

    April 5, 2017 at 9:23 pm #204364
    newdawnfilmsnyc
    Member

    Great help Victor. Thanks!

    April 17, 2017 at 10:31 am #204887
    James Chai
    Member

    For those interested in something more detailed and intuitive reference the Official Google Development Docs


    Marketing, Sales and WordPress Growth Hacking http://www.smbpress.com

    April 19, 2017 at 7:27 am #204990
    fitka
    Member

    Thank You for sharing such a great information.


    طراحی سایت

    April 30, 2017 at 12:04 am #205647
    neville
    Member

    Thank you, Victor, very helpful!


    Twitter: @jangles

    May 6, 2017 at 2:28 pm #206032
    Vermont
    Member
    This reply has been marked as private.
    May 7, 2017 at 5:23 pm #206075
    Victor Font
    Moderator

    Vermont, private replies cannot be seen by anyone except forum admins.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    May 10, 2017 at 10:01 pm #206273
    hscresult2017
    Member

    Very helpful for new users. Thanks for share.


    HSC Result 2017 | HSC Result 2017 BD

    May 15, 2017 at 6:53 am #206459
    Arn2k17
    Member

    Here you learn more about this topic
    https://tutreal.com


    https://tutreal.com

    May 16, 2017 at 5:26 am #206521
    Layla508
    Member

    Wow! Great font! I will install it to my Photoshop right now!

    I am currently working with the design of custom dissertation editing site.

    May 16, 2017 at 10:14 pm #206577
    alphamaleco
    Member

    Thank you, Victor, i implement it's and it works.Thank you again for sharing helpful information.

    May 17, 2017 at 12:43 pm #206607
    Shubha
    Member

    Thanks for sharing this awesome information.

    May 22, 2017 at 9:42 pm #206849
    Doug
    Participant

    Victor

    Thank you. This is very helpful. I was able to go onto my site and change the header title text color from black to white due to this.

    I tried changing the Description text under it, and didn't get the same successful results, though, and I'm confused as to what I'm doing differently.

    I'm using Chrome

    Similar to changing the title text, I right-clicked on the descriptive text (What Genesis refers to as the Tagline), and unlike with the title text, I didn't see any reference to the color.

    As I was mousing around in the Inspector, I found a reference to the .site-description in the styles section. It only had a "text-align: center;" reference though. To the right of that, I found a three dot menu with an "Add color" option. So I clicked that and added "color: #ffffff;" which successfully changed the font color to white on my screen.

    I then went into style.css and, like I did with the title, I added the "color: #ffff;" just below the "text-align: center;" code. However, in this case, on the actual site it didn't change the color to white, and removed the center alignment.

    Home

    Any ideas what I'm doing wrong? I think the problem is that I don't see any clear reference to the descriptive text color anywhere.

    thanks
    doug

    May 23, 2017 at 4:46 am #206862
    Victor Font
    Moderator

    Doug,

    This is what I see in your CSS for site-description:

    .site-description {
        font-size: 16px;
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 1.5;
    }

    There is no text-align: center. You may have changed the color in a media query instead of the main block which is found at line 1093.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    May 25, 2017 at 5:07 am #206957
    Sarahkelly52
    Member

    Great help thank you, love how I am able to right click anywhere and inspect element.

    May 26, 2017 at 11:47 am #207039
    Arn2k17
    Member

    Thank you for sharing


    https://tutreal.com

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 38 total)
1 2 →
  • The topic ‘Tutorial: How to Use Your Browser's Inspect Tool’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2022 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble