Docs

[Lenny B]

Thank you this awesome theme. In some ways its very easy to use and in other ways I am having difficulty. I am using the Renew Stack with full-width pages.

1. How do I decrease the white space in the Header (x-topbar?) above the Logo?

2. The color from the Navbar goes straight across the page. How do I keep it within the content area of the website?

3. How can I add some padding or color between each link on the NavBar? For example a px or two between Home and About Us?

4. I put a slider right under the NavBar. The bottom of the slider also stretches a line across the entire page. How can I fix that so that the slider remains a rectangle?

5. How can I reduce the space between the slider and the content below it?

6. My text is spaced too far apart. How can I remove padding between the lines of texts so they can be spaced closer to together?

7. Do you have a shortcode on the X theme for a Colored Box of text?

Hope this posting wasn’t too annoying. I am still new to wordpress and I would love to make X work for our company.

Thank you.

[Kory]

Hey Lenny,

Thank you for writing in and for your kind words! We always appreciate hearing such things around here at Themeco HQ. 🙂

If you wouldn’t mind, we’d appreciate it if you would please provide us with a URL to your site so that we can see these issues you’ve specifically listed above. This is actually stated on the entrance to the forum, as it helps us to more quickly troubleshoot things, and sometimes we simply cannot solve a problem without seeing it first-hand. Once you can give us your site URL, we will be happy to provide you with answers to all of your questions.

Thanks!

[Lenny B]

email marketing for everyone dot com /widgets/

Please put all the words together to form the link.

Thank you!!!!

[Christian]

Hey Lenny,

Here’s for number 1.

1. You can change the value of min-height (default is 42px) of .x-topbar and adjust the top margin of the elements inside it.

Place the code below in the Customizer > Custom > CSS:

.x-topbar {
	min-height: 31px;
}

.x-topbar .p-info {
	margin: 7px 0 0;
}

.x-topbar .x-social-global {
	margin-top: 3px;
}

You can adjust the values above.

Result:

Before: Screenshot
After: Screenshot

For your site, I see that there is an <h5><br></h5>. Please remove it. And, the

<h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(720) 477-6752<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;info@emailmarketingforeveryone.com</h4>

replace it with

<h4 style="margin-top:25px;float:right">(720) 477-6752<br>info@emailmarketingforeveryone.com</h4>

Hope that solves question 1.

[Christian]

For question 2. Please insert the code below to Customizer > Custom > CSS:

.x-navbar {
	background-color: white !important;
}
.x-navbar-inner {
	background: bisque;
}

Please try to NOT include !important first to see if it will work.

You can change “bisque” to any color or hex code.

Click here to see result.

[Lenny B]

Re: Question 1
In an ideal world – I have to have the M in the logo lined up with the H in homepage in the navbar as well as the m at the end of the email address lined up with the S in Studies AND the email address and phone number should be lined up with the bottom of the logo) If that made sense.

I had changed the code to
<span class=”alignleft”>         </span>
<span class=”alignright”><p style=”font-size:28px; line-height:36px; padding:56px 0px 0px 0px”>                                                               (720) 477-6752<br>                                                               info@emailmarketingforeveryone.com</p></span>

The spaces represent  

Everything worked and looked how I wanted it, but the padding forced too much space between the text and the Navbar.

Thank you for your help.

[Christian]

Here’s the code for question 3.

.x-navbar .x-nav > li {
	border-right: 2px solid skyblue;
}

/* Eliminates the border of the last menu item */
.x-navbar .x-nav > li:last-child {
	border-right: none
}

Click here to see the result.

[Lenny B]

The code for 3 works great!! Thank you.

The code for Number two, the Nav Bar wasn’t long enough to match the slider under it. Any tips on stretching the navbar?

Thank you.

[Rubin]

Hey Lenny,

can you send me a link to your site so I can take a look? Thanks!

[Lenny B]

email marketing for everyone dot com /widgets/

I fixed the Navbar.

My only questions left is

7. Do you have a shortcode on the X theme for a Colored Box of text?

and I have another posting open because I found a different problem.

Thank you.

[Kory]

Hey Lenny,

While we don’t necessarily have a shortcode for a colored box of text, you could use some inline styling on the [column] shortcode or some other container to do this (below is a simplified example):

[column type="one-half" style="background-color: red; color: white; padding: 20px;"]...content here...[/column]

Thanks!

[Lenny B]

Thank you for your help.

Lenny

[Rubin]

You’re welcome!

[Ross M]

Thanks for your fantastic support! I am adding these questions to this thread since it relates, rather than starting a new one:

1. How to change the type in the Topbar to upper and lower case?

2. How can the Topbar menu links be positioned directly to the left of the social icons, which would be positioned aligned to the right in the Topbar…?

example:
http://d.pr/i/TQLT

3. are there instructions for how to change which icons are used by the Customizer?

[Kory]

Hey Ross,

Thanks for writing in and for your kind words. 🙂

1. It sounds from this request like you’re trying to remove any uppercase styling (without knowing what Stack you’re using, it’s hard to tell). If this is the case, the following will work:

   body .x-topbar .p-info {
     text-transform: none;
   }

2. There isn’t any way to position these elements in the way you’d like with floats out of the box due to the way they’re structured in the markup. At this time, if you’d like to do this you will need to setup a child theme (instructions in the Knowledge Base) and work on updating this template file in your child theme to suit your needs.

3. There are quite a few posts here in the forum that go over this matter, which I know will be able to provide some guidance for this situation.

Thanks!

[Author]

Posts