Customization

[Rama Devi]

Hello Bill,

I have purchased Elite today. I have customized my website superficially & have the following questions. Please go through it “www.stenzer.in”

Brief Info about us : We have the equipment to Engrave names & Signatures of customers on Apple Watches & iPhones. We are building a website for this

Questions:

1) How to add Full Screen Images one below the other on the Home Page? I tried adding the images to the Home Blocks in customizer. But they are not showing up. So I added the images in the product description. It did turn out real bad. How to set this? My home screen should Look like Selfie ( But I need a small space between each of the Images to add product description )

2) How should I customize the Font ( Sizes, Colours & Styles ) & Background for the Product Description that appears in between each of full screen images that appear on the Home Page?

3) Rather, if I choose to make an image of the description, what should the Size of the image ideally be? The width should expand to the size of the browser. The length should be around 5-7 cms ( depending on the description )

4) The page title is appearing below the Full Screen image on every page. How should I remove this? It appears like this. I dont want this on any page ( Except on the Product Page )

Home
________________________________________________________

4) Menu : I dont want some of the main menu items to navigate. I just want the sub items to Navigate. How should I set this?

5) I tried changing various Fonts in the Menu, but all the characters are appearing in CAPS no matter what font is being used. I just want the starting letter to be in Caps. How to set this?

6) Now coming to the inner pages, please click this link ” http://stenzer.in/laser-engraving/”

– I dont want the page title & the line to be displayed

– I will just have 2 products in my all categories. As you can see, the Product thumbnails are very small. Both the product thumbnails combined are just filling half the screen space. I want the Product thumbnails to be much bigger ( twice of the current size). Two products should be good enough to fill the entire screen space. How to do this?

7) How can I change the font of the Product Name, Price & Select Buttons that are appearing below the Product Thumbnails?

Will be waiting for your answers

Thanks,

[Bill Robbins]

Good Morning,

Let’s see if we can find answers to get you started.

1. To create full screen background images like Selfie uses, first add an empty text widget to the home page section where you’d like to have just the picture show up. The home page sections appear based on the presence of a widget there. So if we add a text widget, we can make that section appear.

Now you can add a background image to that section using the customizer.

To make any home page section full height (they are already full width), go to the Theme Options page and select the Advanced tab. Scroll down to the Custom CSS box and add this:

#home-one {
	height: 100vh;
}

That will make the first home section full height. You can repeat that for any other home page section, just changing out the “one” in the snippet above for the number of the section you’d like to change.

That should allow you to have full height and width images in your home page.

---

2. There is a plugin called BlackStudio TinyMCE Widget that adds a new widget called Visual Editor to your site. It has the editor from the page/post screen that lets you more easily style text. I would suggest using it. That will help you set some text as headings, make other italics or bolded and allow you to add images more easily.

The best way to change out the fonts is in the theme options page. There is a tab for widgets that you can use to set your fonts for many widget uses. Others will be in the content tab.

Generally speaking you want to use two or three fonts at most on a site for the best design. More than that and it tends to get a bit distracting.

3. You can make an image of the description of you’d rather. The browser will scale it down if it’s larger than the area for it.

You wouldn’t want to add the description image as a background image. Add it via the BlackStudio’s Visual Editor widget we spoke of earlier. That way you can add an alternative text to it so search engines and screen readers can access its content.

Make it 1140 pixels wide as that’s as wide as the content there will be. Then it can scale down naturally as the screen shrinks. It won’t crop, but just scale down.

4. You can add this to your custom CSS to hide the page title everywhere except the WooCommerce main shop page:

h1.page-title {
	display: none;
}

.shop h1.page-title {
	display: block;
}

4. There’s a post at http://www.organizedthemes.com/create-placeholder-wordpress-navigation/ that can show you how to create placeholders in your navigation menus.

5. The headings are set to be in caps. You can change it by adding this to your Custom CSS:

h2.hero-title,
input#s,
nav#top-menu li,
button,
a.button,
input.button,
input[type="button"],
input[type="submit"],
h3.widget-title {
	text-transform: none;
}

6. I believe that was also the question number 4

7. It looks like on this page http://stenzer.in/laser-engraving/ the products are inserted via a shortcode. If that’s the case there is an option in the shortcode to set the number of columns. I can’t tell from the code there which shortcode is in use, but it could look something like this:

[products ids="3, 5" columns="2"]

8. You can change those fonts on the content tab in the theme options page. The product name will be a heading. The price will be the same as the main content or “body” font. The button will also be the main content or “body” font. The color of the button can be set on the button tab.

Let me know as you have follow up questions.

Thanks,
Bill

[Rama Devi]

Awesome Bill, all of the answers have worked. Here are my followup questions

1) How to create a Transparent Navigation Drop Down Background ? Is there a colour code for Transparent? I also want the Navigation Bar to be Transparent

2) The Background images in the Home Sections are randomly changing themselves. I have used two images at first to check how this works. I then added the code to increase height, removed the first images & then added my main images. I saved & published the changes. But suddenly, the changes are disappearing after a while & the images that were added first are coming up. Why is this? Moreover my font changes are also gone, Am sure I saved the changes. Donno why this is happening. I see an Autosave description in my Home page revisions. Is this causing this? If yes, how to set this? Please find the snapshot below

3) Yes, the products were added via a short code. I used the Product category short code.

” [product_category category=”laser-engraving” per_page=”4″ columns=”2″
orderby=”date” order=”desc”]

Please give me the correct code that will enable the products to list in just 2 colums i.e Bigger Product Thumbnails. The Two thumbnails should be big enough to fill the entire screen space. The new thumbnails should be twice as big as the current thumbnails/

4) Please see this Link ” http://stenzer.in/laser-engraving/ ”

The Product name is appearing below the Product Thumbnail. Instead, I want the product name to come on top of the Image. I want this to be in Bold / in Bigger Size that will help to highlight the Product. How to do this?

Changes to the Product page

5) Please See this Link ” \http://stenzer.in/product/link-bracelet// ”

The product image & description is completely on the left side. The right side is looks empty. I dont need a side bar. I want to move the Product image & description to the center so that the Website appears full. How to do this?

6) How to change the Background colour of the Product page, so that the product image blends into the background & gives a much fuller & classy look?

7) I want to increase the size of the Attributes, which is the word “SIZE” in this case. Moreover, I want the variations displayed side by side like the snapshot below, rather than a drop down. How can I do this?

Will be waiting for your answers.

Thanks,
Devi

Attachments:

1. 

   Autosave.jpg
   

2. 

   7.jpg
   

[Bill Robbins]

Let’s see if we can keep the questions straight and find answers for you.

1. To set the header and drop down to be transparent, add this to your custom CSS:

nav#top-menu ul li:hover ul,
#header.scroll-background {
	background: transparent !important;
}

2. Would it be possible for you to send over a login so I can take a look at the background of the home page sections for you? You can mark the reply here as private and I’ll be the only one who can see it.

3. In the source code of the laser engraving, it’s still showing up as requesting 4 columns. The wrapper there has this class added by WooCommerce (.columns-4). I’ll check if you send over the login.

4. Do you want just title on top of the image with the rest below, all of them on top, or only have the title shown?

5. I could have sworn that the option to choose the layout was the same between pages and products, but it looks like it isn’t. I’ll add that into the next theme update. Until then you can use this CSS to remove the sidebar and make your product content full width:

.single-product #content {
	width: 100%;
}

.single-product #sidebar {
	display: none;
}

6. In customizer and theme options there is a background spot where you can set the background color. Looks like if you set it to white that should do the trick for you. If you’d rather only change the background of the content area you can do that too. In the content tab of the theme options page there is a color picker to choose the background color of just the content area.

7. It is possible to replace WooCommerce’s variation drop down menus with a different type of form. It’ll take a plugin to do that though. I know of two that can do that, but I don’t have personal experience with either:

The official one — http://www.woothemes.com/products/variation-swatches-and-photos/
A much cheaper alternative — http://codecanyon.net/item/woocommerce-visual-attributes-options-swatches/9562958

Once you pick a solution for this, then you can style it to fit your needs.

Keeping track of several different questions in one post can be a bit messy, but hopefully I didn’t miss anything. Let me know about the login so I can see what’s up with the backgrounds for you.

Thanks,
Bill

[Rama Devi]

This reply has been marked as private.

[Bill Robbins]

I will take a look shortly.

Please post any additional questions as new topics. Ideally there should be one question per topic. Otherwise it’s next to impossible to keep track of; especially when there are follow up questions. I also answer questions based on how long it will take to answer (quickest first) so multi-question posts will generally be last.

You can add animations to the images and other content using some shortcodes that are explained in the theme documentation at https://support.organizedthemes.com/elite/

---

There are some plugins that let you add styling to individual pages. You might try StyleBuddy or Royal Custom CSS. Each of those will allow you to add a bit of styling that will only apply to that page or post. The way to then change the background would be to add this:

body { background-color: #ffffff; }

replacing the #ffffff with the color you’d like to use.

---

The WooCommerce short description will appear on the right hand side of the image. The long description goes in WooCommerce’s tabs which appear below the image and add to cart form. Any text you’d like to have beside the main image should go in the short description.

[Bill Robbins]

I had a chance to take a look. I didn’t run into any trouble changing out images on the front page with either the theme options page or the customizer. If you have trouble with the customizer, try using the home page tab in the theme options page. It has the same options available there.

On the laser engraving page, it looks like there was a return in the middle of the shortcode. It took that out and it popped into two columns like you were expecting.

I belive I have the header color changed on the other pages where it was still black.

I also added this to your Custom CSS to move the product title above the featured image:

@media only screen and (min-width: 768px) {

	ul.products li.product {
		position: relative;
		text-align: center;
		padding-top: 50px !important;
	}
	
	ul.products li.product h3 {
		font-size: 30px !important;
		position: absolute;
		top: 0;
		width: 100%;
		padding: 0 5px !important;
	}

}

@media only screen and (max-width: 767px) {

	ul.products li.product {
		position: relative;
		text-align: center;
		padding-top: 50px !important;
	}
	
	ul.products li.product h3 {
		font-size: 20px !important;
		position: absolute;
		top: 0;
		width: 100%;
		padding: 0 5px !important;
	}

}

See how that works out for you now.

Have a great day,
Bill

[Rama Devi]

Thanks A Lot Bill 🙂

That did work out perfectly fine, except for one small issue. The size of the Images Increased, but the Font Size of the Product Title & the Price are stil small. How should I increase this? They should be in proportion to the image size.

I will post any new questions as seperate topics

Thanks

[Bill Robbins]

Glad that helped out. The last snippet I added to move the product title above the image also has the font size set in it. You can adjust it to fit your needs. The top style is for larger displays and the bottom one for smaller displays.

You can add this to your custom CSS to set the price size:

body .woocommerce ul.products li.product span.price {
	font-size: 24px;
}

Feel free to adjust that to fit your needs.

Thanks,
Bill

[Author]

Posts