[Michael PParticipant]

Thanks for the suggestions, I got the horizontal lines working with the following:

.tp-dottedoverlay.twoxtwo {
background:url(…hz_lines.gif)
}

However I’m still having this persistent problem with font weights inside buttons. I’ve tried all the custom css suggestions, and nothing has any effect.

Here are those screenshots again. The first is how it looks in customiser, the second is the way it renders in the browser window when published, tested on two different macs.

http://prntscr.com/438381

http://prntscr.com/4382wq

Thanks again.

[Kosher KMember]

Hi Michael,

The font doesn’t look bold in my end in Firefox, Safari and Chrome.

Did you check it in Firefox or Chrome and see if they still have the same issue?

You might have local font installed in your computer that is affecting your how your browser renders some font.

[Michael PParticipant]

I’ve tried all browsers, and two different Macs. They all render the text bold, but when previewing in the customiser the fonts look fine.

I don’t think this is a local font issue. I don’t have Lato installed on either system, and I can’t see how it could be calling up any other font.

What OS are you running? I’m on Mac OS 10.9.4 on both systems – do you have a system running OS 10.9 there you could check this on?

Many thanks,

MP

[MrinalMember]

Hi MP,

I got you!

To text’s font weight are set as high, add the following CSS codes via Customizer > Custom > CSS to make them lower:

body {
    font-weight: 300 !important;
}

Hope this helps, Cheers!

[Michael PParticipant]

Hi,

I tried your custom css – it only affects the body text font weight, not the text inside buttons.

Let me make sure we’re clear on the issue – it’s the font weight within buttons that is rendering too heavy. If you look at my screenshots you can see the difference between what the customiser previews and the way it is rendered in the browser once published:

http://prntscr.com/438381

http://prntscr.com/4382wq

I’ve tried a load of different custom css suggestions, including those that target the buttons such as

.x-btn.x-btn-x-large {
font-weight: normal !important;
}

.x-btn.x-btn-x-large {
font-weight: 300 !important;
}

None of these make any difference, and I don’t have the Lato font installed on any of my systems so I can’t see how it’s a local font issue.

Hope you can help, it’s driving me nuts!

Many thanks,

MP

[RadModerator]

Hi Michael,

Try this css.

.x-btn.x-btn-x-large {
font-weight: /* add some value here from below */ ;
-webkit-font-smoothing: antialiased !important;
}

/* this one  if you're using standard font */
font-weight: normal !important;

/* this one  if you're using non-standard font which normal size is 300 */
font-weight: 300 !important;

/* this one  if you're using non-standard font which normal size is 400 */
font-weight: 400 !important;

....
....
....

/* this one  if you're using non-standard font which normal size is 700 */
font-weight: 700 !important;

In short, font weight must match to the declared font weight within @font-face declaration of non-standard font. I can’t really replicate the issue as it’s working fine from my tests.

I would like to test it from other machines, but I don’t want to login there for security purposes. And the only way of checking your site is logging in.

Thanks!

[Michael PParticipant]

Success! The new css for the standard font worked, text inside buttons is now rendering correctly. I must say, the X theme is quite amazing. Support is excellent too, many thanks for your help.

I wonder if this solution is something you should implement across the theme? Perhaps some research into whether the font weight problem occurs routinely with the webkit on recent Mac OS versions? I’ve noticed it’s a problem with headings too, the same css applied to the heading resolves it.

Another quick question – is it possible to remove the hover line underneath navbar links in Renew? I can’t find anywhere in the customiser to do this.

Thanks again,

MP

[RadModerator]

Great to hear that Michael!

Actually we can’t apply this to X, because not all users are experiencing this.

Some fonts were rendered okay and no problem, and adding this may negate font rendering from the user that have it working fine.

Though, I agree that there should be an on/off option but still lot to consider just for few fonts that wont work.

And for removing menu line, add this css too.

.x-navbar .x-nav > li > a:hover, .x-navbar .x-nav > li.current-menu-item > a {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}

Cheers!

[Michael PParticipant]

Thanks, that worked perfectly to remove the hover line.

How would I apply the font solution globally? I’ve actually found this problem to be exhibiting more widely than I first thought. To what would I apply the same css if I wanted to make it work for all text?

Cheers,

MP

[RadModerator]

Great to hear that Michael!

You could use this to apply it globally.

* {
-webkit-font-smoothing: antialiased !important;
}

But you can’t apply font weight as it will override styling including head titles, and etc.

Cheers!

[Petje370Participant]

Hi,

I’am trying to get images side by side full width on one page.

Like this example http://www.loungelizard.com/work/. i would really like to have this look for my projects..

I followed the instructions as mentioned in this forum en pasted de following code in to my child.css.

.side-by-side {
display: block;
}
@media (min-width: 960px) {
.side-by-side {
height: auto;
padding: 2px
}
#process { width: 50%; float: left; }
#story { width: 50%; }
}

also added de .site-by-site class to the images in the content band.

so far so good the images are side by side but only on my 24inch screen as soon i make my screen a little bit smaller the images stack on each other. not responsive like the example from http://www.loungelizard.com/work/..

What am i doing wrong, can you please help me.

Kind regards,

Patrick Boer

[Prasant RaiModerator]

Hello Patrick ,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Also, it’s usually better to just create your own support ticket for a new question. Then we can work with you directly in case more followup is needed.

Thanks for understanding.

[Author]

Posts