Recent post filter seems to be broken with new VC and cant modify header image(px)

Support
#1

My site http://www.loftuspeak.com.au/ has a few issues
If you look in the header with the logo and our motto, the image seems very blurry even though it is quite high resolution (2400 x 289) and it’s been compressed down to 1200 x 144.5 (same aspect ratio). It should not be blurry but the only settings in the customization area of Theme co doesn’t seem to work (header size (px). When I modify the px size nothing happens at 0 or 1000000.

The second thing is, for some reason changing the hover over menu color does nothing. I have tried with css and with the inbuilt customisation of the theme it does not change, also I can not modify the arrows in the menu bar for any drop down menus. I’d prefer to not have the arrows or pick a different image for the arrows.

Thirdly, the recent posts via category seems to be broken, I have a recent posts category called featured and I’d only like to display one featured post with an offset of one but whenever I use visual composer it will automatically reset that setting and display 3 recent posts.

#2

This is an automated message to notify you that your thread was posted in the wrong forum, and it has been moved to the correct place. A member of our team will be happy to reply just as soon as your thread is up, however there may be a delay since it was placed in the wrong location (see global notice at top of page). How support works.

For support, please post all questions in the Support Forum.

For peer to peer conversations with other Themeco customers about tips, customizations, or suggestions you are welcome to use the Conversation Forum (no official support provided here).

Design & Development, Marketing & Media, and Hosting & Optimization are for discussion with fellow Apex members about non Themeco related topics. Please keep this in mind in the future.

Thank-you!

#3

Woops I’ll post it in the right forum now

#4

Hi James,

Using px size on image is not recommended because it is not responsive. I can see when viewing the original image it is clear and blurry occurs because of the resize on browser. Since too large image size is not recommended in terms of loading and performance too, please try to reduce the original size of the image. Let say just 1500px in width. It will be just fine.

To change menu link font color on hover, please use this custom CSS:

 .x-navbar .desktop .x-nav>li>a:hover, .x-navbar .mobile .x-nav>li>a:hover {
  color: red; /*Change this to your preferred color*/
 }
.x-navbar .desktop .x-nav > li > a:hover > span {
   box-shadow: 0 2px 0 0 red; /*Changed red to your preferred color of the line at the bottom*/
}
.x-navbar .desktop .x-nav li>a>span:after {
   content: " "; /*To remove the arrows*/
}

Regarding recent post on the homepage, we need to check your setup. Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • Link to your site
  • WordPress Admin username / password

All the best!

#5

I resized the image to 1500px while keeping the aspect ratio however it turned out even blurrier after I previewed it on the website see below.

Any other suggestions to sharpen the header image?

I’ve added the additional CSS however the hover color still is not changing.

In regards to the recent posts on the homepage, to recreate it, just start modifying any of the content in visual composer and preview the content and you’ll see that the shortcode automatically resets the settings.

I’ve provided a login as a Secure Note and would be grateful if you could take a look.

#6

Hi There,

It is really the image and not the theme. See this: https://screencast-o-matic.com/watch/cbiqijlO2O
Let’s try the CSS provided on this thread: https://css-tricks.com/forums/topic/scaling-down-images-with-css-makes-them-blurry/

.x-brand img{
      image-rendering: -moz-crisp-edges;         /* Firefox */
      image-rendering:   -o-crisp-edges;         /* Opera */
      image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
      image-rendering: crisp-edges;
      -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */

}

Please try to update the CSS to this:

.x-navbar .desktop .x-nav>li>a:hover, .x-navbar .mobile .x-nav>li>a:hover {
   color: red !important; /*Change this to your preferred color*/
}
.x-navbar .desktop .x-nav > li > a:hover > span {
   box-shadow: 0 2px 0 0 red  !important; /*Changed red to your preferred color of the line at the bottom*/
}
.x-navbar .desktop .x-nav li>a>span:after {
   content: " "  !important; /*To remove the arrows*/
}

Regarding the recent post, I can see the issue and I will forward this to our developer for investigation. What I have confirmed is, when the number of post is 1, it seems that this is disregarding this option. It works when I tried 2 or 3 on number of even with the offset value. We’re sorry for the inconvenience this has cause you.

#7

Perfect thank you so much all my problems are now resolved :slight_smile:

#8

You’re always welcome!

Cheers!