Docs

[marketingman]

Hi Support;

I like this X theme as its flexible I have this design that I want to replicate. https://www.dropbox.com/s/g164ifipi21pyip/IGS%20Homepage%20Design-1.png?dl=0 . I know it can be achieve here using x theme. can you help me pls. the header part only I can manage the content. Need to have a full width menu background and a search box in the center and also the account and cart will be float left I use ubermenu for the styling and putting the image on top. Here is the current develop site. http://www.igrowsystems.com/

Thanks

[Rahul]

Hi there,
Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:
– Link to your site
– WordPress Admin username / password
Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.
Thanks.

[marketingman]

This reply has been marked as private.

[Christopher]

Hi there,

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Copy _brand.php from framework/views/global and put it in the same path inside child theme, replace existing code with following :

<?php

// =============================================================================
// VIEWS/GLOBAL/_BRAND.PHP
// -----------------------------------------------------------------------------
// Outputs the brand.
// =============================================================================

$site_name        = get_bloginfo( 'name' );
$site_description = get_bloginfo( 'description' );
$logo             = x_make_protocol_relative( x_get_option( 'x_logo' ) );
$site_logo        = '<img src="' . $logo . '" alt="' . $site_description . '">';

?>

<?php echo ( is_front_page() ) ? '<h1 class="visually-hidden">' . $site_name . '</h1>' : ''; ?>
<div class="x-section man pan">
<div class="x-column x-1-3 x-sm">
<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>" title="<?php echo $site_description; ?>">
  <?php echo ( $logo == '' ) ? $site_name : $site_logo; ?>
</a></div>
<div class="x-column x-1-3 x-sm"><form id="searchform" class="form-search" method="get" _lpchecked="1">
<label class="visually-hidden" for="s">Search</label>
<input id="s" class="search-query" type="text" placeholder="Search" name="s">
<input id="searchsubmit" class="hidden" type="submit" value="Search" name="submit">
</form></div>
<div class="x-column x-1-3 x-sm">Home|Blog|Contact us</div>
</div>

Hope it helps.

[marketingman]

Hi Support;

Is there a guide on creating a child theme is it the same when we create child theme using 20xx themes?

Thanks

[Christopher]

Hi there,

Sure, please follow this link https://community.theme.co/kb/how-to-setup-child-themes/

Hope it helps.

[marketingman]

Hi Support;

How can I adjust the top padding of the site the search bar is found on the very top it needs space also the button is seen in search bar even class=”hidden”. Can I make this full width http://screencast.com/t/gQpFskgF4 and move the account and cart menus to the right side like this design https://www.dropbox.com/s/g164ifipi21pyip/IGS%20Homepage%20Design-1.png?dl=0. Sorry got so many question I’m still familiarizing the theme framework. if there is a developer manual that would really help me understand this and work myself around.

Thanks

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

input#searchsubmit {
    display: none;
}
form#searchform {
    top: 41px;
}
li.ubermenu-item.ubermenu-item-type-custom.ubermenu-item-object-custom.ubermenu-item-11, li.ubermenu-item.ubermenu-item-type-custom.ubermenu-item-object-custom.ubermenu-item-10 {
    float: right;
}
.x-navbar {
    background-color: #0060c1;
    background: -webkit-gradient(linear,left top,left bottom,from(#0060c1),to(#0060c1));
    background: -webkit-linear-gradient(top,#0060c1,#0060c1);
    background: -moz-linear-gradient(top,#0060c1,#0060c1);
    background: -ms-linear-gradient(top,#0060c1,#0060c1);
    background: -o-linear-gradient(top,#0060c1,#0060c1);
    background: linear-gradient(top,#0060c1,#0060c1);
    border: 1px solid #000000;
}
.ubermenu-main{
border:none;
}

Since you added columns inside x-navbar-inner div, the container behind columns will be become blue as well.

Hope that helps.

[marketingman]

Hi Support;

can I add this in a css file in child theme and not use the customize feat. as its too long if so what file should I use.

Thanks

[Joao]

Hi There,

You should add to style.css

Hope it helps

Joao

[marketingman]

Hi Support;

I did try your code but it colored the whole area I just want the menu part area to be full width here is the result. http://screencast.com/t/klx5F2bCa . its different from this design https://www.dropbox.com/s/g164ifipi21pyip/IGS%20Homepage%20Design-1.png?dl=0 . I have comment our the code .x-navbar so it wont show the blue background. Please help

Thanks

[Jade]

Hi there,

Please add this code:

.x-navbar-inner .x-section.man.pan {
    width: 88%;
    margin: 0 auto !important;
}

.x-navbar .x-container.max {
    width: 100%;
}

ul#ubermenu-nav-main-6-primary {
    width: 88%;
    min-height: 1px;
    margin: 0 auto;
}

Hope this helps.

[Author]

Posts