Edit Goran theme front page

  • Unknown's avatar
    tecsemployment · Member ·

    Hey, I’m just getting into designing my first website (an employment site for the company I do the recruitment for) and I was wondering if someone could help me with how to do the following on my webiste (www.tecsemployment.com) which is using the Goran theme:
    1. Move up the logo so it is in the middle of the translucent bar at the top.
    2. Put the menu in the middle (height) of the translucent bar.
    3. Reduce the amount of white area (padding/margin) around the featured pages below my header image as there is too much.
    4. When I add the option to show to testimonials there is no header and I would like to add a small title above the testimonials saying “testimonials” or “What our past staff say”

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there,

    1. Move up the logo so it is in the middle of the translucent bar at the top.
    2. Put the menu in the middle (height) of the translucent bar.

    Hi there, with things the way they currently are, some of your changes end up blocking the touch device menu that appears at 1020px and narrower and when I added CSS to correct that, the touch menu background was a grey that obscured part of your image, so I worked out the following, using Media Queries so that I could control things above 1020px and also below. Add the following below all other CSS and see what you think. Make sure and view things on a tablet and phone if you can. 

    @media screen and (min-width: 1021px) {
	.main-navigation {
		margin-top: 40px;
		position: relative;
	}
	.site-logo-link img {
		margin-top: 0;
	}
}
@media screen and (max-width: 1020px) {
	.menu-toggle {
		background: none;
	}
	.main-navigation {
		z-index: 10;
		position: relative;
		margin-top: 0;
		background-color: rgba(0, 0, 0, 0.3)
	}
	.site-branding {
		max-height: 125px;
	}
}

    3. Reduce the amount of white area (padding/margin) around the featured pages below my header image as there is too much.

    The three images are all 180px square and the paragraph they are within has a center alignment and is as wide as the paragraph of text below them. If you want the images larger, you will need to insert larger images. You can probably go to 250px square with no problems. It may take a bit of experimentation.
    I’m not seeing any Testimonials on your main page at this time, but the following would allow you to add a title. 

    .front-page-testimonials-wrapper:before {
    content: "Testimonials";
    font-size: 170%;
    font-weight: bold;
    padding-bottom: 40px;
    display: block;
}
  • Unknown's avatar
    tecscampdev · Member ·

    Thanks for all of that, it has helped a lot! Now the issue is that I’d have added a fourth element to my menu which makes it go below the rest of the items on the menu. In order to make them all fit on the same line this is the CSS im using but it is creating weird blue squares on my drop down menus:

    .site-header {
	height: 150px;
}

.site-branding {
	height: 150px;
}

.site-logo-link img {
	max-height: 90%;
	max-width: 90%;
}

.main-navigation a {
	font-size: 100%;
	position: relative;
    right: 150px;
}
.menu-primary {
	width: 850px;
}
.body.hero-image .hero.with-featured-image {
	padding-top: 466px !important;
	padding-bottom: 116px;
}.site-header {
	height: 150px;
}

.site-branding {
	height: 150px;
}

.site-logo-link img {
	max-height: 90%;
	max-width: 90%;
}

.main-navigation a {
	font-size: 100%;
	position: relative;
    right: 150px;
}
.menu-primary {
	width: 850px;
}
.body.hero-image .hero.with-featured-image {
	padding-top: 466px !important;
	padding-bottom: 116px;
}
  • Unknown's avatar
    thesacredpath · Member ·

    I’m not seeing any weird blue squares. I do see a blue background on the submenus. Can you take a screenshot and upload it to your media library and then give us a link to that image so we can take a look?

  • The topic ‘Edit Goran theme front page’ is closed to new replies.