Decrease the width of the page

(@quanghuy147)

Also, I would like to put the Donate button on the header, please show me. Thank you Weblizar.

Thread Starter

(@quanghuy147)

I have found the way to change the icon color, so I just have only 1 question, that is : how to reduce the width of the page. Now it is full page. https://www.scscenter.org . Thank you!

ThePixelMe

(@thepixelme)

Oh hey, fellow Vietnamese! Mình c?ng là ng??i Vi?t ?ay! ??

Anyhow, back to business:

If you only need to limit the width of your slider, you can add this to your custom CSS area or child-theme CSS:

/**
 * Change slider width
 */
#myCarousel {
    width: 100%; /* default to 100% of max-width, good for responsive */
    max-width: 1140px; /* maximum width, if you need to change, change this number only, don't touch the other 2 lines of codes */
    margin: 0 auto; /* center the slider */
}

If you need to limit the width of the entire site on larger screen, you can add this:

/**
 * Change site to box-model
 */

body > div {
    width: 100%; /* default to 100% of max-width */
    max-width: 960px; /* if you need to change site-width, just change this number; leave the rest alone */
    margin: 0 auto; /* center the site */
}

/**
 * Change container to fluid model
 */

 .container {
     width: 100% !important;
 }

(@weblizar_support)

Hi,

Please go to Admin Dashboard >>Appearance >>Theme Options >>General Settings and find cutsom CSS editor.

Now copy below CSS in custom CSS editor.

body,
#enigma_nav_top.affix {
  max-width: 1170px !important;
}

Save the changes.

Let us know for further assistance.

Thanks.

wsupportdb

(@wsupportdb)

Hi weblizar_support,

I am also trying to reduce the width of my page.

When i have tried the above code, width of the page got reduced but entire webpage shifted towards left side and white space is getting created on the right side.
How to position it at the center?

(@weblizar_support)

Hi,

Please use below CSS instead.

body,
#enigma_nav_top.affix {
  max-width: 1170px !important;
  margin:0 auto;
}

Thanks.

(@weblizar_support)

Hi,

Please go to Admin Dashboard >>Appearance >>Theme Options >>General Settings and find cutsom CSS editor.

Now copy below CSS in custom CSS editor.

body,
#enigma_nav_top.affix {
    max-width: 1170px !important;
    margin: 0 auto !important;
}

Save the changes.

Thanks.

wsupportdb

(@wsupportdb)

It worked perfectly.
Thanks!!

Thread Starter

(@quanghuy147)

https://i461.photobucket.com/albums/qq339/quanghuy147/247/to%20ask_zpslatmfk69.png

Thank you ThePixelMe, glad to know that you are Vietnamese too. ??

Thank you Weblizar Support.

I can do as you two showed me.

I have another question: When I set the background image with a white picture. When I zoom in in the website, the website and the background expand but in different proportion so that the white background sticks out like in this picture.

Is there a way to tie the background image to the width of the page?

Thanks!

(@weblizar_support)

Hi..

Please provide us your parent theme’s header.php code, if you are using header.php in child theme, then provide code from child theme’s header.php.

Now copy below code and paste into Custom CSS Editor.

#enigma_nav_top.affix {
 width: 70% !important;
 margin:0 auto !important;
}

Save the changes.

Thanks.

Thread Starter

(@quanghuy147)

Thank you Weblizar, the code you gave me does not work.

I am using a child theme.

Here is the code from style.css

.header_section {
background-color:  #333333!important;
padding:0!important;
margin:0!important;

}
.enigma_footer_widget_area {
background: #000666!important;
}
 /*
.navbar li:hover a {
  background-color: #c48e3d!important;
}
*/

.header-sep {

	 display: none !important;

}

td.me {

text-align:left;
}

.enigma_footer_area{
    padding: 10px 0 0px;
    text-align:left !important;
   background-color:#333333!important;

}

.enigma_footer_area a:hover {
	color: red!important;
}

.enigma_footer_area p {
   font-family: 'Open Sans', sans-serif;
	line-height: 20px;
    font-size: 13px;
    bottom:0;
	text-align:left !important;
	padding-top:12px;
}

.enigma_footer_area p {
	color: #f2f2f2;
	font-size:15px;
}
.enigma_footer_area p span{
	color: #fa504b;
}
.enigma_footer_area p a {
    color: #000000;
}

/*
table td {
  text-align:left !important;
}
*/

table td a {
  color: #fff !important;
  text-align:left !important;
}

.enigma_footer_area p a:hover {
    color: #ffffff;
}
.enigma_footer_copyright_info{
	float:left;
}
.enigma_footer_social_div{
	float:right;
}

.container {
     width: 100% !important;
 }
body > div {
    width: 70%; /* default to 100% of max-width */
    max-width: 1200px; /* if you need to change site-width, just change this number; leave the rest alone */
    margin: 0 auto; /* center the site */
}
.enigma_footer_widget_area {
    display: none !important;
}

/*
 Start My custom button

*/

.myButton {
	-moz-box-shadow: 0px 1px 0px 0px #fff6af;
	-webkit-box-shadow: 0px 1px 0px 0px #fff6af;
	box-shadow: 0px 1px 0px 0px #fff6af;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
	background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
	background-color:#ffec64;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-family:Arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffee66;
}
.myButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
	background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
	background-color:#ffab23;
}
.myButton:active {
	position:relative;
	top:1px;
}

/*
 End My custom button

*/

.sponsors{
border:hidden;
align-items:center;

}
.sponsors tr { border:hidden; }
.sponsors td {border:hidden; vertical-align:middle;}

.navigation_menu {
background-color:lightblue;

}

And here is the code from header.php:

<!DOCTYPE html>
<!--[if lt IE 7]>
    <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>
    <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>
    <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!-->
<html <?php language_attributes(); ?>><!--<![endif]-->
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="<?php bloginfo('charset'); ?>" />
	<?php $wl_theme_options = weblizar_get_options(); ?>
	<?php if($wl_theme_options['upload_image_favicon']!=''){ ?>
	<link rel="shortcut icon" href="<?php  echo esc_url($wl_theme_options['upload_image_favicon']); ?>" />
	<?php } ?>
	<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>

>
<div>
	<!-- Header Section -->
	<div class="header_section" >
		<div class="container" >
			<!-- Logo & Contact Info -->
			<div class="row ">
				<div class="col-md-6 col-sm-12 wl_rtl" >
					<div claSS="logo">
					<a href="<?php echo esc_url(home_url( '/' )); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
					<?php if($wl_theme_options['upload_image_logo']){ ?>
						<img class="img-responsive" src="<?php echo $wl_theme_options['upload_image_logo']; ?>" style="height:<?php if($wl_theme_options['height']!='') { echo $wl_theme_options['height']; }  else { "80"; } ?>px; width:<?php if($wl_theme_options['width']!='') { echo $wl_theme_options['width']; }  else { "200"; } ?>px;" />
						<?php } else {
							echo get_bloginfo('name');
						} ?>
					</a>
					<p><?php bloginfo( 'description' ); ?></p>
					</div>
				</div>
				<?php if($wl_theme_options['header_social_media_in_enabled']=='1') { ?>
				<div class="col-md-6 col-sm-12">
				<?php if($wl_theme_options['email_id'] || $wl_theme_options['phone_no'] !='') { ?>
				<ul class="head-contact-info">
						<?php if($wl_theme_options['email_id'] !='') { ?><li><i class="fa fa-envelope"></i><a href="mailto:<?php echo $wl_theme_options['email_id']; ?>"><?php echo esc_attr($wl_theme_options['email_id']); ?></a></li><?php } ?>
						<?php if($wl_theme_options['phone_no'] !='') { ?><li><i class="fa fa-phone"></i><a href="tel:<?php echo $wl_theme_options['phone_no']; ?>"><?php echo esc_attr($wl_theme_options['phone_no']); ?></a></li><?php } ?>
				</ul>
				<?php } ?>
					<ul class="social">
					<li style="margin-right:43px;border:hidden">   <a href="https://scscenter.org/index.php/donate-2/" class="myButton">Donate</a> </li>
					<li style="margin-right:70px;border:hidden"> <a href="https://scscenter.org/index.php/sign-up/" class="myButton">Newsletter</a> </li>

					<?php if($wl_theme_options['fb_link']!='') { ?>
					   <li class="facebook" data-toggle="tooltip" data-placement="bottom" title="Facebook"><a  href="<?php echo esc_url($wl_theme_options['fb_link']); ?>"><i class="fa fa-facebook"></i></a></li>
					<?php } if($wl_theme_options['twitter_link']!='') { ?>
					<li class="twitter" data-toggle="tooltip" data-placement="bottom" title="Twiiter"><a href="<?php echo esc_url($wl_theme_options['twitter_link']); ?>"><i class="fa fa-twitter"></i></a></li>
					<?php } if($wl_theme_options['linkedin_link']!='') { ?>
					<li class="linkedin" data-toggle="tooltip" data-placement="bottom" title="Linkedin"><a href="<?php echo esc_url($wl_theme_options['linkedin_link']); ?>"><i class="fa fa-linkedin"></i></a></li>
					<?php } if($wl_theme_options['youtube_link']!='') { ?>
					<li class="youtube" data-toggle="tooltip" data-placement="bottom" title="Youtube"><a href="<?php echo esc_url($wl_theme_options['youtube_link']) ; ?>"><i class="fa fa-youtube"></i></a></li>
	                <?php } if($wl_theme_options['gplus']!='') { ?>
					<li class="twitter" data-toggle="tooltip" data-placement="bottom" title="gplus"><a href="<?php echo esc_url($wl_theme_options['gplus']) ; ?>"><i class="fa fa-google-plus"></i></a></li>
	                <?php } if($wl_theme_options['instagram']!='') { ?>
					<li class="facebook" data-toggle="tooltip" data-placement="bottom" title="instagram"><a href="<?php echo esc_url($wl_theme_options['instagram']) ; ?>"><i class="fa fa-instagram"></i></a></li>
	                <?php } ?>
					</ul>
				</div>
				<?php } ?>
			</div>
			<!-- /Logo & Contact Info -->
		</div>
	</div>
	<!-- /Header Section -->
	<!-- Navigation  menus -->
	<div class="navigation_menu"  data-spy="affix" data-offset-top="95" id="enigma_nav_top" style="background-image: url(https://scscenter.org/wp-content/uploads/2016/03/SCS-background-nav-bar.png); height:auto;width:auto ;background-position:center;">

		<span id="header_shadow"></span>
		<div class="container navbar-container" >
			<nav class="navbar navbar-default " role="navigation">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">

					  <span class="sr-only"><?php _e('Toggle navigation','weblizar');?></span>
					  <span class="icon-bar"></span>
					  <span class="icon-bar"></span>
					  <span class="icon-bar"></span>
					</button>
				</div>
				<div id="menu" class="collapse navbar-collapse ">
				<?php wp_nav_menu( array(
						'theme_location' => 'primary',
						'menu_class' => 'nav navbar-nav',
						'fallback_cb' => 'weblizar_fallback_page_menu',
						'walker' => new weblizar_nav_walker(),
						)
						);	?>
				</div>
			</nav>
		</div>
	</div>

Thank you for your help!

(@weblizar_support)

Hi..

Please replace your child theme’s header.php code with below code.

<!DOCTYPE html>
<!--[if lt IE 7]>
    <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>
    <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>
    <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!-->
<html <?php language_attributes(); ?>><!--<![endif]-->
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="<?php bloginfo('charset'); ?>" />
	<?php $wl_theme_options = weblizar_get_options(); ?>
	<?php if($wl_theme_options['upload_image_favicon']!=''){ ?>
	<link rel="shortcut icon" href="<?php  echo esc_url($wl_theme_options['upload_image_favicon']); ?>" />
	<?php } ?>
	<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
	<!-- Header Section -->
	<div class="header_section" >
		<div class="container" >
			<!-- Logo & Contact Info -->
			<div class="row ">
				<div class="col-md-6 col-sm-12 wl_rtl" >
					<div claSS="logo">
					<a href="<?php echo esc_url(home_url( '/' )); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
					<?php if($wl_theme_options['upload_image_logo']){ ?>
						<img class="img-responsive" src="<?php echo $wl_theme_options['upload_image_logo']; ?>" style="height:<?php if($wl_theme_options['height']!='') { echo $wl_theme_options['height']; }  else { "80"; } ?>px; width:<?php if($wl_theme_options['width']!='') { echo $wl_theme_options['width']; }  else { "200"; } ?>px;" />
						<?php } else {
							echo get_bloginfo('name');
						} ?>
					</a>
					<p><?php bloginfo( 'description' ); ?></p>
					</div>
				</div>
				<?php if($wl_theme_options['header_social_media_in_enabled']=='1') { ?>
				<div class="col-md-6 col-sm-12">
				<?php if($wl_theme_options['email_id'] || $wl_theme_options['phone_no'] !='') { ?>
				<ul class="head-contact-info">
						<?php if($wl_theme_options['email_id'] !='') { ?><li><i class="fa fa-envelope"></i><a href="mailto:<?php echo $wl_theme_options['email_id']; ?>"><?php echo esc_attr($wl_theme_options['email_id']); ?></a></li><?php } ?>
						<?php if($wl_theme_options['phone_no'] !='') { ?><li><i class="fa fa-phone"></i><a href="tel:<?php echo $wl_theme_options['phone_no']; ?>"><?php echo esc_attr($wl_theme_options['phone_no']); ?></a></li><?php } ?>
				</ul>
				<?php } ?>
					<ul class="social">
					<li style="margin-right:43px;border:hidden">   <a href="https://scscenter.org/index.php/donate-2/" class="myButton">Donate</a> </li>
					<li style="margin-right:70px;border:hidden"> <a href="https://scscenter.org/index.php/sign-up/" class="myButton">Newsletter</a> </li>

					<?php if($wl_theme_options['fb_link']!='') { ?>
					   <li class="facebook" data-toggle="tooltip" data-placement="bottom" title="Facebook"><a  href="<?php echo esc_url($wl_theme_options['fb_link']); ?>"><i class="fa fa-facebook"></i></a></li>
					<?php } if($wl_theme_options['twitter_link']!='') { ?>
					<li class="twitter" data-toggle="tooltip" data-placement="bottom" title="Twiiter"><a href="<?php echo esc_url($wl_theme_options['twitter_link']); ?>"><i class="fa fa-twitter"></i></a></li>
					<?php } if($wl_theme_options['linkedin_link']!='') { ?>
					<li class="linkedin" data-toggle="tooltip" data-placement="bottom" title="Linkedin"><a href="<?php echo esc_url($wl_theme_options['linkedin_link']); ?>"><i class="fa fa-linkedin"></i></a></li>
					<?php } if($wl_theme_options['youtube_link']!='') { ?>
					<li class="youtube" data-toggle="tooltip" data-placement="bottom" title="Youtube"><a href="<?php echo esc_url($wl_theme_options['youtube_link']) ; ?>"><i class="fa fa-youtube"></i></a></li>
	                <?php } if($wl_theme_options['gplus']!='') { ?>
					<li class="twitter" data-toggle="tooltip" data-placement="bottom" title="gplus"><a href="<?php echo esc_url($wl_theme_options['gplus']) ; ?>"><i class="fa fa-google-plus"></i></a></li>
	                <?php } if($wl_theme_options['instagram']!='') { ?>
					<li class="facebook" data-toggle="tooltip" data-placement="bottom" title="instagram"><a href="<?php echo esc_url($wl_theme_options['instagram']) ; ?>"><i class="fa fa-instagram"></i></a></li>
	                <?php } ?>
					</ul>
				</div>
				<?php } ?>
			</div>
			<!-- /Logo & Contact Info -->
		</div>
	</div>
	<!-- /Header Section -->
	<!-- Navigation  menus -->
	<div class="navigation_menu"  data-spy="affix" data-offset-top="95" id="enigma_nav_top" style="background-image: url(https://scscenter.org/wp-content/uploads/2016/03/SCS-background-nav-bar.png); height:auto;width:auto ;background-position:center;">

		<span id="header_shadow"></span>
		<div class="container navbar-container" >
			<nav class="navbar navbar-default " role="navigation">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">

					  <span class="sr-only"><?php _e('Toggle navigation','weblizar');?></span>
					  <span class="icon-bar"></span>
					  <span class="icon-bar"></span>
					  <span class="icon-bar"></span>
					</button>
				</div>
				<div id="menu" class="collapse navbar-collapse ">
				<?php wp_nav_menu( array(
						'theme_location' => 'primary',
						'menu_class' => 'nav navbar-nav',
						'fallback_cb' => 'weblizar_fallback_page_menu',
						'walker' => new weblizar_nav_walker(),
						)
						);	?>
				</div>
			</nav>
		</div>
	</div>

Now copy below code and paste into Custom CSS Editor.

#enigma_nav_top.affix {
 width: 63% !important;
 margin:0 auto !important;
}

Thread Starter

(@quanghuy147)

Thank you Weblizar! Have a nice week!

(@weblizar_support)