Okay
  Public Ticket #2033458
CSS
Closed

Comments

  • doorcoupons started the conversation

    I bought the theme some minutes ago and I need help with 2 problems I have:

    1) I want to remove the top header (Care is the cornerstone of our practice, careers,..)

     2) Furthermore, I want to hide the part at the top of the slider (Visit our Location 250 Main Street, New York Give us a Call, Send us a Message, Opening Hours…”)

    Best Regards, and thank you happy.png

  •  686
    Barry replied

    Hi there,

    First of all thank you for your purchase! Let me answer your questions.

    1. You can hide the header topbar by navigating to Appearance -> Customize -> Theme Options -> Topbar by setting the "Topbar" option to "Hide".

    2. This can be hide by navigating to Appearance -> Widgets and remove all widgets from the "Header" panel on the right side of the screen.

    Best regards,
    Barry

  • doorcoupons replied

    hey, thank you for your answer.. i only have two question left.

    1) where can i change the size (height) of the slider on the homepage? when i upload a photo, it is automatically scaled down.

    2) where can i edit the height of the header (menu)? i want to make it a little bit smaller..

    Thank you and best regards

  •  686
    Barry replied

    You're welcome.

    1. The recommend upload size for the slider images is 1920 (width) x 750 (height) pixels. If your uploaded image is bigger than that size it will automatically be scaled down to that size as you probably noticed. The best option is to scale/resize your images to this size with an image editor like https://imageresize.org/ 

    Another option is to set a fixed height to the slider image with some custom CSS and make the image automatically fit this area:

    /* Change slider image height */
    @media (min-width: 992px) {
        .jumbotron .item {
            height: 500px;
            object-fit: cover;
        }
    }
    

    You can add above CSS to Appearance > Customize > Additional CSS. By changing the 500px value in the code you can adjust the height of the slider image.

    2. This will also be possible with some custom CSS. Please use the following:

    /* Change menu height */
    @media (min-width: 992px) {
        .main-navigation > li > a {
            padding-top: 35px;
            padding-bottom: 36px;
        }
        .header .header-wrapper .header-logo {
            height: 99px;
        }
    }
    

    The above code will reduce the total menu bar height with 20 pixels. If you want to reduce it more simply decrease the 3 numeric values ( 35, 36 and 99 ).

    Best regards,
    Barry

  • doorcoupons replied

    Thank you for the response. 

    Regarding the first question:  I think that your CSS part is only working for the first slide of the front slider. Look at image 1&2, they have same dimensions , but the second one is showed in a completely different way with a grey bottom.

    Thank you

    Attached files:  Bildschirmfoto 2019-06-10 um 10.39.58.png
      Bildschirmfoto 2019-06-10 um 10.40.06.png

  •  686
    Barry replied

    Hi there,

    Thank you for adding the screenshots.

    Please replace the CSS from the first questions in my previous message with the following one:

    /* Change slider image height */
    @media (min-width: 992px) {
        .jumbotron .item img {
            height: 500px!important;
            object-fit: cover;
        }
    }
    

    This one should do the trick.

    Best regards,
    Barry

  • doorcoupons replied

    Thank you!

    Can you help me with one more thing: can i move the heading in the front slide at the bottom of the picture & make the heading have a background (transparent)

    Best regards

  •  686
    Barry replied

    Hi there,

    Please add the following CSS code to Appearance -> Customize -> Additional CSS:

    /* Change slide caption position add background */
    @media (min-width: 992px) {
        .jumbotron .jumbotron-caption {
            padding: 20px;
            background: rgba(0, 0, 0, 0.2);
            transform: translate(0%, 20%)!important;
        }
    }
    

    The code will move the slide captions to the bottom area of the image and will add a background with transparency.

    - Change position of the captions

    To change the horizontal position you can adjust the 20% value in above code. 

    - Change opacity of background

    To change the opacity of the background behind the captions you can change the 0,2 value in above code. The available range is 0 till 1, so for example 0.1 or 0.5 will work.

    Hope this helps.

    Best regards,
    Barry

  • doorcoupons replied

    Hey guys, sorry for so many questions. I have a problem with my jump menu. If I press for example "prävention" in the subemenü of "Leistungen" I will jump to the first picture, but i would like to jump like in the second picture (the picture or text should be in the middle of the screen)

    This is my code i used for this Anchor links. I put the ID in the header: <h2 id="sechs">Prävention</h2>

    Attached files:  Bildschirmfoto 2019-06-19 um 10.43.44.png
      Bildschirmfoto 2019-06-19 um 10.44.00.png
      Bildschirmfoto 2019-06-19 um 10.44.07.png

  •  686
    Barry replied

    Hi there,

    Unfortunately it is not possible by default to let # (hashtag) links jump to an element and position that section in the middle of the screen. This is native browser functionality and the browser jumps to the linked element and place it at the top of the browser window. In your case the top of the section is a little bit cut off because of the floating WordPress admin bar at the top of the window.

    The best option is to add an empty page builder row between the two sections with the image and add the ID to this empty row. On this way the "Prävention" section become more visible in the view area of the browser window, please see attached screenshot.

    If you really want to position the section in the middle of the browser window you need to install a plugin like Page scroll to ID. With this plugin you can manage the "offset" which allows you to set the position where the scroll animation need to stop before the section.

    Hope this helps, if you have any questions feel free to ask.

    Attached files:  screenshot01.png

    Best regards,
    Barry

  • doorcoupons replied

    Thank you very much! The plugin worked perfectly. Do you know maybe a plugin which can help me to have a fixed circle on the right side of the screen (like in the attachment). I would like to change the background and the color of the text

    Attached files:  Bildschirmfoto 2019-06-19 um 16.58.47.png

  •  686
    Barry replied

    Great!

    Unfortunately there is no plugin that allows you to do this so specific but with the Advanced Floating Content plugin you can do this by simply adding the round circle with text as an image.

    The fixed position can only be set top top or bottom and left or right I need to say.

    Best regards,
    Barry

  • doorcoupons replied

    ok thank you. one last question for today : i want to change the font to Work Sans. can i do this with css? and how?

  •  686
    Barry replied

    You can change the heading and body font via Appearance -> Customize -> Theme Options -> Typography

    Best regards,
    Barry

  • doorcoupons replied

    ah ok thank you. one small thing (sry): what can i do that "Behandlung" and "Überlastungsproblematiken" are in one vertical line. Best regards

    Attached files:  Bildschirmfoto 2019-06-19 um 18.24.24.png

  •  686
    Barry replied

    You're welcome.

    If you want this text to be in one single horizontal line you have 2 options:

    - Increase the width of the page builder column that contain this text

    - Decrease the font size of this text (see attachment)

    Attached files:  screenshot02.jpg

    Best regards,
    Barry

  • doorcoupons replied

    I don't want it in one single horizontal line , i want the the words start at the same position. my idea:6

    [icon] text

               text

    At the moment it is 

    [icon] text

    text

  •  686
    Barry replied

    Oops that was a misread from me, excuse me.

    You have to add the content in some HTML to do this. If you're working in the "SiteOrigin Editor" widget please switch from the Visual Tab to the Text tab and add the following:

    <div class="row">
        <div class="col-xs-1">[fa icon="fa-check"]</div>
        <div class="col-xs-11"><h2>Your text can be placed here</h2></div>
    </div>
    

    Best regards,
    Barry

  • doorcoupons replied

    okay thank you. regarding the fonts, can i make the header in "Medium 500" and the content in "Light 300". is this possible?

  •  686
    Barry replied

    Set the header in a font weight of 500 will be possible with the following CSS:

    /* change header font weight */
    .main-navigation > li > a,
    .main-navigation .sub-menu > li > a { font-weight: 500; }
    

    But the 300 font weight is not included within the theme settings. The theme will only get the 500 and 700 font weights. If you would like to set the font weight for different text elements I recommend to use the Easy Google Fonts plugin. This plugin adds a new Typography panel to the customizer where you can change the typography of the theme with much more advanced controls.

    Change fonts of Physio theme

    Best regards,
    Barry

  • doorcoupons replied

    Regarding this:

    <div class="row">    <div class="col-xs-1">[fa icon="fa-check"]</div>    <div class="col-xs-11"><h2>Your text can be placed here</h2></div>
    </div>

    can i change the color of the Check icon?

  •  686
    Barry replied

    Sure, you can switch back to the Visual tab and select the shortcode with your cursor to make it another color. I made a screencast of this: http://recordit.co/ccRGLe5LBx

    Please only do this for changing the color, if you switch back to the visual tab to change the header text it might happen that the HTML code will be messed up.

    Best regards,
    Barry

  • doorcoupons replied

    thank you! 2 small questions left:

    1) img1 - how can I raise the height of the text? It should be the same height as bus. But not bold

    2) img2 - how can I reduce the space under the top footer?

    Attached files:  EDE47038-D11F-45FC-B9EB-A4D65B83D5F3.jpeg
      E1B73B9C-AB43-44E9-8F24-CD79CC5A8676.jpeg

  • doorcoupons replied

    And i installed the plugin Meta Slider, but there is a shadow on the bottom and the sides of the image.. can i remove it somehow? (see attachment)

    Attached files:  Bildschirmfoto 2019-06-21 um 10.55.47.png

  •  686
    Barry replied

    1. Increasing the height of a font is technically not possible. In this case you can change the font to the same font of "Bus", or you can keep this font and increase the font size to match it with the font size of "Bus".

    You'll have to add a custom class to the specific icon box and then target it with custom CSS to make the changes. 

    - Edit the icon box and click on the "Attributes" panel in the top right of the modal

    - Add "custom-iconbox" (without the " ") to the Widget Class input field

    - Save the page

    - Navigate to Appearance -> Customize -> Additional CSS and add one of the following CSS code (do not add them both):

    To change the font to the same font as "Bus" please use this:

    .custom-iconbox .icon-box .icon-box--description {
        font-family: 'Work Sans';
        font-size: 18px;
        color: #464646;
    }

    Or if you want to keep this font but only increase the font size use this one instead:

    .custom-iconbox .icon-box .icon-box--description {
        font-size: 18px;
    }

    2. Is there any possibility I can see the website live? It makes it much easier for me to provide the correct CSS. For now, this should decrease the space between:

    .footer .footer--top .footer--top-container {
        padding-bottom: 0;
        border: none;
    }
    .footer .footer--top .widget {
        margin-bottom: 20px
    }
    

    3. I'm sorry but we don't provide support for 3th party plugins unfortunately. Theme support only covers our theme and the plugins that come as default. If I can take a look at the front-end of your website I can provide you some simple CSS that will force remove the shadow effect. However I do recommend to take a look in the settings of this plugin and see if there is any option there to remove it instead of using CSS fixes.

    Best regards,
    Barry

  • doorcoupons replied

    regarding point 3: unfortunately there is no option to remove it in the settings :/ here is the link for the website: https://www.nina-krenkel.at/

  •  686
    Barry replied

    The shadow effect comes from an empty caption element on the slides. Please check again if you can remove or disable the captions, this will automatically remove the shadow effect on the slide images.

    If there are no options for this the following CSS will force remove it too:

    .metaslider .caption-wrap { background: none!important; }
    

    Best regards,
    Barry

  • doorcoupons replied

    thank you very much for the css. Everything worked perfectly.. regarding the mobile version, i have some issues. 

    1) can i reduce the height of the font on the mobile version [Menü->Über Mich]

    2)how can i make the portrait photo larger? [Menü->Über Mich]

    3) can i make the font smaller?

    Attached files:  IMG_2661.jpeg
      IMG_2660.jpeg
      IMG_2658.jpeg

  •  686
    Barry replied

    Great!

    1. I assume in this case you mean the length of the text so it won't run out of the mobile screen? If I check the first attached image the best option is to remove the left padding for mobile devices, or at least decrease it a little bit. So the text stay within the visible area of the mobile device.

    Please read point 2 to see how to change the padding for mobile devices.

    If you want to decrease the font size for this text please read point 3 how to do this.

    2. The image is small because the SiteOrigin Editor widget that contain this image have a left and right padding of 100 pixels. Please edit this widget and below the "Padding" option you will see the "Mobile Padding" option. If you enter a 0 value in all 4 input fields the image will be displayed at maximum size for mobile screens.

    3. The best option is to remove the font size x-large from the inline HTML (switch to the text tab, remove the style attribute that define the font-size: x-large and switch back to the visual tab). Then within the "Attributes" panel on the right side you can add the following to the "CSS styles" field:

    font-size: 20px;

    and this to the "Mobile CSS styles" field:

    font-size: 15px;

    The size values can be changed to your own needs.

    Attached files:  (2) padding-option.jpg
      (3) change-font-sizes.jpg

    Best regards,
    Barry