Customizing Maisha's Front Page with CSS Coding

  • Unknown's avatar
    shackmanassociates · Member ·

    I have a handful of questions, and I would like to see if a CSS specialist can help me address them. We are using the Maisha template. Here is a link to our site as it stands now (https://shackmanassociates.wordpress.com).

    We would like help with the following on the front page:
    (1) we would like to move the translucent gray text box (that currently appears centered and to the left) to the center of the page (leaving enough head room for the Empire State Building to appear above it; we would like for the box to be nestled into the center of our New York background image);
    (2) in the second content block, we would like to generate a ticker-tape-like scroll of words (appearing in bronze-colored font) and additionally feature a standard text box below the scroll;
    (3) in the third content block where we feature “DMC Services,” “Special Events,” “About Us,” and “Request Proposal,” we would like to move the identifying text below each image and find a way to make the text pop a little more; and
    (4) we would like to reposition the “translate this page” widget to the top of the website and in doing so, make its appearance more consistent with our menu.

    Thanks,
    Wes

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

  • Unknown's avatar
    nizamilputra · Member ·

    Hi there,

    Let me help you;

    (1) we would like to move the translucent gray text box (that currently appears centered and to the left) to the center of the page (leaving enough head room for the Empire State Building to appear above it; we would like for the box to be nestled into the center of our New York background image);

    .content-caption{
  margin: 0 auto;
  left: auto;
}

    (2) in the second content block, we would like to generate a ticker-tape-like scroll of words (appearing in bronze-colored font) and additionally feature a standard text box below the scroll;

    I’m not sure about it. Can you give me a sketch or something to make it clear?

    (3) in the third content block where we feature “DMC Services,” “Special Events,” “About Us,” and “Request Proposal,” we would like to move the identifying text below each image and find a way to make the text pop a little more;

    I’m also not sure about it, but I try to understand your request; 

    .fourcolumn .entry-header{
  text-align: center;
  transition: 400ms;
  transform: scale(0.8);
  opacity: 0.75;
}
.fourcolumn:hover .entry-header{
  transform: scale(1);
  opacity: 1;
}

    (4) we would like to reposition the “translate this page” widget to the top of the website and in doing so, make its appearance more consistent with our menu.

    #google_translate_element{
    position: absolute;
    top: 120px;
    right: 7%;
}
  • Unknown's avatar
    thesacredpath · Member ·

    Hi there,

    (1) we would like to move the translucent gray text box (that currently appears centered and to the left) to the center of the page (leaving enough head room for the Empire State Building to appear above it; we would like for the box to be nestled into the center of our New York background image);

    Add the following to your custom CSS. 

    .content-caption {
	left: 0;
	margin-left: auto;
	margin-right: auto;
}

    (2) in the second content block, we would like to generate a ticker-tape-like scroll of words (appearing in bronze-colored font) and additionally feature a standard text box below the scroll;

    The marquee HTML element is no longer supported, and this takes a good bit of CSS using animations, and I found an example here and worked with it on your site and made some additions and changes. You can edit the background, border and text color in the first CSS rule below. 

    .scroll-left {
 height: 50px;
 overflow: hidden;
 position: relative;
 background: rgba(255, 255, 255, 0.5);
 color: #000;
 border: 1px solid orange;
	max-width: 600px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.scroll-left p {
 position: absolute;
	max-width: 50%;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);
 transform:translateX(100%);
 -moz-animation: scroll-left 10s linear infinite;
 -webkit-animation: scroll-left 10s linear infinite;
 animation: scroll-left 10s linear infinite;
}

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

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

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

    What you will have to do to use this is to add the HTML and the text to the body of that section and set a CSS class in an enclosing div. It would look something like this. 

    <div class="scroll-left">
<p>My scrolling text here</p>
</div>

    (3) in the third content block where we feature “DMC Services,” “Special Events,” “About Us,” and “Request Proposal,” we would like to move the identifying text below each image and find a way to make the text pop a little more;

    See what you think with this. You can of course edit the colors. 

    .block-four .entry-content figure {
	padding-bottom: 50px !important;
}
.block-four .entry-header {
	position: relative;
	bottom: -30px;
}
.block-four .entry-header .entry-title {
	background-color: #FF8600;
	border-color: #fff;
	text-shadow: 1px 1px 1px #000;
}

    (4) we would like to reposition the “translate this page” widget to the top of the website and in doing so, make its appearance more consistent with our menu.

    We can do this, but need to limit it to screens/windows 956px and wider since at 955 and narrower the touch device menu activates and there are overlap issues. Give the following a try. 

    @media screen and (min-width: 956px) {
#google_translate_widget-3 {
	position: absolute;
	top: 80px;
	right: 0;
}
#google_translate_element {
	float: right;
}
#google_translate_widget-3 .widget-title {
	display: none;
}
}
  • Unknown's avatar
    shackmanassociates · Member ·

    Thank you to you both. I think we’re all most there. I’ll run this by my team this morning.

  • Unknown's avatar
    shackmanassociates · Member ·

    Thanks again so much.

    This initial question is essentially resolved, but we’ve two more issues where we could use assistance:
    (1) We would like to adjust the widgets that appear in the footer of our page. Specifically, we would like for our contact information (address, phone number, and email) to appear in the center. We would like place the Global DMC Partners logo directly beneath that.
    (2) With respect to “.block-four” where we feature “DMC Services,” “Special Events,” “About Us,” and “Request Proposal,” we would still be interested in moving those labels below their associated images and centering them. We attempted this on our own, but wound up burying the labels behind the footer (they disappeared).

    Thanks,
    Wes

  • Unknown's avatar
    thesacredpath · Member ·

    (1) … Specifically, we would like for our contact information (address, phone number, and email) to appear in the center. We would like place the Global DMC Partners logo directly beneath that.

    You can try this, but it looks sort of funny with all the space to the left and right of the two widgets. 

    #image-5 {
	width: 100%;
	display: block;
	text-align: center;
}

    (2) With respect to “.block-four” where we feature “DMC Services,” “Special Events,” “About Us,” and “Request Proposal,” we would still be interested in moving those labels below their associated images and centering them. We attempted this on our own, but wound up burying the labels behind the footer (they disappeared).

    I had given you that code in the previous reply. Did you try this code? 

    .block-four .entry-content figure {
	padding-bottom: 50px !important;
}
.block-four .entry-header {
	position: relative;
	bottom: -30px;
        text-align: center;
}
.block-four .entry-header .entry-title {
	background-color: #FF8600;
	border-color: #fff;
	text-shadow: 1px 1px 1px #000;
}
  • Unknown's avatar
    shackmanassociates · Member ·

    Thank you.

    This worked, but we also wanted to place our contact information above the logo. May you please provide guidance on a code that will accomplish that look?

  • Unknown's avatar
    shackmanassociates · Member ·

    Actually, I just figured it out. Thanks again so much!

  • Unknown's avatar
    thesacredpath · Member ·

    Hooray and you are welcome!

  • The topic ‘Customizing Maisha's Front Page with CSS Coding’ is closed to new replies.