Custom CSS Coding Help for Maisha

  • shackmanassociates · Member ·

    Hi There,

    We have a handful of adjustments we would like to make to our website and could use some assistance.

    1. On the .block-two section of our website, we would like to increase the size of the font where it reads, “At Shackman Associates…the New York Experience!”

    Right now, we’re using the following CSS (but something is off):
    .block-two .entry-content {
    font-size: 150%
    }

    How do we target that specific paragraph?

    2. Also, in .block-two, we would like to adjust the scrolling text. Specifically, we would like for the scrolling text to repeat (or loop) more often with less lag time.

    3. The Search Widget: Is it possible to add the search button to the social media bar?

    4. On our home page (in .block-four), we have a DMC Services tab. That’s well and good. When we click into the page, however, we would like for the headline to read, “Destination Management Services.” Here’s the page as it stands now (https://shackmanassociates.wordpress.com/destination-management/).
    Next, in the blockquote, we would like to un-italicize the font and remove the colored bar that appears on the left or change the color to match the bronze icons elsewhere on the site.

    Thanks!

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

  • shackmanassociates · Member ·

    To quickly follow up:
    We’ve added a photo gallery to the child pages under DMC Services. Now the grid displays four-mini images. How do we get those to go away?

    For your reference, here is a link to the page in question:
    https://shackmanassociates.wordpress.com/destination-management/

    Notice that the “Accommodation” icon shows the four mini images. We would rather it appear like the icon for “Creative Services,” “Ground Control,” etc.

  • shackmanassociates · Member ·

    To quickly follow up:
    We’ve added a photo gallery to the child pages under DMC Services. Now the grid displays four-mini images. How do we get those to go away?

    For your reference, here is a link to the page in question:
    https://shackmanassociates.wordpress.com/destination-management/

    Notice that the “Accommodation” icon shows the four mini images. We would rather it appear like the icon for “Creative Services,” “Ground Control,” etc.

  • shackmanassociates · Member ·

    One final question. On this page (https://shackmanassociates.wordpress.com/destination-management/hospitality-and-staff/), we want to reposition the picture so that the gentleman’s head is not cut off. May someone provide guidance on how to do that?

  • thesacredpath · Member ·

    Hi there,

    1. On the .block-two section of our website, we would like to increase the size of the font where it reads, “At Shackman Associates…the New York Experience!”

    That is a paragraph within the content, and it is not too easy to only change one paragraph from within CSS. What I would suggest is to use an inline style on that paragraph like this. You would edit that particular page and then switch to the Text tab and you can replace that paragraph with the following, which includes a font size. You can adjust the 120% value I have as desired.
    <p style="font-size: 120% !important;">At Shackman Associates, we do more than emulate the New York experience; we are the New York experience!</p>

    2. Also, in .block-two, we would like to adjust the scrolling text. Specifically, we would like for the scrolling text to repeat (or loop) more often with less lag time.

    It would be nice if there was an easy way to do this. What I’ve had to do is play with the transform:translate values and came up with 75% and -75% values Which is getting it to repeat almost immediately. Replace the following rules with what I have below and see what you think. 

    .scroll-left p {
	position:absolute;
	max-width:100%;
	width:100%;
	height:100%;
	margin:0;
	line-height:50px;
	text-align:center;
	-moz-transform:translateX(10%);
	-webkit-transform:translateX(10%);
	transform:translateX(10%);
	-moz-animation:scroll-left 20s linear infinite;
	-webkit-animation:scroll-left 20s linear infinite;
	animation:scroll-left 20s linear infinite;

}
@-moz-keyframes scroll-left {
	0% {
		-moz-transform:translateX(75%)
	}
	100% {
		-moz-transform:translateX(-75%)
	}
}
@-webkit-keyframes scroll-left {
	0% {
		-webkit-transform:translateX(75%)
	}
	100% {
		-webkit-transform:translateX(-75%)
	}
}
@keyframes scroll-left {
	0% {
		-moz-transform:translateX(75%);
		-webkit-transform:translateX(75%);
		transform:translateX(75%)
	}
	100% {
		-moz-transform:translateX(-75%);
		-webkit-transform:translateX(-75%);
		transform:translateX(-75%)
	}
}

    3. The Search Widget: Is it possible to add the search button to the social media bar?

    No, that is not possible at WordPress.com.

    4. On our home page (in .block-four), we have a DMC Services tab. That’s well and good. When we click into the page, however, we would like for the headline to read, “Destination Management Services.”

    Give the following a go and see what you think. This is a hacky way to do this, but it is the only way I can think of to do it. 

    .page-id-70 .post-70 .entry-content h1 {
	visibility: hidden;
}
.page-id-70 .post-70 .entry-content h1:after {
	content: "Destination Management Services";
	visibility: visible;
	display: block;
	position: absolute;
	top: -20px;
}

    Next, in the blockquote, we would like to un-italicize the font and remove the colored bar that appears on the left

    This removes the italics and orange left border from all blockqotes. 

    blockquote {
	font-style: normal;
	border-left: none;
}
  • thesacredpath · Member ·

    This will remove the gallery on the Accommodations child page display on Destination Management. 

    .page-id-70 #post-520 .entry-content #gallery-520-1 {
	display: none;
}
  • thesacredpath · Member ·

    For the featured image on the hospitality and staff page, add the following. 

    .page-id-136 .aboutpage .cd-fixed-bg-one {
	background-position: center 33%;
	padding: 90px 0;
}
  • shackmanassociates · Member ·

    This all works well. Thank you!

    If I may trouble you with one more detail: you’ll notice on our DMC Services/Destination Management Services page (https://shackmanassociates.wordpress.com/destination-management/) that the icons Meetings & Conferences and Special Events still display previews. We previously added coding that should have prevented as much on the grid displays for our pages, but that doesn’t appear to be working. May you assist with cleaning that up?

    We’re running into the same issue on our Special Events page:
    https://shackmanassociates.wordpress.com/destination-management/special-events-2/

    There, Management, Production and Embellishments fall out of line.

    Thanks again!

  • thesacredpath · Member ·

    Hi, this should get rid of the text below the images and titles for child pages on the grid pages on all of them. 

    .page-template-grid-page .child-pages .fourcolumn .hentry .entry-content ul, .page-template-grid-page .child-pages .fourcolumn .hentry .entry-content p, .page-template-grid-page .child-pages .fourcolumn .hentry .entry-content blockquote {
	display: none;
}
  • shackmanassociates · Member ·

    Thanks so much!

  • thesacredpath · Member ·

    You are welcome.

  • The topic ‘Custom CSS Coding Help for Maisha’ is closed to new replies.