Image Highlight, Text Word Wrapping, and Image Icon Resize

  • shackmanassociates · Member ·

    Hi There,

    We would like to make a few revisions to the appearance of our website.

    We would like to add a highlight feature to the main image on our front page that mirrors the highlight feature of the four images that appear in “block-four” of our front page. Those icons (DMC Services, Special Events, Meet the Cast, and See Us In Action) appear black and white but reveal color when the user hovers over them. What code would we apply to make that happen to our main image on the front page?

    Also, we’re not a fan of the word-wrapping throughout the website. It breaks words with a hyphen. We would rather the site not hyphenate words and bring that word to the next line.

    Finally, on most (and eventually all) of our child pages, we’ve added a gallery showcasing four images. We’d like for the icons to appear uniform (as they do here: https://shackmanassociates.wordpress.com/destination-management/special-events-2/theme-design/). Compare that to this: https://shackmanassociates.wordpress.com/destination-management/ground-control-2/. Understanding that the images are all unique in size and dimension, how do we get the thumbnails to provide a uniform preview size?

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    On your main image on your front page, you will need to have a color version of that photograph and then edit it and crop it so that it is the same as the one you have now in black and white. Then add the following to your custom CSS and replace the URL I have as an example with the URL of that new color image. 

    .page-template-main-page .cd-fixed-bg:hover {
	background: url('https://shackmanassociates.files.wordpress.com/2017/01/20150626_nyc-_rlp3025.jpg') !important;
}

    To remove hyphenation, add the following to your custom CSS. 

    .entry-content {
	hyphens: none;
	word-wrap: normal;
}

    As long as you continue to set your galleries to square with 4 columns, the software will prepare the images just as it has on the theme design and site selection pages.

  • shackmanassociates · Member ·

    Thank you. To quickly follow up: How would we go about placing an automatic slider where our main image appears on the front page? We would like to have perhaps as many as four images cycling through.

  • shackmanassociates · Member ·

    To follow up once more: We’ve placed a slideshow gallery in the “content caption” of our main (front) page. Now we’d like to place it wall-to-wall without any border so that it appears as though the “front page image” is an automatic slider of images. We’re close, but something’s a bit off. On a small 11″/13″ screen laptop, we’ve pulled off the look using this code:
    .content-caption .entry-content .cd-main-content {
    margin-right: -105px;
    margin-left: -105px;
    margin-top: -30px;
    }

    Any advice on how to perfect the look?

  • thesacredpath · Member ·

    How would we go about placing an automatic slider where our main image appears on the front page?

    I see with your customization that the images in your slideshow are nearly full width. The following CSS will remove the left and right padding and adjust a few other things that cropped up after applying the first rule below. 

    .home .content-caption {
	padding-left: 0;
	padding-right: 0;
}
.home .content-caption .entry-content .cd-main-content {
	margin-top: -50px
}
.home .content-caption .entry-content .cd-main-content .slideshow-window {
	padding-bottom: 59.25% !important;
	margin-bottom: 0;
}

    See what you think with this and let me know. In my testing, it appears to work all the way from about 2000px width down to phone size.

  • shackmanassociates · Member ·

    Thanks for your help.

    Now the team feels that the wall-to-wall appearance of the slideshow is a bit too overwhelming; so, we’re back-tracking.

    While I have you: The team would like to remove the hover feature for the four icons that appear at the bottom of our front page (in block four). I’m not clear on how to remove the effect. May you please assist with that? Thanks again!

  • thesacredpath · Member ·

    You can remove the hover effect on the images in block four with the following CSS. 

    .block-four .cd-fixed-bg {
    filter: none;
}
  • The topic ‘Image Highlight, Text Word Wrapping, and Image Icon Resize’ is closed to new replies.