Themes global settings for responsive design?

This topic has 21 replies, 4 voices, and was last updated 2 months ago ago by Luca Rossi

  • Avatar: Nicolo
    Nicolo
    Participant
    February 22, 2024 at 09:14

    Hi there

    I have questions about the theme’s global settings.

    Focusing on; Fonts, padding, and responsiveness for all devices.

    Example: the Add to Cart button changes dynamically based on different devices.

    These settings affect the dynamic content on my site, and to ensure that I get 100% consistency throughout the whole website I need to know how I can configure the same theme settings for my page builder: Elementor.

    Thanks for your help, and ask if anything was unclear.

    20 Answers
    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    February 22, 2024 at 11:31

    Hello, @Nicolo,

    Thank you for reaching out to us with your concern.

    To assist us in understanding your request more thoroughly, we kindly ask that you provide us with screenshots illustrating the changes to the ‘Add to Cart’ button as it appears on various devices. Additionally, we would appreciate a detailed explanation of how these settings are influencing the dynamic content on your website.

    For a more accurate assessment, please also include the URL of the pages where you are encountering the issue.

    Furthermore, to ensure that we meet your expectations, we request that you describe your exact requirements or the objective you wish to achieve. We would appreciate it if you could create temporary wp-admin access and share the details via the private content area. This will allow us to review your settings and better understand the issue at hand and help you.

    We kindly recommend that you take a complete backup of your site before proceeding.

    We look forward to your response and are here to support you every step of the way.

    Best Regards,
    The 8Theme Team

    Please contact administrator
    for this information.
    Avatar: Nicolo
    Nicolo
    Participant
    February 22, 2024 at 13:11

    So the main objective is to understand how the responsiveness of my site is working. This is caused by the theme settings. Just to be clear, this is not an issue. This is just essential info I need for further development.

    Screenshots for understanding:
    mobile

    tablet

    How does the font go from 13 to 14 for example?
    And how does the padding grow or shrink based on the screen size.

    (The URL for this add to cart button is any single product page on the site).

    The goal is to find the root code here? where is it, and how is it set up?

    Thanks a lot for your understanding.

    Please contact administrator
    for this information.
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 22, 2024 at 14:01

    Hello, Nicolo,

    Thank you for getting in touch with us.

    We kindly advise you to utilize the developer tools available in your browser to inspect the element in question. Detailed instructions on how to access and use these tools can be found at the following link: https://developer.chrome.com/docs/devtools/. This will enable you to view the CSS and styles associated with various media queries.
    Read more – https://developer.chrome.com/docs/devtools/device-mode https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    To change font size you can use custom CSS code and add it in Theme Options > Theme custom CSS > select the desired device.

    We hope this information is helpful.

    Should you require any further assistance, please do not hesitate to contact us.

    Best Regards,
    The 8Theme Team

    Avatar: Nicolo
    Nicolo
    Participant
    February 22, 2024 at 18:18

    Thanks for your answer.

    And i agree, inspecting is great to find the CSS.

    But, my question is not with regards to finding the given CSS.

    The goal is to find out where the root code is, f.ex the code that sets the default CSS code of the button. Or the code that sets h1, h2, h3 etc to specific sizes. the code that adds the 16px spacing from the left on all of the dynamic theme default pages. All done by the themes settings.

    Basicly my question is: What is the themes default settings with regards to the style guide of my site, and where can I find it?

    Thanks for your cooperation!

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 23, 2024 at 08:28

    Hello, Nicolo,

    Please check the xstore folder > xstore.css file.
    For example via the mentioned inspector: click here https://prnt.sc/eatqHBW-M34n and you will be able to see the file content – https://prnt.sc/J0xFiyAjFzeJ

    Should you provide us with a description of your requirements and the desired outcome, we may be better positioned to assist you effectively.

    Best Regards,
    The 8Theme Team

    Avatar: Nicolo
    Nicolo
    Participant
    February 23, 2024 at 09:03

    I see.

    The desired outcome is to create a style guide document consisting of:
    – h1, h2, h3, body (sizes by default)
    – Global spacing, padding and margins (by default)
    – Global buttons (font sizes and padding)

    By understanding and saving this info in a document(word doc).
    I can then edit the theme builder elementor to align with the same theme settings. And the rest of my team needs to know this info, with ease of accessibility.

    I hope you understand. Can you assist with this more effectively than inspecting the whole site?

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 23, 2024 at 11:28

    Hello, Nicolo,

    Thank you for your interest in our theme and basic styles. We understand that each client’s website has its own unique styles and element sizes. To accommodate this variability, we have created an additional shortcode that you can integrate into your child theme’s functions.php file, as illustrated in the following screenshot: [View Screenshot](https://prnt.sc/Wte-GooSQDT9).

    Once you’ve added the provided code, you can utilize the shortcode [etheme_global_doc_styles] within a new WordPress Page, as demonstrated in the following screenshot: [View Screenshot](https://prnt.sc/wXFVieseOOHz).

    Upon visiting the frontend of this page, you’ll have the opportunity to inspect the most fundamental elements generated by the shortcode: [View Screenshot](https://prnt.sc/x3dbtD60n6nn).

    Here’s the code snippet for creating this shortcode:

    add_shortcode('etheme_global_doc_styles', function() {
     ob_start();
     echo '<div class="content">';
      // Heading
      foreach (array('h1', 'h2', 'h3', 'h4', 'h5', 'h6') as $tag) {
       echo '<'.$tag.'>'.sprintf('This is text of <strong>%s</strong> tag', $tag).'</'.$tag.'>';
      }
      echo '<br/><br/>';
      // Paragraph
      echo '<p>'.sprintf('This is default text of <strong>%s</strong> tag', 'p').'</p>';
      echo '<br/><br/>';
      // Span
      echo '<span>'.sprintf('This is default text of <strong>%s</strong> tag', 'span').'</span>';
      echo '<br/><br/>';
      // Div
      echo '<div>'.sprintf('This is default text of <strong>%s</strong> tag', 'div').'</div>';
      echo '<br/><br/>';
      // Buttons
      foreach (array('light', 'black', 'active', 'bordered', 'disabled') as $btn_class) {
       foreach (array('small', 'medium', 'big') as $btn_size) {
        $local_btn_class = array($btn_size, $btn_class);
        echo '<button class="btn button '.implode(' ', $local_btn_class).'">'.implode(' ', $local_btn_class).'</button>&nbsp;&nbsp;';
       }
       echo '<br/><br/>';
      }
      foreach (array('small', 'medium', 'big') as $btn_size) {
       echo '<button class="'.$btn_size.'">'.$btn_size . ' Unstyled'.'</button>&nbsp;&nbsp;';
      }
      echo '<br/><br/>';
      // Inputs
      foreach (array('button',
       'checkbox',
       'color',
       'date',
       'datetime-local',
       'email',
       'file',
       'hidden',
       'image',
       'month',
       'number',
       'password',
       'radio',
       'range',
       'reset',
       'search',
       'submit',
       'tel',
       'text',
       'time',
       'url',
       'week') as $input_type) {
       echo '<div>'.sprintf('Input type <strong>%s</strong> is shown below', $input_type).'</div>';
       echo '<input type="'.$input_type.'">';
       echo '<br/><br/>';
      }
     echo '</div>';
     return ob_get_clean();
    });
    
    

    Feel free to integrate this shortcode into your WordPress setup, and should you have any further questions or require assistance, please don’t hesitate to reach out.

    Kind regards,
    8theme support team

    Avatar: Nicolo
    Nicolo
    Participant
    February 23, 2024 at 13:31

    Ok thanks, but may I ask, why does my site by default have a spacing from the left of 15 Pixels.

    Where is the root code of this?

    This is some sort of default setting, because I have it on all the default pages like single product and cart, checkout etc.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 23, 2024 at 14:08

    Hello, Nicolo,

    https://prnt.sc/t5WQ3ekmmNX6 – this is default padding from our theme, but this one is from the Elementor plugin https://prnt.sc/WR6OET7M3DPX

    Regarding the question you mentioned, which we believe is related to the following screenshot – https://prnt.sc/s5z2n2tW6Og5 – it appears that Elementor has certain default padding values that are assigned within its settings. Upon further investigation, it seems that these were custom additions made by you or someone else on your site, through the Elementor Site Settings under Custom CSS, as evidenced by these screenshots: https://prnt.sc/rNQXsd4DQ0P_ and https://prnt.sc/k0OYvFTFdul2

    Best Regards,
    The 8Theme Team

    Avatar: Nicolo
    Nicolo
    Participant
    February 23, 2024 at 14:13

    I see thanks for that investigation.

    Im sory i did not mention to you that I am speaking with regards to mobile screen only. And I only mean the single product page, and cart page, these are not affected by the elementor CSS.
    https://elmate.no/product/el-mate-kopp/
    https://elmate.no/checkout/

    But still they have 15px padding from the left? What causes this, where is the root code here?

    Thanks for your patience and cooperation.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    February 23, 2024 at 16:11

    Hello, Nicolo,

    You’re welcome!

    We’ve created screenshots for you – https://prnt.sc/TNtTaOaTcw0a https://prnt.sc/MsdvS946sPRP

    Best Regards,
    The 8Theme Team

    Avatar: Nicolo
    Nicolo
    Participant
    February 24, 2024 at 10:18

    Thanks alot

    Please check the private content

    Please contact administrator
    for this information.
    Files is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    February 26, 2024 at 09:38

    Hi @Nicolo,

    For the Typography headings, you can go the Theme Options > Typography > Overskrifter > select DM Sans font then set Variant, Line Height, Letter Spacing : https://prnt.sc/NrqalZdUTErm

    After that, add the following custom CSS under Theme Options > Theme Custom CSS > Global CSS:

    
    /* For Buttons */
    .button,
    .btn,
    input[type="submit"],
    input[type="button"],
    form button,
    form #qna-ask-input button {
    font family: "DM Sans";
    line height: 20.4px;
    font style: medium;
    font weight: 500;
    margin-top: 40px !important;
    }
    /* For Headings */
    body {
      --h1-size-proportion: 2.5714;
      --h2-size-proportion: 1.7142;
      --h3-size-proportion: 1.7142;
      --h4-size-proportion: 1.2857;
      --h5-size-proportion: 1;
      --h6-size-proportion: 0.8571;
      --h1-line-height: 1.2;
      --h2-line-height: var(--h1-line-height);
      --h3-line-height: var(--h1-line-height);
      --h4-line-height: var(--h1-line-height);
      --h5-line-height: var(--h1-line-height);
      --h6-line-height: var(--h1-line-height);
    }
    

    For the Paddings, please add this custom CSS:

    
    h1, .h1,
    h2, .h2 {
    margin-bottom: 24px !important;
    }
    
    h3, .h3 {
    margin-bottom: 16px !important;
    }
    .xstore-sections {
    padding: 120px 0 !important;
    }
    

    For each section, please add the xstore-sections class to the CSS Classes of each section:

    https://prnt.sc/cgu000b25_ho

    Best Regards,
    The 8Theme Team

    Avatar: Nicolo
    Nicolo
    Participant
    February 26, 2024 at 10:38

    Oh, thanks for that

    But I think you misunderstood a little bit.

    The goal is not to change the style guide – (to the attached file example). The goal is to create an identical document, but with the themes’ imported current settings on the site.

    Thanks for your understanding, and sorry for the confusion.

    Hope we can find a frictionless system here, that works for both of us.

    Please contact administrator
    for this information.
    Avatar: Justin
    Luca Rossi
    Support staff
    February 26, 2024 at 10:57

    Dear Nicolo,

    We’re writing to inform you that the default style definitions for the XStore theme are located within the following directory: wp-content/themes/xstore/xstore.css. Specifically, you may wish to review the code between lines 20 and 109, which outlines the foundational CSS properties for the body element.

    Below is an excerpt from the mentioned section for your reference:

    
    body {
      --et_font-color: #555;
      margin: 0;
      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Verdana, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-size: 14px;
      color: var(--et_font-color) !important;
      height: auto !important;
      background-color: var(--et_container-bg-color, transparent);
      --product-stock-step-1-active-color: var(--et_green-color);
      --product-stock-step-2-active-color: var(--et_orange-color);
      --product-stock-step-3-active-color: var(--et_red-color);
      --h1-size-proportion: 2.5714;
      --h2-size-proportion: 1.7142;
      --h3-size-proportion: 1.7142;
      --h4-size-proportion: 1.2857;
      --h5-size-proportion: 1;
      --h6-size-proportion: 0.8571;
      --h1-line-height: 1.2;
      --h2-line-height: var(--h1-line-height);
      --h3-line-height: var(--h1-line-height);
      --h4-line-height: var(--h1-line-height);
      --h5-line-height: var(--h1-line-height);
      --h6-line-height: var(--h1-line-height);
      --product-title-size-proportion: 1.14;
      --product-title-line-height: 1.5;
      --et_main-color: #888;
      --et_dark-color: #222;
      --et_active-color: #a4004f;
      --et_red-color: #c62828;
      --et_green-color: #2e7d32;
      --et_blue-color: #1565c0;
      --et_orange-color: #f57f17;
      --et_yellow-color: #fdd835;
      --et_border-color: #e1e1e1;
      --et_light-color: #f7f7f7;
      --et_light-color2: #f2f2f2;
      --et_white-2-dark: #fff;
      --et_dark-2-white: #222;
      --et_select-arrow-closed: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QA/wD/AP+gvaeTAAAEm0lEQVR4nO3cWaiUZRgH8N85armShlgWLZS0gLQgIVm0UGQgtEBKe110IdSFF0FXhtCNChERFLSQFBUltEC0ZxS0E7QZ0UJEG6aFltmiOV28c3DpvO+cZWa+c+Z7fjAo58x87/99HuSceb9nJIQQQgghhBBCCCGEEEIIIYQQQgghhBBCO01o/nkYrsRp+B7bK0tUL7NwFRZhM7bCOfgdjebjl+bXQmediy321H07ToeP9vriwGMHFlcSsx4ulGq8f92fhm2DfKOBv3BRBWF73cVSbQer+cvwbOabDfyDZV2P3LuWSTXN1ftGOBY/Fp60C9d0OXgvulaqZa7OD6Nv4MlH4svCk3djRfey95wVUg1z9b3TXs0YcCg2Fl7UwMrOZ+85tyrX9HaDNGPAIfi4xQVWdy57z1mtXMtVQ7nILLzX4kJr25u7J61VruEtw7nYTLzd4oL3oL892XtKv1Sb0s/jm0dy4enYULhwA/eKpuytH/fJ1+tfLB/NAlOlNyulpjyKiaNZpEdMxGPKzbihHQtNwQuFhRp4ApPasdg4NUmqQa4+O3F5Oxc8AE8WFmxI7/gnt3PRcWKy1qcdSzux8CSsLyzckP4lTenE4mPUdLwmX48/saSTASZgXSFAA69jRidDjBEz8IZ8HXZIp7od14/7C0Ea0vuYg7sRpiIH4335/f+Gs7oZqE86fyk15QPM7maoLpkt7S237204o4pgfdI5TKkpGzG3inAdMhefye93CxZUlq5plXJTPsfhVYVro8OlveT2+TNOqSzdfm5Rbso3OKaydKN3jLSH3P5+wAmVpcu4WfnM/1vMqyzdyM2Tsuf29R2OqyxdC8ulI4Jc+J8wv7J0wzdfypzbz1c4qrJ0Q3SDclM24aTK0g3dyVLW3D6+wBGVpRumK6Tzm9xmfsXCytK1tlDKmMv/iXQzb1xZqjxhsVWa2BtrFknZcrk/xJzK0o3SEuk8J7e57TivsnT/d76UKZf3Henm3biWm9IbePyBCypLt8di5Zxv4qDK0rXZ2dL5Tm6zf+OSytJxaTNDLt8rmFZZug45U35stSH9vLmsglxXK/8C8qJ057QnLbDvxPf+j124rot5rleeJnxKujnX006VPguRK8JuzRnXDrtJ+WRhvRrdlj5ROv8pNaWTo6utRjvX2fNhpto4XjoHyhWloTOjqytbrPmAGo82HY2vlQvUztHVVqOdgw49102ryfsG1rRhnVajncWh57o5FJ8qF+xuIytYf/O1pWuvGlX6HjXH4J933Psx3NHV/uZrStcc1tBz3czCu8oFfMTQRlcnSmOupd/kRjT0XDcz8ZZyUx5Xfo/QarRz1EPPdTMNryo3JTe62mq0s21Dz3UzFS8pN+V5+46uthoM3yndPAsjdCCeUW7KwOjqjObfc8/r2NBz3UzBc8pN2aA89Byft2+zCdLnuEtNyT26NvRcNxPwoOE1o+tDz3XTh7sMrRmVDT3XTR/uUG7GmBh6rpvbDN6MMTX0XDdr7NuMzdIdyXGrF46bF0u/RW3CQ9L/bBRCCCGEEEIIIYQQQgghhBBCCCGEEEIIIYD/AI5xCCmGn2cGAAAAAElFTkSuQmCC);
      --et_select-arrow-opened: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QA/wD/AP+gvaeTAAAEZUlEQVR4nO3caYhVZRgH8N+oaWmbIWULUhS0UbQQtFFJEUXRSoRaZHvUB8EWPxgl9UVaKGmPVioKKjNB2omKooUiKpE2kXZbtE3LvQ/n3hxz3vfc0Xvvae59fnBgYO457/99nznn3jnznCGEEEIIIYQQQgghhBBCCCGEEEIIIYQQQjP1VB2gCUbj5NrXs7CwwixdbywWYU1t+wVHVRmom52KZdYWo74twykV5upKZ2Gl9YtR35bj9MrSdZlz5ItR31bi7Ioydo3LsFp5MXoX5dxKknaBSfpXjPq2WlHI0ERlZ8a7tS31/VW4oO2pO9R0+TPgJQzHiNrXuddObXP2jlNWjGcxrNfrN8PzJftc26bsHaUHt8sv7NMY2se+QzGzZN/prY3fWQbhbvkFfQSDM8cYUntN7hg3tiZ+ZxmCR+UX8gH5YtQNxoMlx7pLZ9zPa4kheFx+AW/TvwVs5NJ3r+KsDL0Mw2z5hbvFhv0099T2zR37McUPRMCmmCO/YNc1YZzrS8Z4QhTF5nhVfqGmNHG8KSVjzbbux+iusgVel1+gK1sw7lUlY85RnLVdZRvltzouaeH4l8rfinlO8UtmVxiF9+WLcWEbclxUGyuV4zXFWdzRtsdc6UVYgXFtzDO+NmYqzxvYso152mpHzJOe/HKcUUGuM2tjp3K9p7jEdpRdMF960n/hhMrScSL+7iNXfftAcantCLtigfRkl+K4qsL1crwiSyrnXMUld0DbC99JT/J3HFFZuvUdiT+k887DDpWl20j74Afpyf2KwypLl3Y4fpPO/Sl2qizdBjrIug1s/91+xgGVpSt3oCJjKv8CxaV4QDgYi6Un8yP2qyxd4/bHT9Lz+Aq7VZauQWPlr8HfYI/K0vXfnvhWej7fY+/K0pU4Bkukw89XfPwdaHbH19LzWoh9K0uXcJL85/jPMaaydBtvZ3wpPb9FivfN/4VU03N9+0TxyMBANwafSc9zseL9s1JlTc8fYbvK0jXfaHws/1H+0KrCTZQvxjsYWVW4FtoWH0rP+08c3e5QZa2db2Hrdodqo5F4W3r+S3Bsu8KUNT2/omjr7HRb4U3pdVhm7aN2LXN1JsAavKjos+0WI/CyfFFOa9XgZX22s3Rng8BwvCC9Li15cKisGE/pu8+2WwzFM/JFmdiMgXpwR2agNXhYY62dnW4TPCm9Thv94NAg3JMZYA3uF8XobTAeki/KpA05cCNNzzNEo3JfBuE++aJM7s8BG2l6vlkUI6cHt8qv4TWNHKiRpudpTY3euXpwk/xaZh8caqTpuZl9tt1imvya3tDXTmVNz6txRWtzd7SyJu879XoLGCL/oGQUozmmyhfl30fsLs+8KB66b67J8vcBx5O+F7MK57c9cufLdd7PoO9f/lZgQgVhu8V5+v5b0gSKTrzenRVLxb82aodxis7N+rrPxOD6O/soXKy4nfyIomUytN4oHIIvxJqHEEIIIYQQQgghhBBCCCGEEEIIIYQQQkv8A07d/ovDcJx+AAAAAElFTkSuQmCC);
      --et_404-page-bg-image: url('../../images/404.png');
      --et_link-color: var(--et_dark-2-white);
      --et_link-hover-color: var(--et_main-color);
      --et_btn-color: var(--et_dark-2-white);
      --et_btn-bg-color: var(--et_light-color2);
      --et_btn-br-color: var(--et_light-color2);
      --et_btn-color-hover: #fff;
      --et_btn-bg-color-hover: var(--et_active-color);
      --et_btn-br-color-hover: var(--et_active-color);
      --et_btn-bordered-color: var(--et_dark-color);
      --et_btn-bordered-bg-color: transparent;
      --et_btn-bordered-br-color: var(--et_border-color);
      --et_btn-bordered-color-hover: var(--et_dark-color);
      --et_btn-bordered-bg-color-hover: #fff;
      --et_btn-bordered-br-color-hover: var(--et_border-color);
      --et_btn-active-color: #fff;
      --et_btn-active-bg-color: var(--et_active-color);
      --et_btn-active-br-color: var(--et_active-color);
      --et_btn-active-color-hover: #fff;
      --et_btn-active-bg-color-hover: var(--et_active-color);
      --et_btn-active-br-color-hover: var(--et_active-color);
      --et_btn-light-color: #fff;
      --et_btn-light-bg-color: var(--et_btn-bg-color);
      --et_btn-light-br-color: var(--et_border-color);
      --et_btn-light-text-transform: uppercase;
      --et_btn-light-color-hover: #fff;
      --et_btn-light-bg-color-hover: var(--et_active-color);
      --et_btn-light-br-color-hover: var(--et_active-color);
      --et_btn-dark-color: #fff;
      --et_btn-dark-bg-color: var(--et_dark-color);
      --et_btn-dark-br-color: var(--et_dark-color);
      --et_btn-dark-color-hover: #fff;
      --et_btn-dark-bg-color-hover: #4c4c4c;
      --et_btn-dark-br-color-hover: #4c4c4c;
      --et_dark-2-white-0: rgba(0, 0, 0, 0);
      --et_dark-2-white-01: rgba(0, 0, 0, 0.1);
      --et_dark-2-white-02: rgba(0, 0, 0, 0.2);
      --et_dark-2-white-03: rgba(0, 0, 0, 0.3);
      --et_dark-2-white-08: rgba(0, 0, 0, 0.8);
      --et_dark-2-white-002: rgba(0, 0, 0, 0.02);
      --et_white-2-dark-0: rgba(255, 255, 255, 0);
      --et_white-2-dark-01: rgba(255, 255, 255, 0.1);
      --et_white-2-dark-05: rgba(255, 255, 255, 0.5);
      --et_white-2-dark-07: rgba(255, 255, 255, 0.7);
      --et_white-2-dark-09: rgba(255, 255, 255, 0.9);
      --et_dark-2-light-dark: var(--et_dark-color);
      --et_white-2-light-dark: #fff;
    }
    

    Please feel free to modify these styles using the custom CSS codes that were provided in our previous correspondence.

    Should you require any further assistance or have additional questions, please do not hesitate to reach out.

    Best regards,
    The 8Theme Team

    Avatar: Nicolo
    Nicolo
    Participant
    February 26, 2024 at 13:36

    Thanks for giving me the option for further assistance.

    The remaining question now is the following;

    How can we take this info, the one provided above, and turn it into a intuitive document like the attached file we sent you.

    More context:
    We have some trouble with this 1. because of missing competence to turn code language into visual pdf for our clients to understand.
    2. We also see that the content is dynamic in some places, depending on the screen the sizes changes dynamically. This is also some info we need in our overall styleguide system.

    How do you guys normally do this with other customers of yours? What can be a good scalable solution here?

    Feel free to ask any questions if anything is unclear.

    Avatar: Justin
    Luca Rossi
    Support staff
    February 26, 2024 at 14:41

    Dear Nicolo,

    Greetings.

    We regret to inform you that in order to create a style guide similar to the example you have provided, it would be advisable to engage the services of a professional web designer or front-end developer.

    Please note that all theme styles can be found in the following locations:

    – Within the file: /themes/xstore/xstore.css
    – Inside the directory: /themes/xstore/css

    Thanks for understading!

    Best regards,
    The 8Theme Team

    Avatar: Nicolo
    Nicolo
    Participant
    February 26, 2024 at 16:22

    I see, thanks alot for your answers.

    Is that something your paid customization services do?

    Regards

    Avatar: Nicolo
    Nicolo
    Participant
    February 26, 2024 at 16:26

    I will try to do it myself by inspecting.

    May I ask what kirki folder is? Is this also in the folder? i see it when I inpsect but you did not mention it.

  • 1 2
    Viewing 20 results - 1 through 20 (of 21 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.