Announcement

Collapse
No announcement yet.

Reveal CSS info in Browser Dev Tools Help

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    Reveal CSS info in Browser Dev Tools Help

    I'm having a tough time seeing which CSS selectors to change with Developer Tools (Chrome or Firebug). I read this Tip posted in the Iron and Flannel Ready Theme forum on how to modify code in Head Tag Content to see which css file to view.
    ON YOUR DEV SITE: Open your HEAD Tag Content template and locate:

    Code:
    <link href="../css/css.php" rel="stylesheet">

    Replace with...Code:
    <mvt:if expr="'dev.' IN tolower(g.domain:name)">
    <link href="../css/normalize.css" rel="stylesheet">
    <link href="../css/base.css" rel="stylesheet">
    <link href="../css/scaffolding.css" rel="stylesheet">
    <link href="../css/typography.css" rel="stylesheet">
    <link href="../css/buttons.css" rel="stylesheet">
    <link href="../css/fonts.css" rel="stylesheet">
    <link href="../css/forms.css" rel="stylesheet">
    <link href="../css/tables.css" rel="stylesheet">
    <link href="../css/colors.css" rel="stylesheet">
    <link href="../css/slider.css" rel="stylesheet">
    <link href="../css/magnific-popup.css" rel="stylesheet">
    <link href="../css/helpers.css" rel="stylesheet">
    <link href="../css/structure.css" rel="stylesheet">
    <link href="../css/pages.css" rel="stylesheet">
    <link href="../css/print.css" rel="stylesheet">
    <mvt:else>
    <link href="../css/css.php" rel="stylesheet">
    </mvt:if>
    I'm experimenting with Levels Ready Theme and it's a little different than the example for Iron and Flannel. I understand almost everything but need a little help with specifics.
    1. The code in Levels Ready Theme that I believe should be replaced is
      <link rel="stylesheet" href="&mvte:global:theme_path;/css/all.php">
      instead of this line that came from Iron and Flannel Ready Theme.
      <link href="../css/css.php" rel="stylesheet">
  • There's a little note at the end of the post that says:
    If your dev site's domain starts with something other than 'dev.', change the pasted code accordingly. Now, when you right click on an element to inspect, you actually get to SEE the CSS file the selector it relates too.
    If my dev store is "dts1234.mivamerchantdev.com" do I change "dev" to "dts1234"?


Suivant/Iron and Flannel Based ReadyTheme Dev Tip - Miva Merchant Community Forums
http://www.miva.com
Feedback and questions about Miva Merchant 9
Tags: None
    #2
    Or instead of worrying about trying to make the conditional happy, do this:


    Code:
    <!-- <link href="../css/css.php" rel="stylesheet"> -->

<link href="../css/normalize.css" rel="stylesheet"> 
<link href="../css/base.css" rel="stylesheet"> 
<link href="../css/scaffolding.css" rel="stylesheet"> 
<link href="../css/typography.css" rel="stylesheet"> 
<link href="../css/buttons.css" rel="stylesheet"> 
<link href="../css/fonts.css" rel="stylesheet"> 
<link href="../css/forms.css" rel="stylesheet"> 
<link href="../css/tables.css" rel="stylesheet"> 
<link href="../css/colors.css" rel="stylesheet"> 
<link href="../css/slider.css" rel="stylesheet"> 
<link href="../css/magnific-popup.css" rel="stylesheet"> 
<link href="../css/helpers.css" rel="stylesheet"> 
<link href="../css/structure.css" rel="stylesheet"> 
<link href="../css/pages.css" rel="stylesheet"> 
<link href="../css/print.css" rel="stylesheet">
    Just double check the css.php to make sure that these are the files your ReadyTheme is using.



    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way     (aka Leslie Nord leslienord)
    Email me: leslie@lesliekirk.com
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    Comment

      #3
      Since you are working with a DTS site, I would recommend Leslie's approach to what you are trying to do.
      Matt Zimmermann

      Miva Web Developer
      Alchemy Web Development
      https://www.alchemywebdev.com
      Site Development - Maintenance - Consultation

      Miva Certified Developer
      Miva Professional Developer

      https://www.dev4web.net | Twitter

      Comment

        #4
        Thank you! Bummer, that didn't work. I guess there's something else happening in the "all.php" file? I matched the css files listed in the all.php file. But I don't know what else the all.php file does? Just in case, here is what I added to my Head Tag Content. Is there anything that stands out? THANKS!

        <!-- Commented out to reveal css in Chrome or Firebug. Not sure about next two following mvt lines? -->
        <!-- <link rel="stylesheet" href="&mvte:global:theme_path;/css/all.php"> -->
        <mvt:item name="head" param="css_list" />
        <mvt:item name="readytheme" param="css" />


        <!-- Added link href for individual css files so css info appears in Chrome Dev Tools. -->
        <link href="../css/normalize.css" rel="stylesheet">
        <link href="../css/base.css" rel="stylesheet">
        <link href="../css/scaffolding.css" rel="stylesheet">
        <link href="../css/typography.css" rel="stylesheet">
        <link href="../css/buttons.css" rel="stylesheet">
        <link href="../css/fonts.css" rel="stylesheet">
        <link href="../css/forms.css" rel="stylesheet">
        <link href="../css/tables.css" rel="stylesheet">
        <link href="../css/colors.css" rel="stylesheet">
        <link href="../css/slider.css" rel="stylesheet">
        <link href="../css/tabs.css" rel="stylesheet">
        <link href="../css/floating-placeholder.css" rel="stylesheet">
        <link href="../css/magnific-popup.css" rel="stylesheet">
        <link href="../css/helpers.css" rel="stylesheet">
        <link href="../css/structure.css" rel="stylesheet">
        <link href="../css/pages.css" rel="stylesheet">
        <link href=".../css/print.css" rel="stylesheet">
        <link href=".../css/theme.css" rel="stylesheet">
        <link href=".../css/theme_judi.css" rel="stylesheet">

        Comment

          #5
          Try changing your ../css references to &mvte:global:theme_path;/css
          Matt Zimmermann

          Miva Web Developer
          Alchemy Web Development
          https://www.alchemywebdev.com
          Site Development - Maintenance - Consultation

          Miva Certified Developer
          Miva Professional Developer

          https://www.dev4web.net | Twitter

          Comment

            #6
            Yay. Great. Thank you both so much! Now the Dev Tools reveals the css selector and file instead of the css selectors as part of the all.php file.

            Just in case someone may might need to see exactly what I changed, here is what I did:

            <!-- Comment out this line of code to reveal css selector and css files in chrome
            <link rel="stylesheet" href="&mvte:global:theme_path;/css/all.php"> -->

            <mvt:item name="head" param="css_list" />
            <mvt:item name="readytheme" param="css" />

            <!-- add links to individual css files making sure they match the listed css files in all.php. -->
            <link href="&mvte:global:theme_path;/css/normalize.css" rel="stylesheet">
            <link href="&mvte:global:theme_path;/css/base.css" rel="stylesheet">
            <link href="&mvte:global:theme_path;/css/scaffolding.css" rel="stylesheet">
            <link href="&mvte:global:theme_path;/css/typography.css" rel="stylesheet">
            <link href="&mvte:global:theme_path;/css/buttons.css" rel="stylesheet">
            <link href="&mvte:global:theme_path;/css/fonts.css" rel="stylesheet">
            <link href="&mvte:global:theme_path;/css/forms.css" rel="stylesheet">
            <link href="&mvte:global:theme_path;/css/tables.css" rel="stylesheet">
            <link href="&mvte:global:theme_path;/css/colors.css" rel="stylesheet">
            <link href="&mvte:global:theme_path;/css/slider.css" rel="stylesheet">
            <link href="&mvte:global:theme_path;/css/tabs.css" rel="stylesheet">
            <link href="&mvte:global:theme_path;/css/floating-placeholder.css" rel="stylesheet">
            <link href="&mvte:global:theme_path;/css/magnific-popup.css" rel="stylesheet">
            <link href="&mvte:global:theme_path;/css/helpers.css" rel="stylesheet">
            <link href="&mvte:global:theme_path;/css/structure.css" rel="stylesheet">
            <link href="&mvte:global:theme_path;/css/pages.css" rel="stylesheet">
            <link href="&mvte:global:theme_path;/css/print.css" rel="stylesheet">
            <link href="&mvte:global:theme_path;/css/theme.css" rel="stylesheet">
            <!-- add customized css file as the last css file to load -->
            <link href="&mvte:global:theme_path;/css/theme_changes.css" rel="stylesheet">

            Comment

              • Previous template Next
              Working...
              X