Home › Forums › Free Themes › Education Hub › Setting up custom background

Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 3, 2017 at 6:02 am #37712
    RebelsInc
    Participant

    Hello! I’m currently working on a website for educational purposes. The site can be found here.

    I want all of my pages look like this. As the background on the sides are made from image but the background for content is grey.

    I have 3 problems which i cant resolve :
    1) I cant get grey background to my first page at all. that is this one
    2) And if there isnt enough content to fill the page like here i cant get the grey background till the footer.
    3) And last problem is that there isnt background under sidebars like here and here

    I tried to solve this using css.
    First I set up background to all my body element background-image:url('http://www.dadi.rtu.lv/image/tikls.svg');

    And then i tried to fill the grey background under the content like this

    .entry-content {
background-color: #e6e6e6;
}
    #sidebar-primary {
background-color: #e6e6e6;
}
    .widget-area .widget {
background-color: #e6e6e6;
}

    .page article.page { background-color: #e6e6e6; }

    All help will be appreciated!

    April 3, 2017 at 7:17 am #37725
    wensolutions
    Keymaster

    Hello @RebelsInc,
    For the #1 request, we suggest you to add the extra wrapper such that it wraps the content div elements and you can provide the background color. It will then blend the elements with grey color as you expect.

    For #2 and #3 request, since background property by default extends with amount of content volume therefore grey color is not extended as expected on the sidebar. So again as mentioned on above response, if you wrapped the content with external div and provide the background color it would change as expected.

    Note: For above changes we recommend you to create a Child Theme.
    Reference: https://codex.wordpress.org/Child_Themes for child theme.
    Or You can also use the child theme generator plugin to create the child theme.One of the plugin reference is: https://wordpress.org/plugins/wp-child-theme-generator/

    If you do not feel confident editing the code, you can alternatively hire a customizer. http://wensolutions.com/hire-a-customizer/

    April 3, 2017 at 2:58 pm #37754
    RebelsInc
    Participant

    Thanks for helping me out. I managed to resolve my second and third problem but my front page still gives me a headache.

    I put it in divs like this :

    <div class="grey2">	
<?php
	$news = education_hub_get_home_news_block_content();
	$events = education_hub_get_home_events_block_content();
?>
<?php if ( $news || $events ) : ?>

<div id="featured-news-events">
		<div class="container">
			<div class="inner-wrapper">
				<?php echo $news; ?>
				<?php echo $events; ?>
			</div> <!-- .inner-wrapper -->
		</div> <!-- .container -->
	</div> <!-- #featured-news-events -->
<?php endif ?>
</div>

    And gave it css

    .grey2 {
    background-color: #e6e6e6;
    display: block;
    overflow:hidden;
    margin: 0 auto;
    float: left; 
}

    But I cant center it, if I remove float: left featured news and events dissapear and i can’t use margin: 0 auto; to center div. Any ideas why’s that happening ? Results are visable here

    April 4, 2017 at 12:25 am #37780
    wensolutions
    Keymaster

    Hello,

    If you wish to center the grey page part in the front page to get the look of the inner page even for the front, you can try replacing the .grey2 CSS with the CSS below :

    .grey2 {

background-color: #e6e6e6;
    display: block;
    overflow: hidden;
    margin: 0 auto;
    float: none;
    width: 75%;

}

    Hope this Helps,

    Best Regards !!

    April 4, 2017 at 2:46 am #37803
    RebelsInc
    Participant

    Worked like a charm, thanks for helping me out.

    April 4, 2017 at 2:58 am #37804
    wensolutions
    Keymaster

    Hello @RebelsInc,

    Nice to know that the problem has been solved. If there are any further query, then please feel free to post them.
    We will really appreciate if you could help us too by rating our theme in WordPress repo here:
    https://wordpress.org/support/view/theme-reviews/education-hub.

    Thanks,
    Best Regards!!

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.