Okay
  Public Ticket #903544
Change title + subtitle font and size etc.
Closed

Comments

  •  2
    JonasW started the conversation

    Hi Laborator team,

    First, thanks for the great work with Kalium! My site is up and running for some months now, but I would like to correct a few things. I have just extended my support for these issues so I hope you may be able to help!

    1. You helped me enhance the portfolio title + page title text size to 55 px with CSS ealier. After some update it doesn't affect page titles anywork (still works on portfolio items). Can you help me with correct CSS for pages?

    2. I would like change font for all portfolio + page titles (as above) to Lora bold italic, but keep all other headlines/menus etc. I can't get the custom CSS for this to take affect. Can you please help?

    3. On portfolio items I would like to change font  + increase size of portfolio subtitles so they look the same as portfolio titles (as above).

    4. How can I decrease the width of the portfolio item titles (the headlines) so they line break earlier for long titles?

    5. The body text line height on pages is less than on portfolio items and needs to be increased. What is the correct CSS to regulate line height on both portfolio items and pages?

    6. Would it possible to have links to "related projects" below portfolio items, similar to this: http://www.muuto.com/accessories/bulky-tea-set This would be a great addition!

    7. On the masonry portfolio page on thumbnail hover, how can I change font and text size for portfolio title and sub title?

    8. You helped me earlier with CSS to reduce size of footer widget titles + text (contact, projects by... etc) but after some update this is no longer working. Can you please help with updated CSS?

    9. I have an instagram feed at the bottom of the footer - can you help me hide the underline effect on thumbs + username on hover?

    10. In the footer, how can I move the Mailchimp signup form a bit to the left (closer to "Social media") to give more space? Can I do the same for the column "Projects by client"?

    11. In the footer, the widget text is very close to both sides, how can I increase the side margin space?

    I realize this was a lot, thanks so much in advance. You guys are great!

    All the best,

    Jonas

    {"wp":{"use":false,"adminUrl":"jwda.se/wp-admin","username":"","password":""},"ftp":{"use":false,"url":"","port":"","user":"","password":"","path":""}}

  • [deleted] replied

    Hi Jonas,

    Thanks for your kind words

    You are using an old version of our theme (1.9.4) and the latest version for the moment is (1.9.4.2), please update your theme first and then the premium plugins too.

    Important: After you update the theme please don't forget to go to Appearance > Install Plugins to update all your premium plugins to the latest version that we support.

    If you can't update LayerSlider, go to Plugins and deactivate this plugin. Then go to Appearance > Install Plugins, you now can update and then activate Layer Slider again.

    Then if any of your question is solved please tell us. As for the other answers:

    Please send us your WordPress username and password? We need to investigate your site and then get back to you if we have possible solution.

    Make sure to choose Private Reply when you send us sensitive informations!

  •   JonasW replied privately
  • [deleted] replied

    Hi Jonas,

    1— Can you please add the code below to Custom CSS:

    .wpb_wrapper .wpb_text_column h1 {
    font-size: 55px;
    }
    2— To apply custom fonts on your site first you need to upload your fonts on your server, try upload them somewhere different than the path of theme because when its update you will loose changes, so lets say you upload your font in:

    http://your-domain.com/fonts/font-name/

    Then there should be a .css file for example font.css, copy that in URL:

    http://your-domain.com/fonts/font-name/font.css

    Then go to Kalium > Theme Options > Typography

    and set in in Custom Font (for both Primary and Headings) as shown here:

     

    (view large version)

    3— Custom CSS again:

    .section-title p {
    font-size: 55px !important;
    }
    4— Can you please try to be very specific about the question and explain it more to us, in this way we can easily understand you and give you the proper answer.

    5— Custom CSS:
    p {
        line-height: 25px !important;
    }

    6— That is a product page, we offer the same for the product page too. But not for the single portfolio for the moment, we have this option on our to-do list and it will be available on future updates

    7— Custom CSS again:

    .portfolio-holder .thumb .hover-state .info h3 {
        font-size: 28px !important;
    }
    
    .portfolio-holder .thumb .hover-state .info p {
        font-size: 20px !important;
    }

    8— Custom CSS:

    .footer-widgets h3 {
        font-size: 30px !important;
    }
    
    .footer-widgets p {
        font-size: 12px !important;
    }
    

    9— Just add the code below to Custom CSS:

    .sbi_photo_wrap a:after {
        background-color: transparent !Important;
    }
    
    #sb_instagram .sb_instagram_header a:after {
        background-color: transparent !important;
    }
    

    10— I'm sorry but that is not possible.

    11— Can you please send us an image and tell us visually what you want to do there?

  •  2
    JonasW replied

    Hi Ylli, 

    Thanks so much for the reply and solutions! :)
    You have solved most of my problems, but there are a few things left:

    2. Thanks for the thorough explanation, but the font I want to use is a Google font. The issue is that I only want to change the font for my main headlines = porfolio title, portfolio subtitle and page titles (and perhaps masonry thumb hover titles). I don't want to change all headlines incl menu etc. In other words - I want to use a second headline font to achieve an "editorial" look. 

    4. I would like headlines (i.e. portfolio title + subtitle) to only fill approx. 60% of the width, like the body text below. However, they should preferably be full width on mobile devices. Is this possible?

    5. This works, but changes line height on the entire site. I would only like to change this for body text on pages and portfolio items, but not checklists etc. Can I instead to this with html when I write the text?

    6. I look forward to this update! I think many designers will appreciate this on portfolio items. :)

    7. Thanks. In addition, would it be possible to have custom text here - not the same as on portfolio item?

    9. Works, thanks! In addition, can I also get the hover background colour to be black like my portfolio masonry?

    11. The space on the side of the footer widget text is very tight, see attached image. Could this be increased?

    12. The next/prev links on portfolio items have on hover underline effect - can we achieve this? Or can we even get the same look as on blog posts with name + arrow? You mentioned last year that this was on your to-do list. ;)

    13. In my portfolio items I have a CSS to use block quotes to add more body text. Is there a way I can style this text more? I would like to use bold text for questions and regular text for answers. Example here: http://jwda.se/work/happywhale/ Ideally, it would be truly fantastic if you could incorporate a text block in addition to the block quotes. I believe this would be even more useful for most users.

    14. In regard the the link above; I would like to hide "/work" in the url altogether, is this possible? I know that the link http://jwda.se/happywhale/ also works correctly, so I assume this should be possible. :)

    15. I now have a portfolio masonry with different thumb sizes, but I would also like to have thumbs that link to a few pages - is this possible? Or would that require me to build my pages as portfolio items?

    16. Last thing: My site looks much better if I use 90% zoom on my monitor (2560x1440), otherwise everything feel just a bit to big. Is there a way to apply this zoom on the entire site?


    Thanks again for all the help Ylli, you make my support money worthwhile! :)

    Best,
    /Jonas

  • [deleted] replied

    Hi Jonas,

    Lots of questions there, anyway i will try to reply to them one by one:

    2— If you go to your Theme Options > Typography, you will see that you can choose a different font for 

    Primary Font and Heading Font.

    Please choose your heading font, and then on those pages that you want to set titles as 

    Primary Font and not Heading font, i will send you the CSS code to change them.

    You just need to send me the URL-s of those pages and specify me exactly which parts you want to show Primary Font instead of Heading Font.

    4— This is not possible.

    5— That code will change all elements that are paragraphs. You can not choose to edit them separately.

    7— This is not possible.

    9— I'm sorry but this is a custom request for an element that doesn't come with our theme, and we don't offer that level of support as we have described,

    11— Custom CSS:

    .footer-widgets {
    padding: 0 15px;
    }

    12— This is not possible to do for the moment, we will see if we can do something on our future updates.

    13— I just tried that but that area is not an editor where you can choose bold, i tried to do that with the code but it looks like Advanced Custom Fields (ACF) plugin doesn't allow it.

    14— Please navigate to your theme files (wp-content > themes > kalium), and add this custom code on the end of the codes in functions.php file. 

    Please save this code, because when you update your theme you need to add it again.

    15— I think that you can do that on this area


    (view large version)

    16— I'm sorry but this is not possible.

  •  2
    JonasW replied

    Hello again Ylli,

    Thanks again for your efforts in trying to help me! We're almost there now!
    Again, my comments below:

    2. I need to change font for headlines i.e. both Title and Subtitle in portfolio items (they should look exactly the same). All other font on the site should be another font. This should be a fundamental function imho. Is there a way we can solve this?

    5. Is there no way to change only paragraph text in portfolio item text and pages text - but not for checklists, widgets etc. Or the opposite; can I use html directly in text fields I want to change?

    14. Sorry, the code you provided for functions.php doesn't change anything. Would you mind looking at this again?

    15. Respectfully, what you are suggesting is something totally different. Would you mind having a second look? :)

    16. A similar request; would it be possible to have two thumbnails (feature images) in the portfolio masonry page that links to one and the same portfolio item? For example; can I set up two portfolio items but link one to the other so I'm merely using one for the feature image+title/subtitle for the masonry thumb and leave the rest blank?

    17. On the portfolio items, would it be possible to have the title+subtitle text on the feature image instead of below? (same principle as masonry thumbs). 


    Ylli, thanks again for taking the time to help. Happy Friday!

    Cheers from Stockholm,

    Jonas


  •  2
    JonasW replied

    Good morning Ylli,

    Hope you are well. I just wanted to let you know that I've solved Q15 (page thumb in portfolio masonry) during the weekend. You were - of course - right! I managed to make it work with a "blank" portfolio item to link to the page. This also solves Q16. Thanks!

    When you have a moment, I look forward to your feedback on the other questions.

    Have a great day!
    /Jonas

  • [deleted] replied

    Hi Jonas,

    Glad to hear that you managed to solve those two questions

    2— Please choose your Heading font 


    (view large version)

    and then tell me on which areas you want to make Heading Font as Primary Font.

    5— This is possible, but it requires a lot of work, and i'm afraid that we don't offer this level of support. Because this we don't offer custom work.

    14— Hmm it should work because this code works for other users. Can you please share your WP credentials here, because I need to login to your site and test this issue. Your information is safe here (private) in this thread.

    To include your credentials click Insert Credentials button in editor toolbar. (See how)

    17— This is not possible for the moment, maybe in the future updates we can introduce a new portfolio layout that can do this

  •   JonasW replied privately
  • [deleted] replied

    Hi Jonas,

    2— Not sure if you understand me, please just change your Heading Font and the Primary Font like this http://drops.laborator.co/1gjl9 and then please detect places on your site that you want to change.

    14— Please navigate to your theme files (wp-content > themes > kalium), and add this new custom code on the end of the codes in functions.php file.

    18— Can you please add the code below to Custom CSS on that page only:

    .portfolio-container-and-title .page-container {
        margin-top: 0px;
    }
    
  •  2
    JonasW replied

    Hello again Ylli,

    2. I do understand how to change the fonts, but with the theme default I can't change heading font on text headlines (think: editorial text) without changing in font in menus, footer and everywhere else. Please see attached image of what I'm trying to accomplish! Ideally, there would be a CSS to change the font in these three required places. Thanks again!

    14. Unfortunately, this code will cause my site to not load at all. (!) 

    18. This works, thanks! :)

    Please Ylli, get back to me as soon as you can - this has been driving me nuts for more than a week now! ;)

    Thanks again,
    Jonas

  •  2
    JonasW replied

    Hey Ylli,

    Regarding Q14: Now suddenly the slugs are gone! I uploaded a backup of functions.php so I don't know how this happened. Did you fix something? Super weird, but also nice. (: What did you do?

    /Jonas

  •  2
    JonasW replied

    Hi Ylli,

    I just noticed that the portfolio items also have that extra space between menu and feature image (Q18). I tried to solve this by tweaking your code below, but can fix it. Can you provide the correct CSS to solve this as well? Many thanks! :)

    /Jonas

  • [deleted] replied

    Hi Jonas,

    I'm sorry but i just loose track of your questions, can you please write me all your active questions on a new reply?

  •  2
    JonasW replied

    Hi Ylli,

    No problem, I will cut-n-paste for you. Last two unsolved questions, as below:

    • (Q2) I do understand how to change the fonts, but with the theme default I can't change heading font on text headlines (think: editorial text) without changing in font in menus, footer and everywhere else. Please see attached image of what I'm trying to accomplish! Ideally, there would be a CSS to change the font in these three required places. Thanks again!
    • Portfolio items also have that extra space between menu and feature image (see Q18). I tried to solve this by tweaking your code below, but can fix it. Can you provide the correct CSS to solve this as well? Many thanks! :)

    I would appreciate a quick reply, thanks!
    /Jonas

  • [deleted] replied

    Hi Jonas,

    1— As i have wrote this earlier, this is not possible with our theme, so i will try to help you to do this thing manually.

    Please just tell me name of those two google fonts you want to use and what font will be the red color from the image (site-fonts_578) what that will be the green and i will try to help you with the rest.


    2— Can you please add the code below to Custom CSS

    .single-portfolio .page-container {
    margin-top: 0px !important;
    }
  •  2
    JonasW replied

    Hello Ylli,

    Hope you are well!

    1. I will keep Karla as the primary font (red font). I have not decided on the headline font (green font) yet - it may be a custom font - but let's say Lora bold italic as an example. Thank you!

    2. Thanks, this works. In reference to this, I noticed that the space between portfolio item title and feature image is not consistent with the space between page title and feature image. How can I reduce this space on portfolio items to be consistent with pages?


    Thanks so much Ylli, this should be the last of my questions. ;)

    /Jonas

  • [deleted] replied

    Hi Jonas,

    1— I set your Heading Font as Lora, now please add the code below to Custom CSS:

    .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-dark div.menu>ul>li>a, .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-dark ul.menu>li>a {
        font-family: 'Karla', sans-serif !important;
    }
    
    .section-title p {
        font-family: 'Lora', sans-serif !important;
    }
    
    .single-portfolio-holder .details .services h3 {
        font-family: 'Karla', sans-serif !important;
    }
    

    2— Can you please add the code below to Custom CSS

    .single-portfolio-holder .portfolio-featured-image {
        margin-bottom: 40px !important;
    }

    Here is how i found that place and edited it with Custom CSS http://drops.laborator.co/11Dpz

  •  2
    JonasW replied

    Hi Ylli,

    Thanks for showing me the video. This was a useful trick I didn't know.

    Unfortunately, the CSS to restore Karla as header font didn't work in all places on my site. As I tried to exlain, I only want the new header font in 3 places; for Page titles, Portfolio item titles + subtitles. Now it's a bit everywhere on the site and the Karla headers are regular instead of bold in some places.  :(

    /Jonas



  • [deleted] replied

    Hi Jonas,

    I made those changes now by adding this CSS codes on your Custom CSS:

    /* Font Changes */
    .section-title p {
        font-family: 'Lora', sans-serif !important;
    }
    
    .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-dark div.menu>ul>li>a, .main-header.menu-type-standard-menu .standard-menu-container.menu-skin-dark ul.menu>li>a {
        font-family: 'Karla', sans-serif !important;
    }
    
    .single-portfolio-holder .details .services h3 {
        font-family: 'Karla', sans-serif !important;
    }
    
    .portfolio-holder .thumb .hover-state .info h3 a {
        color: #fff;
        font-family: 'Karla' !important;
    }
    
    h3, h4, h5, h6 {
        font-family: 'Karla' !Important;
    }
    

    If you see another place that you need to change fonts please just tell me and don't revert all the changes that i have made until we finish this.

  •  2
    JonasW replied

    Hi Ylli,

    I'm not sure what might have changed in my CSS, but now all text is bold!! I can't even select regular font weight in the Theme Typography settings, it only shows Karla in bold. This is super confusion and the site looks crap right now. :/

    For now it would be preferable to just use Karla on the entire site, but bold for heading and regular for paragraph text. Can you please advise me about what you changed?

    Hope to hear back from you soon, thanks!

    /Jonas

  •  2
    JonasW replied

    Ylli, I noticed the same thing happened to your demos: http://demo.kaliumtheme.com/main/portfolio/web-press/

    This must mean that there is a problem in the actual theme and not my CSS. (!)

    I look forward to your feedback!

    /Jonas

  • [deleted] replied

    Hi Jonas,

    We are just going back and forth with this, can you please tell me what exactly you want to do with your typography?

    Your provided WP credentials are not working anymore.

    The font is not bold, it is normal (300), you can see on this video how the bold font looks like.

    There is not any problem or bug on the theme or on your CSS.

  •  2
    JonasW replied

    Thanks Ylli,

    Trust me, I know how bold looks like. There was a bug in your theme during the day yesterday, but it magically disappeared later in the evening. Now it looks okay again. It's perhaps more worrying that you didn't know. :/

    I have given up the font fix, it seems I can't solve it even with your expert help, so lets forget about it.

    /Jonas

  • [deleted] replied

    Hi Jonas,

    It was not a bug, maybe you have multiple fonts installed on your PC or MAC and sometimes if you have installed for example Karla or any font that is like Karla your PC will not show it well until you disable or delete that font from the PC.

    How i can change something if i don't have your Wordpress credentials?

    I can help you even that is not possible from the Theme Options for the moment but you must be very specific on your question.

    Anyway, i'm glad that i helped you on your other questions

  •  2
    JonasW replied

    Ylli, 

    Nothing has changed on any of my computers and now it works fine on both. The reason I posted a link to your theme sample was that it was the same problem there - only bold fonts.

    I any case, thanks for the questions you did help me with.

    /Jonas

  • [deleted] replied

    Hi Jonas,

    I don't know what the problem exactly was, maybe the bold was selected on your Typography http://drops.laborator.co/1gW40.

    If you have another question kindly open a new ticket and post your request so it will be helpful for the other users to take advantage of searching them on the forum, and we’re glad to help you in your new thread. 

    Will set this ticket as solved from here.

  •  2
    JonasW replied

    No Ylli, the bold was also on your sample theme. Why would I include that link otherwise? Also, don't you think I know how to change the typography settings? This is getting annoying. Let it go.