Docs

[Eric S]

I am getting much closer to having a finished X theme! However, I still have a few things I am getting hung up on and have not been able to find here in the forum.

The website I’m working on is http://www.coloradocruisersinc.com

1. I am trying to create a Nav Bar that sits below my images like you all have on your demo site. (http://theme.co/x/)

I’ve set up the menu for one page navigation but do I have to have a header or how do I make it present like you all have done and then stay static at the top as people go through the page?

2. I am interested in the font awesome icons below some of my headlines. I’ve read they are included in X but where do I access these within X and how do I get them to sit below the text?

3. My “services” are put into a block grid into 2 columns. Yet, they are seemingly on the left side of the column. I’ve tried a class of align – “middle” or center but it’s not centering them. How do I get them to be centered?

4. I’d like to add a map of Denver from google to the little widget that sits atop right of the page when people click it. Yet, I am unable to find out where to access this and add the screenshot.

5. I’ve added some “Contact 7” forms to allow people to inquire but I’m not sure where I go to make sure they are sent to my companies email. Where do I find this?

Thank you all for all the assistance and get work on the theme! It leaves quite the impression and I’ll highly recommend your product to others when they are looking into websites.

Thanks,

Eric

[Eric S]

One more thing. How do I place a widget into there just below the Calendar that will allow us to sync our google calendar and allow everyone to see the events we are doing. Thanks!

[Eric S]

I figured out the contact 7 form. Yet, even after reading others posts I am not able with the class “man” for my custom headlines to minimize the amount of spacing there is. Additionally, the accents are not even inline with the text. Can you advise me what I can do about these two issues as well?

[Christian]

Hey Eric,

1. Please set your header to fixed top http://prntscr.com/33qmms

2. I’m sorry if I don’t quite get what you’re trying to achieve here. Please take a look at our icon shortcode samples here and here.

3. Please add “center-text” class to your column

4. Please go to maps.google.com then search for the location and get the embed code. Please see http://prntscr.com/33qosq Also, please watch our tutorial about the Map shortcode here.

5. Can you give us a screenshot of this?

Thanks.

[Eric S]

1. I’ve set it to be fixed top as seen here- http://coloradocruisersinc.com/wp-content/uploads/2014/03/Screenshot-2014-03-24-15.00.33.png

I’ve also set all the ID’s and made a new menu to the #Id’s to create the menu. While it shows at the footer it is not showing up in the header or below the first set of images like you all have done in you demo. How do I replicate this?

2. I was referring to the icons that are just below the headings within your demo x page – http://theme.co/x/ like First of it’s kind or Meet the Experts with the call out below them.

3. I am using the block grid with 2 rows. I’ve added the “center-text” class to the grid and it still isn’t centering the images.

4 & 5. Thank you, I was able to find and resolve this after more searching

6. Have you had any success adding google calendar widgets into one of these containers. If so can you advise me on how this is synced and done.

7. As stated even after reading others posts I am not able with the class “man” for my custom headlines to minimize the amount of spacing there is. Additionally, the accents are not even inline with the text. Can you advise me what I can do about these two issues as well?

Thanks again for all of your assistance! I’ll be sure to refer people to this theme as you all have done an outstanding job and go the extra mile with this forum support.

[Kory]

Hey Eric,

Thanks for writing in! Allow me to run through your items one by one. In the future, we kindly ask that our users open up questions in individual threads as the longer things get it becomes much more difficult to manage and keep track of and it is also less useful to our other users when they search for answers to their questions. Thank you for your understanding in this matter.

1. To set your header up in a similar manner to the demo you referenced, please ensure that you have thoroughly reviewed all of the information available in our Knowledge Base, especially the Sliders article under the Features section, as it explains how to set this up in detail.

2. This is actually not a feature of the theme and instead involves a little bit of custom coding. To accomplish this you’ll need to give your headlines a custom class as well as an additional helper class. So you might have a few headlines on your page, which you would do something like this:

   [custom_headline class="custom-icon lightbulb"]Custom Headline[/custom_headline]
   
   [custom_headline class="custom-icon people"]Custom Headline[/custom_headline]

   The first class (i.e. custom-icon in this case), which can be anything you want, is used for the global styling for this effect, which can be achieved with the following CSS:

   .h-custom-headline.custom-icon span {
     position: relative;
     display: inline-block;
     border-bottom: 2px solid #e7e7e7;
     padding-bottom: 0.15em;
   }
   
   .h-custom-headline.custom-icon span:before {
     content: "";
     display: block;
     position: absolute;
     left: 50%;
     bottom: -10px;
     width: 36px;
     height: 16px;
     margin-left: -18px;
     font-family: "fontawesome";
     font-size: 16px;
     font-style: normal;
     font-weight: normal;
     line-height: 18px;
     text-align: center;
     text-decoration: inherit;
     -webkit-font-smoothing: antialiased;
     background-color: #fff;
     speak: none;
   }

   After this, the additional helper classes (i.e. lightbulb and people in this case) are used to select the icon that you’d like to show, which you would accomplish with something like the following:

   .h-custom-headline.custom-icon.lightbulb span:before {
     content: "\f0eb";
   }
   
   .h-custom-headline.custom-icon.people span:before {
     content: "\f0c0";
   }

   These are unicode values determined by Font Awesome to invoke the specific icon that you want. To find the appropriate unicode values for the icons that you want to use, simply browse the list of icons on Font Awesome’s website, then click on an icon you’re interested in using. Once you’re on the next page, you’ll see a string of characters labeled Unicode, which you’ll copy and paste into the content values for your CSS like above.

3. Your Services Block Grid appears to be centered at this time.

4. Excellent. 🙂

5. Sounds good. 🙂

6. Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states. We are a very small team, and while we would like to be able to assist our customers with these matters, there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer. Thank you for your understanding.

7. After inspecting your source code it appears that you’ve put an <h2> element within your [custom_headline] shortcode. This is invalid as the shortcode itself already wraps your code in an heading element based on the options you setup in the shortcode. Please review our video documentation in the Knowledge Base on these shortcodes if you have any questions on how to utilize them properly.

Thank you! Again, as stated above, we kindly ask that any future questions you have be opened in a new thread and we will be happy to assist you.

[Author]

Posts